@txdfe/at/es/calendar/range-calendar.js

一个设计体系组件库

var _excluded = ["prefix", "rtl", "dateCellRender", "monthCellRender", "yearCellRender", "className", "format", "locale", "showOtherMonth", "disabledDate"];
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import moment from 'moment';
import ConfigProvider from '../config-provider';
import nextLocale from '../locale/zh-cn';
import { obj, func } from '../util';
import RangePanelHeader from './head/range-panel-header';
import MonthPanelHeader from './head/month-panel-header';
import YearPanelHeader from './head/year-panel-header';
import DateTable from './table/date-table';
import MonthTable from './table/month-table';
import YearTable from './table/year-table';
import { checkMomentObj, formatDateValue, getVisibleMonth, isSameYearMonth, CALENDAR_MODES, CALENDAR_MODE_DATE, CALENDAR_MODE_MONTH, CALENDAR_MODE_YEAR, getLocaleData } from './utils';
var RangeCalendar = /*#__PURE__*/function (_React$Component) {
  function RangeCalendar(props, context) {
    var _this;
    _classCallCheck(this, RangeCalendar);
    _this = _callSuper(this, RangeCalendar, [props, context]);
    _defineProperty(_this, "onSelectCell", function (date, nextMode) {
      // this.changeVisibleMonth(date, 'cellClick');

      if (_this.state.mode === CALENDAR_MODE_DATE) {
        _this.props.onSelect(date);
      }
      _this.changeMode(nextMode);
    });
    _defineProperty(_this, "changeMode", function (mode, activePanel) {
      if (typeof mode === 'string' && mode !== _this.state.mode) {
        _this.setState({
          mode: mode
        });
      }
      if (activePanel && activePanel !== _this.state.activePanel) {
        _this.setState({
          activePanel: activePanel
        });
      }
    });
    _defineProperty(_this, "changeVisibleMonth", function (date, reason) {
      if (!isSameYearMonth(date, _this.state.startVisibleMonth)) {
        _this.setState({
          startVisibleMonth: date
        });
        _this.props.onVisibleMonthChange(date, reason);
      }
    });
    /**
     * 根据日期偏移量设置当前展示的月份
     * @param {Number} offset 日期偏移量
     * @param {String} type 日期偏移类型 days, months, years
     */
    _defineProperty(_this, "changeVisibleMonthByOffset", function (offset, type) {
      var offsetDate = _this.state.startVisibleMonth.clone().add(offset, type);
      _this.changeVisibleMonth(offsetDate, 'buttonClick');
    });
    _defineProperty(_this, "goPrevDecade", function () {
      _this.changeVisibleMonthByOffset(-10, 'years');
    });
    _defineProperty(_this, "goNextDecade", function () {
      _this.changeVisibleMonthByOffset(10, 'years');
    });
    _defineProperty(_this, "goPrevYear", function () {
      _this.changeVisibleMonthByOffset(-1, 'years');
    });
    _defineProperty(_this, "goNextYear", function () {
      _this.changeVisibleMonthByOffset(1, 'years');
    });
    _defineProperty(_this, "goPrevMonth", function () {
      _this.changeVisibleMonthByOffset(-1, 'months');
    });
    _defineProperty(_this, "goNextMonth", function () {
      _this.changeVisibleMonthByOffset(1, 'months');
    });
    var startValue = formatDateValue(props.startValue || props.defaultStartValue);
    var endValue = formatDateValue(props.endValue || props.defaultEndValue);
    var visibleMonth = getVisibleMonth(props.defaultVisibleMonth, startValue);
    _this.state = {
      startValue: startValue,
      endValue: endValue,
      mode: props.mode,
      startVisibleMonth: visibleMonth,
      activePanel: undefined
    };
    _this.today = moment();
    return _this;
  }
  _inherits(RangeCalendar, _React$Component);
  return _createClass(RangeCalendar, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if ('startValue' in nextProps) {
        var startValue = formatDateValue(nextProps.startValue);
        this.setState({
          startValue: startValue
        });
        if (startValue && !startValue.isSame(this.state.startValue, 'day')) {
          this.setState({
            startVisibleMonth: startValue
          });
        }
      }
      if ('endValue' in nextProps) {
        var endValue = formatDateValue(nextProps.endValue);
        this.setState({
          endValue: endValue
        });
      }
      if ('mode' in nextProps) {
        this.setState({
          mode: nextProps.mode
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
        prefix = _this$props.prefix,
        rtl = _this$props.rtl,
        dateCellRender = _this$props.dateCellRender,
        monthCellRender = _this$props.monthCellRender,
        yearCellRender = _this$props.yearCellRender,
        className = _this$props.className,
        format = _this$props.format,
        locale = _this$props.locale,
        showOtherMonth = _this$props.showOtherMonth,
        disabledDate = _this$props.disabledDate,
        others = _objectWithoutProperties(_this$props, _excluded);
      var _this$state = this.state,
        startValue = _this$state.startValue,
        endValue = _this$state.endValue,
        mode = _this$state.mode,
        startVisibleMonth = _this$state.startVisibleMonth,
        activePanel = _this$state.activePanel;

      // reset moment locale
      if (locale.momentLocale) {
        startValue && startValue.locale(locale.momentLocale);
        endValue && endValue.locale(locale.momentLocale);
        startVisibleMonth.locale(locale.momentLocale);
      }
      if (rtl) {
        others.dir = 'rtl';
      }
      var localeData = getLocaleData(locale.format || {}, startVisibleMonth.localeData());
      var endVisibleMonth = startVisibleMonth.clone().add(1, 'months');
      var headerProps = {
        prefix: prefix,
        rtl: rtl,
        mode: mode,
        locale: locale,
        momentLocale: localeData,
        startVisibleMonth: startVisibleMonth,
        endVisibleMonth: endVisibleMonth,
        changeMode: this.changeMode
      };
      var tableProps = {
        prefix: prefix,
        value: startValue,
        startValue: startValue,
        endValue: endValue,
        mode: mode,
        locale: locale,
        momentLocale: localeData,
        showOtherMonth: showOtherMonth,
        today: this.today,
        disabledDate: disabledDate,
        dateCellRender: dateCellRender,
        monthCellRender: monthCellRender,
        yearCellRender: yearCellRender,
        changeMode: this.changeMode,
        changeVisibleMonth: this.changeVisibleMonth
      };
      var visibleMonths = {
        start: startVisibleMonth,
        end: endVisibleMonth
      };
      var visibleMonth = visibleMonths[activePanel];
      var header;
      var table;
      switch (mode) {
        case CALENDAR_MODE_DATE:
          {
            table = [/*#__PURE__*/React.createElement("div", {
              className: "".concat(prefix, "calendar-body-left"),
              key: "left-panel"
            }, /*#__PURE__*/React.createElement(DateTable, _extends({
              format: format
            }, tableProps, {
              visibleMonth: startVisibleMonth,
              onSelectDate: this.onSelectCell
            }))), /*#__PURE__*/React.createElement("div", {
              className: "".concat(prefix, "calendar-body-right"),
              key: "right-panel"
            }, /*#__PURE__*/React.createElement(DateTable, _extends({
              format: format
            }, tableProps, {
              visibleMonth: endVisibleMonth,
              onSelectDate: this.onSelectCell
            })))];
            header = /*#__PURE__*/React.createElement(RangePanelHeader, _extends({}, headerProps, {
              goPrevYear: this.goPrevYear,
              goPrevMonth: this.goPrevMonth,
              goNextYear: this.goNextYear,
              goNextMonth: this.goNextMonth
            }));
            break;
          }
        case CALENDAR_MODE_MONTH:
          {
            table = /*#__PURE__*/React.createElement(MonthTable, _extends({}, tableProps, {
              visibleMonth: visibleMonth,
              onSelectMonth: this.onSelectCell
            }));
            header = /*#__PURE__*/React.createElement(MonthPanelHeader, _extends({}, headerProps, {
              visibleMonth: visibleMonth,
              goPrevYear: this.goPrevYear,
              goNextYear: this.goNextYear
            }));
            break;
          }
        case CALENDAR_MODE_YEAR:
          {
            table = /*#__PURE__*/React.createElement(YearTable, _extends({}, tableProps, {
              rtl: rtl,
              visibleMonth: visibleMonth,
              onSelectYear: this.onSelectCell,
              goPrevDecade: this.goPrevDecade,
              goNextDecade: this.goNextDecade
            }));
            header = /*#__PURE__*/React.createElement(YearPanelHeader, _extends({}, headerProps, {
              visibleMonth: visibleMonth,
              goPrevDecade: this.goPrevDecade,
              goNextDecade: this.goNextDecade
            }));
            break;
          }
      }
      var classNames = classnames(_defineProperty(_defineProperty({}, "".concat(prefix, "calendar"), true), "".concat(prefix, "calendar-range"), true), className);
      return /*#__PURE__*/React.createElement("div", _extends({}, obj.pickOthers(RangeCalendar.propTypes, others), {
        className: classNames
      }), header, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "calendar-body")
      }, table));
    }
  }]);
}(React.Component);
_defineProperty(RangeCalendar, "propTypes", {
  /**
   * 样式前缀
   */
  prefix: PropTypes.string,
  rtl: PropTypes.bool,
  /**
   * 默认的开始日期
   */
  defaultStartValue: checkMomentObj,
  /**
   * 默认的结束日期
   */
  defaultEndValue: checkMomentObj,
  /**
   * 开始日期（moment 对象）
   */
  startValue: checkMomentObj,
  /**
   * 结束日期（moment 对象）
   */
  endValue: checkMomentObj,
  // 面板模式
  mode: PropTypes.oneOf(CALENDAR_MODES),
  // 日期值的格式（用于日期title显示的格式）
  format: PropTypes.string,
  /**
   * 是否显示非本月的日期
   */
  showOtherMonth: PropTypes.bool,
  /**
   * 模板展示的月份（起始月份）
   */
  defaultVisibleMonth: PropTypes.func,
  /**
   * 展现的月份变化时的回调
   * @param {Object} value 显示的月份 (moment 对象)
   * @param {String} reason 触发月份改变原因
   */
  onVisibleMonthChange: PropTypes.func,
  /**
   * 不可选择的日期
   * @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
   * @param {String} view 当前视图类型，year: 年， month: 月, date: 日
   * @returns {Boolean}
   */
  disabledDate: PropTypes.func,
  /**
   * 选择日期单元格时的回调
   * @param {Object} value 对应的日期值 (moment 对象)
   */
  onSelect: PropTypes.func,
  /**
   * 自定义日期单元格渲染
   */
  dateCellRender: PropTypes.func,
  /**
   * 自定义月份渲染函数
   * @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
   * @returns {ReactNode}
   */
  monthCellRender: PropTypes.func,
  yearCellRender: PropTypes.func,
  // 兼容 0.x yearCellRender
  locale: PropTypes.object,
  className: PropTypes.string
});
_defineProperty(RangeCalendar, "defaultProps", {
  prefix: 'next-',
  rtl: false,
  mode: CALENDAR_MODE_DATE,
  format: 'YYYY-MM-DD',
  dateCellRender: function dateCellRender(value) {
    return value.date();
  },
  onSelect: func.noop,
  onVisibleMonthChange: func.noop,
  locale: nextLocale.Calendar,
  showOtherMonth: false
});
export default ConfigProvider.config(RangeCalendar, {
  componentName: 'Calendar'
});