@kdcloudjs/kdesign 1.6.33 → 1.6.35

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

@@ -22,110 +22,99 @@ 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'; // 范围时间顺序错误时重新排序
-
+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;
 }
-
 var InternalRangePicker = function InternalRangePicker(props, ref) {
   var customPrefixcls = props.prefixCls;
-
   var _useContext = useContext(ConfigContext),
-      getPrefixCls = _useContext.getPrefixCls,
-      prefixCls = _useContext.prefixCls,
-      userDefaultProps = _useContext.compDefaultProps,
-      globalLocale = _useContext.locale;
-
+    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,
-      popupStyle = datePickerProps.popupStyle,
-      popupRef = datePickerProps.popupRef,
-      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,
-      suffixIcon = datePickerProps.suffixIcon,
-      clearIcon = datePickerProps.clearIcon,
-      panelRender = datePickerProps.panelRender,
-      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,
-      getPopupContainer = datePickerProps.getPopupContainer;
+    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,
+    popupStyle = datePickerProps.popupStyle,
+    dropdownClassName = datePickerProps.dropdownClassName,
+    popupRef = datePickerProps.popupRef,
+    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,
+    suffixIcon = datePickerProps.suffixIcon,
+    clearIcon = datePickerProps.clearIcon,
+    panelRender = datePickerProps.panelRender,
+    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,
+    getPopupContainer = datePickerProps.getPopupContainer;
   var needConfirmButton = picker === 'date' && !!showTime || picker === 'time';
-
   var datePickerLang = _extends({}, globalLocale.getCompLangMsg({
     componentName: 'DatePicker'
-  }), locale || {}); // ref
-
-
+  }), locale || {});
+  // ref
   var panelDivRef = React.useRef(null);
   var inputDivRef = ref || /*#__PURE__*/React.createRef();
   var startInputDivRef = React.useRef(null);
@@ -139,64 +128,54 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     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 _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];
+      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;
         }
-
-        return values;
       }
-    }
-  }),
-      _useMergedState4 = _slicedToArray(_useMergedState3, 2),
-      dateValue = _useMergedState4[0],
-      setInnerValue = _useMergedState4[1]; // 选中的数据
-
-
+    }),
+    _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);
+      defaultValue: dateValue,
+      postState: function postState(values) {
+        var postValues = values;
+        if (mergedDisabled[0] && mergedDisabled[1]) {
+          return postValues;
+        }
+        // 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;
       }
-
-      return postValues;
-    }
-  }),
-      _useMergedState6 = _slicedToArray(_useMergedState5, 2),
-      selectedValue = _useMergedState6[0],
-      setSelectedValue = _useMergedState6[1];
-
+    }),
+    _useMergedState6 = _slicedToArray(_useMergedState5, 2),
+    selectedValue = _useMergedState6[0],
+    setSelectedValue = _useMergedState6[1];
   var hours;
   var minutes;
   var seconds;
@@ -204,22 +183,18 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
   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) {
@@ -229,36 +204,31 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     })) {
       disabledTimePanel = true;
     }
-  } // 面板展示日期
-
-
+  }
+  // 面板展示日期
   var _useRangeViewDates = useRangeViewDates({
-    values: dateValue,
-    picker: picker,
-    defaultDates: defaultPickerValue
-  }),
-      _useRangeViewDates2 = _slicedToArray(_useRangeViewDates, 2),
-      getViewDate = _useRangeViewDates2[0],
-      setViewDate = _useRangeViewDates2[1]; // text
-
-
+      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 inputTempDate;
-
     if (newText === '') {
       if (index === 0 && selectedValue && selectedValue.length === 2) {
         inputTempDate = selectedValue[1];
       } else if (index === 1 && selectedValue && selectedValue.length === 2) {
         inputTempDate = selectedValue[0];
       }
-
       if (inputTempDate) {
         triggerChange(updateValues(selectedValue, inputTempDate, index), index);
         setViewDate(inputTempDate, index);
@@ -266,7 +236,6 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     } else if (newText && newText.length === _format.length) {
       inputTempDate = parseDate(newText, _format);
       var disabledFunc = index === 0 ? disabledStartDate : disabledEndDate;
-
       if (inputTempDate && (!disabledFunc || !disabledFunc(inputTempDate))) {
         if (picker !== 'year') {
           triggerChange(updateValues(selectedValue, inputTempDate, index), index);
@@ -277,116 +246,104 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
         }
       }
     }
-  }; // input 展示
-
-
+  };
+  // 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];
-
+      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];
-
+      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];
-
+    _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];
-
+      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];
-
+      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);
+      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];
-
+    }),
+    _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];
-
+      value: mode
+    }),
+    _useMergedState10 = _slicedToArray(_useMergedState9, 2),
+    mergedModes = _useMergedState10[0],
+    setInnerModes = _useMergedState10[1];
   var _useState = useState(undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      innerPicker = _useState2[0],
-      setInnerPicker = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    innerPicker = _useState2[0],
+    setInnerPicker = _useState2[1];
   useEffect(function () {
     setInnerModes([picker, picker]);
-  }, [picker]); // const triggerModesChange = (modes: [PanelMode, PanelMode], values: RangeValue) => {
+  }, [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 = () => {
+      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
-
+      triggerInnerOpen(newOpen);
+      // Open to reset view date
       if (!mergedOpen) {
         setViewDate(null, index);
       }
@@ -400,24 +357,20 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       });
     }
   };
-
   var triggerOpenAndFocus = function triggerOpenAndFocus(index) {
-    triggerOpen(true, index); // Use setTimeout to make sure panel DOM exists
-
+    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);
-
     if (startValue && endValue && isAfter(startValue, endValue)) {
       if (picker === 'week' && !isSameWeek(startValue, endValue) || picker === 'quarter' && !isSameQuarter(startValue, endValue) || picker !== 'week' && picker !== 'quarter' && picker !== 'time' && !isSameDay(startValue, endValue)) {
         if (sourceIndex === 0) {
@@ -427,63 +380,50 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
           startValue = null;
           values = [null, endValue];
         }
-
         openRecordsRef.current = _defineProperty({}, sourceIndex, true);
       } else if (picker === 'time' && order === true) {
         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) {
       setInnerValue(values);
-
       if (onChange && (!isEqual(getValue(dateValue, 0), startValue) || !isEqual(getValue(dateValue, 1), endValue))) {
         onChange(values, [startStr, endStr]);
       }
     }
-
     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)) {
       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(values, mergedActivePickerIndex);
-
       if (mergedActivePickerIndex === 0) {
         onStartLeave();
       } else {
@@ -493,63 +433,52 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       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
-
+    }
+    // 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
+    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
     });
-
     var panelNode = /*#__PURE__*/React.createElement(Panel, _extends({}, panelProps));
-
     if (panelRender) {
       panelNode = panelRender(panelNode);
     }
-
     return panelNode;
   };
-
   var extraNode = getExtraFooter(datePickerPrefixCls, mergedModes[mergedActivePickerIndex], renderExtraFooter);
   var rangesNode = getRanges({
     prefixCls: datePickerPrefixCls,
@@ -562,18 +491,16 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       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, {
@@ -640,22 +567,17 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
         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 宽度 偏移
-
-
+  }
+  // input active Bar 宽度 偏移
   var activeBarLeft = -10;
   var activeBarWidth = 0;
-
   if (startInputDivRef.current && endInputDivRef.current && separatorRef.current) {
     if (mergedActivePickerIndex === 0) {
       activeBarWidth = startInputDivRef.current.offsetWidth;
@@ -664,7 +586,6 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       activeBarWidth = endInputDivRef.current.offsetWidth;
     }
   }
-
   var activeBarPositionStyle = {
     left: activeBarLeft
   };
@@ -717,18 +638,14 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     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,
@@ -736,33 +653,28 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
           });
         }
       });
-
       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;
+            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", {
@@ -778,12 +690,12 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     prefixCls: "".concat(datePickerPrefixCls, "-panel"),
     arrow: false,
     popperStyle: popupStyle,
+    popperClassName: dropdownClassName,
     visible: mergedOpen,
     placement: 'bottomLeft',
     getPopupContainer: getPopupContainer
   });
 };
-
 var RangePicker = /*#__PURE__*/React.forwardRef(InternalRangePicker);
 RangePicker.displayName = 'RangePicker';
 export default RangePicker;