@kdcloudjs/kdesign 1.0.2

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

@@ -0,0 +1,764 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useContext, useEffect } from 'react';
+import isSameWeek from 'date-fns/isSameWeek';
+import parse from 'date-fns/parse';
+import ConfigContext from '../config-provider/ConfigContext';
+import { useMergedState, useOnClickOutside } from '../_utils/hooks';
+import { getCompProps } from '../_utils';
+import Context from './context';
+import Panel from './date-panel';
+import InputDate from './range/input-range';
+import { generateUnits, getClosingViewDate, getDataOrAriaProps, getDefaultFormat, getValue, updateValues } from './utils';
+import useValueTexts from './hooks/use-value-texts';
+import useHoverValue from './hooks/use-hover-value';
+import { formatDate, isAfter, newDate, parseDate, isEqual, isSameQuarter, isSameDay, isValid, getHours, getMinutes, getSeconds } from './utils/date-fns';
+import useTextValueMapping from './hooks/use-text-value-mapping';
+import useRangeViewDates from './hooks/use-range-view-dates';
+import { getCompLangMsg } from '../locale';
+import useRangeDisabled from './hooks/use-range-disabled';
+import getExtraFooter from './utils/get-extra-footer';
+import getRanges from './utils/get-ranges';
+import classNames from 'classnames';
+import usePopper from '../_utils/usePopper'; // 范围时间顺序错误时重新排序
+
+function reorderValues(values) {
+  if (values && values[0] && values[1] && isAfter(values[0], values[1])) {
+    return [values[1], values[0]];
+  }
+
+  return values;
+} // 范围时间顺序错误时报错
+
+
+function isErrorValues(values) {
+  if (values && values[0] && values[1] && 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 = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps,
+      globalLocale = _useContext.locale;
+
+  var datePickerProps = 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 ? getCompLangMsg({
+    componentName: 'DatePicker'
+  }, function (_componentName, label) {
+    return locale[label];
+  }) : globalLocale.getCompLangMsg({
+    componentName: 'DatePicker'
+  }); // ref
+
+  var panelDivRef = React.useRef(null);
+  var inputDivRef = React.useRef(null);
+  var startInputDivRef = React.useRef(null);
+  var endInputDivRef = React.useRef(null);
+  var separatorRef = React.useRef(null);
+  var startInputRef = React.useRef(null);
+  var endInputRef = React.useRef(null);
+  var popperRef = React.useRef(null);
+  var openRecordsRef = React.useRef({});
+  var mergedDisabled = React.useMemo(function () {
+    if (Array.isArray(disabled)) {
+      return disabled;
+    }
+
+    return [disabled || false, disabled || false];
+  }, [disabled]);
+
+  var _format = getDefaultFormat(format, picker, showTime, use12Hours); // Active picker
+
+
+  var _useMergedState = useMergedState(0, {// value: activePickerIndex,
+  }),
+      _useMergedState2 = _slicedToArray(_useMergedState, 2),
+      mergedActivePickerIndex = _useMergedState2[0],
+      setMergedActivePickerIndex = _useMergedState2[1]; // 原始数据
+
+
+  var _useMergedState3 = 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 = _slicedToArray(_useMergedState3, 2),
+      dateValue = _useMergedState4[0],
+      setInnerValue = _useMergedState4[1]; // 选中的数据
+
+
+  var _useMergedState5 = 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] && !getValue(postValues, i) && !getValue(allowEmpty, i)) {
+          postValues = updateValues(postValues, newDate(), i);
+        }
+      }
+
+      return postValues;
+    }
+  }),
+      _useMergedState6 = _slicedToArray(_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 = getHours(selectedValue[mergedActivePickerIndex]);
+      minute = selectedValue ? getMinutes(selectedValue[mergedActivePickerIndex]) : -1;
+      second = selectedValue ? getSeconds(selectedValue[mergedActivePickerIndex]) : -1;
+    }
+
+    hours = generateUnits(0, 23, hourStep, disabledHours && disabledHours());
+    minutes = generateUnits(0, 59, minuteStep, disabledMinutes && disabledMinutes(originHour));
+    seconds = generateUnits(0, 59, secondStep, disabledSeconds && disabledSeconds(originHour, minute));
+
+    if (hours && !_findInstanceProperty(hours).call(hours, function (n) {
+      return !n.disabled;
+    }) || minutes && !_findInstanceProperty(minutes).call(minutes, function (n) {
+      return !n.disabled;
+    }) || seconds && !_findInstanceProperty(seconds).call(seconds, function (n) {
+      return !n.disabled;
+    })) {
+      disabledTimePanel = true;
+    }
+  } // 面板展示日期
+
+
+  var _useRangeViewDates = useRangeViewDates({
+    values: dateValue,
+    picker: picker,
+    defaultDates: defaultPickerValue
+  }),
+      _useRangeViewDates2 = _slicedToArray(_useRangeViewDates, 2),
+      getViewDate = _useRangeViewDates2[0],
+      setViewDate = _useRangeViewDates2[1]; // text
+
+
+  var startValueTexts = useValueTexts(getValue(selectedValue, 0), {
+    format: _format
+  });
+  var endValueTexts = useValueTexts(getValue(selectedValue, 1), {
+    format: _format
+  });
+
+  var _onTextChange = function onTextChange(newText, index) {
+    var inputDate;
+
+    if (picker !== 'year') {
+      inputDate = parseDate(newText, _format);
+    } else {
+      var year = parse(newText, _format, newDate());
+      inputDate = isValid(year) ? year : null;
+    }
+
+    var disabledFunc = index === 0 ? disabledStartDate : disabledEndDate;
+
+    if (inputDate && (!disabledFunc || !disabledFunc(inputDate))) {
+      setSelectedValue(updateValues(selectedValue, inputDate, index));
+      setViewDate(inputDate, index);
+    }
+  }; // input 展示
+
+
+  var _useTextValueMapping = useTextValueMapping({
+    valueText: startValueTexts,
+    onTextChange: function onTextChange(newText) {
+      return _onTextChange(newText, 0);
+    }
+  }),
+      _useTextValueMapping2 = _slicedToArray(_useTextValueMapping, 3),
+      startText = _useTextValueMapping2[0],
+      triggerStartTextChange = _useTextValueMapping2[1],
+      resetStartText = _useTextValueMapping2[2];
+
+  var _useTextValueMapping3 = useTextValueMapping({
+    valueText: endValueTexts,
+    onTextChange: function onTextChange(newText) {
+      return _onTextChange(newText, 1);
+    }
+  }),
+      _useTextValueMapping4 = _slicedToArray(_useTextValueMapping3, 3),
+      endText = _useTextValueMapping4[0],
+      triggerEndTextChange = _useTextValueMapping4[1],
+      resetEndText = _useTextValueMapping4[2];
+
+  var _React$useState = React.useState([null, null]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      hoverRangedValue = _React$useState2[0],
+      setHoverRangedValue = _React$useState2[1];
+
+  var _useHoverValue = useHoverValue(startText, {
+    format: _format
+  }),
+      _useHoverValue2 = _slicedToArray(_useHoverValue, 3),
+      startHoverValue = _useHoverValue2[0],
+      onStartEnter = _useHoverValue2[1],
+      onStartLeave = _useHoverValue2[2];
+
+  var _useHoverValue3 = useHoverValue(endText, {
+    format: _format
+  }),
+      _useHoverValue4 = _slicedToArray(_useHoverValue3, 3),
+      endHoverValue = _useHoverValue4[0],
+      onEndEnter = _useHoverValue4[1],
+      onEndLeave = _useHoverValue4[2];
+
+  var _useMergedState7 = useMergedState(false, {
+    value: open,
+    defaultValue: defaultOpen,
+    postState: function postState(postOpen) {
+      return mergedDisabled[mergedActivePickerIndex] ? false : postOpen;
+    },
+    onChange: function onChange(newOpen) {
+      if (onOpenChange) {
+        onOpenChange(newOpen);
+      }
+    }
+  }),
+      _useMergedState8 = _slicedToArray(_useMergedState7, 2),
+      mergedOpen = _useMergedState8[0],
+      triggerInnerOpen = _useMergedState8[1];
+
+  var startOpen = mergedOpen && mergedActivePickerIndex === 0;
+  var endOpen = mergedOpen && mergedActivePickerIndex === 1;
+
+  var _useMergedState9 = useMergedState([picker, picker], {
+    value: mode
+  }),
+      _useMergedState10 = _slicedToArray(_useMergedState9, 2),
+      mergedModes = _useMergedState10[0],
+      setInnerModes = _useMergedState10[1];
+
+  useEffect(function () {
+    setInnerModes([picker, picker]);
+  }, [picker]); // const triggerModesChange = (modes: [PanelMode, PanelMode], values: RangeValue) => {
+  //   setInnerModes(modes)
+  //   if (onPanelChange) {
+  //     onPanelChange(values, modes)
+  //   }
+  // }
+  // ========================= Disable Date ==========================
+
+  var _useRangeDisabled = useRangeDisabled({
+    picker: picker,
+    selectedValue: selectedValue,
+    disabled: mergedDisabled,
+    disabledDate: disabledDate
+  }, openRecordsRef.current[1], openRecordsRef.current[0]),
+      _useRangeDisabled2 = _slicedToArray(_useRangeDisabled, 2),
+      disabledStartDate = _useRangeDisabled2[0],
+      disabledEndDate = _useRangeDisabled2[1]; // const onResetText = () => {
+  //   resetEndText()
+  //   resetStartText()
+  // }
+
+
+  var triggerRef = React.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 = getValue(values, 0);
+    var endValue = getValue(values, 1); // >>>>> Format start & end values
+
+    if (startValue && endValue && isAfter(startValue, endValue)) {
+      if ( // WeekPicker only compare week
+      picker === 'week' && !isSameWeek(startValue, endValue) || // QuotaPicker only compare week
+      picker === 'quarter' && !isSameQuarter(startValue, endValue) || // Other non-TimePicker compare date
+      picker !== 'week' && picker !== 'quarter' && picker !== 'time' && !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 = _defineProperty({}, sourceIndex, true);
+      } else if (picker === 'time' && order === true) {
+        // Reorder when in same date
+        values = reorderValues(values);
+      }
+    }
+
+    setSelectedValue(values);
+    var startStr = values && values[0] ? formatDate(values[0], _format) : '';
+    var endStr = values && values[1] ? 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 && (!isEqual(getValue(selectedValue, 0), startValue) || !isEqual(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] || !getValue(values, nextOpenIndex)) && getValue(values, sourceIndex)) {
+      // Delay to focus to avoid input blur trigger expired selectedValues
+      triggerOpenAndFocus(nextOpenIndex);
+    } else {
+      triggerOpen(false, sourceIndex);
+    }
+  };
+
+  useOnClickOutside([popperRef, inputDivRef], function () {
+    setViewDate(null, 0);
+    setViewDate(null, 1);
+    setHoverRangedValue([null, null]);
+  });
+
+  var onSelect = function onSelect(date, type) {
+    var values = 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(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] ? formatDate(dateValue[0], 'YYYYMMDDHHmmss') : '';
+  var endStr = dateValue && dateValue[1] ? formatDate(dateValue[1], 'YYYYMMDDHHmmss') : '';
+  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
+
+  useEffect(function () {
+    setSelectedValue(dateValue); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startStr, endStr]);
+
+  var renderPanel = function renderPanel() {
+    var panelProps = _extends(_extends({}, datePickerProps), {
+      mergedActivePickerIndex: mergedActivePickerIndex,
+      disabledDate: mergedActivePickerIndex === 0 ? disabledStartDate : disabledEndDate
+    });
+
+    return /*#__PURE__*/React.createElement(Panel, _extends({}, panelProps));
+  };
+
+  var extraNode = getExtraFooter(datePickerPrefixCls, mergedModes[mergedActivePickerIndex], renderExtraFooter);
+  var rangesNode = getRanges({
+    prefixCls: datePickerPrefixCls,
+    components: components,
+    needConfirmButton: needConfirmButton,
+    okDisabled: !getValue(selectedValue, mergedActivePickerIndex) || !!(selectedValue && selectedValue[mergedActivePickerIndex] && disabledDate && disabledDate(selectedValue[mergedActivePickerIndex])),
+    locale: datePickerLang,
+    // rangeList,
+    onOk: function onOk() {
+      if (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 = getClosingViewDate(viewDate, picker, 1, yearItemNumber);
+      var leftPanel = /*#__PURE__*/React.createElement(Context.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.createElement(Context.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.createElement("div", {
+        className: classNames("".concat(datePickerPrefixCls, "-container-date"))
+      }, leftPanel, rightPanel);
+    } else {
+      panels = /*#__PURE__*/React.createElement(Context.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.createElement(Panel, _extends({}, 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: 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 = [];
+
+      _Object$keys(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.createElement("div", {
+          className: classNames("".concat(datePickerPrefixCls, "-ranges"))
+        }, _mapInstanceProperty(rangeArray).call(rangeArray, function (_ref) {
+          var key = _ref.key,
+              newValue = _ref.newValue;
+          return /*#__PURE__*/React.createElement("div", {
+            className: classNames("".concat(datePickerPrefixCls, "-ranges-item")),
+            key: key,
+            onClick: function onClick() {
+              triggerChange(newValue, 1);
+
+              if (_onOk) {
+                _onOk(newValue);
+              }
+
+              triggerInnerOpen(false);
+            }
+          }, key);
+        }));
+      }
+    }
+
+    return null;
+  };
+
+  return usePopper( /*#__PURE__*/React.createElement(InputDate, _extends({
+    ref: inputDivRef
+  }, inputProps)), /*#__PURE__*/React.createElement("div", {
+    ref: popperRef,
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+    },
+    className: classNames("".concat(datePickerPrefixCls, "-container"))
+  }, /*#__PURE__*/React.createElement("div", null, renderPanels(), extraNode || rangesNode ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(datePickerPrefixCls, "-footer")
+  }, extraNode, rangesNode) : null), /*#__PURE__*/React.createElement("div", null, renderConfig())), {
+    trigger: 'click',
+    prefixCls: "".concat(datePickerPrefixCls, "-panel"),
+    arrow: false,
+    popperClassName: className,
+    popperStyle: style,
+    visible: mergedOpen,
+    placement: 'bottomLeft'
+  });
+}
+
+export default DatePicker;