diff --git a/src/features/offer/components/MovieCalendar/MovieCalendar.tsx b/src/features/offer/components/MovieCalendar/MovieCalendar.tsx index 6b3323000f4..429a93aa900 100644 --- a/src/features/offer/components/MovieCalendar/MovieCalendar.tsx +++ b/src/features/offer/components/MovieCalendar/MovieCalendar.tsx @@ -16,6 +16,7 @@ type Props = { selectedDate: Date | undefined onTabChange: (date: Date) => void flatListRef: React.MutableRefObject + disabledDates?: Date[] flatListWidth?: number onFlatListLayout?: (event: LayoutChangeEvent) => void itemWidth?: number @@ -33,6 +34,7 @@ export const MovieCalendar: React.FC = ({ onFlatListLayout, itemWidth, onItemLayout, + disabledDates, }) => { const { isDesktopViewport } = useTheme() const { @@ -94,6 +96,7 @@ export const MovieCalendar: React.FC = ({ date={date} selectedDate={selectedDate} onTabChange={onInternalTabChange} + disabled={disabledDates?.includes(date)} /> )} /> diff --git a/src/features/offer/components/MovieCalendar/components/MovieCalendarDay.tsx b/src/features/offer/components/MovieCalendar/components/MovieCalendarDay.tsx index c50f5b2e411..6c06b3190b5 100644 --- a/src/features/offer/components/MovieCalendar/components/MovieCalendarDay.tsx +++ b/src/features/offer/components/MovieCalendar/components/MovieCalendarDay.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useMemo } from 'react' import { View, ViewProps } from 'react-native' import styled from 'styled-components/native' @@ -13,6 +13,7 @@ type Props = { onTabChange: (date: Date) => void selectedDate?: Date onLayout?: ViewProps['onLayout'] + disabled?: boolean } export const MovieCalendarDay: React.FC = ({ @@ -20,15 +21,29 @@ export const MovieCalendarDay: React.FC = ({ selectedDate, onTabChange, onLayout, + disabled, }) => { const { weekDay, dayDate, month, accessibilityLabel, isSelected } = useMovieCalendarDay( date, selectedDate ) - const { CalendarText } = StatusPattern[isSelected ? 'selected' : 'default'] + + const CalendarText = useMemo(() => { + if (disabled) { + return DisabledCalendarText + } + if (selectedDate) { + return SelectedCalendarText + } + return DefaultCalendarText + }, [disabled, selectedDate]) return ( - onTabChange(date)}> + onTabChange(date)}> {weekDay} {dayDate} @@ -65,11 +80,6 @@ const SelectedCalendarText = styled(DefaultCalendarText)(({ theme }) => ({ color: theme.colors.primary, })) -const StatusPattern = { - default: { - CalendarText: DefaultCalendarText, - }, - selected: { - CalendarText: SelectedCalendarText, - }, -} +const DisabledCalendarText = styled(DefaultCalendarText)(({ theme }) => ({ + color: theme.colors.greyMedium, +})) diff --git a/src/features/offer/components/MoviesScreeningCalendar/MovieCalendarContext.tsx b/src/features/offer/components/MoviesScreeningCalendar/MovieCalendarContext.tsx index a8581a48ad0..a0cfdbb04c3 100644 --- a/src/features/offer/components/MoviesScreeningCalendar/MovieCalendarContext.tsx +++ b/src/features/offer/components/MoviesScreeningCalendar/MovieCalendarContext.tsx @@ -146,6 +146,7 @@ export const MovieCalendarProvider: React.FC<{