@douyinfe/semi-ui 2.1.0-beta.2 → 2.1.0-next.2

package/lib/cjs/datePicker/monthsGrid.js

@@ -0,0 +1,702 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _stubFalse2 = _interopRequireDefault(require("lodash/stubFalse"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _dateFns = require("date-fns");
+
+var _monthsGridFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/datePicker/monthsGridFoundation"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/datePicker/constants");
+
+var _parser = require("@douyinfe/semi-foundation/lib/cjs/datePicker/_utils/parser");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _navigation = _interopRequireDefault(require("./navigation"));
+
+var _month = _interopRequireDefault(require("./month"));
+
+var _Combobox = _interopRequireDefault(require("../timePicker/Combobox"));
+
+var _yearAndMonth = _interopRequireDefault(require("./yearAndMonth"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _getDefaultFormatToken = require("@douyinfe/semi-foundation/lib/cjs/datePicker/_utils/getDefaultFormatToken");
+
+/* eslint-disable react/no-did-update-set-state */
+
+/* eslint-disable max-len */
+
+/* eslint-disable no-nested-ternary */
+const prefixCls = _constants.cssClasses.PREFIX;
+
+class MonthsGrid extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.cacheRefCurrent = (key, current) => {
+      if (typeof key === 'string' && key.length) {
+        this.adapter.setCache(key, current);
+      }
+    };
+
+    this.leftIsYearOrTime = state => {
+      const {
+        monthLeft
+      } = state || this.state;
+
+      if (monthLeft && (monthLeft.isTimePickerOpen || monthLeft.isYearPickerOpen)) {
+        return true;
+      } else {
+        return false;
+      }
+    };
+
+    this.rightIsYearOrTime = state => {
+      const {
+        monthRight
+      } = state || this.state;
+
+      if (monthRight && (monthRight.isTimePickerOpen || monthRight.isYearPickerOpen)) {
+        return true;
+      } else {
+        return false;
+      }
+    };
+    /**
+     * Calculate the height of the scrolling list, if the animation is not over, return 0
+     */
+
+
+    this.calcScrollListHeight = () => {
+      const {
+        motionEnd
+      } = this.props;
+      let wrapLeft, wrapRight, switchLeft, switchRight;
+
+      if (motionEnd) {
+        wrapLeft = this.adapter.getCache("wrap-".concat(_constants.strings.PANEL_TYPE_LEFT));
+        wrapRight = this.adapter.getCache("wrap-".concat(_constants.strings.PANEL_TYPE_RIGHT));
+        switchLeft = this.adapter.getCache("switch-".concat(_constants.strings.PANEL_TYPE_LEFT));
+        switchRight = this.adapter.getCache("switch-".concat(_constants.strings.PANEL_TYPE_RIGHT));
+      }
+
+      const leftRect = wrapLeft && wrapLeft.getBoundingClientRect();
+      const rightRect = wrapRight && wrapRight.getBoundingClientRect();
+      let leftHeight = leftRect && leftRect.height || 0;
+      let rightHeight = rightRect && rightRect.height || 0;
+
+      if (switchLeft) {
+        leftHeight += switchLeft.getBoundingClientRect().height;
+      }
+
+      if (switchRight) {
+        rightHeight += switchRight.getBoundingClientRect().height;
+      }
+
+      return Math.max(leftHeight, rightHeight);
+    };
+
+    this.handleWeeksRowNumChange = (weeksRowNum, panelType) => {
+      const isLeft = panelType === _constants.strings.PANEL_TYPE_RIGHT;
+      const isRight = panelType === _constants.strings.PANEL_TYPE_RIGHT;
+      const allIsYearOrTime = this.leftIsYearOrTime() && this.rightIsYearOrTime();
+
+      if (this.foundation.isRangeType() && !allIsYearOrTime) {
+        const states = {
+          weeksRowNum,
+          currentPanelHeight: this.calcScrollListHeight()
+        };
+        this.setState(states, () => {
+          if (this.leftIsYearOrTime() && isRight || this.rightIsYearOrTime() && isLeft) {
+            this.reselect();
+          }
+        });
+      }
+    };
+
+    this.reselect = () => {
+      const refKeys = ["timepicker-".concat(_constants.strings.PANEL_TYPE_LEFT), "timepicker-".concat(_constants.strings.PANEL_TYPE_RIGHT), "yam-".concat(_constants.strings.PANEL_TYPE_LEFT), "yam-".concat(_constants.strings.PANEL_TYPE_RIGHT)];
+      (0, _forEach.default)(refKeys).call(refKeys, key => {
+        const current = this.adapter.getCache(key);
+
+        if (current && typeof current.reselect === 'function') {
+          current.reselect();
+        }
+      });
+    };
+
+    let nowDate = (0, _isArray.default)(props.defaultPickerValue) ? props.defaultPickerValue[0] : props.defaultPickerValue;
+    const validFormat = props.format || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(props.type);
+
+    if (!nowDate) {
+      nowDate = new Date();
+    } else {
+      nowDate = (0, _parser.compatiableParse)(nowDate, validFormat, undefined, props.dateFnsLocale);
+    }
+
+    let nextDate = (0, _isArray.default)(props.defaultPickerValue) ? props.defaultPickerValue[1] : undefined;
+
+    if (!nextDate) {
+      nextDate = (0, _dateFns.addMonths)(nowDate, 1);
+    } else {
+      nextDate = (0, _parser.compatiableParse)(nextDate, validFormat, undefined, props.dateFnsLocale);
+    }
+
+    const dateState = {
+      // Direct use of full date string storage, mainly considering the month rendering comparison to save a conversion
+      // The selected value for single or multiple selection, full date string, eg. {'2019-10-01', '2019-10-02'}
+      selected: new _set.default()
+    };
+    const rangeState = {
+      monthLeft: {
+        pickerDate: nowDate,
+        showDate: nowDate,
+        isTimePickerOpen: false,
+        isYearPickerOpen: false
+      },
+      monthRight: {
+        pickerDate: nextDate,
+        showDate: nextDate,
+        isTimePickerOpen: false,
+        isYearPickerOpen: false
+      },
+      maxWeekNum: 0,
+      hoverDay: '',
+      rangeStart: props.rangeStart,
+      rangeEnd: '',
+      currentPanelHeight: 0,
+      offsetRangeStart: '',
+      offsetRangeEnd: ''
+    };
+    this.state = (0, _assign.default)((0, _assign.default)({}, dateState), rangeState);
+    this.foundation = new _monthsGridFoundation.default(this.adapter);
+  }
+
+  get dateAdapter() {
+    return {
+      updateDaySelected: selected => this.setState({
+        selected
+      })
+    };
+  }
+
+  get rangeAdapter() {
+    return {
+      setRangeStart: rangeStart => this.setState({
+        rangeStart
+      }),
+      setRangeEnd: rangeEnd => this.setState({
+        rangeEnd
+      }),
+      setHoverDay: hoverDay => this.setState({
+        hoverDay
+      }),
+      setWeeksHeight: maxWeekNum => this.setState({
+        maxWeekNum
+      }),
+      setOffsetRangeStart: offsetRangeStart => this.setState({
+        offsetRangeStart
+      }),
+      setOffsetRangeEnd: offsetRangeEnd => this.setState({
+        offsetRangeEnd
+      })
+    };
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, super.adapter), this.dateAdapter), this.rangeAdapter), {
+      updateMonthOnLeft: v => this.setState({
+        monthLeft: v
+      }),
+      updateMonthOnRight: v => this.setState({
+        monthRight: v
+      }),
+      notifySelectedChange: (value, options) => this.props.onChange(value, options),
+      notifyMaxLimit: v => this.props.onMaxSelect(v),
+      notifyPanelChange: (date, dateString) => this.props.onPanelChange(date, dateString),
+      setRangeInputFocus: rangeInputFocus => this.props.setRangeInputFocus(rangeInputFocus),
+      isAnotherPanelHasOpened: currentRangeInput => this.props.isAnotherPanelHasOpened(currentRangeInput)
+    });
+  }
+
+  componentDidMount() {
+    super.componentDidMount();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      defaultValue,
+      defaultPickerValue,
+      motionEnd
+    } = this.props;
+
+    if (prevProps.defaultValue !== defaultValue) {
+      this.foundation.updateSelectedFromProps(defaultValue, false);
+    }
+
+    if (prevProps.defaultPickerValue !== defaultPickerValue) {
+      this.foundation.initDefaultPickerValue();
+    }
+
+    if (prevProps.motionEnd !== motionEnd && motionEnd === true) {
+      if (this.foundation.isRangeType()) {
+        const currentPanelHeight = this.calcScrollListHeight();
+        this.setState({
+          currentPanelHeight
+        });
+      }
+    }
+
+    const isRange = this.foundation.isRangeType();
+
+    if (isRange) {
+      /**
+       * we have to add these code to ensure that scroll list's selector places center
+       */
+      const prevAll = this.leftIsYearOrTime(prevState) && this.rightIsYearOrTime(prevState);
+      const prevSome = this.leftIsYearOrTime(prevState) && !this.rightIsYearOrTime(prevState) || !this.leftIsYearOrTime(prevState) && this.rightIsYearOrTime(prevState);
+      const nowAll = this.leftIsYearOrTime() && this.rightIsYearOrTime();
+      const nowSome = this.leftIsYearOrTime() && !this.rightIsYearOrTime() || !this.leftIsYearOrTime() && this.rightIsYearOrTime();
+      const prevAllToSome = prevAll && nowSome;
+      const prevSomeToAll = prevSome && nowAll;
+
+      if (prevSomeToAll) {
+        this.setState({
+          currentPanelHeight: this.calcScrollListHeight()
+        }, this.reselect);
+      } else if (prevAllToSome) {
+        this.reselect();
+      }
+    }
+  }
+
+  renderPanel(month, panelType) {
+    var _context;
+
+    let monthCls = (0, _classnames.default)((0, _concat.default)(_context = "".concat(prefixCls, "-month-grid-")).call(_context, panelType));
+    const {
+      monthLeft,
+      monthRight,
+      currentPanelHeight
+    } = this.state;
+    const panelDetail = panelType === _constants.strings.PANEL_TYPE_RIGHT ? monthRight : monthLeft;
+    const {
+      isTimePickerOpen,
+      isYearPickerOpen
+    } = panelDetail;
+    const panelContent = this.renderMonth(month, panelType);
+    const yearAndMonthLayer = isYearPickerOpen ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-yam")
+    }, this.renderYearAndMonth(panelType, panelDetail)) : null;
+    const timePickerLayer = isTimePickerOpen ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-tpk")
+    }, this.renderTimePicker(panelType, panelDetail)) : null;
+    const style = {};
+    const wrapLeft = this.adapter.getCache("wrap-".concat(_constants.strings.PANEL_TYPE_LEFT));
+    const wrapRight = this.adapter.getCache("wrap-".concat(_constants.strings.PANEL_TYPE_RIGHT));
+    const wrap = panelType === _constants.strings.PANEL_TYPE_RIGHT ? wrapRight : wrapLeft;
+
+    if (this.foundation.isRangeType()) {
+      if (isYearPickerOpen || isTimePickerOpen) {
+        style.minWidth = wrap.getBoundingClientRect().width;
+      }
+
+      if (this.leftIsYearOrTime() && this.rightIsYearOrTime()) {
+        /**
+         * left和right同时为tpk时，panel会有一个minHeight
+         * 如果缓存的currentPanelHeight为0，则需要计算滚动列表的高度
+         * 如果有缓存的值则使用currentPanelHeight（若此高度<实际值，则会影响ScrollList中渲染列表的循环次数）
+         * 详见 packages/semi-foundation/scrollList/itemFoundation.js initWheelList函数
+         *
+         * When left and right are tpk at the same time, the panel will have a minHeight
+         * If the cached currentPanelHeight is 0, you need to calculate the height of the scrolling list
+         * If there is a cached value, use currentPanelHeight (if this height is less than the actual value, it will affect the number of cycles in the ScrollList to render the list)
+         * See packages/semi-foundation/scrollList/itemF oundation.js initWheelList function
+         */
+        style.minHeight = currentPanelHeight ? currentPanelHeight : this.calcScrollListHeight();
+      }
+    } else if (this.props.type !== 'year' && this.props.type !== 'month' && (isTimePickerOpen || isYearPickerOpen)) {
+      monthCls = (0, _classnames.default)(monthCls, "".concat(prefixCls, "-yam-showing"));
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: monthCls,
+      key: panelType,
+      style: style
+    }, yearAndMonthLayer, timePickerLayer, this.foundation.isRangeType() ? panelContent : isYearPickerOpen || isTimePickerOpen ? null : panelContent, this.renderSwitch(panelType));
+  }
+
+  showYearPicker(panelType, e) {
+    // e.stopPropagation();
+    // When switching to the year and month, the e.target at this time is generated from Navigation, and the Navigation module will be removed from the DOM after switching
+    // If you do not prevent the event from spreading to index.jsx, panel.contain (e.target) in clickOutSide will call closePanel because there is no Nav in the Panel and think this click is clickOutSide
+    // Cause the entire component pop-up window to be closed by mistake
+    // console.log(this.navRef.current.clientHeight, this.monthRef.current.clientHeight);
+    // this.wrapRef.current.style.height = this.wrapRef.current.clientHeight + 'px';
+    // this.wrapRef.current.style.overflow = 'hidden';
+    e.nativeEvent.stopImmediatePropagation();
+    this.foundation.showYearPicker(panelType);
+  }
+
+  renderMonth(month, panelType) {
+    const {
+      selected,
+      rangeStart,
+      rangeEnd,
+      hoverDay,
+      maxWeekNum,
+      offsetRangeStart,
+      offsetRangeEnd
+    } = this.state;
+    const {
+      weekStartsOn,
+      disabledDate,
+      locale,
+      localeCode,
+      renderDate,
+      renderFullDate,
+      startDateOffset,
+      endDateOffset,
+      density,
+      rangeInputFocus,
+      syncSwitchMonth
+    } = this.props;
+    let monthText = ''; // i18n monthText
+
+    if (month) {
+      // Get the absolute value of the year and month
+      const yearNumber = month ? (0, _dateFns.format)(month, 'yyyy') : '';
+      const monthNumber = month ? (0, _dateFns.format)(month, 'L') : ''; // Display the month as the corresponding language text
+
+      const mText = locale.months[monthNumber];
+      const monthFormatToken = locale.monthText; // Display the year and month in a specific language format order
+
+      monthText = monthFormatToken.replace('${year}', yearNumber).replace('${month}', mText);
+    }
+
+    let style = {};
+    const detail = panelType === _constants.strings.PANEL_TYPE_RIGHT ? this.state.monthRight : this.state.monthLeft; // Whether to select type for range
+
+    const isRangeType = this.foundation.isRangeType(); // Whether to switch synchronously for two panels
+
+    const shouldBimonthSwitch = isRangeType && syncSwitchMonth;
+
+    if (isRangeType && detail && (detail.isYearPickerOpen || detail.isTimePickerOpen)) {
+      style = {
+        visibility: 'hidden',
+        position: 'absolute',
+        pointerEvents: 'none'
+      };
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: current => this.cacheRefCurrent("wrap-".concat(panelType), current),
+      style: style
+    }, /*#__PURE__*/_react.default.createElement(_navigation.default, {
+      forwardRef: current => this.cacheRefCurrent("nav-".concat(panelType), current),
+      monthText: monthText,
+      density: density,
+      onMonthClick: e => this.showYearPicker(panelType, e),
+      onPrevMonth: () => this.foundation.prevMonth(panelType),
+      onNextMonth: () => this.foundation.nextMonth(panelType),
+      onNextYear: () => this.foundation.nextYear(panelType),
+      onPrevYear: () => this.foundation.prevYear(panelType),
+      shouldBimonthSwitch: shouldBimonthSwitch,
+      panelType: panelType
+    }), /*#__PURE__*/_react.default.createElement(_month.default, {
+      locale: locale,
+      localeCode: localeCode,
+      forwardRef: current => this.cacheRefCurrent("month-".concat(panelType), current),
+      disabledDate: disabledDate,
+      weekStartsOn: weekStartsOn,
+      month: month,
+      selected: selected,
+      rangeStart: rangeStart,
+      rangeEnd: rangeEnd,
+      rangeInputFocus: rangeInputFocus,
+      offsetRangeStart: offsetRangeStart,
+      offsetRangeEnd: offsetRangeEnd,
+      hoverDay: hoverDay,
+      weeksRowNum: maxWeekNum,
+      renderDate: renderDate,
+      renderFullDate: renderFullDate,
+      onDayClick: day => this.foundation.handleDayClick(day, panelType),
+      onDayHover: day => this.foundation.handleDayHover(day, panelType),
+      onWeeksRowNumChange: weeksRowNum => this.handleWeeksRowNumChange(weeksRowNum, panelType),
+      startDateOffset: startDateOffset,
+      endDateOffset: endDateOffset,
+      focusRecordsRef: this.props.focusRecordsRef
+    }));
+  }
+
+  renderTimePicker(panelType, panelDetail) {
+    const {
+      type,
+      locale,
+      format,
+      hideDisabledOptions,
+      timePickerOpts,
+      dateFnsLocale
+    } = this.props;
+    const {
+      pickerDate
+    } = panelDetail;
+    const timePanelCls = (0, _classnames.default)("".concat(prefixCls, "-time"));
+    const restProps = (0, _assign.default)((0, _assign.default)({}, timePickerOpts), {
+      hideDisabledOptions
+    });
+    const disabledOptions = this.foundation.calcDisabledTime(panelType);
+
+    if (disabledOptions) {
+      var _context2;
+
+      (0, _forEach.default)(_context2 = ['disabledHours', 'disabledMinutes', 'disabledSeconds']).call(_context2, key => {
+        if (disabledOptions[key]) {
+          restProps[key] = disabledOptions[key];
+        }
+      });
+    }
+
+    const {
+      rangeStart,
+      rangeEnd
+    } = this.state;
+    const dateFormat = this.foundation.getValidDateFormat();
+    let startDate, endDate;
+
+    if (type === 'dateTimeRange' && rangeStart && rangeEnd && (0, _dateFns.isSameDay)(startDate = (0, _parser.compatiableParse)(rangeStart, dateFormat, undefined, dateFnsLocale), endDate = (0, _parser.compatiableParse)(rangeEnd, dateFormat, undefined, dateFnsLocale))) {
+      if (panelType === _constants.strings.PANEL_TYPE_RIGHT) {
+        rangeStart && (restProps.startDate = startDate);
+      } else {
+        rangeEnd && (restProps.endDate = endDate);
+      }
+    } // i18n placeholder
+
+
+    const placeholder = locale.selectTime;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: timePanelCls
+    }, /*#__PURE__*/_react.default.createElement(_Combobox.default, (0, _assign.default)({
+      ref: current => this.cacheRefCurrent("timepicker-".concat(panelType), current),
+      panelHeader: placeholder,
+      format: format || _constants.strings.FORMAT_TIME_PICKER,
+      timeStampValue: pickerDate,
+      onChange: newTime => this.foundation.handleTimeChange(newTime, panelType)
+    }, restProps)));
+  }
+
+  renderYearAndMonth(panelType, panelDetail) {
+    const {
+      pickerDate
+    } = panelDetail;
+    const {
+      locale,
+      localeCode,
+      density
+    } = this.props;
+    const y = pickerDate.getFullYear();
+    const m = pickerDate.getMonth() + 1;
+    return /*#__PURE__*/_react.default.createElement(_yearAndMonth.default, {
+      ref: current => this.cacheRefCurrent("yam-".concat(panelType), current),
+      locale: locale,
+      localeCode: localeCode,
+      currentYear: y,
+      currentMonth: m,
+      onSelect: item => this.foundation.toYearMonth(panelType, new Date(item.currentYear, item.currentMonth - 1)),
+      onBackToMain: () => {
+        this.foundation.showDatePanel(panelType);
+        const wrapCurrent = this.adapter.getCache("wrap-".concat(panelType));
+
+        if (wrapCurrent) {
+          wrapCurrent.style.height = 'auto';
+        }
+      },
+      density: density
+    });
+  }
+
+  renderSwitch(panelType) {
+    var _context3;
+
+    const {
+      rangeStart,
+      rangeEnd,
+      monthLeft,
+      monthRight
+    } = this.state;
+    const {
+      type,
+      locale,
+      disabledTimePicker,
+      density,
+      dateFnsLocale
+    } = this.props; // Type: date, dateRange, year, month, no rendering required
+
+    if (!(0, _includes.default)(type).call(type, 'Time')) {
+      return null;
+    } // switch year/month & time
+
+
+    let panelDetail, dateText; // i18n
+
+    const {
+      FORMAT_SWITCH_DATE
+    } = locale.localeFormatToken; // Timepicker format is constant and does not change with language
+    // const FORMAT_TIME_PICKER = strings.FORMAT_TIME_PICKER;
+
+    const formatTimePicker = this.foundation.getValidTimeFormat();
+    const dateFormat = this.foundation.getValidDateFormat();
+
+    if (panelType === _constants.strings.PANEL_TYPE_LEFT) {
+      panelDetail = monthLeft;
+      dateText = rangeStart ? (0, _dateFns.format)((0, _parser.compatiableParse)(rangeStart, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
+    } else {
+      panelDetail = monthRight;
+      dateText = rangeEnd ? (0, _dateFns.format)((0, _parser.compatiableParse)(rangeEnd, dateFormat, undefined, dateFnsLocale), FORMAT_SWITCH_DATE) : '';
+    }
+
+    const {
+      isTimePickerOpen,
+      showDate
+    } = panelDetail;
+    const monthText = showDate ? (0, _dateFns.format)(showDate, FORMAT_SWITCH_DATE) : '';
+    const timeText = showDate ? (0, _dateFns.format)(showDate, formatTimePicker) : '';
+    const showSwithIcon = (0, _includes.default)(_context3 = ['default']).call(_context3, density);
+    const switchCls = (0, _classnames.default)("".concat(prefixCls, "-switch"));
+    const dateCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-switch-date")]: true,
+      ["".concat(prefixCls, "-switch-date-active")]: !isTimePickerOpen
+    });
+    const timeCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-switch-time")]: true,
+      ["".concat(prefixCls, "-switch-time-disabled")]: disabledTimePicker,
+      ["".concat(prefixCls, "-switch-date-active")]: isTimePickerOpen
+    });
+    const textCls = (0, _classnames.default)("".concat(prefixCls, "-switch-text"));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: switchCls,
+      ref: current => this.adapter.setCache("switch-".concat(panelType), current)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: dateCls,
+      onClick: e => this.foundation.showDatePanel(panelType)
+    }, showSwithIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, null), /*#__PURE__*/_react.default.createElement("span", {
+      className: textCls
+    }, dateText || monthText)), /*#__PURE__*/_react.default.createElement("div", {
+      className: timeCls,
+      onClick: e => this.foundation.showTimePicker(panelType, true)
+    }, showSwithIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconClock, null), /*#__PURE__*/_react.default.createElement("span", {
+      className: textCls
+    }, timeText)));
+  }
+
+  render() {
+    const {
+      monthLeft,
+      monthRight
+    } = this.state;
+    const {
+      type
+    } = this.props;
+    const monthGridCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-month-grid")]: true
+    });
+    const panelTypeLeft = _constants.strings.PANEL_TYPE_LEFT;
+    const panelTypeRight = _constants.strings.PANEL_TYPE_RIGHT;
+    let content = null;
+
+    if (type === 'date' || type === 'dateTime') {
+      content = this.renderPanel(monthLeft.pickerDate, panelTypeLeft);
+    } else if (type === 'dateRange' || type === 'dateTimeRange') {
+      content = [this.renderPanel(monthLeft.pickerDate, panelTypeLeft), this.renderPanel(monthRight.pickerDate, panelTypeRight)];
+    } else if (type === 'year' || type === 'month') {
+      content = 'year month';
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: monthGridCls,
+      "x-type": type,
+      ref: current => this.cacheRefCurrent('monthGrid', current)
+    }, content);
+  }
+
+}
+
+exports.default = MonthsGrid;
+MonthsGrid.propTypes = {
+  type: _propTypes.default.oneOf(_constants.strings.TYPE_SET),
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object, _propTypes.default.array]),
+  defaultPickerValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object, _propTypes.default.array]),
+  multiple: _propTypes.default.bool,
+  max: _propTypes.default.number,
+  weekStartsOn: _propTypes.default.number,
+  disabledDate: _propTypes.default.func,
+  disabledTime: _propTypes.default.func,
+  disabledTimePicker: _propTypes.default.bool,
+  hideDisabledOptions: _propTypes.default.bool,
+  navPrev: _propTypes.default.node,
+  navNext: _propTypes.default.node,
+  onMaxSelect: _propTypes.default.func,
+  timePickerOpts: _propTypes.default.object,
+  // Whether the outer datePicker is a controlled component
+  isControlledComponent: _propTypes.default.bool,
+  rangeStart: _propTypes.default.oneOfType([_propTypes.default.string]),
+  rangeInputFocus: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+  locale: _propTypes.default.object,
+  localeCode: _propTypes.default.string,
+  format: _propTypes.default.string,
+  renderDate: _propTypes.default.func,
+  renderFullDate: _propTypes.default.func,
+  startDateOffset: _propTypes.default.func,
+  endDateOffset: _propTypes.default.func,
+  autoSwitchDate: _propTypes.default.bool,
+  motionEnd: _propTypes.default.bool,
+  density: _propTypes.default.string,
+  dateFnsLocale: _propTypes.default.object.isRequired,
+  timeZone: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  // Support synchronous switching of months
+  syncSwitchMonth: _propTypes.default.bool,
+  // Callback function for panel date switching
+  onPanelChange: _propTypes.default.func,
+  focusRecordsRef: _propTypes.default.object
+};
+MonthsGrid.defaultProps = {
+  type: 'date',
+  rangeStart: '',
+  multiple: false,
+  weekStartsOn: _constants.numbers.WEEK_START_ON,
+  disabledDate: _stubFalse2.default,
+  onMaxSelect: _noop2.default,
+  locale: {}
+};