zarm/lib/calendar/Month.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof3 = require("@babel/runtime/helpers/typeof");

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

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _bem = require("@zarm-design/bem");

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

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

var _configProvider = require("../config-provider");

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(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 && {}.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; }

var CalendarMonthView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var _globalLocal$Calendar;

  var dateRender = props.dateRender,
      min = props.min,
      max = props.max,
      disabledDate = props.disabledDate,
      onDateClick = props.onDateClick,
      dateMonth = props.dateMonth,
      value = props.value,
      mode = props.mode;

  var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
      prefixCls = _useContext.prefixCls,
      globalLocal = _useContext.locale;

  var weekStartsOn = globalLocal === null || globalLocal === void 0 ? void 0 : globalLocal.Calendar.weekStartsOn;
  var bem = (0, _bem.createBEM)('calendar', {
    prefixCls: prefixCls
  });
  var monthRef = (0, _react.useRef)();
  var isDisabled = (0, _react.useCallback)(function (date) {
    return (0, _dayjs.default)(date).isBefore((0, _dayjs.default)(min), 'day') || (0, _dayjs.default)(date).isAfter((0, _dayjs.default)(max), 'day') || typeof disabledDate === 'function' && disabledDate(date);
  }, [min, max, disabledDate]);
  var isSelected = (0, _react.useCallback)(function (date) {
    var currentDate = (0, _dayjs.default)(date);
    return mode === 'single' ? value[0] && currentDate.isSame((0, _dayjs.default)(value[0]), 'day') : value.some(function (item) {
      return item ? currentDate.isSame((0, _dayjs.default)(item), 'day') : false;
    });
  }, [mode, value]);
  var range = (0, _react.useCallback)(function (date) {
    if (mode !== 'range') {
      return '';
    }

    var currentDate = (0, _dayjs.default)(date);
    var start = value[0];
    var end = value[value.length - 1];

    if (currentDate.isAfter((0, _dayjs.default)(start)) && currentDate.isBefore((0, _dayjs.default)(end))) {
      return 'range';
    }

    if (value.length > 1 && !(0, _dayjs.default)(start).isSame((0, _dayjs.default)(end))) {
      if (currentDate.isSame((0, _dayjs.default)(start), 'day') && start) {
        return 'start';
      }

      if (currentDate.isSame((0, _dayjs.default)(end), 'day') && end) {
        return 'end';
      }
    }

    return '';
  }, [mode, value]);
  var hanlerDateClick = (0, _react.useCallback)(function (date) {
    if (!isDisabled(date) && typeof onDateClick === 'function') {
      onDateClick(date);
    }
  }, [onDateClick]);

  var renderDay = function renderDay(day, year, month, firstDay) {
    var date = new Date(year, month, day);
    var dayjsDate = (0, _dayjs.default)(date);
    var isToday = (0, _dayjs.default)().isSame(dayjsDate, 'day');
    var text = '';

    if (typeof dateRender === 'function') {
      text = dateRender(date, value);

      if ((0, _typeof2.default)(text) === 'object' && ! /*#__PURE__*/(0, _react.isValidElement)(text)) {
        console.warn('dateRender函数返回数据类型错误，请返回基本数据类型或者reactNode');
        text = '';
      }
    }

    var style = day === 1 ? {
      marginLeft: "".concat(14.28571 * firstDay, "%")
    } : {};
    var rangeStatus = range(date);
    var className = bem('day', [{
      disabled: isDisabled(date),
      today: isToday,
      selected: isSelected(date) && rangeStatus !== 'range',
      range: rangeStatus === 'range',
      d6: (day + firstDay) % 7 === 0 && !!rangeStatus,
      d7: (day + firstDay) % 7 === 1 && !!rangeStatus,
      start: rangeStatus === 'start',
      end: rangeStatus === 'end',
      last: rangeStatus === 'end' && (day === 1 || (day + firstDay) % 7 === 1),
      first: rangeStatus === 'start' && (dayjsDate.daysInMonth() === day || (day + firstDay) % 7 === 0)
    }]);
    return /*#__PURE__*/_react.default.createElement("li", {
      key: "".concat(year, "-").concat(month, "-").concat(day),
      className: className,
      style: style,
      onClick: function onClick() {
        return hanlerDateClick(date);
      }
    }, text && /*#__PURE__*/_react.default.createElement("div", {
      className: bem('day__content')
    }, text) || '');
  };

  var renderDays = function renderDays(year, month) {
    var date = (0, _dayjs.default)().year(year).month(month).date(1);
    var daysInMonth = date.daysInMonth();
    var firstDay = date.day();

    if (weekStartsOn !== 'Sunday') {
      firstDay = firstDay === 0 ? firstDay + 6 : firstDay - 1;
    }

    var days = [];
    var i = 1;

    while (i <= daysInMonth) {
      days.push(renderDay(i, year, month, firstDay));
      i += 1;
    }

    return days;
  };

  (0, _react.useImperativeHandle)(ref, function () {
    return {
      el: function el() {
        return monthRef.current;
      }
    };
  });
  var year = dateMonth.getFullYear();
  var month = dateMonth.getMonth();
  var monthKey = "".concat(year, "-").concat(month);
  var title = (0, _dayjs.default)().year(year).month(month).format(globalLocal === null || globalLocal === void 0 ? void 0 : (_globalLocal$Calendar = globalLocal.Calendar) === null || _globalLocal$Calendar === void 0 ? void 0 : _globalLocal$Calendar.yearMonthFormat);
  return /*#__PURE__*/_react.default.createElement("div", {
    key: monthKey,
    className: bem('month__wrapper'),
    ref: monthRef,
    title: title
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: bem('month')
  }, title), /*#__PURE__*/_react.default.createElement("ul", null, renderDays(year, month)));
});
CalendarMonthView.defaultProps = {
  value: [],
  dateMonth: new Date(),
  min: new Date(),
  max: new Date(),
  dateRender: function dateRender(date) {
    return date.getDate();
  },
  disabledDate: function disabledDate() {
    return false;
  }
};

var _default = /*#__PURE__*/_react.default.memo(CalendarMonthView);

exports.default = _default;