From e9d69556b50cdf5df70c6df440818d6b3454e387 Mon Sep 17 00:00:00 2001 From: Richard Lindhout Date: Thu, 29 Feb 2024 13:35:15 +0100 Subject: [PATCH] fix: prettier --- src/Date/DatePickerModalContentHeader.tsx | 28 ++++------- src/Date/Day.tsx | 61 ++++++++++++++--------- src/Date/Month.tsx | 28 ++++------- src/Time/AnalogClock.tsx | 11 ++-- src/Time/TimePickerModal.tsx | 20 ++++---- yarn.lock | 4 +- 6 files changed, 75 insertions(+), 77 deletions(-) diff --git a/src/Date/DatePickerModalContentHeader.tsx b/src/Date/DatePickerModalContentHeader.tsx index 6030ab7f..8313f29b 100644 --- a/src/Date/DatePickerModalContentHeader.tsx +++ b/src/Date/DatePickerModalContentHeader.tsx @@ -76,6 +76,10 @@ export default function DatePickerModalContentHeader( ? theme.fonts.labelMedium : (theme as any as MD2Theme).fonts.medium + const collapsedIcon = theme.isV3 ? 'pencil-outline' : 'pencil' + const expandedIcon = theme.isV3 ? 'calendar-blank' : 'calendar' + const finalCollapsedIcon = editIcon ?? collapsedIcon + const finalExpandedIcon = calendarIcon ?? expandedIcon return ( @@ -104,15 +108,7 @@ export default function DatePickerModalContentHeader( {isEditingEnabled ? ( diff --git a/src/Date/Day.tsx b/src/Date/Day.tsx index 94372c48..95abbf1d 100644 --- a/src/Date/Day.tsx +++ b/src/Date/Day.tsx @@ -47,24 +47,44 @@ function Day(props: { onPressDate(new Date(year, month, day)) }, [onPressDate, year, month, day]) - const borderColor = theme.isV3 - ? theme.colors.primary - : selected || (inRange && theme.dark) + // const borderColorV3 = + const borderColorFallback = theme.dark ? '#fff' : '#000' + const selectedOrInRangeDarkMode = selected || (inRange && theme.dark) + const v2BorderColor = selectedOrInRangeDarkMode ? textColorOnPrimary - : theme.dark - ? '#fff' - : '#000' + : borderColorFallback + const borderColor = theme.isV3 ? theme.colors.primary : v2BorderColor - const textColor = - theme.isV3 && selected - ? theme.colors.onPrimary - : theme.isV3 && inRange && theme.dark - ? theme.colors.onPrimaryContainer - : selected || (inRange && theme.dark) - ? textColorOnPrimary - : theme.isV3 - ? theme.colors.onSurface - : undefined + // TODO: check if this can be simplified + // converted with Chat-GPT for now from enormous conditional to if-else + let baseTextColor + let finalTextColor + + if (theme.isV3) { + // Theme V3 specific logic for base text color + if (selected) { + baseTextColor = theme.colors.onPrimary + } else if (inRange && theme.dark) { + baseTextColor = theme.colors.onPrimaryContainer + } else { + baseTextColor = theme.colors.onSurface + } + + // Theme V3 specific logic for final text color + if (isToday) { + finalTextColor = selected ? baseTextColor : theme.colors.primary + } else { + finalTextColor = baseTextColor + } + } else { + // Logic for themes other than V3 + if (selected || (inRange && theme.dark)) { + baseTextColor = textColorOnPrimary + } + // Since there's no additional logic provided for non-V3 themes in the step 2, + // the final text color for non-V3 themes will simply be the base text color. + finalTextColor = baseTextColor + } let textFont = theme?.isV3 ? theme.fonts.bodySmall @@ -99,14 +119,9 @@ function Day(props: { - + @@ -370,7 +364,7 @@ export const monthHeaderSingleHeight = const styles = StyleSheet.create({ iconWrapper: { - padding: 8 + padding: 8, }, week: { flexDirection: 'row', diff --git a/src/Time/AnalogClock.tsx b/src/Time/AnalogClock.tsx index 2dbaf736..7d3ae253 100644 --- a/src/Time/AnalogClock.tsx +++ b/src/Time/AnalogClock.tsx @@ -121,6 +121,11 @@ function AnalogClock({ const dynamicSize = focused === clockTypes.hours && shortPointer ? 33 : 0 const pointerNumber = focused === clockTypes.hours ? hours : minutes const degreesPerNumber = focused === clockTypes.hours ? 30 : 6 + + const v3Color = theme.colors.surfaceVariant + const v2Color = theme.dark + ? Color(theme.colors.surface).lighten(1.4).hex() + : Color(theme.colors.surface).darken(0.1).hex() return ( https://github.com/necolas/react-native-web/issues/506 diff --git a/src/Time/TimePickerModal.tsx b/src/Time/TimePickerModal.tsx index c7d8e36a..05c608ee 100644 --- a/src/Time/TimePickerModal.tsx +++ b/src/Time/TimePickerModal.tsx @@ -130,6 +130,14 @@ export function TimePickerModal({ }, [setFocused, setLocalHours, setLocalMinutes] ) + + const v3Color = theme.dark + ? theme.colors.elevation.level3 + : theme.colors.surface + const v2Color = theme.dark + ? overlay(10, theme.colors.surface) + : theme.colors.surface + return ( diff --git a/yarn.lock b/yarn.lock index 93d65b50..c1192ce7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4202,7 +4202,7 @@ eslint-plugin-prettier@^4.2.1: eslint-plugin-prettier@^5.1.3: version "5.1.3" - resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz#17cfade9e732cef32b5f5be53bd4e07afd8e67e1" + resolved "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz#17cfade9e732cef32b5f5be53bd4e07afd8e67e1" integrity sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw== dependencies: prettier-linter-helpers "^1.0.0" @@ -7516,7 +7516,7 @@ prettier-linter-helpers@^1.0.0: prettier@^3.2.5: version "3.2.5" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368" + resolved "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368" integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A== pretty-format@^26.5.2, pretty-format@^26.6.2: