From 13c877a5a3f224938d72c2605b8ae91bb35739be Mon Sep 17 00:00:00 2001 From: Vlad Mustiata Date: Wed, 10 Apr 2024 16:31:41 +0300 Subject: [PATCH 1/3] feat: highlighted days --- src/Date/Calendar.tsx | 3 +++ src/Date/DatePickerModalContent.tsx | 2 ++ src/Date/Day.tsx | 8 ++++++++ src/Date/Month.tsx | 8 ++++++++ 4 files changed, 21 insertions(+) diff --git a/src/Date/Calendar.tsx b/src/Date/Calendar.tsx index 76dbc538..bd30ccac 100644 --- a/src/Date/Calendar.tsx +++ b/src/Date/Calendar.tsx @@ -33,6 +33,7 @@ export type BaseCalendarProps = { validRange?: ValidRangeType startYear?: number endYear?: number + highlightedDays?: CalendarDate[] // here they are optional but in final implementation they are required date?: CalendarDate @@ -95,6 +96,7 @@ function Calendar( dates, validRange, dateMode, + highlightedDays, } = props const theme = useTheme() @@ -196,6 +198,7 @@ function Calendar( selectColor={selectColor} roundness={theme.roundness} disableWeekDays={disableWeekDays} + highlightedDays={highlightedDays} /> )} renderHeader={({ onPrev, onNext }) => ( diff --git a/src/Date/DatePickerModalContent.tsx b/src/Date/DatePickerModalContent.tsx index 08b2877f..a8f1e4a5 100644 --- a/src/Date/DatePickerModalContent.tsx +++ b/src/Date/DatePickerModalContent.tsx @@ -93,6 +93,7 @@ export function DatePickerModalContent( startYear, endYear, statusBarOnTopOfBackdrop, + highlightedDays, } = props const anyProps = props as any @@ -199,6 +200,7 @@ export function DatePickerModalContent( dateMode={dateMode} startYear={startYear} endYear={endYear} + highlightedDays={highlightedDays} /> } calendarEdit={ diff --git a/src/Date/Day.tsx b/src/Date/Day.tsx index 95abbf1d..6d5bb844 100644 --- a/src/Date/Day.tsx +++ b/src/Date/Day.tsx @@ -25,6 +25,7 @@ function Day(props: { selectColor: string isToday: boolean disabled: boolean + isHighlighted?: boolean onPressDate: (date: Date) => any }) { const { @@ -42,6 +43,7 @@ function Day(props: { disabled, textColorOnPrimary, theme, + isHighlighted, } = props const onPress = React.useCallback(() => { onPressDate(new Date(year, month, day)) @@ -125,6 +127,9 @@ function Day(props: { } : undefined, { ...textFont }, + isHighlighted + ? { ...styles.highlightedDay, color: theme.colors.primary } + : undefined, ]} selectable={false} > @@ -168,6 +173,9 @@ const styles = StyleSheet.create({ borderWidth: 1, borderColor: 'transparent', }, + highlightedDay: { + fontWeight: '900', + }, flex1: { flex: 1, }, diff --git a/src/Date/Month.tsx b/src/Date/Month.tsx index 9a8e3fb4..95589be4 100644 --- a/src/Date/Month.tsx +++ b/src/Date/Month.tsx @@ -49,6 +49,7 @@ interface BaseMonthProps { selectColor: string roundness: number validRange?: ValidRangeType + highlightedDays?: CalendarDate[] // some of these should be required in final implementation startDate?: CalendarDate @@ -91,6 +92,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) { disableWeekDays, locale, validRange, + highlightedDays, } = props const theme = useTheme() const textColorOnPrimary = useTextColorOnPrimary() @@ -126,6 +128,9 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) { const day = new Date(year, month, dayOfMonth) const isToday = areDatesOnSameDay(day, today) + const isHighlighted = highlightedDays?.some((d) => + areDatesOnSameDay(day, d) + ) let inRange = false let disabled = isDisabled(day) @@ -233,6 +238,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) { rightCrop, isToday, disabled, + isHighlighted, } }), } @@ -248,6 +254,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) { endDate, dates, date, + highlightedDays, ]) let textFont = theme?.isV3 @@ -345,6 +352,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) { primaryColor={primaryColor} disabled={gd.disabled} textColorOnPrimary={textColorOnPrimary} + isHighlighted={gd.isHighlighted} /> ) )} From ff189e4d6c1fe4bd3b5d94a520aafe6c19915e5d Mon Sep 17 00:00:00 2001 From: Vlad Mustiata Date: Wed, 10 Apr 2024 17:04:56 +0300 Subject: [PATCH 2/3] refactor: improved highlight logic --- src/Date/Day.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/Date/Day.tsx b/src/Date/Day.tsx index 6d5bb844..66f25686 100644 --- a/src/Date/Day.tsx +++ b/src/Date/Day.tsx @@ -68,6 +68,8 @@ function Day(props: { baseTextColor = theme.colors.onPrimary } else if (inRange && theme.dark) { baseTextColor = theme.colors.onPrimaryContainer + } else if (isHighlighted) { + baseTextColor = theme.colors.primary } else { baseTextColor = theme.colors.onSurface } @@ -82,6 +84,8 @@ function Day(props: { // Logic for themes other than V3 if (selected || (inRange && theme.dark)) { baseTextColor = textColorOnPrimary + } else if (isHighlighted) { + baseTextColor = theme.colors.primary } // 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. @@ -92,6 +96,10 @@ function Day(props: { ? theme.fonts.bodySmall : (theme as any as MD2Theme).fonts.medium + if (isHighlighted) { + textFont.fontWeight = '900' + } + return ( From c4e4c8eb291be98eed5a28ba01140e359e104a6e Mon Sep 17 00:00:00 2001 From: Vlad Mustiata Date: Wed, 10 Apr 2024 17:12:43 +0300 Subject: [PATCH 3/3] fix: too many bolded items --- src/Date/Day.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Date/Day.tsx b/src/Date/Day.tsx index 66f25686..d058cd9a 100644 --- a/src/Date/Day.tsx +++ b/src/Date/Day.tsx @@ -96,10 +96,6 @@ function Day(props: { ? theme.fonts.bodySmall : (theme as any as MD2Theme).fonts.medium - if (isHighlighted) { - textFont.fontWeight = '900' - } - return (