diff --git a/docsRNC/docs/Components/Calendar.md b/docsRNC/docs/Components/Calendar.md index 84e683331..679470a17 100644 --- a/docsRNC/docs/Components/Calendar.md +++ b/docsRNC/docs/Components/Calendar.md @@ -180,6 +180,16 @@ Replace default title with custom element Replace default day with custom day rendering component JSX.Element +### dayComponentMemoEqualityFn + +Optional `memo` equality function provides fine control over Day component's memoization. Refer to [React.memo Docs](https://react.dev/reference/react/memo) for guidance on equality functions. +(prevProps: DayProps, nextProps: DayProps) => boolean + +### extraData + +Custom data object to be passed as a prop to the Day component. May be used for memo equality check or passing additional data to your custom Day component via props. Consider memoizing unless being used along with custom equality function for a check. +Record + ### disableAllTouchEventsForDisabledDays Whether to disable all touch events for disabled days (can be override with 'disableTouchEvent' in 'markedDates') diff --git a/src/calendar/day/index.tsx b/src/calendar/day/index.tsx index e21cfea51..aa514a823 100644 --- a/src/calendar/day/index.tsx +++ b/src/calendar/day/index.tsx @@ -12,6 +12,10 @@ import BasicDay, {BasicDayProps} from './basic'; import PeriodDay from './period'; function areEqual(prevProps: DayProps, nextProps: DayProps) { + // if we have a user provided equality function then we run that instead + if (typeof nextProps.dayComponentMemoEqualityFn === 'function') { + return nextProps.dayComponentMemoEqualityFn(prevProps, nextProps); + } const prevPropsWithoutMarkDates = omit(prevProps, 'marking'); const nextPropsWithoutMarkDates = omit(nextProps, 'marking'); const didPropsChange = some(prevPropsWithoutMarkDates, function (value, key) { @@ -24,6 +28,15 @@ function areEqual(prevProps: DayProps, nextProps: DayProps) { export interface DayProps extends BasicDayProps { /** Provide custom day rendering component */ dayComponent?: React.ComponentType; // TODO: change 'date' prop type to string by removing it from overriding BasicDay's 'date' prop (breaking change for V2) + /** + * Provide your own custom equality function for memoizing the day component + */ + dayComponentMemoEqualityFn?: (prevProps: DayProps, nextProps: DayProps) => boolean; + /** + * Custom data object to be passed as a prop to the Day component. + * May be used for memo equality check or additional data to your custom Day component + */ + extraData?: Record; } const Day = React.memo((props: DayProps) => { diff --git a/src/componentUpdater.ts b/src/componentUpdater.ts index 770834670..54571ee41 100644 --- a/src/componentUpdater.ts +++ b/src/componentUpdater.ts @@ -71,7 +71,9 @@ export function extractDayProps(props: CalendarProps) { disableAllTouchEventsForDisabledDays, disableAllTouchEventsForInactiveDays, dayComponent, - testID + testID, + dayComponentMemoEqualityFn, + extraData, } = props; const dayProps = { @@ -85,7 +87,9 @@ export function extractDayProps(props: CalendarProps) { disableAllTouchEventsForDisabledDays, disableAllTouchEventsForInactiveDays, dayComponent, - testID + testID, + dayComponentMemoEqualityFn, + extraData, }; return dayProps;