@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/datePicker/foundation.js

@@ -0,0 +1,1167 @@
+"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 _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 _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _sort = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/sort"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
+var _isString2 = _interopRequireDefault(require("lodash/isString"));
+
+var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _dateFns = require("date-fns");
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _index = require("./_utils/index");
+
+var _isNullOrUndefined = _interopRequireDefault(require("../utils/isNullOrUndefined"));
+
+var _dateFnsExtra = require("../utils/date-fns-extra");
+
+var _parser = require("./_utils/parser");
+
+var _getDefaultFormatToken = require("./_utils/getDefaultFormatToken");
+
+var _constants = require("./constants");
+
+var _constants2 = require("../input/constants");
+
+/* eslint-disable no-nested-ternary */
+
+/* eslint-disable max-len, max-depth,  */
+
+/**
+ * The datePicker foundation.js is responsible for maintaining the date value and the input box value, as well as the callback of both
+ *  task 1. Accept the selected date change, update the date value, and update the input box value according to the date = > Notify the change
+ *  task 2. When the input box changes, update the date value = > Notify the change
+ */
+class DatePickerFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+
+    this.getMergedMotion = motion => {
+      const mergedMotion = typeof motion === 'undefined' || motion ? (0, _assign.default)((0, _assign.default)({}, motion), {
+        didEnter: () => {
+          this._adapter.setMotionEnd(true);
+        },
+        didLeave: () => {
+          this._adapter.setMotionEnd(false);
+        }
+      }) : false;
+      return mergedMotion;
+    };
+
+    this._isRangeType = () => {
+      const type = this._adapter.getProp('type');
+
+      return /range/i.test(type);
+    };
+
+    this._isRangeValueComplete = value => {
+      let result = true;
+
+      if ((0, _isArray.default)(value)) {
+        result = !(0, _some.default)(value).call(value, date => (0, _isNullOrUndefined.default)(date));
+      } else {
+        result = false;
+      }
+
+      return result;
+    };
+  }
+
+  init() {
+    const timeZone = this.getProp('timeZone');
+
+    if (this._isControlledComponent()) {
+      this.initFromProps({
+        timeZone,
+        value: this.getProp('value')
+      });
+    } else if (this._isInProps('defaultValue')) {
+      this.initFromProps({
+        timeZone,
+        value: this.getProp('defaultValue')
+      });
+    }
+
+    this.initPanelOpenStatus(this.getProp('defaultOpen'));
+  }
+
+  isValidTimeZone(timeZone) {
+    var _context;
+
+    const propTimeZone = this.getProp('timeZone');
+
+    const _timeZone = (0, _isNullOrUndefined.default)(timeZone) ? propTimeZone : timeZone;
+
+    return (0, _includes.default)(_context = ['string', 'number']).call(_context, typeof _timeZone) && _timeZone !== '';
+  }
+
+  initFromProps(_ref) {
+    let {
+      value,
+      timeZone,
+      prevTimeZone
+    } = _ref;
+
+    const _value = ((0, _isArray.default)(value) ? [...value] : (value || value === 0) && [value]) || [];
+
+    const result = this.parseWithTimezone(_value, timeZone, prevTimeZone);
+
+    this._adapter.updatePrevTimezone(prevTimeZone);
+
+    this._adapter.updateInputValue(null);
+
+    this._adapter.updateValue(result);
+
+    if (this._adapter.needConfirm()) {
+      this._adapter.updateCachedSelectedValue(result);
+    }
+  }
+
+  parseWithTimezone(value, timeZone, prevTimeZone) {
+    const result = [];
+
+    if ((0, _isArray.default)(value) && value.length) {
+      for (const v of value) {
+        let parsedV = (v || v === 0) && this._parseValue(v);
+
+        if (parsedV) {
+          if (this.isValidTimeZone(prevTimeZone)) {
+            parsedV = (0, _dateFnsExtra.zonedTimeToUtc)(parsedV, prevTimeZone);
+          }
+
+          result.push(this.isValidTimeZone(timeZone) ? (0, _dateFnsExtra.utcToZonedTime)(parsedV, timeZone) : parsedV);
+        }
+      }
+    }
+
+    return result;
+  }
+
+  _isMultiple() {
+    return Boolean(this.getProp('multiple'));
+  }
+  /**
+   *
+   *  Verify and parse the following three format inputs
+   *
+      1. Date object
+      2. ISO 9601-compliant string
+      3. ts timestamp
+       Unified here to format the incoming value and output it as a Date object
+   *
+   */
+
+
+  _parseValue(value) {
+    const dateFnsLocale = this._adapter.getProp('dateFnsLocale');
+
+    let dateObj;
+
+    if (!value && value !== 0) {
+      return new Date();
+    }
+
+    if ((0, _index.isValidDate)(value)) {
+      dateObj = value;
+    } else if ((0, _isString2.default)(value)) {
+      dateObj = (0, _parser.compatiableParse)(value, this.getProp('format'), undefined, dateFnsLocale);
+    } else if ((0, _index.isTimestamp)(value)) {
+      dateObj = new Date(value);
+    } else {
+      throw new TypeError('defaultValue should be valid Date object/timestamp or string');
+    }
+
+    return dateObj;
+  }
+
+  destroy() {
+    // Ensure that event listeners will be uninstalled and users may not trigger closePanel
+    // this._adapter.togglePanel(false);
+    this._adapter.unregisterClickOutSide();
+  }
+
+  initPanelOpenStatus(defaultOpen) {
+    if ((this.getProp('open') || defaultOpen) && !this.getProp('disabled')) {
+      this._adapter.togglePanel(true);
+
+      this._adapter.registerClickOutSide();
+    } else {
+      this._adapter.togglePanel(false);
+
+      this._adapter.unregisterClickOutSide();
+    }
+  }
+
+  openPanel() {
+    if (!this.getProp('disabled')) {
+      if (!this._isControlledComponent('open')) {
+        this._adapter.togglePanel(true);
+
+        this._adapter.registerClickOutSide();
+      }
+
+      this._adapter.notifyOpenChange(true);
+    }
+  }
+  /**
+   * do these side effects when type is dateRange or dateTimeRange
+   *   1. trigger input blur, if input value is invalid, set input value and state value to previous status
+   *   2. set cachedSelectedValue using given dates(in needConfirm mode)
+   *      - directly closePanel without click confirm will set cachedSelectedValue to state value
+   *      - select one date(which means that the selection value is incomplete) and click confirm also set cachedSelectedValue to state value
+   * @param {String} inputValue
+   * @param {Date[]} dates
+   */
+
+
+  rangeTypeSideEffectsWhenClosePanel(inputValue, dates) {
+    if (this._isRangeType()) {
+      this._adapter.setRangeInputFocus(false);
+      /**
+       * inputValue is string when it is not disabled or can't parsed
+       * when inputValue is null, picker value will back to last selected value
+       */
+
+
+      this.handleInputBlur(inputValue);
+
+      const {
+        value,
+        cachedSelectedValue
+      } = this._adapter.getStates();
+
+      const newCachedSelectedValue = (0, _isArray.default)(dates) && dates.length ? dates : value;
+
+      if (!(0, _isEqual2.default)(newCachedSelectedValue, cachedSelectedValue)) {
+        this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
+      }
+    }
+  }
+  /**
+   * timing to call closePanel
+   *  1. click confirm button
+   *  2. click cancel button
+   *  3. select date, time, year, month
+   *    - date type and not multiple, close panel after select date
+   *    - dateRange type, close panel after select rangeStart and rangeEnd
+   *  4. click outside
+   * @param {Event} e
+   * @param {String} inputValue
+   * @param {Date[]} dates
+   */
+
+
+  closePanel(e) {
+    let inputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    let dates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+
+    if (!this._isControlledComponent('open')) {
+      this._adapter.togglePanel(false);
+
+      this._adapter.unregisterClickOutSide();
+    } // range type picker, closing panel requires the following side effects
+
+
+    this.rangeTypeSideEffectsWhenClosePanel(inputValue, dates);
+
+    this._adapter.notifyOpenChange(false);
+
+    this._adapter.notifyBlur(e);
+  }
+  /**
+   * Callback when the content of the input box changes
+   * Update the date panel if the changed value is a legal date, otherwise only update the input box
+   * @param {String} input The value of the input box after the change
+   * @param {Event} e
+   */
+
+
+  handleInputChange(input, e) {
+    const result = this._isMultiple() ? this.parseMultipleInput(input) : this.parseInput(input);
+    const {
+      value: stateValue
+    } = this.getStates(); // Enter a valid date or empty
+
+    if (result && result.length || input === '') {
+      // If you click the clear button
+      if ((0, _get2.default)(e, _constants2.strings.CLEARBTN_CLICKED_EVENT_FLAG) && this._isControlledComponent('value')) {
+        this._notifyChange(result);
+
+        return;
+      }
+
+      this._updateValueAndInput(result, input === '', input); // Updates the selected value when entering a valid date
+
+
+      const changedDates = this._getChangedDates(result);
+
+      if (!this._someDateDisabled(changedDates)) {
+        if (this._adapter.needConfirm()) {
+          this._adapter.updateCachedSelectedValue(result);
+        }
+
+        if (!(0, _isEqual2.default)(result, stateValue)) {
+          this._notifyChange(result);
+        }
+      }
+    } else {
+      this._adapter.updateInputValue(input);
+    }
+  }
+  /**
+   * Input box blur
+   * @param {String} input
+   * @param {Event} e
+   */
+
+
+  handleInputBlur() {
+    let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let e = arguments.length > 1 ? arguments[1] : undefined;
+    const parsedResult = input ? this._isMultiple() ? this.parseMultipleInput(input, ',', true) : this.parseInput(input) : [];
+    const stateValue = this.getState('value'); // console.log(input, parsedResult);
+
+    if (parsedResult && parsedResult.length) {
+      this._updateValueAndInput(parsedResult, input === '');
+    } else if (input === '') {
+      this._updateValueAndInput('', true);
+    } else {
+      this._updateValueAndInput(stateValue);
+    }
+  }
+  /**
+   * called when range type rangeEnd input tab press
+   * @param {Event} e
+   */
+
+
+  handleRangeEndTabPress(e) {
+    this._adapter.setRangeInputFocus(false);
+  }
+  /**
+   * called when the input box is focused
+   * @param {Event} e input focus event
+   * @param {String} range 'rangeStart' or 'rangeEnd', use when type is range
+   */
+
+
+  handleInputFocus(e, range) {
+    var _context2;
+
+    const rangeInputFocus = this._adapter.getState('rangeInputFocus');
+
+    range && this._adapter.setRangeInputFocus(range);
+    /**
+     * rangeType: only notify when range is false
+     * not rangeType: notify when focus
+     */
+
+    if (!range || !(0, _includes.default)(_context2 = ['rangeStart', 'rangeEnd']).call(_context2, rangeInputFocus)) {
+      this._adapter.notifyFocus(e, range);
+    }
+  }
+
+  handleSetRangeFocus(rangeInputFocus) {
+    this._adapter.setRangeInputFocus(rangeInputFocus);
+  }
+
+  handleInputClear(e) {
+    this._adapter.notifyClear(e);
+  }
+  /**
+   * 范围选择清除按钮回调
+   * 因为清除按钮没有集成在Input内，因此需要手动清除 value、inputValue、cachedValue
+   *
+   * callback of range input clear button
+   * Since the clear button is not integrated in Input, you need to manually clear value, inputValue, cachedValue
+   */
+
+
+  handleRangeInputClear(e) {
+    const value = [];
+    const inputValue = '';
+
+    if (!this._isControlledComponent('value')) {
+      this._updateValueAndInput(value, true, inputValue);
+
+      if (this._adapter.needConfirm()) {
+        this._adapter.updateCachedSelectedValue(value);
+      }
+    }
+
+    this._notifyChange(value);
+
+    this._adapter.notifyClear(e);
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  handleRangeInputBlur(value, e) {} // Parses input only after user returns
+
+
+  handleInputComplete() {
+    let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    // console.log(input);
+    let parsedResult = input ? this._isMultiple() ? this.parseMultipleInput(input, ',', true) : this.parseInput(input) : [];
+    parsedResult = parsedResult && parsedResult.length ? parsedResult : this.getState('value'); // Use the current date as the value when the current input is empty and the last input is also empty
+
+    if (!parsedResult || !parsedResult.length) {
+      const nowDate = new Date();
+
+      if (this._isRangeType()) {
+        parsedResult = [nowDate, nowDate];
+      } else {
+        parsedResult = [nowDate];
+      }
+    }
+
+    this._updateValueAndInput(parsedResult);
+
+    const {
+      value: stateValue
+    } = this.getStates();
+
+    const changedDates = this._getChangedDates(parsedResult);
+
+    if (!this._someDateDisabled(changedDates) && !(0, _isEqual2.default)(parsedResult, stateValue)) {
+      this._notifyChange(parsedResult);
+    }
+  }
+  /**
+   * Parse the input, return the time object if it is valid,
+   *  otherwise return "
+   *
+   * @param {string} input
+   * @returns  {Date [] | '}
+   */
+
+
+  parseInput() {
+    let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let result = []; // console.log(input);
+
+    const {
+      dateFnsLocale,
+      rangeSeparator
+    } = this.getProps();
+
+    if (input && input.length) {
+      const type = this.getProp('type');
+      const formatToken = this.getProp('format') || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(type);
+      let parsedResult, formatedInput;
+      const nowDate = new Date();
+
+      switch (type) {
+        case 'date':
+        case 'dateTime':
+        case 'month':
+          parsedResult = input ? (0, _parser.compatiableParse)(input, formatToken, nowDate, dateFnsLocale) : '';
+          formatedInput = parsedResult && (0, _dateFns.isValid)(parsedResult) && this.localeFormat(parsedResult, formatToken);
+
+          if (parsedResult && formatedInput === input) {
+            result = [parsedResult];
+          }
+
+          break;
+
+        case 'dateRange':
+        case 'dateTimeRange':
+          const separator = rangeSeparator;
+          const values = input.split(separator);
+          parsedResult = values && (0, _reduce.default)(values).call(values, (arr, cur) => {
+            const parsedVal = cur && (0, _parser.compatiableParse)(cur, formatToken, nowDate, dateFnsLocale);
+            parsedVal && arr.push(parsedVal);
+            return arr;
+          }, []);
+          formatedInput = parsedResult && (0, _map.default)(parsedResult).call(parsedResult, v => v && (0, _dateFns.isValid)(v) && this.localeFormat(v, formatToken)).join(separator);
+
+          if (parsedResult && formatedInput === input) {
+            (0, _sort.default)(parsedResult).call(parsedResult, (d1, d2) => d1.getTime() - d2.getTime());
+            result = parsedResult;
+          }
+
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    return result;
+  }
+  /**
+   * Parses the input when multiple is true, if valid,
+   *  returns a list of time objects, otherwise returns an array
+   *
+   * @param {string} [input='']
+   * @param {string} [separator=',']
+   * @param {boolean} [needDedupe=false]
+   * @returns {Date[]}
+   */
+
+
+  parseMultipleInput() {
+    let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.strings.DEFAULT_SEPARATOR_MULTIPLE;
+    let needDedupe = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    const max = this.getProp('max');
+    const inputArr = input.split(separator);
+    const result = [];
+
+    for (const curInput of inputArr) {
+      let tmpParsed = curInput && this.parseInput(curInput);
+      tmpParsed = (0, _isArray.default)(tmpParsed) ? tmpParsed : tmpParsed && [tmpParsed];
+
+      if (tmpParsed && tmpParsed.length) {
+        if (needDedupe) {
+          // 20190519 TODO: needs to determine the case where multiple is true and range
+          !(0, _filter.default)(result).call(result, r => Boolean((0, _find.default)(tmpParsed).call(tmpParsed, tp => (0, _dateFns.isSameSecond)(r, tp)))) && result.push(...tmpParsed);
+        } else {
+          result.push(...tmpParsed);
+        }
+      } else {
+        return [];
+      }
+
+      if (max && max > 0 && result.length > max) {
+        return [];
+      }
+    }
+
+    return result;
+  }
+  /**
+   * dates[] => string
+   *
+   * @param {Date[]} dates
+   * @returns {string}
+   */
+
+
+  formatDates() {
+    let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let str = '';
+    const rangeSeparator = this.getProp('rangeSeparator');
+
+    if ((0, _isArray.default)(dates) && dates.length) {
+      const type = this.getProp('type');
+      const formatToken = this.getProp('format') || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(type);
+
+      switch (type) {
+        case 'date':
+        case 'dateTime':
+        case 'month':
+          str = this.localeFormat(dates[0], formatToken);
+          break;
+
+        case 'dateRange':
+        case 'dateTimeRange':
+          const startIsTruthy = !(0, _isNullOrUndefined.default)(dates[0]);
+          const endIsTruthy = !(0, _isNullOrUndefined.default)(dates[1]);
+
+          if (startIsTruthy && endIsTruthy) {
+            var _context3, _context4;
+
+            str = (0, _concat.default)(_context3 = (0, _concat.default)(_context4 = "".concat(this.localeFormat(dates[0], formatToken))).call(_context4, rangeSeparator)).call(_context3, this.localeFormat(dates[1], formatToken));
+          } else {
+            if (startIsTruthy) {
+              var _context5;
+
+              str = (0, _concat.default)(_context5 = "".concat(this.localeFormat(dates[0], formatToken))).call(_context5, rangeSeparator);
+            } else if (endIsTruthy) {
+              var _context6;
+
+              str = (0, _concat.default)(_context6 = "".concat(rangeSeparator)).call(_context6, this.localeFormat(dates[1], formatToken));
+            }
+          }
+
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    return str;
+  }
+  /**
+   * dates[] => string
+   *
+   * @param {Date[]} dates
+   * @returns {string}
+   */
+
+
+  formatMultipleDates() {
+    let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.strings.DEFAULT_SEPARATOR_MULTIPLE;
+    const strs = [];
+
+    if ((0, _isArray.default)(dates) && dates.length) {
+      const type = this.getProp('type');
+
+      switch (type) {
+        case 'date':
+        case 'dateTime':
+        case 'month':
+          (0, _forEach.default)(dates).call(dates, date => strs.push(this.formatDates([date])));
+          break;
+
+        case 'dateRange':
+        case 'dateTimeRange':
+          for (let i = 0; i < dates.length; i += 2) {
+            strs.push(this.formatDates((0, _slice.default)(dates).call(dates, i, i + 2)));
+          }
+
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    return strs.join(separator);
+  }
+  /**
+   * Update date value and the value of the input box
+   * 1. Select Update
+   * 2. Input Update
+   * @param {Date|''} value
+   * @param {Boolean} forceUpdateValue
+   * @param {String} input
+   */
+
+
+  _updateValueAndInput(value, forceUpdateValue, input) {
+    let _value;
+
+    if (forceUpdateValue || value) {
+      if (!(0, _isArray.default)(value)) {
+        _value = value ? [value] : [];
+      } else {
+        _value = value;
+      }
+
+      const changedDates = this._getChangedDates(_value); // You cannot update the value directly when needConfirm, you can only change the value through handleConfirm
+
+
+      if (!this._isControlledComponent() && !this._someDateDisabled(changedDates) && !this._adapter.needConfirm()) {
+        this._adapter.updateValue(_value);
+      }
+    }
+
+    this._adapter.updateInputValue(input);
+  }
+  /**
+   * when changing the selected value through the date panel
+   * @param {*} value
+   * @param {*} options
+   */
+
+
+  handleSelectedChange(value, options) {
+    const type = this.getProp('type');
+    const {
+      value: stateValue
+    } = this.getStates();
+
+    const controlled = this._isControlledComponent();
+
+    const fromPreset = (0, _isObject2.default)(options) ? options.fromPreset : options;
+    const closePanel = (0, _get2.default)(options, 'closePanel', true);
+    /**
+     * It is used to determine whether the panel can be stowed. In a Range type component, it is necessary to select both starting Time and endTime before stowing.
+     * To determine whether both starting Time and endTime have been selected, it is used to judge whether the two inputs have been Focused.
+     * This variable is used to indicate whether such a judgment is required. In the scene with shortcut operations, it is not required.
+     */
+
+    const needCheckFocusRecord = (0, _get2.default)(options, 'needCheckFocusRecord', true);
+
+    if (this._adapter.needConfirm()) {
+      this._adapter.updateCachedSelectedValue(value);
+    }
+
+    const dates = (0, _isArray.default)(value) ? [...value] : value ? [value] : [];
+
+    const changedDates = this._getChangedDates(dates);
+
+    let inputValue;
+
+    if (!this._someDateDisabled(changedDates)) {
+      inputValue = this._isMultiple() ? this.formatMultipleDates(dates) : this.formatDates(dates);
+      const isRangeTypeAndInputIncomplete = this._isRangeType() && ((0, _isNullOrUndefined.default)(dates[0]) || (0, _isNullOrUndefined.default)(dates[1]));
+      /**
+       * If the input is incomplete when under control, the notifyChange is not triggered because
+       * You need to update the value of the input box, otherwise there will be a problem that a date is selected but the input box does not show the date #1357
+       *
+       * 受控时如果输入不完整，由于没有触发 notifyChange
+       * 需要组件内更新一下输入框的值，否则会出现选了一个日期但是输入框没有回显日期的问题 #1357
+       */
+
+      if (!this._adapter.needConfirm() || fromPreset) {
+        if (isRangeTypeAndInputIncomplete) {
+          // do not change value when selected value is incomplete
+          this._adapter.updateInputValue(inputValue);
+
+          return;
+        } else {
+          (!controlled || fromPreset) && this._updateValueAndInput(dates, true, inputValue);
+        }
+      }
+
+      if (!controlled && this._adapter.needConfirm()) {
+        // select date only change inputValue when needConfirm is true
+        this._adapter.updateInputValue(inputValue); // if inputValue is not complete, don't notifyChange
+
+
+        if (isRangeTypeAndInputIncomplete) {
+          return;
+        }
+      }
+
+      if (!(0, _isEqual2.default)(value, stateValue)) {
+        this._notifyChange(value);
+      }
+    }
+
+    const focusRecordChecked = !needCheckFocusRecord || needCheckFocusRecord && this._adapter.couldPanelClosed();
+
+    if (type === 'date' && !this._isMultiple() && closePanel || type === 'dateRange' && this._isRangeValueComplete(dates) && closePanel && focusRecordChecked) {
+      this.closePanel(undefined, inputValue, dates);
+    }
+  }
+  /**
+   * when changing the year and month through the panel when the type is year or month
+   * @param {*} item
+   */
+
+
+  handleYMSelectedChange() {
+    let item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    // console.log(item);
+    const {
+      currentMonth,
+      currentYear
+    } = item;
+
+    if (typeof currentMonth === 'number' && typeof currentYear === 'number') {
+      // Strings with only dates (e.g. "1970-01-01") will be treated as UTC instead of local time #1460
+      const date = new Date(currentYear, currentMonth - 1);
+      this.handleSelectedChange([date]);
+    }
+  }
+
+  handleConfirm() {
+    const {
+      cachedSelectedValue,
+      value
+    } = this.getStates();
+
+    const isRangeValueComplete = this._isRangeValueComplete(cachedSelectedValue);
+
+    const newValue = isRangeValueComplete ? cachedSelectedValue : value;
+
+    if (this._adapter.needConfirm() && !this._isControlledComponent()) {
+      this._adapter.updateValue(newValue);
+    } // If the input is incomplete, the legal date of the last input is used
+
+
+    this.closePanel(undefined, undefined, newValue);
+
+    if (isRangeValueComplete) {
+      const {
+        notifyValue,
+        notifyDate
+      } = this.disposeCallbackArgs(cachedSelectedValue);
+
+      this._adapter.notifyConfirm(notifyDate, notifyValue);
+    }
+  }
+
+  handleCancel() {
+    this.closePanel();
+    const value = this.getState('value');
+    const {
+      notifyValue,
+      notifyDate
+    } = this.disposeCallbackArgs(value);
+
+    this._adapter.notifyCancel(notifyDate, notifyValue);
+  }
+
+  handlePresetClick(item, e) {
+    const {
+      type,
+      timeZone
+    } = this.getProps();
+    const prevTimeZone = this.getState('prevTimezone');
+    let value;
+
+    switch (type) {
+      case 'month':
+      case 'dateTime':
+      case 'date':
+        value = this.parseWithTimezone([item.start], timeZone, prevTimeZone);
+        this.handleSelectedChange(value);
+        break;
+
+      case 'dateTimeRange':
+      case 'dateRange':
+        value = this.parseWithTimezone([item.start, item.end], timeZone, prevTimeZone);
+        this.handleSelectedChange(value, {
+          needCheckFocusRecord: false
+        });
+        break;
+
+      default:
+        break;
+    }
+
+    this._adapter.notifyPresetsClick(item, e);
+  }
+  /**
+   * 根据 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");
+   *
+   * According to the type processing onChange returned parameters
+   *
+   *   - the returned date needs to convert the user time to the set time zone time
+   *       - user time: user computer system time
+   *       - time zone time: timeZone set by ConfigProvider
+   *   - example: the user sets the time zone to + 9, the computer's time zone is + 8 zone, 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 passed out, you need to + 8 22:00 = > + 9 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
+   * @return {{ notifyDate: Date|Date[], notifyValue: string|string[]}}
+   */
+
+
+  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
+    };
+  }
+  /**
+   * Notice: Check whether the date is the same as the state value before calling
+   * @param {Date[]} value
+   */
+
+
+  _notifyChange(value) {
+    if (this._isRangeType() && !this._isRangeValueComplete(value)) {
+      return;
+    }
+
+    const {
+      onChangeWithDateFirst
+    } = this.getProps();
+    const {
+      notifyValue,
+      notifyDate
+    } = this.disposeCallbackArgs(value);
+
+    if (onChangeWithDateFirst) {
+      this._adapter.notifyChange(notifyDate, notifyValue);
+    } else {
+      this._adapter.notifyChange(notifyValue, notifyDate);
+    }
+  }
+  /**
+   * Get the date changed through the date panel or enter
+   * @param {Date[]} dates
+   * @returns {Date[]}
+   */
+
+
+  _getChangedDates(dates) {
+    const type = this._adapter.getProp('type');
+
+    const stateValue = this._adapter.getState('value');
+
+    const changedDates = [];
+
+    switch (type) {
+      case 'dateRange':
+      case 'dateTimeRange':
+        const [stateStart, stateEnd] = stateValue;
+        const [start, end] = dates;
+
+        if (!(0, _dateFns.isEqual)(start, stateStart)) {
+          changedDates.push(start);
+        }
+
+        if (!(0, _dateFns.isEqual)(end, stateEnd)) {
+          changedDates.push(end);
+        }
+
+        break;
+
+      default:
+        const stateValueSet = new _set.default();
+        (0, _forEach.default)(stateValue).call(stateValue, value => stateValueSet.add((0, _dateFns.isDate)(value) && value.valueOf()));
+
+        for (const date of dates) {
+          if (!stateValueSet.has((0, _dateFns.isDate)(date) && date.valueOf())) {
+            changedDates.push(date);
+          }
+        }
+
+    }
+
+    return changedDates;
+  }
+  /**
+   * Whether a date is disabled
+   * @param {Array} value
+   */
+
+
+  _someDateDisabled(value) {
+    const stateValue = this.getState('value');
+    const disabledOptions = {
+      rangeStart: '',
+      rangeEnd: ''
+    }; // DisabledDate needs to pass the second parameter
+
+    if (this._isRangeType() && (0, _isArray.default)(stateValue)) {
+      if ((0, _dateFns.isValid)(stateValue[0])) {
+        const rangeStart = (0, _dateFns.format)(stateValue[0], 'yyyy-MM-dd');
+        disabledOptions.rangeStart = rangeStart;
+      }
+
+      if ((0, _dateFns.isValid)(stateValue[1])) {
+        const rangeEnd = (0, _dateFns.format)(stateValue[1], 'yyyy-MM-dd');
+        disabledOptions.rangeEnd = rangeEnd;
+      }
+    }
+
+    let isSomeDateDisabled = false;
+
+    for (const date of value) {
+      // skip check if date is null
+      if (!(0, _isNullOrUndefined.default)(date) && this.disabledDisposeDate(date, disabledOptions)) {
+        isSomeDateDisabled = true;
+        break;
+      }
+    }
+
+    return isSomeDateDisabled;
+  }
+  /**
+   * Format locale date
+   * locale get from LocaleProvider
+   * @param {Date} date
+   * @param {String} token
+   */
+
+
+  localeFormat(date, token) {
+    const dateFnsLocale = this._adapter.getProp('dateFnsLocale');
+
+    return (0, _dateFns.format)(date, token, {
+      locale: dateFnsLocale
+    });
+  }
+  /**
+   * Convert computer date to UTC date
+   * Before passing the date to the user, you need to convert the date to UTC time
+   * dispose date from computer date to utc date
+   * When given timeZone prop, you should convert computer date to utc date before passing to user
+   * @param {(date: Date) => Boolean} fn
+   * @param {Date|Date[]} date
+   * @returns {Boolean}
+   */
+
+
+  disposeDateFn(fn, date) {
+    const {
+      notifyDate
+    } = this.disposeCallbackArgs(date);
+    const dateIsArray = (0, _isArray.default)(date);
+    const notifyDateIsArray = (0, _isArray.default)(notifyDate);
+    let disposeDate;
+
+    if (dateIsArray === notifyDateIsArray) {
+      disposeDate = notifyDate;
+    } else {
+      disposeDate = dateIsArray ? [notifyDate] : notifyDate[0];
+    }
+
+    for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      rest[_key - 2] = arguments[_key];
+    }
+
+    return fn(disposeDate, ...rest);
+  }
+  /**
+   * Determine whether the date is disabled
+   * Whether the date is disabled
+   * @param {Date} date
+   * @returns {Boolean}
+   */
+
+
+  disabledDisposeDate(date) {
+    const {
+      disabledDate
+    } = this.getProps();
+
+    for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      rest[_key2 - 1] = arguments[_key2];
+    }
+
+    return this.disposeDateFn(disabledDate, date, ...rest);
+  }
+  /**
+   * Determine whether the date is disabled
+   * Whether the date time is disabled
+   * @param {Date|Date[]} date
+   * @returns {Object}
+   */
+
+
+  disabledDisposeTime(date) {
+    const {
+      disabledTime
+    } = this.getProps();
+
+    for (var _len3 = arguments.length, rest = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+      rest[_key3 - 1] = arguments[_key3];
+    }
+
+    return this.disposeDateFn(disabledTime, date, ...rest);
+  }
+  /**
+   * Trigger wrapper needs to do two things:
+   *  1. Open Panel when clicking trigger;
+   *  2. When clicking on a child but the child does not listen to the focus event, manually trigger focus
+   *
+   * @param {Event} e
+   * @returns
+   */
+
+
+  handleTriggerWrapperClick(e) {
+    const {
+      disabled
+    } = this._adapter.getProps();
+
+    const {
+      rangeInputFocus
+    } = this._adapter.getStates();
+
+    if (disabled) {
+      return;
+    }
+    /**
+     * - 非范围选择时，trigger 为原生输入框，已在组件内处理了 focus 逻辑
+     * - isEventTarget 函数用于判断触发事件的是否为 input wrapper。如果是冒泡上来的不用处理，因为在子级已经处理了 focus 逻辑。
+     *
+     * - When type is not range type, Input component will automatically focus in the same case
+     * - isEventTarget is used to judge whether the event is a bubbling event
+     */
+
+
+    if (this._isRangeType() && !rangeInputFocus && this._adapter.isEventTarget(e)) {
+      (0, _setTimeout2.default)(() => {
+        // using setTimeout get correct state value 'rangeInputFocus'
+        this.handleInputFocus(e, 'rangeStart');
+        this.openPanel();
+      }, 0);
+    } else {
+      this.openPanel();
+    }
+  }
+
+}
+
+exports.default = DatePickerFoundation;