react-native-plain-calendar/build/src/components/Cells/Cell.js

Calendar component for React-Native

import * as dateFns from 'date-fns';
import * as React from 'react';
import { useMemo } from 'react';
import { View } from 'react-native';
import { isBetween } from '../../utils';
import { Day } from '../Day/Day';
import { s } from './styles';
export function Cell({ selectedDate, onDateClick, startSelectedDate, endSelectedDate, minDate, maxDate, disabledDates, dayContainerStyle, DayComponent, dayPropsStyle, disabledDayPick, day, formattedDate, monthStart, }) {
    const isToday = useMemo(() => {
        if (startSelectedDate && endSelectedDate) {
            return (!dateFns.isSameDay(day, startSelectedDate) &&
                !dateFns.isSameDay(day, endSelectedDate) &&
                dateFns.isSameDay(day, new Date()));
        }
        else {
            return dateFns.isSameDay(day, new Date());
        }
    }, [day, startSelectedDate, endSelectedDate]);
    const isDisabledParticularDate = useMemo(() => {
        if (!!disabledDates) {
            return disabledDates.some((disabled) => dateFns.isSameDay(day, disabled));
        }
        else {
            return false;
        }
    }, [disabledDates, day]);
    const isDisabledDate = useMemo(() => {
        const isSameMonth = dateFns.isSameMonth(day, monthStart);
        let isBeforeDay = false;
        if (minDate) {
            isBeforeDay = dateFns.isBefore(day, dateFns.subDays(minDate, 1));
        }
        let isAfterDay = false;
        if (maxDate) {
            isAfterDay = dateFns.isAfter(day, maxDate);
        }
        return (!isSameMonth ||
            isBeforeDay ||
            isAfterDay ||
            isDisabledParticularDate);
    }, [day, monthStart, minDate, maxDate]);
    const isSingleSelectedDate = useMemo(() => {
        if (selectedDate) {
            return dateFns.isSameDay(day, selectedDate);
        }
        else {
            return false;
        }
    }, [selectedDate, day]);
    const isStartSelectedDate = useMemo(() => {
        if (startSelectedDate) {
            return dateFns.isSameDay(day, startSelectedDate);
        }
        else {
            return false;
        }
    }, [day, startSelectedDate]);
    const isEndSelectedDate = useMemo(() => {
        if (endSelectedDate) {
            return dateFns.isSameDay(day, endSelectedDate);
        }
        else {
            return false;
        }
    }, [day, endSelectedDate]);
    const isIntermediateSelectedDate = useMemo(() => !!(startSelectedDate &&
        endSelectedDate &&
        isBetween(startSelectedDate, endSelectedDate, day)), [startSelectedDate, endSelectedDate, day]);
    const isSelectedDate = isSingleSelectedDate ||
        isStartSelectedDate ||
        isEndSelectedDate ||
        isIntermediateSelectedDate;
    return (<View style={[s.dayContainer, dayContainerStyle]}>
      <Day date={formattedDate} DayComponent={DayComponent} onPress={() => onDateClick(new Date(day))} isToday={isToday} isDisabledDate={isDisabledDate} isDisabledParticularDate={isDisabledParticularDate} isSelectedDate={isSelectedDate} isSingleSelectedDate={isSingleSelectedDate} isStartSelectedDate={isStartSelectedDate} isEndSelectedDate={isEndSelectedDate} isIntermediateSelectedDate={isIntermediateSelectedDate} disabledDayPick={disabledDayPick} {...dayPropsStyle}/>
    </View>);
}