From d52771fdeec12ab7819f781a04858b757f0707d2 Mon Sep 17 00:00:00 2001 From: Kodai Kabasawa Date: Sat, 6 Nov 2021 01:44:25 +0900 Subject: [PATCH 1/7] add active date props to header --- src/components/CalendarHeader.tsx | 13 ++++++++----- src/utils.ts | 4 ++++ 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/CalendarHeader.tsx b/src/components/CalendarHeader.tsx index c07bb77a..86e554a4 100644 --- a/src/components/CalendarHeader.tsx +++ b/src/components/CalendarHeader.tsx @@ -5,7 +5,7 @@ import { Platform, Text, TouchableOpacity, View, ViewStyle } from 'react-native' import { eventCellCss, u } from '../commonStyles' import { ICalendarEvent } from '../interfaces' import { useTheme } from '../theme/ThemeContext' -import { isToday, typedMemo } from '../utils' +import { isActiveDay, isToday, typedMemo } from '../utils' export interface CalendarHeaderProps { dateRange: dayjs.Dayjs[] @@ -13,6 +13,7 @@ export interface CalendarHeaderProps { style: ViewStyle allDayEvents: ICalendarEvent[] onPressDateHeader?: (date: Date) => void + activeDate?: dayjs.Dayjs } function _CalendarHeader({ @@ -21,6 +22,7 @@ function _CalendarHeader({ style, allDayEvents, onPressDateHeader, + activeDate, }: CalendarHeaderProps) { const _onPress = React.useCallback( (date: Date) => { @@ -46,6 +48,7 @@ function _CalendarHeader({ {dateRange.map((date) => { const _isToday = isToday(date) + const _isActiveDay = activeDate ? isActiveDay(date, activeDate) : _isToday return ( ({ style={[ theme.typography.xs, u['text-center'], - { color: _isToday ? theme.palette.primary.main : theme.palette.gray['500'] }, + { color: _isActiveDay ? theme.palette.primary.main : theme.palette.gray['500'] }, ]} > {date.format('ddd')} ({ {date.format('D')} diff --git a/src/utils.ts b/src/utils.ts index a7de0d66..cfcb4fc7 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -81,6 +81,10 @@ export function isToday(date: dayjs.Dayjs) { return today.isSame(date, 'day') } +export function isActiveDay(date: dayjs.Dayjs, activeDay: dayjs.Dayjs) { + return activeDay.isSame(date, 'day') +} + export function getRelativeTopInDay(date: dayjs.Dayjs) { return (100 * (date.hour() * 60 + date.minute())) / DAY_MINUTES } From 1af503abe22bef230cc3df23a95270b1c8804e95 Mon Sep 17 00:00:00 2001 From: Kodai Kabasawa Date: Sat, 6 Nov 2021 16:44:53 +0900 Subject: [PATCH 2/7] rename variable to be more readable --- src/components/CalendarHeader.tsx | 14 +++++++------- src/utils.ts | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/CalendarHeader.tsx b/src/components/CalendarHeader.tsx index 86e554a4..1316a8eb 100644 --- a/src/components/CalendarHeader.tsx +++ b/src/components/CalendarHeader.tsx @@ -5,7 +5,7 @@ import { Platform, Text, TouchableOpacity, View, ViewStyle } from 'react-native' import { eventCellCss, u } from '../commonStyles' import { ICalendarEvent } from '../interfaces' import { useTheme } from '../theme/ThemeContext' -import { isActiveDay, isToday, typedMemo } from '../utils' +import { isActiveDate, isToday, typedMemo } from '../utils' export interface CalendarHeaderProps { dateRange: dayjs.Dayjs[] @@ -13,7 +13,7 @@ export interface CalendarHeaderProps { style: ViewStyle allDayEvents: ICalendarEvent[] onPressDateHeader?: (date: Date) => void - activeDate?: dayjs.Dayjs + activeDate?: Date } function _CalendarHeader({ @@ -48,7 +48,7 @@ function _CalendarHeader({ {dateRange.map((date) => { const _isToday = isToday(date) - const _isActiveDay = activeDate ? isActiveDay(date, activeDate) : _isToday + const _isActiveDate = activeDate ? isActiveDate(date, activeDate) : _isToday return ( ({ style={[ theme.typography.xs, u['text-center'], - { color: _isActiveDay ? theme.palette.primary.main : theme.palette.gray['500'] }, + { color: _isActiveDate ? theme.palette.primary.main : theme.palette.gray['500'] }, ]} > {date.format('ddd')} ({ {date.format('D')} diff --git a/src/utils.ts b/src/utils.ts index cfcb4fc7..f192736e 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -81,8 +81,8 @@ export function isToday(date: dayjs.Dayjs) { return today.isSame(date, 'day') } -export function isActiveDay(date: dayjs.Dayjs, activeDay: dayjs.Dayjs) { - return activeDay.isSame(date, 'day') +export function isActiveDate(date: dayjs.Dayjs, activeDate: Date) { + return date.isSame(activeDate, 'day') } export function getRelativeTopInDay(date: dayjs.Dayjs) { From 13b5b71a57dae333b4b04e7c0fd7af9b9c0cb008 Mon Sep 17 00:00:00 2001 From: Kodai Kabasawa Date: Sat, 6 Nov 2021 16:46:37 +0900 Subject: [PATCH 3/7] add activeDate props for container to pass it to header --- src/components/CalendarContainer.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/CalendarContainer.tsx b/src/components/CalendarContainer.tsx index 0fe20a75..2367061f 100644 --- a/src/components/CalendarContainer.tsx +++ b/src/components/CalendarContainer.tsx @@ -74,6 +74,7 @@ export interface CalendarContainerProps { weekEndsOn?: WeekNum maxVisibleEventCount?: number eventMinHeightForMonthView?: number + activeDate?: Date } function _CalendarContainer({ @@ -102,6 +103,7 @@ function _CalendarContainer({ weekEndsOn = 6, maxVisibleEventCount = 3, eventMinHeightForMonthView = 22, + activeDate, }: CalendarContainerProps) { const [targetDate, setTargetDate] = React.useState(dayjs(date)) @@ -204,6 +206,7 @@ function _CalendarContainer({ style: headerContainerStyle, allDayEvents: allDayEvents, onPressDateHeader: onPressDateHeader, + activeDate, } return ( From 03b7d048f3586f87db3d76e4a49fc9d6fc7633e6 Mon Sep 17 00:00:00 2001 From: Kodai Kabasawa Date: Sat, 6 Nov 2021 16:47:59 +0900 Subject: [PATCH 4/7] add documentation for activeDate props --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index e6cc0af1..573daae4 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,7 @@ export interface CalendarProps { onPressDateHeader?: (date: Date) => void onPressEvent?: (event: ICalendarEvent) => void eventMinHeightForMonthView?: number + activeDate?: Date } ``` @@ -148,6 +149,7 @@ export interface CalendarProps { | `renderEvent` | no | `EventRenderer` | Custom event renderer. See below type definition. | | `renderHeader` | no | `HeaderRenderer` | Custom header renderer. | | `eventMinHeightForMonthView` | no | `number` | Minimun height for events in month view. Should match the min-height of your custom events. Defaults to 22. | +| `activeDate` | no | `Date` | Date highlighted in header. Defualts to today (current time). | ## EventRenderer From 044bf4516137ff916c40ab3fdf2edffa3301e7d9 Mon Sep 17 00:00:00 2001 From: Kodai Kabasawa Date: Mon, 8 Nov 2021 23:43:44 +0900 Subject: [PATCH 5/7] refactor naming, etc to be simpler and more readble --- src/components/CalendarHeader.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/CalendarHeader.tsx b/src/components/CalendarHeader.tsx index 1316a8eb..29ae838e 100644 --- a/src/components/CalendarHeader.tsx +++ b/src/components/CalendarHeader.tsx @@ -48,7 +48,7 @@ function _CalendarHeader({ {dateRange.map((date) => { const _isToday = isToday(date) - const _isActiveDate = activeDate ? isActiveDate(date, activeDate) : _isToday + const shouldHighlight = activeDate ? date.isSame(activeDate, 'date') : _isToday return ( ({ style={[ theme.typography.xs, u['text-center'], - { color: _isActiveDate ? theme.palette.primary.main : theme.palette.gray['500'] }, + { + color: shouldHighlight ? theme.palette.primary.main : theme.palette.gray['500'], + }, ]} > {date.format('ddd')} ({ {date.format('D')} From 301f97b2545ab2b3d8fb78e733f3bb8074c79558 Mon Sep 17 00:00:00 2001 From: Kodai Kabasawa Date: Mon, 8 Nov 2021 23:44:01 +0900 Subject: [PATCH 6/7] remove unused function --- src/components/CalendarHeader.tsx | 2 +- src/utils.ts | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/CalendarHeader.tsx b/src/components/CalendarHeader.tsx index 29ae838e..290e6116 100644 --- a/src/components/CalendarHeader.tsx +++ b/src/components/CalendarHeader.tsx @@ -5,7 +5,7 @@ import { Platform, Text, TouchableOpacity, View, ViewStyle } from 'react-native' import { eventCellCss, u } from '../commonStyles' import { ICalendarEvent } from '../interfaces' import { useTheme } from '../theme/ThemeContext' -import { isActiveDate, isToday, typedMemo } from '../utils' +import { isToday, typedMemo } from '../utils' export interface CalendarHeaderProps { dateRange: dayjs.Dayjs[] diff --git a/src/utils.ts b/src/utils.ts index f192736e..a7de0d66 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -81,10 +81,6 @@ export function isToday(date: dayjs.Dayjs) { return today.isSame(date, 'day') } -export function isActiveDate(date: dayjs.Dayjs, activeDate: Date) { - return date.isSame(activeDate, 'day') -} - export function getRelativeTopInDay(date: dayjs.Dayjs) { return (100 * (date.hour() * 60 + date.minute())) / DAY_MINUTES } From 5fa34d226c31c5b2bddfe99f5f09fb024e16ab18 Mon Sep 17 00:00:00 2001 From: Kodai Kabasawa Date: Tue, 9 Nov 2021 21:33:34 +0900 Subject: [PATCH 7/7] refactor function to reduce unnecessary call --- src/components/CalendarHeader.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CalendarHeader.tsx b/src/components/CalendarHeader.tsx index 290e6116..59457b59 100644 --- a/src/components/CalendarHeader.tsx +++ b/src/components/CalendarHeader.tsx @@ -47,8 +47,8 @@ function _CalendarHeader({ > {dateRange.map((date) => { - const _isToday = isToday(date) - const shouldHighlight = activeDate ? date.isSame(activeDate, 'date') : _isToday + const shouldHighlight = activeDate ? date.isSame(activeDate, 'date') : isToday(date) + return (