@aldiand/react-native-ui-datepicker/lib/commonjs/components/DaySelector.js

Customizable date picker 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 _CalendarContext = require("../CalendarContext");
var _Day = _interopRequireWildcard(require("./Day"));
var _utils = require("../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const DaySelector = () => {
  var _getWeekdaysMin;
  const {
    mode,
    date,
    startDate,
    endDate,
    dates,
    currentDate,
    onSelectDate,
    displayFullDays,
    minDate,
    maxDate,
    firstDayOfWeek,
    theme,
    height
  } = (0, _CalendarContext.useCalendarContext)();
  const {
    year,
    month,
    hour,
    minute
  } = (0, _utils.getParsedDate)(currentDate);
  const daysGrid = (0, _react.useMemo)(() => {
    const today = new Date();
    const {
      fullDaysInMonth
    } = (0, _utils.getDaysInMonth)(currentDate, displayFullDays, firstDayOfWeek);
    return (0, _utils.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 = (0, _utils.areDatesOnSameDay)(day.date, today);
        let inRange = false;
        let isSelected = false;
        if (mode === 'range') {
          rightCrop = false;
          const selectedStartDay = (0, _utils.areDatesOnSameDay)(day.date, startDate);
          const selectedEndDay = (0, _utils.areDatesOnSameDay)(day.date, endDate);
          isSelected = selectedStartDay || selectedEndDay;
          inRange = (0, _utils.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 => (0, _utils.areDatesOnSameDay)(day.date, d));
          const yesterday = (0, _dayjs.default)(day.date).add(-1, 'day');
          const tomorrow = (0, _dayjs.default)(day.date).add(1, 'day');
          const yesterdaySelected = safeDates.some(d => (0, _utils.areDatesOnSameDay)(d, yesterday));
          const tomorrowSelected = safeDates.some(d => (0, _utils.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 = (0, _utils.areDatesOnSameDay)(day.date, date);
        }
        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]);
  const handleSelectDate = (0, _react.useCallback)(date => {
    const newDate = (0, _utils.getDate)(date).hour(hour).minute(minute);
    onSelectDate((0, _utils.getFormated)(newDate));
  }, [onSelectDate, hour, minute]);
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.container,
    testID: "day-selector"
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.weekDaysContainer, theme === null || theme === void 0 ? void 0 : theme.weekDaysContainerStyle],
    testID: "week-days"
  }, (_getWeekdaysMin = (0, _utils.getWeekdaysMin)(firstDayOfWeek)) === null || _getWeekdaysMin === void 0 ? void 0 : _getWeekdaysMin.map((item, index) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    key: index,
    style: styles.weekDayCell
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: theme === null || theme === void 0 ? void 0 : theme.weekDaysTextStyle
  }, item)))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.daysContainer,
    testID: "days"
  }, daysGrid === null || daysGrid === void 0 ? void 0 : daysGrid.map((day, index) => {
    return day ? /*#__PURE__*/_react.default.createElement(_Day.default, {
      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.default.createElement(_Day.EmptyDay, {
      key: index,
      height: height
    });
  })));
};
const styles = _reactNative.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',
    alignContent: 'flex-start'
  }
});
var _default = exports.default = DaySelector;
//# sourceMappingURL=DaySelector.js.map