Skip to content

Commit

Permalink
fix: prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
RichardLindhout committed Feb 29, 2024
1 parent f4e18db commit e9d6955
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 77 deletions.
28 changes: 9 additions & 19 deletions src/Date/DatePickerModalContentHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<View style={styles.header}>
<View>
Expand Down Expand Up @@ -104,15 +108,7 @@ export default function DatePickerModalContentHeader(
<View style={styles.fill} />
{isEditingEnabled ? (
<IconButton
icon={
collapsed
? editIcon ?? theme.isV3
? 'pencil-outline'
: 'pencil'
: calendarIcon ?? theme.isV3
? 'calendar-blank'
: 'calendar'
}
icon={collapsed ? finalCollapsedIcon : finalExpandedIcon}
accessibilityLabel={
collapsed
? getTranslation(props.locale, 'typeInDate')
Expand Down Expand Up @@ -217,16 +213,10 @@ export function HeaderContentRange({
}, [locale])

const lighterColor = Color(color).fade(0.5).rgb().toString()
const startColor = state.startDate
? theme.isV3
? theme.colors.onSurface
: color
: lighterColor
const endColor = state.endDate
? theme.isV3
? theme.colors.onSurface
: color
: lighterColor
const startColorFilled = theme.isV3 ? theme.colors.onSurface : color
const endColorFilled = theme.isV3 ? theme.colors.onSurface : color
const startColor = state.startDate ? startColorFilled : lighterColor
const endColor = state.endDate ? endColorFilled : lighterColor

return (
<>
Expand Down
61 changes: 38 additions & 23 deletions src/Date/Day.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -99,14 +119,9 @@ function Day(props: {
<Text
maxFontSizeMultiplier={1.5}
style={[
textColor
baseTextColor
? {
color:
theme.isV3 && isToday && selected
? textColor
: theme.isV3 && isToday
? theme.colors.primary
: textColor,
color: finalTextColor,
}
: undefined,
{ ...textFont },
Expand Down
28 changes: 11 additions & 17 deletions src/Date/Month.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,14 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
? theme.fonts.titleSmall
: (theme as any as MD2Theme).fonts.medium

const iconColor = theme.isV3
? theme.colors.onSurfaceVariant
: theme.colors.onSurface

const iconSourceV3 = selectingYear ? 'menu-up' : 'menu-down'
const iconSourceV2 = selectingYear ? 'chevron-up' : 'chevron-down'
const iconSource = theme.isV3 ? iconSourceV3 : iconSourceV2

return (
<View style={[styles.month, { height: getMonthHeight(scrollMode, index) }]}>
<View
Expand Down Expand Up @@ -305,24 +313,10 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
<View
style={[
styles.iconWrapper,
isHorizontal ? styles.opacity1 : styles.opacity0
isHorizontal ? styles.opacity1 : styles.opacity0,
]}
>
<Icon
size={24}
color={theme.isV3
? theme.colors.onSurfaceVariant
: theme.colors.onSurface
}
source={selectingYear
? theme.isV3
? 'menu-up'
: 'chevron-up'
: theme.isV3
? 'menu-down'
: 'chevron-down'
}
/>
<Icon size={24} color={iconColor} source={iconSource} />
</View>
</View>
</TouchableRipple>
Expand Down Expand Up @@ -370,7 +364,7 @@ export const monthHeaderSingleHeight =

const styles = StyleSheet.create({
iconWrapper: {
padding: 8
padding: 8,
},
week: {
flexDirection: 'row',
Expand Down
11 changes: 6 additions & 5 deletions src/Time/AnalogClock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -121,18 +121,19 @@ 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 (
<View
ref={clockRef}
{...panResponder.panHandlers}
style={[
styles.clock,
{
backgroundColor: theme.isV3
? theme.colors.surfaceVariant
: theme.dark
? Color(theme.colors.surface).lighten(1.4).hex()
: Color(theme.colors.surface).darken(0.1).hex(),
backgroundColor: theme.isV3 ? v3Color : v2Color,
},
]}
// @ts-ignore -> https://github.com/necolas/react-native-web/issues/506
Expand Down
20 changes: 9 additions & 11 deletions src/Time/TimePickerModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Modal
animationType={animationType}
Expand Down Expand Up @@ -162,17 +170,7 @@ export function TimePickerModal({
style={[
styles.modalContent,
{
backgroundColor:
theme.dark && theme.isV3
? theme.colors.elevation.level3
: theme.isV3
? theme.colors.surface
: theme.dark
? overlay(10, theme.colors.surface)
: theme.colors.surface,
borderRadius: theme.isV3
? theme.roundness * 6
: theme.roundness,
backgroundColor: theme.isV3 ? v3Color : v2Color,
},
]}
>
Expand Down
4 changes: 2 additions & 2 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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:
Expand Down

0 comments on commit e9d6955

Please sign in to comment.