@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/datePicker/monthsGridFoundation.js

@@ -1,952 +0,0 @@
-"use strict";
-
-var _includesInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/includes");
-
-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 _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-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 _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
-
-var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
-var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
-
-var _foundation = _interopRequireDefault(require("../base/foundation"));
-
-var _constants = require("./constants");
-
-var _dateFns = require("date-fns");
-
-var _index = require("./_utils/index");
-
-var _getMonthTable = require("./_utils/getMonthTable");
-
-var _parser = require("./_utils/parser");
-
-var _lodashEs = require("lodash-es");
-
-var _dateFnsExtra = require("../utils/date-fns-extra");
-
-var _getDefaultFormatToken = require("./_utils/getDefaultFormatToken");
-
-var _isNullOrUndefined = _interopRequireDefault(require("../utils/isNullOrUndefined"));
-
-/* eslint-disable max-len */
-const dateDiffFns = {
-  month: _dateFns.differenceInCalendarMonths,
-  year: _dateFns.differenceInCalendarYears
-};
-const dateCalcFns = {
-  prevMonth: _dateFns.subMonths,
-  nextMonth: _dateFns.addMonths,
-  prevYear: _dateFns.subYears,
-  nextYear: _dateFns.addYears
-};
-
-class MonthsGridFoundation extends _foundation.default {
-  constructor(adapter) {
-    super((0, _assign.default)({}, adapter)); // Date change data when double panels
-
-    this.newBiMonthPanelDate = [this.getState('monthLeft').pickerDate, this.getState('monthRight').pickerDate];
-  }
-
-  init() {
-    const defaultValue = this.getProp('defaultValue');
-    this.initDefaultPickerValue();
-    this.updateSelectedFromProps(defaultValue);
-  }
-
-  initDefaultPickerValue() {
-    const defaultPickerValue = (0, _parser.compatiableParse)(this.getProp('defaultPickerValue'));
-
-    if (defaultPickerValue && (0, _index.isValidDate)(defaultPickerValue)) {
-      this._updatePanelDetail(_constants.strings.PANEL_TYPE_LEFT, {
-        pickerDate: defaultPickerValue
-      });
-
-      this._updatePanelDetail(_constants.strings.PANEL_TYPE_RIGHT, {
-        pickerDate: (0, _dateFns.addMonths)(defaultPickerValue, 1)
-      });
-    }
-  }
-
-  updateSelectedFromProps(values) {
-    let refreshPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    const type = this.getProp('type');
-    const {
-      selected,
-      rangeStart,
-      rangeEnd
-    } = this.getStates();
-
-    if (values && values.length) {
-      switch (type) {
-        case 'date':
-          this._initDatePickerFromValue(values, refreshPicker);
-
-          break;
-
-        case 'dateRange':
-          this._initDateRangePickerFromValue(values);
-
-          break;
-
-        case 'dateTime':
-          this._initDateTimePickerFromValue(values);
-
-          break;
-
-        case 'dateTimeRange':
-          this._initDateTimeRangePickerFormValue(values);
-
-          break;
-
-        default:
-          break;
-      }
-    } else if ((0, _isArray.default)(values) && !values.length || !values) {
-      // Empty panel when value is empty Select date
-      if ((0, _lodashEs.isSet)(selected) && selected.size) {
-        this._adapter.updateDaySelected(new _set.default());
-      }
-
-      if (rangeStart) {
-        this._adapter.setRangeStart('');
-      }
-
-      if (rangeEnd) {
-        this._adapter.setRangeEnd('');
-      }
-    }
-  }
-
-  calcDisabledTime(panelType) {
-    var _context;
-
-    const {
-      disabledTime,
-      type
-    } = this.getProps();
-
-    if (typeof disabledTime === 'function' && panelType && (0, _includes.default)(_context = ['dateTime', 'dateTimeRange']).call(_context, type)) {
-      const {
-        rangeStart,
-        rangeEnd,
-        monthLeft
-      } = this.getStates();
-      const selected = [];
-
-      if (type === 'dateTimeRange') {
-        if (rangeStart) {
-          selected.push(rangeStart);
-        }
-
-        if (rangeStart && rangeEnd) {
-          selected.push(rangeEnd);
-        }
-      } else if (monthLeft && monthLeft.showDate) {
-        selected.push(monthLeft.showDate);
-      }
-
-      const selectedDates = (0, _map.default)(selected).call(selected, str => str instanceof Date ? str : (0, _dateFns.parseISO)(str));
-      const cbDates = type === 'dateTimeRange' ? selectedDates : selectedDates[0];
-      return disabledTime(cbDates, panelType);
-    }
-  }
-
-  _initDatePickerFromValue(values) {
-    let refreshPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    const monthLeft = this.getState('monthLeft');
-    const newMonthLeft = (0, _assign.default)({}, monthLeft);
-
-    this._adapter.updateMonthOnLeft(newMonthLeft);
-
-    const newSelected = new _set.default();
-
-    if (!this._isMultiple()) {
-      newSelected.add((0, _dateFns.format)(values[0], _constants.strings.FORMAT_FULL_DATE));
-    } else {
-      (0, _forEach.default)(values).call(values, date => {
-        newSelected.add((0, _dateFns.format)(date, _constants.strings.FORMAT_FULL_DATE));
-      });
-    }
-
-    if (refreshPicker) {
-      this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
-    } else {
-      this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, newMonthLeft.pickerDate);
-    }
-
-    this._adapter.updateDaySelected(newSelected);
-  }
-
-  _initDateRangePickerFromValue(values) {
-    let withTime = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    // init month panel
-    const monthLeft = this.getState('monthLeft');
-    const monthRight = this.getState('monthRight');
-
-    const adjustResult = this._autoAdjustMonth((0, _assign.default)((0, _assign.default)({}, monthLeft), {
-      pickerDate: values[0] || monthLeft.pickerDate
-    }), (0, _assign.default)((0, _assign.default)({}, monthRight), {
-      pickerDate: values[1] || monthRight.pickerDate
-    }));
-
-    this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
-    this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate); // init range
-
-    const formatToken = withTime ? _constants.strings.FORMAT_DATE_TIME : _constants.strings.FORMAT_FULL_DATE;
-    let rangeStart = values[0] && (0, _dateFns.format)(values[0], formatToken);
-    let rangeEnd = values[1] && (0, _dateFns.format)(values[1], formatToken);
-
-    if (this._isNeedSwap(rangeStart, rangeEnd)) {
-      [rangeStart, rangeEnd] = [rangeEnd, rangeStart];
-    }
-
-    this._adapter.setRangeStart(rangeStart);
-
-    this._adapter.setRangeEnd(rangeEnd);
-
-    this._adapter.setHoverDay(rangeEnd);
-  }
-
-  _initDateTimePickerFromValue(values) {
-    this._initDatePickerFromValue(values);
-  }
-
-  _initDateTimeRangePickerFormValue(values) {
-    this._initDateRangePickerFromValue(values, true);
-  } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
-  destroy() {}
-
-  toMonth(panelType, target) {
-    const diff = this._getDiff('month', target, panelType);
-
-    this.handleYearOrMonthChange(diff < 0 ? 'prevMonth' : 'nextMonth', panelType, Math.abs(diff), false);
-  }
-
-  toYear(panelType, target) {
-    const diff = this._getDiff('year', target, panelType);
-
-    this.handleYearOrMonthChange(diff < 0 ? 'prevYear' : 'nextYear', panelType, Math.abs(diff), false);
-  }
-
-  toYearMonth(panelType, target) {
-    this.toYear(panelType, target);
-    this.toMonth(panelType, target);
-  }
-
-  isRangeType(type) {
-    const {
-      type: typeFromProp
-    } = this.getProps();
-    const realType = type ? type : typeFromProp;
-    return typeof realType === 'string' && /range/i.test(realType);
-  }
-
-  handleSwitchMonth(switchType, panelType) {
-    const {
-      type,
-      syncSwitchMonth
-    } = this.getProps();
-
-    if (this.isRangeType(type) && syncSwitchMonth) {
-      this.handleYearOrMonthChange(switchType, 'left', 1, true);
-      this.handleYearOrMonthChange(switchType, 'right', 1, true);
-    } else {
-      this.handleYearOrMonthChange(switchType, panelType);
-    }
-  }
-
-  prevMonth(panelType) {
-    this.handleSwitchMonth('prevMonth', panelType);
-  }
-
-  nextMonth(panelType) {
-    this.handleSwitchMonth('nextMonth', panelType);
-  }
-
-  prevYear(panelType) {
-    this.handleYearOrMonthChange('prevYear', panelType);
-  }
-
-  nextYear(panelType) {
-    this.handleYearOrMonthChange('nextYear', panelType);
-  }
-  /**
-   * Calculate the year and month difference
-   */
-
-
-  _getDiff(type, target, panelType) {
-    const panelDetail = this._getPanelDetail(panelType);
-
-    const diff = dateDiffFns[type] && dateDiffFns[type](target, panelDetail.pickerDate);
-    return diff;
-  }
-
-  _getPanelDetail(panelType) {
-    return panelType === _constants.strings.PANEL_TYPE_RIGHT ? this.getState('monthRight') : this.getState('monthLeft');
-  }
-  /**
-   * Format locale date
-   * locale get from LocaleProvider
-   * @param {Date} date
-   * @param {String} token
-   * @returns
-   */
-
-
-  localeFormat(date, token) {
-    const dateFnsLocale = this._adapter.getProp('dateFnsLocale');
-
-    return (0, _dateFns.format)(date, token, {
-      locale: dateFnsLocale
-    });
-  }
-
-  isValidTimeZone(timeZone) {
-    var _context2;
-
-    const propTimeZone = this.getProp('timeZone');
-
-    const _timeZone = (0, _isNullOrUndefined.default)(timeZone) ? propTimeZone : timeZone;
-
-    return (0, _includes.default)(_context2 = ['string', 'number']).call(_context2, typeof _timeZone) && _timeZone !== '';
-  }
-  /**
-   * 根据 type 处理 onChange 返回的参数
-   *
-   *  - 返回的日期需要把用户时间转换为设置的时区时间
-   *      - 用户时间：用户计算机系统时间
-   *      - 时区时间：通过 ConfigProvider 设置的 timeZone
-   *  - 例子：用户设置时区为+9，计算机所在时区为+8区，然后用户选择了22:00
-   *      - DatePicker 内部保存日期 state 为 +8 的 22:00 => a = new Date("2021-05-25 22:00:00")
-   *      - 传出去时，需要把 +8 的 22:00 => +9 的 22:00 => b = zonedTimeToUtc(a, "+09:00");
-   *
-   * The parameters returned by onChange are processed according to type
-   *
-   *  -The returned date needs to convert the user time to the set time zone time
-   *      -User time: user computer system time
-   *      -Time zone: timeZone set by ConfigProvider
-   *  -Example: The user sets the time zone to + 9, and the time zone where the computer is located is + 8, and then the user selects 22:00
-   *      -DatePicker internal save date state is + 8 22:00 = > a = new Date ("2021-05-25 22:00:00")
-   *      -When passing out, you need to put + 8's 22:00 = > + 9's 22:00 = > b = zonedTimeToUtc (a, "+ 09:00");
-   *
-   *  e.g.
-   *  let a = new Date ("2021-05-25 22:00:00");
-   *       = > Tue May 25 2021 22:00:00 GMT + 0800 (China Standard Time)
-   *  let b = zonedTimeToUtc (a, "+ 09:00");
-   *       = > Tue May 25 2021 21:00:00 GMT + 0800 (China Standard Time)
-   *
-   * @param {Date|Date[]} value
-   */
-
-
-  disposeCallbackArgs(value) {
-    let _value = (0, _isArray.default)(value) ? value : value && [value] || [];
-
-    if (this.isValidTimeZone()) {
-      const timeZone = this.getProp('timeZone');
-      _value = (0, _map.default)(_value).call(_value, date => (0, _dateFnsExtra.zonedTimeToUtc)(date, timeZone));
-    }
-
-    const type = this.getProp('type');
-    const formatToken = this.getProp('format') || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(type);
-    let notifyValue, notifyDate;
-
-    switch (type) {
-      case 'date':
-      case 'dateTime':
-      case 'month':
-        if (!this._isMultiple()) {
-          notifyValue = _value[0] && this.localeFormat(_value[0], formatToken);
-          [notifyDate] = _value;
-        } else {
-          notifyValue = (0, _map.default)(_value).call(_value, v => v && this.localeFormat(v, formatToken));
-          notifyDate = [..._value];
-        }
-
-        break;
-
-      case 'dateRange':
-      case 'dateTimeRange':
-        notifyValue = (0, _map.default)(_value).call(_value, v => v && this.localeFormat(v, formatToken));
-        notifyDate = [..._value];
-        break;
-
-      default:
-        break;
-    }
-
-    return {
-      notifyValue,
-      notifyDate
-    };
-  }
-
-  handleYearOrMonthChange(type) {
-    let panelType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.strings.PANEL_TYPE_LEFT;
-    let step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-    let notSeparateInRange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-    const {
-      autoSwitchDate,
-      type: datePanelType
-    } = this.getProps();
-    const {
-      monthLeft,
-      monthRight
-    } = this.getStates();
-    const isRangeType = this.isRangeType(datePanelType);
-    const isLeftPanelInRange = isRangeType && panelType === _constants.strings.PANEL_TYPE_LEFT;
-
-    const panelDetail = this._getPanelDetail(panelType);
-
-    const {
-      pickerDate
-    } = panelDetail;
-    const fn = dateCalcFns[type];
-    const targetMonth = fn(pickerDate, step); // Determine if the date has changed
-
-    const panelDateHasUpdate = panelType === _constants.strings.PANEL_TYPE_LEFT && !(0, _lodashEs.isEqual)(targetMonth, monthLeft.pickerDate) || panelType === _constants.strings.PANEL_TYPE_RIGHT && !(0, _lodashEs.isEqual)(targetMonth, monthRight.pickerDate);
-
-    this._updatePanelDetail(panelType, {
-      pickerDate: targetMonth
-    });
-
-    if (panelDateHasUpdate) {
-      // When the date changes
-      if (!isRangeType) {
-        // Single Panel Type
-        const {
-          notifyValue,
-          notifyDate
-        } = this.disposeCallbackArgs(targetMonth);
-
-        this._adapter.notifyPanelChange(notifyDate, notifyValue);
-      } else {
-        // Double Panel Type
-        if (isLeftPanelInRange) {
-          // Left panel
-          this.newBiMonthPanelDate[0] = targetMonth;
-        } else {
-          // Right panel
-          this.newBiMonthPanelDate[1] = targetMonth;
-        }
-
-        if (!(isLeftPanelInRange && notSeparateInRange)) {
-          // Not synchronously switching the left panel in the scene
-          const {
-            notifyValue,
-            notifyDate
-          } = this.disposeCallbackArgs(this.newBiMonthPanelDate);
-
-          this._adapter.notifyPanelChange(notifyDate, notifyValue);
-        }
-      }
-    }
-
-    if (autoSwitchDate) {
-      this.updateDateAfterChangeYM(type, targetMonth);
-    }
-  }
-  /**
-   * You have chosen to switch the year and month in the future to directly update the Date without closing the date panel
-   * @param {*} type
-   * @param {*} targetDate
-   */
-
-
-  updateDateAfterChangeYM(type, targetDate) {
-    var _context3;
-
-    const {
-      multiple,
-      disabledDate
-    } = this.getProps();
-    const {
-      selected: selectedSet,
-      rangeStart,
-      rangeEnd
-    } = this.getStates();
-    const includeRange = (0, _includes.default)(_context3 = ['dateRange', 'dateTimeRange']).call(_context3, type);
-    const options = {
-      closePanel: false
-    };
-
-    if (!multiple && !includeRange && selectedSet.size) {
-      const selectedStr = (0, _from.default)(selectedSet)[0];
-      const selectedDate = new Date(selectedStr);
-      const year = targetDate.getFullYear();
-      const month = targetDate.getMonth();
-      const fullDate = (0, _dateFns.set)(selectedDate, {
-        year,
-        month
-      });
-
-      if (disabledDate(fullDate, {
-        rangeStart,
-        rangeEnd
-      })) {
-        return;
-      }
-
-      this._adapter.notifySelectedChange([fullDate], options);
-    }
-  }
-
-  _isMultiple() {
-    return Boolean(this.getProp('multiple')) && this.getProp('type') === 'date';
-  }
-
-  _isRange() {// return this._adapter.getProp('type') === dateRangeTypeKey;
-  }
-
-  handleDayClick(day, panelType) {
-    const type = this.getProp('type');
-
-    switch (true) {
-      case type === 'date' || type === 'dateTime':
-        this.handleDateSelected(day, panelType);
-        break;
-
-      case type === 'dateRange' || type === 'dateTimeRange':
-        this.handleRangeSelected(day);
-        break;
-
-      default:
-        break;
-    }
-  }
-
-  handleDateSelected(day, panelType) {
-    var _context4;
-
-    const {
-      max,
-      type,
-      isControlledComponent,
-      dateFnsLocale
-    } = this.getProps();
-
-    const multiple = this._isMultiple();
-
-    const {
-      selected
-    } = this.getStates();
-
-    const monthDetail = this._getPanelDetail(panelType);
-
-    const newSelected = new _set.default(multiple ? [...selected] : []);
-    const {
-      fullDate
-    } = day;
-    const time = monthDetail.pickerDate;
-    const dateStr = type === 'dateTime' ? this._mergeDateAndTime(fullDate, time) : fullDate;
-
-    if (!multiple) {
-      newSelected.add(dateStr);
-    } else {
-      if (newSelected.has(dateStr)) {
-        newSelected.delete(dateStr);
-      } else if (max && newSelected.size === max) {
-        this._adapter.notifyMaxLimit();
-      } else {
-        newSelected.add(dateStr);
-      }
-    }
-
-    const dateFormat = this.getValidDateFormat(); // When passed to the upper layer, it is converted into a Date object to ensure that the input parameter format of initFormDefaultValue is consistent
-
-    const newSelectedDates = (0, _map.default)(_context4 = [...newSelected]).call(_context4, _dateStr => (0, _parser.compatiableParse)(_dateStr, dateFormat, undefined, dateFnsLocale));
-    this.handleShowDateAndTime(panelType, time);
-
-    if (!isControlledComponent) {
-      // Uncontrolled components, update internal values when operating, and notify external
-      // MonthGrid internally uses string to represent fullDate for easy rendering
-      this._adapter.updateDaySelected(newSelected);
-    }
-
-    this._adapter.notifySelectedChange(newSelectedDates);
-  }
-
-  handleShowDateAndTime(panelType, pickerDate, showDate) {
-    const _showDate = showDate || pickerDate;
-
-    this._updatePanelDetail(panelType, {
-      showDate: _showDate,
-      pickerDate
-    });
-  }
-  /**
-   * link date and time
-   *
-   * @param {Date|string} date
-   * @param {Date|string} time
-   * @returns {Date}
-   */
-
-
-  _mergeDateAndTime(date, time) {
-    var _context5;
-
-    const dateFnsLocale = this._adapter.getProp('dateFnsLocale');
-
-    const dateStr = (0, _dateFns.format)((0, _index.isValidDate)(date) ? date : (0, _parser.compatiableParse)(date, _constants.strings.FORMAT_FULL_DATE, undefined, dateFnsLocale), _constants.strings.FORMAT_FULL_DATE);
-    const timeStr = (0, _dateFns.format)((0, _index.isValidDate)(time) ? time : (0, _parser.compatiableParse)(time, _constants.strings.FORMAT_TIME_PICKER, undefined, dateFnsLocale), _constants.strings.FORMAT_TIME_PICKER);
-    const timeFormat = this.getValidTimeFormat();
-    return (0, _parser.compatiableParse)((0, _concat.default)(_context5 = "".concat(dateStr, " ")).call(_context5, timeStr), timeFormat, undefined, dateFnsLocale);
-  }
-
-  handleRangeSelected(day) {
-    let {
-      rangeStart,
-      rangeEnd
-    } = this.getStates();
-    const {
-      startDateOffset,
-      endDateOffset,
-      type,
-      dateFnsLocale,
-      rangeInputFocus
-    } = this.getProps();
-    const {
-      fullDate
-    } = day;
-    let rangeStartReset = false;
-    let rangeEndReset = false;
-    const isDateRangeAndHasOffset = (startDateOffset || endDateOffset) && type === 'dateRange';
-
-    if (isDateRangeAndHasOffset) {
-      rangeStart = (0, _index.getFullDateOffset)(startDateOffset, fullDate);
-      rangeEnd = (0, _index.getFullDateOffset)(endDateOffset, fullDate);
-    } else {
-      if (rangeInputFocus === 'rangeEnd') {
-        rangeEnd = fullDate; // rangStart Parten in dateTime: 'yyyy-MM-dd HH:MM:SS', rangeEnd parten: 'yyyy-MM-dd'
-
-        if (rangeStart && rangeEnd && (0, _index.isBefore)(rangeEnd, (0, _trim.default)(rangeStart).call(rangeStart).split(/\s+/)[0])) {
-          rangeStart = null;
-          rangeStartReset = true;
-        } // Compatible to select date after opening the panel without click input
-
-      } else if (rangeInputFocus === 'rangeStart' || !rangeInputFocus) {
-        rangeStart = fullDate; // rangEnd Parten in dateTime: 'yyyy-MM-dd HH:MM:SS', rangeStart parten: 'yyyy-MM-dd'
-
-        if (rangeStart && rangeEnd && (0, _index.isBefore)((0, _trim.default)(rangeEnd).call(rangeEnd).split(/\s+/)[0], rangeStart)) {
-          rangeEnd = null;
-          rangeEndReset = true;
-        }
-      }
-    } // next focus logic
-
-
-    const isRangeType = /range/i.test(type);
-
-    if (isRangeType) {
-      if (isDateRangeAndHasOffset) {
-        this._adapter.setRangeStart(rangeStart);
-
-        this._adapter.setRangeEnd(rangeEnd);
-      } else {
-        if (rangeInputFocus === 'rangeEnd') {
-          this._adapter.setRangeEnd(rangeEnd);
-
-          if (rangeStartReset) {
-            this._adapter.setRangeStart(rangeStart);
-          }
-
-          if (!this._adapter.isAnotherPanelHasOpened('rangeEnd') || !rangeStart) {
-            this._adapter.setRangeInputFocus('rangeStart');
-          }
-        } else if (rangeInputFocus === 'rangeStart' || !rangeInputFocus) {
-          this._adapter.setRangeStart(rangeStart);
-
-          if (rangeEndReset) {
-            this._adapter.setRangeEnd(rangeEnd);
-          }
-
-          if (!this._adapter.isAnotherPanelHasOpened('rangeStart') || !rangeEnd) {
-            this._adapter.setRangeInputFocus('rangeEnd');
-          }
-        }
-      }
-    }
-
-    const dateFormat = this.getValidDateFormat(); // only notify when choose completed
-
-    if (rangeStart || rangeEnd) {
-      const [startDate, endDate] = [(0, _parser.compatiableParse)(rangeStart, dateFormat, undefined, dateFnsLocale), (0, _parser.compatiableParse)(rangeEnd, dateFormat, undefined, dateFnsLocale)];
-      let date = [startDate, endDate]; // If the type is dateRangeTime, add the value of time
-
-      if (type === 'dateTimeRange') {
-        const startTime = this.getState('monthLeft').pickerDate;
-        const endTime = this.getState('monthRight').pickerDate;
-        const start = rangeStart ? this._mergeDateAndTime(rangeStart, startTime) : null;
-        const end = rangeEnd ? this._mergeDateAndTime(rangeEnd, endTime) : null;
-
-        if ((0, _dateFns.isSameDay)(startDate, endDate) && (0, _index.isBefore)(end, start)) {
-          date = [start, start];
-        } else {
-          date = [start, end];
-        }
-      }
-
-      this._adapter.notifySelectedChange(date, {
-        needCheckFocusRecord: !(type === 'dateRange' && isDateRangeAndHasOffset)
-      });
-    }
-  }
-
-  _isNeedSwap(rangeStart, rangeEnd) {
-    // Check whether the start and end are reasonable and whether they need to be reversed
-    return rangeStart && rangeEnd && (0, _index.isBefore)(rangeEnd, rangeStart);
-  }
-  /**
-   * Day may be empty, this is unhover state
-   * @param {*} day
-   */
-
-
-  handleDayHover() {
-    let day = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-      fullDate: ''
-    };
-    let panelType = arguments.length > 1 ? arguments[1] : undefined;
-    const {
-      fullDate
-    } = day;
-    const {
-      startDateOffset,
-      endDateOffset,
-      type
-    } = this.getProps();
-
-    this._adapter.setHoverDay(fullDate);
-
-    if ((startDateOffset || endDateOffset) && type === 'dateRange') {
-      const offsetRangeStart = (0, _index.getFullDateOffset)(startDateOffset, fullDate);
-      const offsetRangeEnd = (0, _index.getFullDateOffset)(endDateOffset, fullDate);
-
-      this._adapter.setOffsetRangeStart(offsetRangeStart);
-
-      this._adapter.setOffsetRangeEnd(offsetRangeEnd);
-    }
-  } // Guarantee that monthLeft, monthRight will not appear in the same month or monthLeft is greater than MonthRight
-
-
-  _autoAdjustMonth(monthLeft, monthRight) {
-    let newMonthLeft = monthLeft;
-    let newMonthRight = monthRight;
-    const difference = (0, _dateFns.differenceInCalendarMonths)(monthLeft.pickerDate, monthRight.pickerDate);
-
-    if (difference > 0) {
-      // The month on the left is larger than the month on the right, swap
-      newMonthLeft = (0, _assign.default)({}, monthRight);
-      newMonthRight = (0, _assign.default)({}, monthLeft);
-    } else if (difference === 0) {
-      // Around the same month, the number of months on the right + 1
-      newMonthLeft = monthLeft;
-      newMonthRight = (0, _assign.default)((0, _assign.default)({}, monthRight), {
-        pickerDate: (0, _dateFns.addMonths)(monthRight.pickerDate, 1)
-      });
-    }
-
-    return {
-      monthLeft: newMonthLeft,
-      monthRight: newMonthRight
-    };
-  }
-
-  getValidTimeFormat() {
-    const formatProp = this.getProp('format') || _constants.strings.FORMAT_TIME_PICKER;
-
-    const timeFormatTokens = [];
-
-    if ((0, _includesInstanceProperty2(_lodashEs))(formatProp, 'h') || (0, _includesInstanceProperty2(_lodashEs))(formatProp, 'H')) {
-      timeFormatTokens.push('HH');
-    }
-
-    if ((0, _includesInstanceProperty2(_lodashEs))(formatProp, 'm')) {
-      timeFormatTokens.push('mm');
-    }
-
-    if ((0, _includesInstanceProperty2(_lodashEs))(formatProp, 's')) {
-      timeFormatTokens.push('ss');
-    }
-
-    return timeFormatTokens.join(':');
-  }
-
-  getValidDateFormat() {
-    return this.getProp('format') || (0, _index.getDefaultFormatToken)(this.getProp('type'));
-  }
-
-  handleTimeChange(newTime, panelType) {
-    const {
-      rangeEnd,
-      rangeStart
-    } = this.getStates();
-    const dateFnsLocale = this.getProp('dateFnsLocale');
-    const ts = newTime.timeStampValue;
-    const type = this.getProp('type');
-
-    const panelDetail = this._getPanelDetail(panelType);
-
-    const {
-      showDate
-    } = panelDetail;
-    const timeDate = new Date(ts);
-    const dateFormat = this.getValidDateFormat();
-    const destRange = panelType === _constants.strings.PANEL_TYPE_RIGHT ? rangeEnd : rangeStart;
-    let year, monthNo, date; // if (pickerDate && isValidDate(pickerDate)) {
-    //     year = pickerDate.getFullYear();
-    //     monthNo = pickerDate.getMonth();
-    //     date = pickerDate.getDate();
-    // } else
-
-    if (type === 'dateTimeRange' && destRange) {
-      const rangeDate = (0, _parser.compatiableParse)(destRange, dateFormat, undefined, dateFnsLocale);
-      year = rangeDate.getFullYear();
-      monthNo = rangeDate.getMonth();
-      date = rangeDate.getDate();
-    } else {
-      year = showDate.getFullYear();
-      monthNo = showDate.getMonth();
-      date = showDate.getDate();
-    }
-
-    const hours = timeDate.getHours();
-    const minutes = timeDate.getMinutes();
-    const seconds = timeDate.getSeconds();
-    const milSeconds = timeDate.getMilliseconds();
-    const dateArgs = [year, monthNo, date, hours, minutes, seconds, milSeconds];
-    const fullValidDate = new Date(...dateArgs);
-
-    if (type === 'dateTimeRange') {
-      this.handleShowDateAndTime(panelType, fullValidDate, showDate);
-
-      this._updateTimeInDateRange(panelType, fullValidDate);
-    } else {
-      const fullDate = (0, _getMonthTable.formatFullDate)(year, monthNo + 1, date);
-      this.handleDateSelected({
-        fullDate,
-        fullValidDate
-      }, panelType);
-      this.handleShowDateAndTime(panelType, fullValidDate);
-
-      this._adapter.notifySelectedChange([fullValidDate]);
-    }
-  }
-  /**
-   * Update the time part in the range
-   * @param {string} panelType
-   * @param {Date} timeDate
-   */
-
-
-  _updateTimeInDateRange(panelType, timeDate) {
-    const {
-      isControlledComponent,
-      dateFnsLocale
-    } = this.getProps();
-    let rangeStart = this.getState('rangeStart');
-    let rangeEnd = this.getState('rangeEnd');
-    const dateFormat = this.getValidDateFormat(); // TODO: Modify a time individually
-
-    if (rangeStart && rangeEnd) {
-      let startDate = (0, _parser.compatiableParse)(rangeStart, dateFormat, undefined, dateFnsLocale);
-      let endDate = (0, _parser.compatiableParse)(rangeEnd, dateFormat, undefined, dateFnsLocale); // console.log('_updateTimeInDateRange()', rangeStart, rangeEnd, startDate, endDate);
-
-      if (panelType === _constants.strings.PANEL_TYPE_RIGHT) {
-        endDate = this._mergeDateAndTime(timeDate, timeDate);
-        rangeEnd = (0, _dateFns.format)(endDate, _constants.strings.FORMAT_DATE_TIME);
-
-        if (this._isNeedSwap(rangeStart, rangeEnd)) {
-          [rangeStart, rangeEnd] = [rangeEnd, rangeStart];
-          [startDate, endDate] = [endDate, startDate];
-        }
-
-        if (!isControlledComponent) {
-          this._adapter.setRangeEnd(rangeEnd);
-        }
-      } else {
-        startDate = this._mergeDateAndTime(timeDate, timeDate);
-        rangeStart = (0, _dateFns.format)(startDate, _constants.strings.FORMAT_DATE_TIME);
-
-        if (this._isNeedSwap(rangeStart, rangeEnd)) {
-          [rangeStart, rangeEnd] = [rangeEnd, rangeStart];
-          [startDate, endDate] = [endDate, startDate];
-        }
-
-        if (!isControlledComponent) {
-          this._adapter.setRangeStart(rangeStart);
-        }
-      } // console.log('_updateTimeInDateRange()', rangeStart, rangeEnd, startDate, endDate);
-
-
-      this._adapter.notifySelectedChange([startDate, endDate]);
-    }
-  }
-
-  _updatePanelDetail(panelType, kvs) {
-    const {
-      monthLeft,
-      monthRight
-    } = this.getStates();
-
-    if (panelType === _constants.strings.PANEL_TYPE_RIGHT) {
-      this._adapter.updateMonthOnRight((0, _assign.default)((0, _assign.default)({}, monthRight), kvs));
-    } else {
-      this._adapter.updateMonthOnLeft((0, _assign.default)((0, _assign.default)({}, monthLeft), kvs));
-    }
-  }
-
-  showYearPicker(panelType) {
-    this._updatePanelDetail(panelType, {
-      isTimePickerOpen: false,
-      isYearPickerOpen: true
-    });
-  }
-
-  showTimePicker(panelType, opt) {
-    if (this.getProp('disabledTimePicker')) {
-      return;
-    }
-
-    this._updatePanelDetail(panelType, {
-      isTimePickerOpen: true,
-      isYearPickerOpen: false
-    });
-  }
-
-  showDatePanel(panelType) {
-    this._updatePanelDetail(panelType, {
-      isTimePickerOpen: false,
-      isYearPickerOpen: false
-    });
-  }
-
-}
-
-exports.default = MonthsGridFoundation;