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

package/lib/cjs/datePicker/datePicker.js

@@ -0,0 +1,731 @@
+"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 _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _isDate2 = _interopRequireDefault(require("lodash/isDate"));
+
+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 _context5 = _interopRequireDefault(require("../configProvider/context"));
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/datePicker/foundation"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/datePicker/constants");
+
+var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _index = _interopRequireDefault(require("../popover/index"));
+
+var _dateInput = _interopRequireDefault(require("./dateInput"));
+
+var _monthsGrid = _interopRequireDefault(require("./monthsGrid"));
+
+var _quickControl = _interopRequireDefault(require("./quickControl"));
+
+var _footer = _interopRequireDefault(require("./footer"));
+
+var _trigger = _interopRequireDefault(require("../trigger"));
+
+var _yearAndMonth = _interopRequireDefault(require("./yearAndMonth"));
+
+require("@douyinfe/semi-foundation/lib/cjs/datePicker/datePicker.css");
+
+/* eslint-disable max-len */
+class DatePicker extends _baseComponent.default {
+  constructor(props) {
+    var _this;
+
+    super(props);
+    _this = this;
+
+    this.setTriggerRef = node => this.triggerElRef.current = node; // Called when changes are selected by clicking on the selected date
+
+
+    this.handleSelectedChange = (v, options) => this.foundation.handleSelectedChange(v, options); // Called when the year and month change
+
+
+    this.handleYMSelectedChange = item => this.foundation.handleYMSelectedChange(item);
+
+    this.disabledDisposeDate = function (date) {
+      for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        rest[_key - 1] = arguments[_key];
+      }
+
+      return _this.foundation.disabledDisposeDate(date, ...rest);
+    };
+
+    this.disabledDisposeTime = function (date) {
+      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.foundation.disabledDisposeTime(date, ...rest);
+    };
+
+    this.handleOpenPanel = () => this.foundation.openPanel();
+
+    this.handleInputChange = function () {
+      return _this.foundation.handleInputChange(...arguments);
+    };
+
+    this.handleInputComplete = v => this.foundation.handleInputComplete(v);
+
+    this.handleInputBlur = e => this.foundation.handleInputBlur((0, _get2.default)(e, 'nativeEvent.target.value'), e);
+
+    this.handleInputFocus = function () {
+      return _this.foundation.handleInputFocus(...arguments);
+    };
+
+    this.handleInputClear = e => this.foundation.handleInputClear(e);
+
+    this.handleTriggerWrapperClick = e => this.foundation.handleTriggerWrapperClick(e);
+
+    this.handleSetRangeFocus = rangeInputFocus => this.foundation.handleSetRangeFocus(rangeInputFocus);
+
+    this.handleRangeInputBlur = (value, e) => this.foundation.handleRangeInputBlur(value, e);
+
+    this.handleRangeInputClear = e => this.foundation.handleRangeInputClear(e);
+
+    this.handleRangeEndTabPress = e => this.foundation.handleRangeEndTabPress(e);
+
+    this.isAnotherPanelHasOpened = currentRangeInput => {
+      if (currentRangeInput === 'rangeStart') {
+        return this.focusRecordsRef.current.rangeEnd;
+      } else {
+        return this.focusRecordsRef.current.rangeStart;
+      }
+    };
+
+    this.handleConfirm = e => this.foundation.handleConfirm();
+
+    this.handleCancel = e => this.foundation.handleCancel();
+
+    this.renderFooter = (locale, localeCode) => {
+      if (this.adapter.needConfirm()) {
+        return /*#__PURE__*/_react.default.createElement(_footer.default, (0, _assign.default)({}, this.props, {
+          locale: locale,
+          localeCode: localeCode,
+          onConfirmClick: this.handleConfirm,
+          onCancelClick: this.handleCancel
+        }));
+      }
+
+      return null;
+    };
+
+    this.renderPanel = (locale, localeCode, dateFnsLocale) => {
+      const {
+        dropdownClassName,
+        dropdownStyle,
+        density,
+        topSlot,
+        bottomSlot
+      } = this.props;
+      const wrapCls = (0, _classnames.default)(_constants.cssClasses.PREFIX, {
+        [_constants.cssClasses.PANEL_YAM]: this.adapter.typeIsYearOrMonth(),
+        ["".concat(_constants.cssClasses.PREFIX, "-compact")]: density === 'compact'
+      }, dropdownClassName);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: this.panelRef,
+        className: wrapCls,
+        style: dropdownStyle
+      }, topSlot && /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_constants.cssClasses.PREFIX, "-topSlot")
+      }, topSlot), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_constants.cssClasses.PREFIX, "-bottomSlot")
+      }, bottomSlot), this.renderFooter(locale, localeCode));
+    };
+
+    this.renderYearMonthPanel = (locale, localeCode) => {
+      const {
+        density
+      } = this.props;
+      const date = this.state.value[0];
+      let year = 0;
+      let month = 0;
+
+      if ((0, _isDate2.default)(date)) {
+        year = date.getFullYear();
+        month = date.getMonth() + 1;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_yearAndMonth.default, {
+        locale: locale,
+        localeCode: localeCode,
+        disabledDate: this.disabledDisposeDate,
+        noBackBtn: true,
+        monthCycled: true,
+        onSelect: this.handleYMSelectedChange,
+        currentYear: year,
+        currentMonth: month,
+        density: density
+      });
+    };
+
+    this.wrapPopover = children => {
+      const {
+        panelShow
+      } = this.state; // rtl changes the default position
+
+      const {
+        direction
+      } = this.context;
+      const defaultPosition = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
+      const {
+        motion,
+        zIndex,
+        position = defaultPosition,
+        getPopupContainer,
+        locale,
+        localeCode,
+        dateFnsLocale,
+        stopPropagation,
+        autoAdjustOverflow,
+        spacing
+      } = this.props;
+      const mergedMotion = this.foundation.getMergedMotion(motion);
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        getPopupContainer: getPopupContainer,
+        // wrapWhenSpecial={false}
+        autoAdjustOverflow: autoAdjustOverflow,
+        zIndex: zIndex,
+        motion: mergedMotion,
+        content: this.renderPanel(locale, localeCode, dateFnsLocale),
+        trigger: "custom",
+        position: position,
+        visible: panelShow,
+        stopPropagation: stopPropagation,
+        spacing: spacing
+      }, children);
+    };
+
+    this.state = {
+      panelShow: props.open || props.defaultOpen,
+      isRange: false,
+      inputValue: null,
+      value: [],
+      cachedSelectedValue: null,
+      prevTimeZone: null,
+      motionEnd: false,
+      rangeInputFocus: undefined,
+      autofocus: props.autoFocus || this.isRangeType(props.type, props.triggerRender) && (props.open || props.defaultOpen)
+    };
+    this.adapter.setCache('cachedSelectedValue', null);
+    this.triggerElRef = /*#__PURE__*/_react.default.createRef();
+    this.panelRef = /*#__PURE__*/_react.default.createRef();
+    this.monthGrid = /*#__PURE__*/_react.default.createRef();
+    this.rangeInputStartRef = /*#__PURE__*/_react.default.createRef();
+    this.rangeInputEndRef = /*#__PURE__*/_react.default.createRef();
+    this.focusRecordsRef = /*#__PURE__*/_react.default.createRef(); // @ts-ignore ignore readonly
+
+    this.focusRecordsRef.current = {
+      rangeStart: false,
+      rangeEnd: false
+    };
+    this.foundation = new _foundation.default(this.adapter);
+  }
+
+  get adapter() {
+    var _this2 = this;
+
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      togglePanel: panelShow => {
+        this.setState({
+          panelShow
+        });
+
+        if (!panelShow) {
+          this.focusRecordsRef.current.rangeEnd = false;
+          this.focusRecordsRef.current.rangeStart = false;
+        }
+      },
+      registerClickOutSide: () => {
+        if (this.clickOutSideHandler) {
+          this.adapter.unregisterClickOutSide();
+          this.clickOutSideHandler = null;
+        }
+
+        this.clickOutSideHandler = e => {
+          const triggerEl = this.triggerElRef && this.triggerElRef.current;
+          const panelEl = this.panelRef && this.panelRef.current;
+          const isInTrigger = triggerEl && triggerEl.contains(e.target);
+          const isInPanel = panelEl && panelEl.contains(e.target);
+
+          if (!isInTrigger && !isInPanel && this._mounted) {
+            this.foundation.closePanel(e);
+          }
+        };
+
+        document.addEventListener('mousedown', this.clickOutSideHandler);
+      },
+      unregisterClickOutSide: () => {
+        document.removeEventListener('mousedown', this.clickOutSideHandler);
+      },
+      notifyBlur: function () {
+        return _this2.props.onBlur(...arguments);
+      },
+      notifyFocus: function () {
+        return _this2.props.onFocus(...arguments);
+      },
+      notifyClear: function () {
+        return _this2.props.onClear(...arguments);
+      },
+      notifyChange: function () {
+        return _this2.props.onChange(...arguments);
+      },
+      notifyCancel: function () {
+        return _this2.props.onCancel(...arguments);
+      },
+      notifyConfirm: function () {
+        return _this2.props.onConfirm(...arguments);
+      },
+      notifyOpenChange: function () {
+        return _this2.props.onOpenChange(...arguments);
+      },
+      notifyPresetsClick: function () {
+        return _this2.props.onPresetClick(...arguments);
+      },
+      updateValue: value => this.setState({
+        value
+      }),
+      updatePrevTimezone: prevTimeZone => this.setState({
+        prevTimeZone
+      }),
+      updateCachedSelectedValue: cachedSelectedValue => {
+        let _cachedSelectedValue = cachedSelectedValue;
+
+        if (cachedSelectedValue && !(0, _isArray.default)(cachedSelectedValue)) {
+          _cachedSelectedValue = [...cachedSelectedValue];
+        }
+
+        this.setState({
+          cachedSelectedValue: _cachedSelectedValue
+        });
+      },
+      updateInputValue: inputValue => {
+        this.setState({
+          inputValue
+        });
+      },
+      needConfirm: () => {
+        var _context;
+
+        return (0, _includes.default)(_context = ['dateTime', 'dateTimeRange']).call(_context, this.props.type) && this.props.needConfirm === true;
+      },
+      typeIsYearOrMonth: () => {
+        var _context2;
+
+        return (0, _includes.default)(_context2 = ['month', 'year']).call(_context2, this.props.type);
+      },
+      setMotionEnd: motionEnd => this.setState({
+        motionEnd
+      }),
+      setRangeInputFocus: rangeInputFocus => {
+        if (rangeInputFocus !== this.state.rangeInputFocus) {
+          this.setState({
+            rangeInputFocus
+          });
+        }
+
+        switch (rangeInputFocus) {
+          case 'rangeStart':
+            const inputStartNode = (0, _get2.default)(this, 'rangeInputStartRef.current');
+            inputStartNode && inputStartNode.focus();
+            /**
+             * 解决选择完startDate，切换到endDate后panel被立马关闭的问题。
+             * 用户打开panel，选了startDate后，会执行setRangeInputFocus('rangeEnd'),focus到endDateInput，
+             * 同时会走到datePicker/foundation.js中的handleSelectedChange方法，在这个方法里会根据focusRecordsRef来判断是否可以关闭panel。
+             * 如果在setRangeInputFocus里同步修改了focusRecordsRef的状态为true，那在handleSelectedChange里会误判startDate和endDate都已经完成选择，
+             * 导致endDate还没选就关闭了panel
+             *
+             * Fix the problem that the panel is closed immediately after switching to endDate after starting Date is selected.
+             * The user opens the panel and after starting Date is selected, setRangeInputFocus ('rangeEnd') will be executed, focus to endDateInput,
+             * At the same time, it will go to the handleSelectedChange method in datePicker/foundation.js, where it will be determined whether the panel can be closed according to focusRecordsRef.
+             * If the status of focusRecordsRef is modified synchronously in setRangeInputFocus to true, then in handleSelectedChange it will be misjudged that both begDate and endDate have completed the selection,
+             * resulting in the panel being closed before endDate is selected
+             */
+
+            (0, _setTimeout2.default)(() => {
+              this.focusRecordsRef.current.rangeStart = true;
+            }, 0);
+            break;
+
+          case 'rangeEnd':
+            const inputEndNode = (0, _get2.default)(this, 'rangeInputEndRef.current');
+            inputEndNode && inputEndNode.focus();
+            /**
+             * 解决选择完startDate，切换到endDate后panel被立马关闭的问题。
+             * 用户打开panel，选了startDate后，会执行setRangeInputFocus('rangeEnd'),focus到endDateInput，
+             * 同时会走到datePicker/foundation.js中的handleSelectedChange方法，在这个方法里会根据focusRecordsRef来判断是否可以关闭panel。
+             * 如果在setRangeInputFocus里同步修改了focusRecordsRef的状态为true，那在handleSelectedChange里会误判startDate和endDate都已经完成选择，
+             * 导致endDate还没选就关闭了panel
+             *
+             * Fix the problem that the panel is closed immediately after switching to endDate after starting Date is selected.
+             * The user opens the panel and after starting Date is selected, setRangeInputFocus ('rangeEnd') will be executed, focus to endDateInput,
+             * At the same time, it will go to the handleSelectedChange method in datePicker/foundation.js, where it will be determined whether the panel can be closed according to focusRecordsRef.
+             * If the status of focusRecordsRef is modified synchronously in setRangeInputFocus to true, then in handleSelectedChange it will be misjudged that both begDate and endDate have completed the selection,
+             * resulting in the panel being closed before endDate is selected
+             */
+
+            (0, _setTimeout2.default)(() => {
+              this.focusRecordsRef.current.rangeEnd = true;
+            }, 0);
+            break;
+
+          default:
+            return;
+        }
+      },
+      couldPanelClosed: () => this.focusRecordsRef.current.rangeStart && this.focusRecordsRef.current.rangeEnd,
+      isEventTarget: e => e && e.target === e.currentTarget
+    });
+  }
+
+  isRangeType(type, triggerRender) {
+    return /range/i.test(type) && !(0, _isFunction2.default)(triggerRender);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value) {
+      this.foundation.initFromProps((0, _assign.default)({}, this.props));
+    } else if (this.props.timeZone !== prevProps.timeZone) {
+      this.foundation.initFromProps({
+        value: this.state.value,
+        timeZone: this.props.timeZone,
+        prevTimeZone: prevProps.timeZone
+      });
+    }
+
+    if (prevProps.open !== this.props.open) {
+      this.foundation.initPanelOpenStatus();
+    }
+  }
+
+  componentDidMount() {
+    this._mounted = true;
+    super.componentDidMount();
+  }
+
+  componentWillUnmount() {
+    this._mounted = false;
+    super.componentWillUnmount();
+  }
+
+  renderMonthGrid(locale, localeCode, dateFnsLocale) {
+    const {
+      type,
+      multiple,
+      max,
+      weekStartsOn,
+      timePickerOpts,
+      defaultPickerValue,
+      format,
+      hideDisabledOptions,
+      disabledTimePicker,
+      renderDate,
+      renderFullDate,
+      startDateOffset,
+      endDateOffset,
+      autoSwitchDate,
+      density,
+      syncSwitchMonth,
+      onPanelChange,
+      timeZone
+    } = this.props;
+    const {
+      value,
+      cachedSelectedValue,
+      motionEnd,
+      rangeInputFocus
+    } = this.state; // const cachedSelectedValue = this.adapter.getCache('cachedSelectedValue');
+
+    let defaultValue = value;
+
+    if (this.adapter.needConfirm()) {
+      defaultValue = cachedSelectedValue;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_monthsGrid.default, {
+      ref: this.monthGrid,
+      locale: locale,
+      localeCode: localeCode,
+      dateFnsLocale: dateFnsLocale,
+      weekStartsOn: weekStartsOn,
+      type: type,
+      multiple: multiple,
+      max: max,
+      format: format,
+      disabledDate: this.disabledDisposeDate,
+      hideDisabledOptions: hideDisabledOptions,
+      disabledTimePicker: disabledTimePicker,
+      disabledTime: this.disabledDisposeTime,
+      defaultValue: defaultValue,
+      defaultPickerValue: defaultPickerValue,
+      timePickerOpts: timePickerOpts,
+      isControlledComponent: !this.adapter.needConfirm() && this.isControlled('value'),
+      onChange: this.handleSelectedChange,
+      renderDate: renderDate,
+      renderFullDate: renderFullDate,
+      startDateOffset: startDateOffset,
+      endDateOffset: endDateOffset,
+      autoSwitchDate: autoSwitchDate,
+      motionEnd: motionEnd,
+      density: density,
+      rangeInputFocus: rangeInputFocus,
+      setRangeInputFocus: this.handleSetRangeFocus,
+      isAnotherPanelHasOpened: this.isAnotherPanelHasOpened,
+      syncSwitchMonth: syncSwitchMonth,
+      onPanelChange: onPanelChange,
+      timeZone: timeZone,
+      focusRecordsRef: this.focusRecordsRef
+    });
+  }
+
+  renderQuickControls() {
+    const {
+      presets,
+      type
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_quickControl.default, {
+      type: type,
+      presets: presets,
+      onPresetClick: (item, e) => this.foundation.handlePresetClick(item, e)
+    });
+  }
+
+  renderInner(extraProps) {
+    var _context3, _context4;
+
+    const {
+      type,
+      format,
+      multiple,
+      disabled,
+      showClear,
+      insetLabel,
+      placeholder,
+      validateStatus,
+      inputStyle,
+      prefix,
+      locale,
+      dateFnsLocale,
+      triggerRender,
+      size,
+      inputReadOnly,
+      rangeSeparator
+    } = this.props;
+    const {
+      value,
+      inputValue,
+      rangeInputFocus
+    } = this.state; // This class is not needed when triggerRender is function
+
+    const isRangeType = this.isRangeType(type, triggerRender);
+    const inputCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-input"), {
+      ["".concat(_constants.cssClasses.PREFIX, "-range-input")]: isRangeType,
+      [(0, _concat.default)(_context3 = "".concat(_constants.cssClasses.PREFIX, "-range-input-")).call(_context3, size)]: isRangeType && size,
+      ["".concat(_constants.cssClasses.PREFIX, "-range-input-active")]: isRangeType && rangeInputFocus && !disabled,
+      ["".concat(_constants.cssClasses.PREFIX, "-range-input-disabled")]: isRangeType && disabled,
+      [(0, _concat.default)(_context4 = "".concat(_constants.cssClasses.PREFIX, "-range-input-")).call(_context4, validateStatus)]: isRangeType && validateStatus
+    });
+    const phText = placeholder || locale.placeholder[type]; // i18n
+    // These values should be passed to triggerRender, do not delete any key if it is not necessary
+
+    const props = (0, _assign.default)((0, _assign.default)({}, extraProps), {
+      placeholder: phText,
+      disabled,
+      inputValue,
+      value,
+      onChange: this.handleInputChange,
+      onEnterPress: this.handleInputComplete,
+      // TODO: remove in next major version
+      block: true,
+      inputStyle,
+      showClear,
+      insetLabel,
+      type,
+      format,
+      multiple,
+      validateStatus,
+      inputReadOnly,
+      // onClick: this.handleOpenPanel,
+      onBlur: this.handleInputBlur,
+      onFocus: this.handleInputFocus,
+      onClear: this.handleInputClear,
+      prefix,
+      size,
+      autofocus: this.state.autofocus,
+      dateFnsLocale,
+      rangeInputStartRef: this.rangeInputStartRef,
+      rangeInputEndRef: this.rangeInputEndRef,
+      rangeInputFocus,
+      rangeSeparator,
+      onRangeBlur: this.handleRangeInputBlur,
+      onRangeClear: this.handleRangeInputClear,
+      onRangeEndTabPress: this.handleRangeEndTabPress
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      onClick: this.handleTriggerWrapperClick,
+      className: inputCls
+    }, typeof triggerRender === 'function' ? /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _assign.default)({}, props, {
+      triggerRender: triggerRender,
+      componentName: "DatePicker",
+      componentProps: (0, _assign.default)({}, this.props)
+    })) : /*#__PURE__*/_react.default.createElement(_dateInput.default, (0, _assign.default)({}, props)));
+  }
+
+  render() {
+    const {
+      style,
+      className,
+      prefixCls
+    } = this.props;
+    const outerProps = {
+      style,
+      className: (0, _classnames.default)(className, {
+        [prefixCls]: true
+      }),
+      ref: this.setTriggerRef
+    };
+    const inner = this.renderInner();
+    const wrappedInner = this.wrapPopover(inner);
+    return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, outerProps), wrappedInner);
+  }
+
+}
+
+exports.default = DatePicker;
+DatePicker.contextType = _context5.default;
+DatePicker.propTypes = {
+  type: _propTypes.default.oneOf(_constants.strings.TYPE_SET),
+  size: _propTypes.default.oneOf(_constants.strings.SIZE_SET),
+  density: _propTypes.default.oneOf(_constants.strings.DENSITY_SET),
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object, _propTypes.default.array]),
+  value: _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]),
+  disabledTime: _propTypes.default.func,
+  disabledTimePicker: _propTypes.default.bool,
+  hideDisabledOptions: _propTypes.default.bool,
+  format: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  multiple: _propTypes.default.bool,
+  max: _propTypes.default.number,
+  placeholder: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  presets: _propTypes.default.array,
+  onChange: _propTypes.default.func,
+  onChangeWithDateFirst: _propTypes.default.bool,
+  weekStartsOn: _propTypes.default.number,
+  disabledDate: _propTypes.default.func,
+  timePickerOpts: _propTypes.default.object,
+  showClear: _propTypes.default.bool,
+  onOpenChange: _propTypes.default.func,
+  open: _propTypes.default.bool,
+  defaultOpen: _propTypes.default.bool,
+  motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
+  className: _propTypes.default.string,
+  prefixCls: _propTypes.default.string,
+  prefix: _propTypes.default.node,
+  insetLabel: _propTypes.default.node,
+  zIndex: _propTypes.default.number,
+  position: _propTypes.default.oneOf(_constants2.strings.POSITION_SET),
+  getPopupContainer: _propTypes.default.func,
+  onCancel: _propTypes.default.func,
+  onConfirm: _propTypes.default.func,
+  needConfirm: _propTypes.default.bool,
+  inputStyle: _propTypes.default.object,
+  timeZone: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  triggerRender: _propTypes.default.func,
+  stopPropagation: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+  autoAdjustOverflow: _propTypes.default.bool,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onClear: _propTypes.default.func,
+  style: _propTypes.default.object,
+  autoFocus: _propTypes.default.bool,
+  inputReadOnly: _propTypes.default.bool,
+  validateStatus: _propTypes.default.oneOf(_constants.strings.STATUS),
+  renderDate: _propTypes.default.func,
+  renderFullDate: _propTypes.default.func,
+  spacing: _propTypes.default.number,
+  startDateOffset: _propTypes.default.func,
+  endDateOffset: _propTypes.default.func,
+  autoSwitchDate: _propTypes.default.bool,
+  dropdownClassName: _propTypes.default.string,
+  dropdownStyle: _propTypes.default.object,
+  topSlot: _propTypes.default.node,
+  bottomSlot: _propTypes.default.node,
+  dateFnsLocale: _propTypes.default.object,
+  // Support synchronous switching of months
+  syncSwitchMonth: _propTypes.default.bool,
+  // Callback function for panel date switching
+  onPanelChange: _propTypes.default.func,
+  rangeSeparator: _propTypes.default.string
+};
+DatePicker.defaultProps = {
+  onChangeWithDateFirst: true,
+  autoAdjustOverflow: true,
+  stopPropagation: true,
+  motion: true,
+  prefixCls: _constants.cssClasses.PREFIX,
+  // position: 'bottomLeft',
+  zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
+  type: 'date',
+  size: 'default',
+  density: 'default',
+  disabled: false,
+  multiple: false,
+  defaultOpen: false,
+  disabledHours: _noop2.default,
+  disabledMinutes: _noop2.default,
+  disabledSeconds: _noop2.default,
+  hideDisabledOptions: false,
+  onBlur: _noop2.default,
+  onFocus: _noop2.default,
+  onClear: _noop2.default,
+  onCancel: _noop2.default,
+  onConfirm: _noop2.default,
+  onChange: _noop2.default,
+  onOpenChange: _noop2.default,
+  onPanelChange: _noop2.default,
+  onPresetClick: _noop2.default,
+  weekStartsOn: _constants.numbers.WEEK_START_ON,
+  disabledDate: _stubFalse2.default,
+  disabledTime: _stubFalse2.default,
+  inputReadOnly: false,
+  spacing: _constants.numbers.SPACING,
+  autoSwitchDate: true,
+  syncSwitchMonth: false,
+  rangeSeparator: _constants.strings.DEFAULT_SEPARATOR_RANGE
+};