diff --git a/src/calendar-list/index.tsx b/src/calendar-list/index.tsx index d7aea0b013..3f4b17923e 100644 --- a/src/calendar-list/index.tsx +++ b/src/calendar-list/index.tsx @@ -38,6 +38,8 @@ export interface CalendarListProps extends CalendarProps, Omit JSX.Element; } export interface CalendarListImperativeMethods { @@ -80,6 +82,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => { animateScroll = false, showScrollIndicator = false, staticHeader, + renderPlaceholder, /** View props */ testID, style: propsStyle, @@ -240,6 +243,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => { calendarHeight={calendarHeight} scrollToMonth={scrollToMonth} visible={isDateInRange(item)} + renderPlaceholder={renderPlaceholder} /> ); }, [horizontal, calendarStyle, calendarWidth, testID, getMarkedDatesForItem, isDateInRange, calendarProps]); diff --git a/src/calendar-list/item.tsx b/src/calendar-list/item.tsx index 1e43843fa7..79d0a512c6 100644 --- a/src/calendar-list/item.tsx +++ b/src/calendar-list/item.tsx @@ -1,6 +1,6 @@ import XDate from 'xdate'; import React, {useRef, useMemo, useCallback} from 'react'; -import {Text} from 'react-native'; +import {Text, View} from 'react-native'; import {Theme} from '../types'; import {toMarkingFormat} from '../interface'; import {extractCalendarProps} from '../componentUpdater'; @@ -15,6 +15,7 @@ export type CalendarListItemProps = CalendarProps & { theme?: Theme; scrollToMonth?: (date: XDate) => void; visible?: boolean; + renderPlaceholder?: (year?: number, month?: number) => JSX.Element; }; const CalendarListItem = React.memo((props: CalendarListItemProps) => { @@ -29,7 +30,8 @@ const CalendarListItem = React.memo((props: CalendarListItemProps) => { headerStyle, onPressArrowLeft, onPressArrowRight, - visible + visible, + renderPlaceholder } = props; const style = useRef(styleConstructor(theme)); @@ -82,6 +84,11 @@ const CalendarListItem = React.memo((props: CalendarListItemProps) => { }, [onPressArrowRight, scrollToMonth]); if (!visible) { + if (renderPlaceholder) { + const year = item.getFullYear(); + const month = item.getMonth(); + return {renderPlaceholder(year, month)}; + } return ( {dateString} );