react-native-easy-calendar/lib/commonjs/Calendars/BaseCalendar.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _dayjs = _interopRequireDefault(require("dayjs"));

var _localeData = _interopRequireDefault(require("dayjs/plugin/localeData"));

var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFormat"));

var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));

var _Utils = require("../Utils");

var _Hooks = require("../Hooks");

var _Contexts = require("../Contexts");

var _Constants = require("../Constants");

var _Components = require("../Components");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

_dayjs.default.extend(_localeData.default);

_dayjs.default.extend(_localizedFormat.default);

_dayjs.default.extend(_utc.default);

const BaseCalendar = ({
  ArrowComponent: CustomArrow,
  TitleComponent: CustomTitle,
  WeekdaysComponent: CustomWeekdays,
  DayComponent,
  MonthComponent,
  allowYearView,
  showExtraDates,
  onPressDay,
  maxDate,
  minDate,
  initVisibleDate,
  dateProperties,
  testID
}) => {
  const theme = _react.default.useContext(_Contexts.ThemeContext);

  const locale = _react.default.useContext(_Contexts.LocaleContext);

  const [rightArrowDisabled, disableRightArrow] = (0, _react.useState)(false);
  const [leftArrowDisabled, disableLeftArrow] = (0, _react.useState)(false);
  const [activeView, setActiveView] = (0, _react.useState)(_Constants.VIEW.MONTH);
  const [visibleDate, setVisibleDate] = (0, _react.useState)(initVisibleDate !== null && initVisibleDate !== void 0 ? initVisibleDate : (0, _dayjs.default)().local().format());

  const localeAwareVisibleDate = _react.default.useMemo(() => (0, _dayjs.default)(visibleDate).locale(locale.name, locale), [locale, visibleDate]);

  const weekdays = _react.default.useMemo(() => {
    var _locale$weekdaysShort;

    return (_locale$weekdaysShort = locale.weekdaysShort) !== null && _locale$weekdaysShort !== void 0 ? _locale$weekdaysShort : [''];
  }, [locale]);

  const {
    month,
    year
  } = (0, _Hooks.useSurroundingTimeUnits)(visibleDate);
  const verifyUnitIsPastMaxDate = (0, _react.useCallback)(unit => {
    if (maxDate) {
      if (unit.isAfter(maxDate)) {
        disableRightArrow(true);
      } else {
        disableRightArrow(false);
      }
    }
  }, [disableRightArrow, maxDate]);
  const verifyUnitIsBeforeMinDate = (0, _react.useCallback)(unit => {
    if (minDate) {
      if (unit.isBefore(minDate)) {
        disableLeftArrow(true);
      } else {
        disableLeftArrow(false);
      }
    }
  }, [disableLeftArrow, minDate]);
  const toggleCalendarView = (0, _react.useCallback)((newVisibleDate = visibleDate) => {
    const {
      month: _month,
      year: _year
    } = (0, _Utils.getSurroundingTimeUnits)(newVisibleDate);

    if (activeView === _Constants.VIEW.MONTH) {
      setActiveView(_Constants.VIEW.YEAR);
      verifyUnitIsPastMaxDate(_year.next);
      verifyUnitIsBeforeMinDate(_year.last);
    }

    if (activeView === _Constants.VIEW.YEAR) {
      setActiveView(_Constants.VIEW.MONTH);
      verifyUnitIsPastMaxDate(_month.next);
      verifyUnitIsBeforeMinDate(_month.last);
    }
  }, [activeView, verifyUnitIsBeforeMinDate, verifyUnitIsPastMaxDate, visibleDate]);
  (0, _react.useEffect)(() => {
    verifyUnitIsPastMaxDate(month.next.start);
    verifyUnitIsBeforeMinDate(month.last.end);
  }, [month.last.end, month.next.start, verifyUnitIsPastMaxDate, verifyUnitIsBeforeMinDate]);
  const addMonth = (0, _react.useCallback)(() => {
    setVisibleDate(month.next.start.local().format());
    verifyUnitIsPastMaxDate(month.afterNext);
    verifyUnitIsBeforeMinDate(month.current.end);
  }, [month, verifyUnitIsBeforeMinDate, verifyUnitIsPastMaxDate]);
  const subtractMonth = (0, _react.useCallback)(() => {
    setVisibleDate(month.last.start.local().format());
    verifyUnitIsPastMaxDate(month.current.start);
    verifyUnitIsBeforeMinDate(month.beforeLast);
  }, [month, verifyUnitIsBeforeMinDate, verifyUnitIsPastMaxDate]);
  const addYear = (0, _react.useCallback)(() => {
    setVisibleDate(year.next.persistMonth.local().format());
    verifyUnitIsPastMaxDate(year.afterNext);
    verifyUnitIsBeforeMinDate(year.current.end);
  }, [year, verifyUnitIsBeforeMinDate, verifyUnitIsPastMaxDate]);
  const subtractYear = (0, _react.useCallback)(() => {
    setVisibleDate(year.last.persistMonth.local().format());
    verifyUnitIsPastMaxDate(year.current.start);
    verifyUnitIsBeforeMinDate(year.beforeLast);
  }, [year, verifyUnitIsBeforeMinDate, verifyUnitIsPastMaxDate]);

  const onPressMonth = newVisibleDate => {
    setVisibleDate(newVisibleDate);
    toggleCalendarView(newVisibleDate);
  };

  const Weekdays = CustomWeekdays || _Components.Weekdays;
  const Arrow = CustomArrow || _Components.Arrow;
  const Title = CustomTitle || _Components.Title;
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: theme.calendarContainer,
    testID: testID
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    testID: 'header',
    style: theme.headerContainer
  }, /*#__PURE__*/_react.default.createElement(Arrow, {
    direction: 'left',
    isDisabled: leftArrowDisabled,
    onPress: activeView === _Constants.VIEW.MONTH ? subtractMonth : subtractYear
  }), /*#__PURE__*/_react.default.createElement(Title, {
    activeView: activeView,
    locale: locale,
    date: localeAwareVisibleDate.format('YYYY-MM-DD'),
    isDisabled: !allowYearView,
    onPress: toggleCalendarView
  }), /*#__PURE__*/_react.default.createElement(Arrow, {
    direction: 'right',
    isDisabled: rightArrowDisabled,
    onPress: activeView === _Constants.VIEW.MONTH ? addMonth : addYear
  })), activeView === _Constants.VIEW.MONTH ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Weekdays, {
    days: weekdays
  }), /*#__PURE__*/_react.default.createElement(_Components.Days, {
    DayComponent: DayComponent,
    visibleDate: localeAwareVisibleDate,
    showExtraDates: !!showExtraDates,
    dateProperties: dateProperties,
    onPressDay: onPressDay,
    minDate: minDate,
    maxDate: maxDate
  })) : /*#__PURE__*/_react.default.createElement(_Components.Months, {
    MonthComponent: MonthComponent,
    visibleDate: localeAwareVisibleDate,
    minDate: minDate ? (0, _dayjs.default)(minDate).local().format() : undefined,
    maxDate: maxDate ? (0, _dayjs.default)(maxDate).local().format() : undefined,
    dateProperties: dateProperties,
    onPressMonth: onPressMonth
  }));
};

var _default = BaseCalendar;
exports.default = _default;
//# sourceMappingURL=BaseCalendar.js.map