react-native-dates-picker/lib/module/components/DaySelector.js

Customizable date picker for React Native

import { useMemo, useCallback } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import dayjs from 'dayjs';
import { useCalendarContext } from '../CalendarContext';
import Day, { EmptyDay } from './Day';
import { getParsedDate, getMonthDays, getWeekdaysMin, getDaysInMonth, areDatesOnSameDay, isDateBetween, getDate, getFormatted } from '../utils';
const DaySelector = () => {
  var _getWeekdaysMin;
  const {
    mode,
    date,
    startDate,
    endDate,
    dates,
    currentDate,
    onSelectDate,
    displayFullDays,
    minDate,
    maxDate,
    firstDayOfWeek,
    theme,
    height
  } = useCalendarContext();
  const {
    year,
    month,
    hour,
    minute
  } = getParsedDate(currentDate);
  const daysGrid = useMemo(() => {
    const today = new Date();
    const {
      fullDaysInMonth
    } = getDaysInMonth(currentDate, displayFullDays, firstDayOfWeek);
    return getMonthDays(currentDate, displayFullDays, minDate, maxDate, firstDayOfWeek).map((day, index) => {
      if (day) {
        let leftCrop = day.dayOfMonth === 1;
        let rightCrop = day.dayOfMonth === fullDaysInMonth;
        const isFirstDayOfMonth = day.dayOfMonth === 1;
        const isLastDayOfMonth = day.dayOfMonth === fullDaysInMonth;
        const isToday = areDatesOnSameDay(day.date, today);
        let inRange = false;
        let isSelected = false;
        if (mode === 'range') {
          rightCrop = false;
          const selectedStartDay = areDatesOnSameDay(day.date, startDate);
          const selectedEndDay = areDatesOnSameDay(day.date, endDate);
          isSelected = selectedStartDay || selectedEndDay;
          inRange = isDateBetween(day.date, {
            startDate,
            endDate
          });
          if (selectedStartDay) leftCrop = true;
          if (selectedEndDay) rightCrop = true;
          if (index % 7 === 0 && !selectedStartDay) leftCrop = false;
          if (index % 7 === 6 && !selectedEndDay) rightCrop = false;
          if (isFirstDayOfMonth && selectedEndDay || isLastDayOfMonth && selectedStartDay) inRange = false;
        } else if (mode === 'multiple') {
          const safeDates = dates || [];
          isSelected = safeDates.some(d => areDatesOnSameDay(day.date, d));
          const yesterday = dayjs(day.date).add(-1, 'day');
          const tomorrow = dayjs(day.date).add(1, 'day');
          const yesterdaySelected = safeDates.some(d => areDatesOnSameDay(d, yesterday));
          const tomorrowSelected = safeDates.some(d => areDatesOnSameDay(d, tomorrow));
          if (isSelected) {
            if (tomorrowSelected && yesterdaySelected) inRange = true;
            if (tomorrowSelected && !yesterdaySelected) {
              inRange = true;
              leftCrop = true;
            }
            if (yesterdaySelected && !tomorrowSelected) {
              inRange = true;
              rightCrop = true;
            }
            if (isFirstDayOfMonth && !tomorrowSelected) inRange = false;
            if (isLastDayOfMonth && !yesterdaySelected) inRange = false;
            if (inRange && !leftCrop && !rightCrop) isSelected = false;
          }
        } else if (mode === 'single') isSelected = areDatesOnSameDay(day.date, currentDate);
        return {
          ...day,
          isToday,
          isSelected,
          inRange,
          leftCrop,
          rightCrop
        };
      } else return null;
    });
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [mode, month, year, displayFullDays, firstDayOfWeek, minDate, maxDate, date, startDate, endDate, dates, currentDate]);
  const handleSelectDate = useCallback(dateStr => {
    const newDate = getDate(dateStr).hour(hour).minute(minute);
    onSelectDate(getFormatted(newDate));
  }, [onSelectDate, hour, minute]);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.weekDaysContainer, theme === null || theme === void 0 ? void 0 : theme.weekDaysContainerStyle]
  }, (_getWeekdaysMin = getWeekdaysMin(firstDayOfWeek)) === null || _getWeekdaysMin === void 0 ? void 0 : _getWeekdaysMin.map((item, index) => /*#__PURE__*/React.createElement(View, {
    key: index,
    style: styles.weekDayCell
  }, /*#__PURE__*/React.createElement(Text, {
    style: theme === null || theme === void 0 ? void 0 : theme.weekDaysTextStyle
  }, item)))), /*#__PURE__*/React.createElement(View, {
    style: [styles.daysContainer, theme.daysPanelStyle]
  }, daysGrid === null || daysGrid === void 0 ? void 0 : daysGrid.map((day, index) => day ? /*#__PURE__*/React.createElement(Day, {
    key: index,
    date: day.date,
    text: day.text,
    disabled: day.disabled,
    isCurrentMonth: day.isCurrentMonth,
    theme: theme,
    isToday: day.isToday,
    isSelected: day.isSelected,
    inRange: day.inRange,
    leftCrop: day.leftCrop,
    rightCrop: day.rightCrop,
    onSelectDate: handleSelectDate,
    height: height
  }) : /*#__PURE__*/React.createElement(EmptyDay, {
    key: index,
    height: height
  }))));
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 5,
    width: '100%'
  },
  weekDaysContainer: {
    width: '100%',
    flexDirection: 'row',
    paddingBottom: 10,
    paddingTop: 5,
    marginBottom: 10,
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: '#E5E5E5'
  },
  weekDayCell: {
    width: '14.2%',
    alignItems: 'center',
    justifyContent: 'center'
  },
  daysContainer: {
    flex: 1,
    width: '100%',
    height: '100%',
    flexWrap: 'wrap',
    flexDirection: 'row',
    paddingHorizontal: 10,
    alignContent: 'flex-start'
  }
});
export default DaySelector;
//# sourceMappingURL=DaySelector.js.map