@kdcloudjs/kdesign 1.0.2

package/lib/date-picker/range-picker.js

@@ -0,0 +1,821 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _isSameWeek = _interopRequireDefault(require("date-fns/isSameWeek"));
+
+var _parse = _interopRequireDefault(require("date-fns/parse"));
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+var _hooks = require("../_utils/hooks");
+
+var _utils = require("../_utils");
+
+var _context = _interopRequireDefault(require("./context"));
+
+var _datePanel = _interopRequireDefault(require("./date-panel"));
+
+var _inputRange = _interopRequireDefault(require("./range/input-range"));
+
+var _utils2 = require("./utils");
+
+var _useValueTexts = _interopRequireDefault(require("./hooks/use-value-texts"));
+
+var _useHoverValue5 = _interopRequireDefault(require("./hooks/use-hover-value"));
+
+var _dateFns = require("./utils/date-fns");
+
+var _useTextValueMapping5 = _interopRequireDefault(require("./hooks/use-text-value-mapping"));
+
+var _useRangeViewDates3 = _interopRequireDefault(require("./hooks/use-range-view-dates"));
+
+var _locale = require("../locale");
+
+var _useRangeDisabled3 = _interopRequireDefault(require("./hooks/use-range-disabled"));
+
+var _getExtraFooter = _interopRequireDefault(require("./utils/get-extra-footer"));
+
+var _getRanges = _interopRequireDefault(require("./utils/get-ranges"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// 范围时间顺序错误时重新排序
+function reorderValues(values) {
+  if (values && values[0] && values[1] && (0, _dateFns.isAfter)(values[0], values[1])) {
+    return [values[1], values[0]];
+  }
+
+  return values;
+} // 范围时间顺序错误时报错
+
+
+function isErrorValues(values) {
+  if (values && values[0] && values[1] && (0, _dateFns.isAfter)(values[0], values[1])) {
+    console.error('开始日期在结束日期之后');
+    return true;
+  }
+
+  return false;
+} // 是否可以切换选择器
+
+
+function canValueTrigger(value, index, disabled, allowEmpty) {
+  if (value) {
+    return true;
+  }
+
+  if (allowEmpty && allowEmpty[index]) {
+    return true;
+  }
+
+  if (disabled[(index + 1) % 2]) {
+    return true;
+  }
+
+  return false;
+}
+
+function DatePicker(props) {
+  var customPrefixcls = props.prefixCls;
+
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps,
+      globalLocale = _useContext.locale;
+
+  var datePickerProps = (0, _utils.getCompProps)('RangePicker', userDefaultProps, props);
+  var datePickerPrefixCls = getPrefixCls(prefixCls, 'date-picker', customPrefixcls);
+  var allowClear = datePickerProps.allowClear,
+      value = datePickerProps.value,
+      defaultValue = datePickerProps.defaultValue,
+      mode = datePickerProps.mode,
+      _datePickerProps$pick = datePickerProps.picker,
+      picker = _datePickerProps$pick === void 0 ? 'date' : _datePickerProps$pick,
+      defaultOpen = datePickerProps.defaultOpen,
+      open = datePickerProps.open,
+      disabled = datePickerProps.disabled,
+      inputReadOnly = datePickerProps.inputReadOnly,
+      size = datePickerProps.size,
+      placeholder = datePickerProps.placeholder,
+      allowEmpty = datePickerProps.allowEmpty,
+      className = datePickerProps.className,
+      style = datePickerProps.style,
+      borderType = datePickerProps.borderType,
+      separator = datePickerProps.separator,
+      ranges = datePickerProps.ranges,
+      format = datePickerProps.format,
+      showTime = datePickerProps.showTime,
+      yearItemNumber = datePickerProps.yearItemNumber,
+      use12Hours = datePickerProps.use12Hours,
+      defaultPickerValue = datePickerProps.defaultPickerValue,
+      order = datePickerProps.order,
+      locale = datePickerProps.locale,
+      components = datePickerProps.components,
+      _datePickerProps$hour = datePickerProps.hourStep,
+      hourStep = _datePickerProps$hour === void 0 ? 1 : _datePickerProps$hour,
+      _datePickerProps$minu = datePickerProps.minuteStep,
+      minuteStep = _datePickerProps$minu === void 0 ? 1 : _datePickerProps$minu,
+      _datePickerProps$seco = datePickerProps.secondStep,
+      secondStep = _datePickerProps$seco === void 0 ? 1 : _datePickerProps$seco,
+      renderExtraFooter = datePickerProps.renderExtraFooter,
+      disabledHours = datePickerProps.disabledHours,
+      disabledMinutes = datePickerProps.disabledMinutes,
+      disabledSeconds = datePickerProps.disabledSeconds,
+      disabledDate = datePickerProps.disabledDate,
+      onOpenChange = datePickerProps.onOpenChange,
+      onChange = datePickerProps.onChange,
+      onCalendarChange = datePickerProps.onCalendarChange,
+      onFocus = datePickerProps.onFocus,
+      onBlur = datePickerProps.onBlur,
+      _onOk = datePickerProps.onOk;
+  var needConfirmButton = picker === 'date' && !!showTime || picker === 'time';
+  var datePickerLang = locale ? (0, _locale.getCompLangMsg)({
+    componentName: 'DatePicker'
+  }, function (_componentName, label) {
+    return locale[label];
+  }) : globalLocale.getCompLangMsg({
+    componentName: 'DatePicker'
+  }); // ref
+
+  var panelDivRef = _react.default.useRef(null);
+
+  var inputDivRef = _react.default.useRef(null);
+
+  var startInputDivRef = _react.default.useRef(null);
+
+  var endInputDivRef = _react.default.useRef(null);
+
+  var separatorRef = _react.default.useRef(null);
+
+  var startInputRef = _react.default.useRef(null);
+
+  var endInputRef = _react.default.useRef(null);
+
+  var popperRef = _react.default.useRef(null);
+
+  var openRecordsRef = _react.default.useRef({});
+
+  var mergedDisabled = _react.default.useMemo(function () {
+    if (Array.isArray(disabled)) {
+      return disabled;
+    }
+
+    return [disabled || false, disabled || false];
+  }, [disabled]);
+
+  var _format = (0, _utils2.getDefaultFormat)(format, picker, showTime, use12Hours); // Active picker
+
+
+  var _useMergedState = (0, _hooks.useMergedState)(0, {// value: activePickerIndex,
+  }),
+      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+      mergedActivePickerIndex = _useMergedState2[0],
+      setMergedActivePickerIndex = _useMergedState2[1]; // 原始数据
+
+
+  var _useMergedState3 = (0, _hooks.useMergedState)(null, {
+    value: value,
+    defaultValue: defaultValue,
+    postState: function postState(values) {
+      if (picker === 'time' || picker === 'date' && showTime) {
+        return order ? reorderValues(values) : values;
+      } else {
+        if (isErrorValues(values)) {
+          return [values[0], null];
+        }
+
+        return values;
+      }
+    }
+  }),
+      _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
+      dateValue = _useMergedState4[0],
+      setInnerValue = _useMergedState4[1]; // 选中的数据
+
+
+  var _useMergedState5 = (0, _hooks.useMergedState)(null, {
+    defaultValue: dateValue,
+    postState: function postState(values) {
+      var postValues = values;
+
+      if (mergedDisabled[0] && mergedDisabled[1]) {
+        return postValues;
+      } // Fill disabled unit
+
+
+      // Fill disabled unit
+      for (var i = 0; i < 2; i++) {
+        if (mergedDisabled[i] && !(0, _utils2.getValue)(postValues, i) && !(0, _utils2.getValue)(allowEmpty, i)) {
+          postValues = (0, _utils2.updateValues)(postValues, (0, _dateFns.newDate)(), i);
+        }
+      }
+
+      return postValues;
+    }
+  }),
+      _useMergedState6 = (0, _slicedToArray2.default)(_useMergedState5, 2),
+      selectedValue = _useMergedState6[0],
+      setSelectedValue = _useMergedState6[1];
+
+  var hours;
+  var minutes;
+  var seconds;
+  var originHour;
+  var minute;
+  var second;
+  var disabledTimePanel = false;
+
+  if (picker === 'time' || picker === 'date' && showTime) {
+    originHour = -1;
+    minute = -1;
+    second = -1;
+
+    if (selectedValue && selectedValue[mergedActivePickerIndex]) {
+      originHour = (0, _dateFns.getHours)(selectedValue[mergedActivePickerIndex]);
+      minute = selectedValue ? (0, _dateFns.getMinutes)(selectedValue[mergedActivePickerIndex]) : -1;
+      second = selectedValue ? (0, _dateFns.getSeconds)(selectedValue[mergedActivePickerIndex]) : -1;
+    }
+
+    hours = (0, _utils2.generateUnits)(0, 23, hourStep, disabledHours && disabledHours());
+    minutes = (0, _utils2.generateUnits)(0, 59, minuteStep, disabledMinutes && disabledMinutes(originHour));
+    seconds = (0, _utils2.generateUnits)(0, 59, secondStep, disabledSeconds && disabledSeconds(originHour, minute));
+
+    if (hours && !(0, _find.default)(hours).call(hours, function (n) {
+      return !n.disabled;
+    }) || minutes && !(0, _find.default)(minutes).call(minutes, function (n) {
+      return !n.disabled;
+    }) || seconds && !(0, _find.default)(seconds).call(seconds, function (n) {
+      return !n.disabled;
+    })) {
+      disabledTimePanel = true;
+    }
+  } // 面板展示日期
+
+
+  var _useRangeViewDates = (0, _useRangeViewDates3.default)({
+    values: dateValue,
+    picker: picker,
+    defaultDates: defaultPickerValue
+  }),
+      _useRangeViewDates2 = (0, _slicedToArray2.default)(_useRangeViewDates, 2),
+      getViewDate = _useRangeViewDates2[0],
+      setViewDate = _useRangeViewDates2[1]; // text
+
+
+  var startValueTexts = (0, _useValueTexts.default)((0, _utils2.getValue)(selectedValue, 0), {
+    format: _format
+  });
+  var endValueTexts = (0, _useValueTexts.default)((0, _utils2.getValue)(selectedValue, 1), {
+    format: _format
+  });
+
+  var _onTextChange = function onTextChange(newText, index) {
+    var inputDate;
+
+    if (picker !== 'year') {
+      inputDate = (0, _dateFns.parseDate)(newText, _format);
+    } else {
+      var year = (0, _parse.default)(newText, _format, (0, _dateFns.newDate)());
+      inputDate = (0, _dateFns.isValid)(year) ? year : null;
+    }
+
+    var disabledFunc = index === 0 ? disabledStartDate : disabledEndDate;
+
+    if (inputDate && (!disabledFunc || !disabledFunc(inputDate))) {
+      setSelectedValue((0, _utils2.updateValues)(selectedValue, inputDate, index));
+      setViewDate(inputDate, index);
+    }
+  }; // input 展示
+
+
+  var _useTextValueMapping = (0, _useTextValueMapping5.default)({
+    valueText: startValueTexts,
+    onTextChange: function onTextChange(newText) {
+      return _onTextChange(newText, 0);
+    }
+  }),
+      _useTextValueMapping2 = (0, _slicedToArray2.default)(_useTextValueMapping, 3),
+      startText = _useTextValueMapping2[0],
+      triggerStartTextChange = _useTextValueMapping2[1],
+      resetStartText = _useTextValueMapping2[2];
+
+  var _useTextValueMapping3 = (0, _useTextValueMapping5.default)({
+    valueText: endValueTexts,
+    onTextChange: function onTextChange(newText) {
+      return _onTextChange(newText, 1);
+    }
+  }),
+      _useTextValueMapping4 = (0, _slicedToArray2.default)(_useTextValueMapping3, 3),
+      endText = _useTextValueMapping4[0],
+      triggerEndTextChange = _useTextValueMapping4[1],
+      resetEndText = _useTextValueMapping4[2];
+
+  var _React$useState = _react.default.useState([null, null]),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      hoverRangedValue = _React$useState2[0],
+      setHoverRangedValue = _React$useState2[1];
+
+  var _useHoverValue = (0, _useHoverValue5.default)(startText, {
+    format: _format
+  }),
+      _useHoverValue2 = (0, _slicedToArray2.default)(_useHoverValue, 3),
+      startHoverValue = _useHoverValue2[0],
+      onStartEnter = _useHoverValue2[1],
+      onStartLeave = _useHoverValue2[2];
+
+  var _useHoverValue3 = (0, _useHoverValue5.default)(endText, {
+    format: _format
+  }),
+      _useHoverValue4 = (0, _slicedToArray2.default)(_useHoverValue3, 3),
+      endHoverValue = _useHoverValue4[0],
+      onEndEnter = _useHoverValue4[1],
+      onEndLeave = _useHoverValue4[2];
+
+  var _useMergedState7 = (0, _hooks.useMergedState)(false, {
+    value: open,
+    defaultValue: defaultOpen,
+    postState: function postState(postOpen) {
+      return mergedDisabled[mergedActivePickerIndex] ? false : postOpen;
+    },
+    onChange: function onChange(newOpen) {
+      if (onOpenChange) {
+        onOpenChange(newOpen);
+      }
+    }
+  }),
+      _useMergedState8 = (0, _slicedToArray2.default)(_useMergedState7, 2),
+      mergedOpen = _useMergedState8[0],
+      triggerInnerOpen = _useMergedState8[1];
+
+  var startOpen = mergedOpen && mergedActivePickerIndex === 0;
+  var endOpen = mergedOpen && mergedActivePickerIndex === 1;
+
+  var _useMergedState9 = (0, _hooks.useMergedState)([picker, picker], {
+    value: mode
+  }),
+      _useMergedState10 = (0, _slicedToArray2.default)(_useMergedState9, 2),
+      mergedModes = _useMergedState10[0],
+      setInnerModes = _useMergedState10[1];
+
+  (0, _react.useEffect)(function () {
+    setInnerModes([picker, picker]);
+  }, [picker]); // const triggerModesChange = (modes: [PanelMode, PanelMode], values: RangeValue) => {
+  //   setInnerModes(modes)
+  //   if (onPanelChange) {
+  //     onPanelChange(values, modes)
+  //   }
+  // }
+  // ========================= Disable Date ==========================
+
+  var _useRangeDisabled = (0, _useRangeDisabled3.default)({
+    picker: picker,
+    selectedValue: selectedValue,
+    disabled: mergedDisabled,
+    disabledDate: disabledDate
+  }, openRecordsRef.current[1], openRecordsRef.current[0]),
+      _useRangeDisabled2 = (0, _slicedToArray2.default)(_useRangeDisabled, 2),
+      disabledStartDate = _useRangeDisabled2[0],
+      disabledEndDate = _useRangeDisabled2[1]; // const onResetText = () => {
+  //   resetEndText()
+  //   resetStartText()
+  // }
+
+
+  var triggerRef = _react.default.useRef();
+
+  var triggerOpen = function triggerOpen(newOpen, index) {
+    if (newOpen) {
+      clearTimeout(triggerRef.current);
+      openRecordsRef.current[index] = true;
+      setMergedActivePickerIndex(index);
+      triggerInnerOpen(newOpen); // Open to reset view date
+
+      if (!mergedOpen) {
+        setViewDate(null, index);
+      }
+    } else if (mergedActivePickerIndex === index) {
+      triggerInnerOpen(newOpen);
+      var openRecords = openRecordsRef.current;
+      triggerRef.current = setTimeout(function () {
+        if (openRecords === openRecordsRef.current) {
+          openRecordsRef.current = {};
+        }
+      });
+    }
+  };
+
+  var triggerOpenAndFocus = function triggerOpenAndFocus(index) {
+    triggerOpen(true, index); // Use setTimeout to make sure panel DOM exists
+
+    setTimeout(function () {
+      var inputRef = [startInputRef, endInputRef][index];
+
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, 0);
+  };
+
+  var triggerChange = function triggerChange(newValue, sourceIndex) {
+    var values = newValue;
+    var startValue = (0, _utils2.getValue)(values, 0);
+    var endValue = (0, _utils2.getValue)(values, 1); // >>>>> Format start & end values
+
+    if (startValue && endValue && (0, _dateFns.isAfter)(startValue, endValue)) {
+      if ( // WeekPicker only compare week
+      picker === 'week' && !(0, _isSameWeek.default)(startValue, endValue) || // QuotaPicker only compare week
+      picker === 'quarter' && !(0, _dateFns.isSameQuarter)(startValue, endValue) || // Other non-TimePicker compare date
+      picker !== 'week' && picker !== 'quarter' && picker !== 'time' && !(0, _dateFns.isSameDay)(startValue, endValue)) {
+        // Clean up end date when start date is after end date
+        if (sourceIndex === 0) {
+          values = [startValue, null];
+          endValue = null;
+        } else {
+          startValue = null;
+          values = [null, endValue];
+        } // Clean up cache since invalidate
+
+
+        openRecordsRef.current = (0, _defineProperty2.default)({}, sourceIndex, true);
+      } else if (picker === 'time' && order === true) {
+        // Reorder when in same date
+        values = reorderValues(values);
+      }
+    }
+
+    setSelectedValue(values);
+    var startStr = values && values[0] ? (0, _dateFns.formatDate)(values[0], _format) : '';
+    var endStr = values && values[1] ? (0, _dateFns.formatDate)(values[1], _format) : ''; // 外部回调
+
+    if (onCalendarChange) {
+      var info = {
+        range: sourceIndex === 0 ? 'start' : 'end'
+      };
+      onCalendarChange(values, [startStr, endStr], info);
+    }
+
+    var canStartValueTrigger = canValueTrigger(startValue, 0, mergedDisabled, allowEmpty);
+    var canEndValueTrigger = canValueTrigger(endValue, 1, mergedDisabled, allowEmpty);
+    var canTrigger = values === null || canStartValueTrigger && canEndValueTrigger;
+
+    if (canTrigger) {
+      // Trigger onChange only when value is validate
+      setInnerValue(values);
+
+      if (onChange && (!(0, _dateFns.isEqual)((0, _utils2.getValue)(selectedValue, 0), startValue) || !(0, _dateFns.isEqual)((0, _utils2.getValue)(selectedValue, 1), endValue))) {
+        onChange(values, [startStr, endStr]);
+      }
+    } // >>>>> Open picker when
+    // Always open another picker if possible
+
+
+    var nextOpenIndex = null;
+
+    if (sourceIndex === 0 && !mergedDisabled[1]) {
+      nextOpenIndex = 1;
+    } else if (sourceIndex === 1 && !mergedDisabled[0]) {
+      nextOpenIndex = 0;
+    }
+
+    if (nextOpenIndex !== null && nextOpenIndex !== mergedActivePickerIndex && (!openRecordsRef.current[nextOpenIndex] || !(0, _utils2.getValue)(values, nextOpenIndex)) && (0, _utils2.getValue)(values, sourceIndex)) {
+      // Delay to focus to avoid input blur trigger expired selectedValues
+      triggerOpenAndFocus(nextOpenIndex);
+    } else {
+      triggerOpen(false, sourceIndex);
+    }
+  };
+
+  (0, _hooks.useOnClickOutside)([popperRef, inputDivRef], function () {
+    setViewDate(null, 0);
+    setViewDate(null, 1);
+    setHoverRangedValue([null, null]);
+  });
+
+  var onSelect = function onSelect(date, type) {
+    var values = (0, _utils2.updateValues)(selectedValue, date, mergedActivePickerIndex);
+
+    if (type === 'submit' || type !== 'key' && !needConfirmButton) {
+      // triggerChange will also update selected values
+      triggerChange(values, mergedActivePickerIndex); // clear hover value style
+
+      if (mergedActivePickerIndex === 0) {
+        onStartLeave();
+      } else {
+        onEndLeave();
+      }
+    } else {
+      setSelectedValue(values);
+    }
+  };
+
+  var onDateMouseEnter = function onDateMouseEnter(date) {
+    setHoverRangedValue((0, _utils2.updateValues)(selectedValue, date, mergedActivePickerIndex));
+
+    if (mergedActivePickerIndex === 0) {
+      onStartEnter(date);
+    } else {
+      onEndEnter(date);
+    }
+  };
+
+  var onDateMouseLeave = function onDateMouseLeave() {
+    if (mergedActivePickerIndex === 0) {
+      onStartLeave();
+    } else {
+      onEndLeave();
+    }
+
+    setHoverRangedValue([null, null]);
+  };
+
+  var startStr = dateValue && dateValue[0] ? (0, _dateFns.formatDate)(dateValue[0], 'YYYYMMDDHHmmss') : '';
+  var endStr = dateValue && dateValue[1] ? (0, _dateFns.formatDate)(dateValue[1], 'YYYYMMDDHHmmss') : '';
+  (0, _react.useEffect)(function () {
+    if (!mergedOpen) {
+      setSelectedValue(dateValue);
+
+      if (!startValueTexts.length || startValueTexts[0] === '') {
+        triggerStartTextChange('');
+      }
+
+      if (!endValueTexts.length || endValueTexts[0] === '') {
+        triggerEndTextChange('');
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [mergedOpen, startValueTexts, endValueTexts]); // Sync innerValue with control mode
+
+  (0, _react.useEffect)(function () {
+    setSelectedValue(dateValue); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startStr, endStr]);
+
+  var renderPanel = function renderPanel() {
+    var panelProps = (0, _extends2.default)((0, _extends2.default)({}, datePickerProps), {
+      mergedActivePickerIndex: mergedActivePickerIndex,
+      disabledDate: mergedActivePickerIndex === 0 ? disabledStartDate : disabledEndDate
+    });
+    return /*#__PURE__*/_react.default.createElement(_datePanel.default, (0, _extends2.default)({}, panelProps));
+  };
+
+  var extraNode = (0, _getExtraFooter.default)(datePickerPrefixCls, mergedModes[mergedActivePickerIndex], renderExtraFooter);
+  var rangesNode = (0, _getRanges.default)({
+    prefixCls: datePickerPrefixCls,
+    components: components,
+    needConfirmButton: needConfirmButton,
+    okDisabled: !(0, _utils2.getValue)(selectedValue, mergedActivePickerIndex) || !!(selectedValue && selectedValue[mergedActivePickerIndex] && disabledDate && disabledDate(selectedValue[mergedActivePickerIndex])),
+    locale: datePickerLang,
+    // rangeList,
+    onOk: function onOk() {
+      if ((0, _utils2.getValue)(selectedValue, mergedActivePickerIndex)) {
+        // triggerChangeOld(selectedValue);
+        triggerChange(selectedValue, mergedActivePickerIndex);
+
+        if (_onOk) {
+          _onOk(selectedValue);
+        }
+      }
+    }
+  }); // 渲染日期选择表盘
+
+  var renderPanels = function renderPanels() {
+    var panels;
+    var viewDate = getViewDate(mergedActivePickerIndex);
+
+    if (picker !== 'time' && !showTime) {
+      var nextViewDate = (0, _utils2.getClosingViewDate)(viewDate, picker, 1, yearItemNumber);
+
+      var leftPanel = /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
+        value: {
+          hoverRangedValue: hoverRangedValue,
+          panelPosition: 'left',
+          prefixCls: datePickerPrefixCls,
+          rangeValue: selectedValue,
+          viewDate: viewDate,
+          locale: datePickerLang,
+          open: mergedOpen,
+          onSelect: onSelect,
+          setViewDate: setViewDate,
+          onDateMouseEnter: onDateMouseEnter,
+          onDateMouseLeave: onDateMouseLeave
+        }
+      }, renderPanel());
+
+      var rightPanel = /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
+        value: {
+          hoverRangedValue: hoverRangedValue,
+          panelPosition: 'right',
+          prefixCls: datePickerPrefixCls,
+          rangeValue: selectedValue,
+          viewDate: nextViewDate,
+          locale: datePickerLang,
+          open: mergedOpen,
+          onSelect: onSelect,
+          setViewDate: setViewDate,
+          onDateMouseEnter: onDateMouseEnter,
+          onDateMouseLeave: onDateMouseLeave
+        }
+      }, renderPanel());
+
+      panels = /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(datePickerPrefixCls, "-container-date"))
+      }, leftPanel, rightPanel);
+    } else {
+      panels = /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
+        value: {
+          hours: hours,
+          minutes: minutes,
+          seconds: seconds,
+          originHour: originHour,
+          minute: minute,
+          second: second,
+          disabledTimePanel: disabledTimePanel,
+          prefixCls: datePickerPrefixCls,
+          dateValue: selectedValue ? selectedValue[mergedActivePickerIndex] : null,
+          viewDate: viewDate,
+          locale: datePickerLang,
+          open: mergedOpen,
+          onSelect: onSelect,
+          setViewDate: setViewDate,
+          onDateMouseEnter: onDateMouseEnter,
+          onDateMouseLeave: onDateMouseLeave
+        }
+      }, /*#__PURE__*/_react.default.createElement(_datePanel.default, (0, _extends2.default)({}, datePickerProps, {
+        disabledDate: mergedActivePickerIndex === 0 ? disabledStartDate : disabledEndDate
+      })));
+    }
+
+    return panels;
+  }; // 箭头偏移(不展示箭头也需要计算)
+
+
+  var arrowLeft = 0;
+
+  if (mergedActivePickerIndex && startInputDivRef.current && separatorRef.current) {
+    // Arrow offset
+    arrowLeft = startInputDivRef.current.offsetWidth + separatorRef.current.offsetWidth - 10;
+  } // input active Bar 宽度 偏移
+
+
+  var activeBarLeft = -10;
+  var activeBarWidth = 0;
+
+  if (startInputDivRef.current && endInputDivRef.current && separatorRef.current) {
+    if (mergedActivePickerIndex === 0) {
+      activeBarWidth = startInputDivRef.current.offsetWidth;
+    } else {
+      activeBarLeft = arrowLeft;
+      activeBarWidth = endInputDivRef.current.offsetWidth;
+    }
+  }
+
+  var activeBarPositionStyle = {
+    left: activeBarLeft
+  };
+  var inputProps = {
+    startInputRef: startInputRef,
+    endInputRef: endInputRef,
+    startInputDivRef: startInputDivRef,
+    endInputDivRef: endInputDivRef,
+    separatorRef: separatorRef,
+    panelDivRef: panelDivRef,
+    activeBarWidth: activeBarWidth,
+    activeBarPositionStyle: activeBarPositionStyle,
+    allowClear: allowClear,
+    picker: picker,
+    borderType: borderType,
+    className: className,
+    style: style,
+    size: size,
+    placeholder: placeholder,
+    startText: startText,
+    endText: endText,
+    dateValue: dateValue,
+    selectedValue: selectedValue,
+    startHoverValue: startHoverValue,
+    endHoverValue: endHoverValue,
+    mergedDisabled: mergedDisabled,
+    mergedActivePickerIndex: mergedActivePickerIndex,
+    separator: separator,
+    startOpen: startOpen,
+    endOpen: endOpen,
+    needConfirmButton: needConfirmButton,
+    format: _format,
+    open: mergedOpen,
+    readOnly: inputReadOnly,
+    prefixCls: datePickerPrefixCls,
+    locale: datePickerLang,
+    dataOrAriaProps: (0, _utils2.getDataOrAriaProps)(datePickerProps),
+    resetStartText: resetStartText,
+    resetEndText: resetEndText,
+    triggerStartTextChange: triggerStartTextChange,
+    triggerEndTextChange: triggerEndTextChange,
+    triggerOpen: triggerOpen,
+    setSelectedValue: setSelectedValue,
+    setMergedActivePickerIndex: setMergedActivePickerIndex,
+    setHoverRangedValue: setHoverRangedValue,
+    triggerOpenAndFocus: triggerOpenAndFocus,
+    triggerChange: triggerChange,
+    onFocus: onFocus,
+    onBlur: onBlur
+  };
+
+  var renderConfig = function renderConfig() {
+    if (ranges) {
+      var rangeArray = [];
+      (0, _keys.default)(ranges).forEach(function (key) {
+        var range = ranges[key];
+
+        if (typeof range === 'function') {
+          range = range();
+        }
+
+        if (Array.isArray(range) && range.length === 2 && range[0] && range[1]) {
+          rangeArray.push({
+            key: key,
+            newValue: [new Date(range[0]), new Date(range[1])]
+          });
+        }
+      });
+
+      if (rangeArray.length) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _classnames.default)("".concat(datePickerPrefixCls, "-ranges"))
+        }, (0, _map.default)(rangeArray).call(rangeArray, function (_ref) {
+          var key = _ref.key,
+              newValue = _ref.newValue;
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: (0, _classnames.default)("".concat(datePickerPrefixCls, "-ranges-item")),
+            key: key,
+            onClick: function onClick() {
+              triggerChange(newValue, 1);
+
+              if (_onOk) {
+                _onOk(newValue);
+              }
+
+              triggerInnerOpen(false);
+            }
+          }, key);
+        }));
+      }
+    }
+
+    return null;
+  };
+
+  return (0, _usePopper.default)( /*#__PURE__*/_react.default.createElement(_inputRange.default, (0, _extends2.default)({
+    ref: inputDivRef
+  }, inputProps)), /*#__PURE__*/_react.default.createElement("div", {
+    ref: popperRef,
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+    },
+    className: (0, _classnames.default)("".concat(datePickerPrefixCls, "-container"))
+  }, /*#__PURE__*/_react.default.createElement("div", null, renderPanels(), extraNode || rangesNode ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(datePickerPrefixCls, "-footer")
+  }, extraNode, rangesNode) : null), /*#__PURE__*/_react.default.createElement("div", null, renderConfig())), {
+    trigger: 'click',
+    prefixCls: "".concat(datePickerPrefixCls, "-panel"),
+    arrow: false,
+    popperClassName: className,
+    popperStyle: style,
+    visible: mergedOpen,
+    placement: 'bottomLeft'
+  });
+}
+
+var _default = DatePicker;
+exports.default = _default;