react-native-easy-calendar/lib/module/Components/Months.js

Customizable, easy-to-use, performant calendar components for React Native

import React, { useMemo } from 'react';
import { View } from 'react-native';
import dayjs from 'dayjs';
import { ThemeContext, LocaleContext } from '../Contexts';
import { dateRange } from '../Utils';
import { Month as DefaultMonth } from '.';

const Months = ({
  MonthComponent: CustomMonth,
  onPressMonth,
  dateProperties,
  visibleDate,
  minDate,
  maxDate
}) => {
  const theme = React.useContext(ThemeContext);
  const locale = React.useContext(LocaleContext);
  const monthsOfVisibleYear = dateRange(visibleDate.startOf('year'), visibleDate.endOf('year'), 'month');
  const selectedMonths = useMemo(() => {
    return Object.entries(dateProperties).reduce((selected, [date, properties]) => {
      if (properties.isSelected) {
        const month = dayjs(date).startOf('month').format('YYYY-MM-DD');
        selected[month] = true;
      }

      return selected;
    }, {});
  }, [dateProperties]);
  const Month = CustomMonth || DefaultMonth;
  return /*#__PURE__*/React.createElement(View, {
    style: theme.monthsContainer,
    testID: 'months-container'
  }, monthsOfVisibleYear.map((month, index) => {
    return /*#__PURE__*/React.createElement(Month, {
      key: index,
      locale: locale,
      date: month.format('YYYY-MM-DD'),
      isSelected: selectedMonths[month.format('YYYY-MM-DD')],
      onPress: onPressMonth,
      isDisabled: !!(maxDate && month.startOf('month').isAfter(maxDate, 'day')) || !!(minDate && month.endOf('month').isBefore(minDate, 'day'))
    });
  }));
};

export default /*#__PURE__*/React.memo(Months);
//# sourceMappingURL=Months.js.map