react-native-dates-picker/lib/commonjs/DateTimePicker.js

Customizable date picker for React Native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _utils = require("./utils");
var _CalendarContext = _interopRequireDefault(require("./CalendarContext"));
var _enums = require("./enums");
var _Calendar = _interopRequireDefault(require("./components/Calendar"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));
var _localeData = _interopRequireDefault(require("dayjs/plugin/localeData"));
var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFormat"));
require("dayjs/locale/zh-cn");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
_dayjs.default.extend(_utc.default);
_dayjs.default.extend(_localeData.default);
_dayjs.default.extend(_relativeTime.default);
_dayjs.default.extend(_localizedFormat.default);
const DateTimePicker = props => {
  const {
    mode = 'single',
    locale = 'zh-cn',
    displayFullDays = false,
    timePicker = false,
    firstDayOfWeek,
    buttonPrevIcon,
    buttonNextIcon,
    minDate,
    maxDate,
    date,
    startDate,
    endDate,
    dates,
    onChange,
    initialView = 'day',
    height,
    containerStyle,
    columns = ['year', 'month', 'day'],
    ...rest
  } = props;
  const initialCalendarView = mode !== 'single' && initialView === 'time' ? 'day' : initialView;
  const firstDay = firstDayOfWeek && firstDayOfWeek > 0 && firstDayOfWeek <= 6 ? firstDayOfWeek : 0;
  let currentDate = (0, _dayjs.default)();
  if ((mode === 'single' || mode === 'wheel') && date) currentDate = (0, _dayjs.default)(date);
  if (mode === 'range' && startDate) currentDate = (0, _dayjs.default)(startDate);
  if (mode === 'multiple' && dates && dates.length > 0) currentDate = (0, _dayjs.default)(dates[0]);
  if (minDate && currentDate.isBefore(minDate)) currentDate = (0, _dayjs.default)(minDate);
  let currentYear = currentDate.year();
  _dayjs.default.locale(locale);
  const [state, dispatch] = (0, _react.useReducer)((prevState, action) => {
    switch (action.type) {
      case _enums.CalendarActionKind.SET_CALENDAR_VIEW:
        return {
          ...prevState,
          calendarView: action.payload
        };
      case _enums.CalendarActionKind.CHANGE_CURRENT_DATE:
        return {
          ...prevState,
          currentDate: action.payload
        };
      case _enums.CalendarActionKind.CHANGE_CURRENT_YEAR:
        return {
          ...prevState,
          currentYear: action.payload
        };
      case _enums.CalendarActionKind.CHANGE_SELECTED_DATE:
        const {
          date
        } = action.payload;
        return {
          ...prevState,
          date,
          currentDate: date
        };
      case _enums.CalendarActionKind.CHANGE_SELECTED_RANGE:
        const {
          startDate,
          endDate
        } = action.payload;
        return {
          ...prevState,
          startDate,
          endDate
        };
      case _enums.CalendarActionKind.CHANGE_SELECTED_MULTIPLE:
        const {
          dates
        } = action.payload;
        return {
          ...prevState,
          dates
        };
    }
  }, {
    date,
    startDate,
    endDate,
    dates,
    calendarView: initialCalendarView,
    currentDate,
    currentYear
  });
  (0, _react.useEffect)(() => {
    if (mode === 'single') {
      const newDate = (date && (timePicker ? date : (0, _utils.getStartOfDay)(date))) ?? minDate;
      dispatch({
        type: _enums.CalendarActionKind.CHANGE_SELECTED_DATE,
        payload: {
          date: newDate
        }
      });
    } else if (mode === 'range') dispatch({
      type: _enums.CalendarActionKind.CHANGE_SELECTED_RANGE,
      payload: {
        startDate,
        endDate
      }
    });else if (mode === 'multiple') dispatch({
      type: _enums.CalendarActionKind.CHANGE_SELECTED_MULTIPLE,
      payload: {
        dates
      }
    });else if (mode === 'wheel') dispatch({
      type: _enums.CalendarActionKind.CHANGE_SELECTED_DATE,
      payload: {
        date
      }
    });
  }, [mode, date, startDate, endDate, dates, minDate, timePicker]);
  const setCalendarView = (0, _react.useCallback)(view => {
    dispatch({
      type: _enums.CalendarActionKind.SET_CALENDAR_VIEW,
      payload: view
    });
  }, []);
  const onSelectDate = (0, _react.useCallback)(datetime => {
    if (mode === 'single') {
      const newDate = timePicker ? datetime : (0, _utils.getStartOfDay)(datetime);
      dispatch({
        type: _enums.CalendarActionKind.CHANGE_CURRENT_DATE,
        payload: newDate
      });
      onChange === null || onChange === void 0 || onChange({
        date: newDate
      });
    } else if (mode === 'range') {
      const sd = state.startDate;
      const ed = state.endDate;
      let isStart = true;
      if (sd && !ed && (0, _utils.dateToUnix)(datetime) >= (0, _utils.dateToUnix)(sd)) isStart = false;
      const newDateRang = {
        startDate: isStart ? (0, _utils.getStartOfDay)(datetime) : sd,
        endDate: !isStart ? (0, _utils.getEndOfDay)(datetime) : undefined
      };
      dispatch({
        type: _enums.CalendarActionKind.CHANGE_SELECTED_RANGE,
        payload: newDateRang
      });
      onChange === null || onChange === void 0 || onChange(newDateRang);
    } else if (mode === 'multiple') {
      const safeDates = state.dates || [];
      const newDate = (0, _utils.getStartOfDay)(datetime);
      const exists = safeDates.some(ed => (0, _utils.areDatesOnSameDay)(ed, newDate));
      const newDates = exists ? safeDates.filter(ed => !(0, _utils.areDatesOnSameDay)(ed, newDate)) : [...safeDates, newDate];
      newDates.sort((a, b) => (0, _dayjs.default)(a).isAfter((0, _dayjs.default)(b)) ? 1 : -1);
      const newDatesObj = {
        dates: newDates,
        datePressed: newDate,
        change: exists ? 'removed' : 'added'
      };
      dispatch({
        type: _enums.CalendarActionKind.CHANGE_SELECTED_MULTIPLE,
        payload: newDatesObj
      });
      onChange === null || onChange === void 0 || onChange(newDatesObj);
    } else if (mode === 'wheel') {
      dispatch({
        type: _enums.CalendarActionKind.CHANGE_CURRENT_DATE,
        payload: datetime
      });
      onChange === null || onChange === void 0 || onChange({
        date: datetime
      });
    }
  }, [onChange, mode, timePicker, state.startDate, state.endDate, state.dates]);
  const onSelectMonth = (0, _react.useCallback)(month => {
    let newDate = (0, _utils.getDate)(state.currentDate).month(month);
    if (maxDate && newDate.isAfter(maxDate)) newDate = (0, _utils.getDate)(maxDate);
    if (minDate && newDate.isBefore(minDate)) newDate = (0, _utils.getDate)(minDate);
    dispatch({
      type: _enums.CalendarActionKind.CHANGE_CURRENT_DATE,
      payload: (0, _utils.getFormatted)(newDate)
    });
    dispatch({
      type: _enums.CalendarActionKind.SET_CALENDAR_VIEW,
      payload: 'day'
    });
    if (mode === 'single' || mode === 'wheel') onChange === null || onChange === void 0 || onChange({
      date: (0, _utils.getFormatted)(newDate)
    });
  }, [maxDate, minDate, mode, onChange, state.currentDate]);
  const onSelectYear = (0, _react.useCallback)(year => {
    let newDate = (0, _utils.getDate)(state.currentDate).year(year);
    if (maxDate && newDate.isAfter(maxDate)) newDate = (0, _utils.getDate)(maxDate);
    if (minDate && newDate.isBefore(minDate)) newDate = (0, _utils.getDate)(minDate);
    dispatch({
      type: _enums.CalendarActionKind.CHANGE_CURRENT_DATE,
      payload: (0, _utils.getFormatted)(newDate)
    });
    dispatch({
      type: _enums.CalendarActionKind.SET_CALENDAR_VIEW,
      payload: initialView
    });
    if (mode === 'single' || mode === 'wheel') onChange === null || onChange === void 0 || onChange({
      date: (0, _utils.getFormatted)(newDate)
    });
  }, [state.currentDate, maxDate, minDate, initialView, mode, onChange]);
  const onChangeMonth = (0, _react.useCallback)(month => {
    const newDate = (0, _utils.getDate)(state.currentDate).add(month, 'month');
    dispatch({
      type: _enums.CalendarActionKind.CHANGE_CURRENT_DATE,
      payload: (0, _utils.getFormatted)(newDate)
    });
  }, [state.currentDate]);
  const onChangeYear = (0, _react.useCallback)(year => {
    dispatch({
      type: _enums.CalendarActionKind.CHANGE_CURRENT_YEAR,
      payload: year
    });
  }, []);
  return /*#__PURE__*/React.createElement(_CalendarContext.default.Provider, {
    value: {
      ...state,
      locale,
      mode,
      displayFullDays,
      timePicker,
      minDate,
      maxDate,
      firstDayOfWeek: firstDay,
      height,
      theme: rest,
      columns,
      setCalendarView,
      onSelectDate,
      onSelectMonth,
      onSelectYear,
      onChangeMonth,
      onChangeYear
    }
  }, /*#__PURE__*/React.createElement(_Calendar.default, {
    buttonPrevIcon: buttonPrevIcon,
    buttonNextIcon: buttonNextIcon,
    height: height,
    containerStyle: containerStyle
  }));
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(DateTimePicker);
//# sourceMappingURL=DateTimePicker.js.map