@chaoswise/ui 2.6.9 → 2.7.0

package/lib/CWRangePicker/index.js

@@ -40,11 +40,11 @@ import Refresh from "./Refresh";
 import CalendarSvg from "./assets/Calendar";
 import LiveSvg from "./assets/live";
 import RecoverSvg from "./assets/Recover";
-import { regroupDataSourceFn, echoInputValue, getUnit, judgeType, getChangeUnitDate, isInvalidDate, range, funcValueChangeArrayValue, getCorrectValue, getHistoryInfo, getFinalDateOption, getTruthDateCount, isAfterDate, isSameDate, isExceedMaxTimeSpan, getYears, computedRecentlyValue } from "./utils";
+import { regroupDataSourceFn, echoInputValue, getUnit, judgeType, getChangeUnitDate, isInvalidDate, range, funcValueChangeArrayValue, getCorrectValue, getHistoryInfo, getFinalDateOption, getTruthDateCount, isAfterDate, isSameDate, isExceedMaxTimeSpan, getYears, computedRecentlyValue, getTimeSpanFromValue } from "./utils";
 import { isEqual } from "lodash-es";
 import moment from "moment";
 import langConfig from "./locale";
-import { formatMessage } from '../utils';
+import { formatMessage } from "../utils";
 import "./index.less";
 var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var defaultValue = props.defaultValue,
@@ -64,9 +64,10 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     refreshOption = _props$refreshOption === void 0 ? {} : _props$refreshOption,
     _props$timeSpanOption = props.timeSpanOption,
     timeSpanOption = _props$timeSpanOption === void 0 ? {} : _props$timeSpanOption,
+    _props$inputOption = props.inputOption,
+    inputOption = _props$inputOption === void 0 ? {} : _props$inputOption,
     _props$moreItemDropdo = props.moreItemDropdownPosition,
     moreItemDropdownPosition = _props$moreItemDropdo === void 0 ? "left" : _props$moreItemDropdo,
-    inputPrefixIcon = props.inputPrefixIcon,
     _props$format = props.format,
     format = _props$format === void 0 ? "YYYY/MM/DD HH:mm:ss" : _props$format,
     forceRenderTitle = props.forceRenderTitle,
@@ -87,7 +88,9 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     _refreshOption$showAu = refreshOption.showAutoRefresh,
     showAutoRefresh = _refreshOption$showAu === void 0 ? true : _refreshOption$showAu,
     _refreshOption$isRece = refreshOption.isRecentlyOpenRefresh,
-    isRecentlyOpenRefresh = _refreshOption$isRece === void 0 ? true : _refreshOption$isRece;
+    isRecentlyOpenRefresh = _refreshOption$isRece === void 0 ? true : _refreshOption$isRece,
+    _refreshOption$isSpec = refreshOption.isSpecialRelativeTime,
+    isSpecialRelativeTime = _refreshOption$isSpec === void 0 ? false : _refreshOption$isSpec;
   var _timeSpanOption$timeS = timeSpanOption.timeSpanBoundary,
     timeSpanBoundary = _timeSpanOption$timeS === void 0 ? 94608000 : _timeSpanOption$timeS;
   var _menuOption$showCalen = menuOption.showCalendar,
@@ -102,6 +105,11 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     dropdownCalendarClassName = menuOption.dropdownCalendarClassName,
     disabledDate = menuOption.disabledDate,
     disabledTime = menuOption.disabledTime;
+  var _inputOption$showReco = inputOption.showRecoverIcon,
+    showRecoverIcon = _inputOption$showReco === void 0 ? true : _inputOption$showReco,
+    inputPrefixIcon = inputOption.inputPrefixIcon,
+    customRenderTitle = inputOption.customRenderTitle,
+    isDisabledInput = inputOption.isDisabledInput;
   var _tipTooltipOption$sho = tipTooltipOption.showTipIcon,
     showTipIcon = _tipTooltipOption$sho === void 0 ? false : _tipTooltipOption$sho,
     extraTipOption = _objectWithoutProperties(tipTooltipOption, _excluded);
@@ -115,21 +123,21 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     inputValue = _useState4[0],
     setInputValue = _useState4[1];
-  // 当前默认时间项
-  var _useState5 = useState({}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    dateValue = _useState6[0],
-    setDateValue = _useState6[1];
   // 记录切换之后的时间项
-  var _useState7 = useState(dataSource[0] || {}),
-    _useState8 = _slicedToArray(_useState7, 2),
-    recordDateValue = _useState8[0],
-    setRecordDateValue = _useState8[1];
+  var _useState5 = useState(dataSource[0] || {}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    recordDateValue = _useState6[0],
+    setRecordDateValue = _useState6[1];
   // 自动刷新状态是否开启
-  var _useState9 = useState(false),
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isAutoRefresh = _useState8[0],
+    setIsAutoRefresh = _useState8[1];
+  // 日历选择器时间
+  var _useState9 = useState([]),
     _useState10 = _slicedToArray(_useState9, 2),
-    isAutoRefresh = _useState10[0],
-    setIsAutoRefresh = _useState10[1];
+    rangePickerValue = _useState10[0],
+    setRangePickerValue = _useState10[1];
   // 是否切换到日历选择
   var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
@@ -150,10 +158,8 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputRef = useRef(null);
   // 含有刷新组件暴露的方法
   var refreshRef = useRef(null);
-  var _useState15 = useState([]),
-    _useState16 = _slicedToArray(_useState15, 2),
-    rangePickerValue = _useState16[0],
-    setRangePickerValue = _useState16[1];
+  // 当前默认时间项
+  var defaultDateValueRef = useRef({});
   // 组件内部方法抛出
   useImperativeHandle(ref, function () {
     var _refreshRef$current;
@@ -197,7 +203,7 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
     _onInitChange(initValue);
-    setDateValue(dateValue);
+    defaultDateValueRef.current = dateValue;
   }, []);
   useEffect(function () {
     if (value) {
@@ -209,14 +215,60 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var enableAutoRefresh = useMemo(function () {
     return openAutoRefresh !== undefined ? openAutoRefresh : isAutoRefresh;
   }, [openAutoRefresh, isAutoRefresh]);
+
+  // 日期是否存在
+  var _useMemo = useMemo(function () {
+      // 不符合最近时间格式和没有日期数据返回false
+      var values = recordDateValue.value,
+        type = recordDateValue.type,
+        title = recordDateValue.title;
+      var _judgeType3 = judgeType(recordDateValue),
+        _judgeType4 = _slicedToArray(_judgeType3, 2),
+        isRule = _judgeType4[0],
+        captureUnit = _judgeType4[1];
+      values = funcValueChangeArrayValue(values);
+      var isHasDate = true;
+      var isRightDisabled = false;
+      var isDisabledEnlargeBtn = false;
+      var findDataSourceValue = null;
+      if (type === "relative" && isSpecialRelativeTime) {
+        var findDateSource = dataSource.find(function (item) {
+          return item.type === "relative" && item.title === title;
+        });
+        if (findDateSource) {
+          findDataSourceValue = findDateSource.value;
+        }
+      }
+      var years = getYears(timeSpanBoundary);
+      if (isRule) {
+        isRightDisabled = true;
+        if (!values) {
+          values = getChangeUnitDate(captureUnit[0], captureUnit[1]);
+        }
+        if (captureUnit[1] === "y" && Number(captureUnit[0]) >= years) {
+          isDisabledEnlargeBtn = true;
+        }
+      }
+      if (!isRule && !values) {
+        isHasDate = false;
+      }
+      return [isHasDate, values, isRightDisabled, isDisabledEnlargeBtn, findDataSourceValue];
+    }, [recordDateValue, dataSource]),
+    _useMemo2 = _slicedToArray(_useMemo, 5),
+    isHasDate = _useMemo2[0],
+    _defaultValue = _useMemo2[1],
+    isRightDisabled = _useMemo2[2],
+    isDisabledEnlargeBtn = _useMemo2[3],
+    findDataSourceValue = _useMemo2[4];
+
   // 输入框回显
   useEffect(function () {
-    setInputValue(echoInputValue(recordDateValue, isFocus, locale, format, forceRenderTitle, enableAutoRefresh, timeSpanBoundary));
-  }, [recordDateValue, isFocus, locale, format, forceRenderTitle, enableAutoRefresh, timeSpanBoundary]);
+    setInputValue(customRenderTitle ? customRenderTitle(recordDateValue, isFocus) : echoInputValue(recordDateValue, isFocus, locale, format, forceRenderTitle, timeSpanBoundary, isSpecialRelativeTime, _defaultValue));
+  }, [recordDateValue, isFocus, locale, format, forceRenderTitle, _defaultValue]);
   useEffect(function () {
-    var _judgeType3 = judgeType(recordDateValue),
-      _judgeType4 = _slicedToArray(_judgeType3, 1),
-      isRule = _judgeType4[0];
+    var _judgeType5 = judgeType(recordDateValue),
+      _judgeType6 = _slicedToArray(_judgeType5, 1),
+      isRule = _judgeType6[0];
     var isHasDate = !isRule && !recordDateValue.value ? false : true;
     var _isAutoRefresh = enableAutoRefresh;
     if (isHasDate) {
@@ -254,81 +306,51 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [recordDateValue, isRecentlyOpenRefresh]);
   useEffect(function () {
-    var values = recordDateValue.value;
-    var _judgeType5 = judgeType(recordDateValue),
-      _judgeType6 = _slicedToArray(_judgeType5, 3),
-      isRule = _judgeType6[0],
-      captureUnit = _judgeType6[1],
-      recordUnit = _judgeType6[2];
-    if (enableAutoRefresh && isRule && showAutoRefresh) {
+    if (!enableAutoRefresh || !showAutoRefresh) return;
+    var values = recordDateValue.value,
+      type = recordDateValue.type;
+    var _judgeType7 = judgeType(recordDateValue),
+      _judgeType8 = _slicedToArray(_judgeType7, 2),
+      isRule = _judgeType8[0],
+      captureUnit = _judgeType8[1];
+    if (!isRule && !values) {
       timeRef.current = setInterval(function () {
-        var _values = [];
-        if (values) {
-          _values = computedRecentlyValue(values);
-        } else {
-          _values = getChangeUnitDate(captureUnit[0], captureUnit[1]);
+        onAutoRefresh(recordDateValue);
+      }, delay);
+      return;
+    }
+    var _values = [];
+    if (isRule) {
+      if (type === "relative" && isSpecialRelativeTime) {
+        if (findDataSourceValue || values) {
+          _values = funcValueChangeArrayValue(findDataSourceValue || values);
         }
-        var newValue = _objectSpread(_objectSpread({}, recordDateValue), {}, {
-          timeDomain: recordUnit,
-          number: captureUnit[0],
-          unit: captureUnit[1] === "mo" ? "M" : captureUnit[1],
-          value: _values,
+      } else if (values) {
+        _values = computedRecentlyValue(values);
+      } else {
+        _values = getChangeUnitDate(captureUnit[0], captureUnit[1]);
+      }
+      timeRef.current = setInterval(function () {
+        var newValue = _objectSpread(_objectSpread(_objectSpread({}, recordDateValue), getTimeSpanFromValue(_values, timeSpanBoundary)), {}, {
           isRecently: true
         });
         onAutoRefresh(newValue);
       }, delay);
     }
-    if (enableAutoRefresh && !isRule && !values && showAutoRefresh) {
-      timeRef.current = setInterval(function () {
-        onAutoRefresh(recordDateValue);
-      }, delay);
-    }
     return function () {
       clearInterval(timeRef.current);
     };
-  }, [enableAutoRefresh, recordDateValue, delay, showAutoRefresh]);
-  // 日期是否存在
-  var _useMemo = useMemo(function () {
-      // 不符合最近时间格式和没有日期数据返回false
-      var values = recordDateValue.value;
-      var _judgeType7 = judgeType(recordDateValue),
-        _judgeType8 = _slicedToArray(_judgeType7, 2),
-        isRule = _judgeType8[0],
-        captureUnit = _judgeType8[1];
-      values = funcValueChangeArrayValue(values);
-      var isHasDate = true;
-      var isRightDisabled = false;
-      var isDisabledEnlargeBtn = false;
-      var years = getYears(timeSpanBoundary);
-      if (isRule) {
-        isRightDisabled = true;
-        if (!values) {
-          values = getChangeUnitDate(captureUnit[0], captureUnit[1]);
-        }
-        if (captureUnit[1] === "y" && Number(captureUnit[0]) >= years) {
-          isDisabledEnlargeBtn = true;
-        }
-      }
-      if (!isRule && !values) {
-        isHasDate = false;
-      }
-      return [isHasDate, values, isRightDisabled, isDisabledEnlargeBtn];
-    }, [recordDateValue, timeSpanBoundary]),
-    _useMemo2 = _slicedToArray(_useMemo, 4),
-    isHasDate = _useMemo2[0],
-    _defaultValue = _useMemo2[1],
-    isRightDisabled = _useMemo2[2],
-    isDisabledEnlargeBtn = _useMemo2[3];
+  }, [enableAutoRefresh, recordDateValue, delay, showAutoRefresh, findDataSourceValue]);
+
   // 点击空白处日历切换
   useEffect(function () {
+    setRangePickerValue(_defaultValue);
     document.addEventListener("click", clickBody);
     return function () {
       document.removeEventListener("click", clickBody);
     };
   }, [_defaultValue]);
-  useEffect(function () {
-    setRangePickerValue(_defaultValue);
-  }, [_defaultValue]);
+
   // 重组数据源
   var regroupDataSource = useMemo(function () {
     if (exceedShowInMore) {
@@ -354,9 +376,10 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   // 恢复默认配置
   var onRecover = function onRecover() {
-    var values = dateValue.value,
-      key = dateValue.key;
-    var returnValue = _objectSpread(_objectSpread({}, dateValue), {}, {
+    var _defaultDateValueRef$ = defaultDateValueRef.current,
+      values = _defaultDateValueRef$.value,
+      key = _defaultDateValueRef$.key;
+    var returnValue = _objectSpread(_objectSpread({}, defaultDateValueRef.current), {}, {
       value: funcValueChangeArrayValue(values)
     });
     returnValue = getCorrectValue(returnValue, key);
@@ -367,35 +390,44 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   // 输入框前缀图标,
   var inputPrefix = /*#__PURE__*/React.createElement("div", {
-    className: classnames("cw-range-picker-prefix-wrapper"),
+    className: classnames("cw-range-picker-prefix-wrapper", {
+      "cw-range-picker-prefix-disabled-wrapper": isDisabledInput
+    }),
     onClick: function onClick() {
       setIsFocus(false);
     }
   }, inputPrefixIcon ? inputPrefixIcon : !isHasDate ? /*#__PURE__*/React.createElement(LiveSvg, null) : /*#__PURE__*/React.createElement(CalendarSvg, {
     className: classnames("cw-range-picker-prefix-icon")
   }));
-  var timeDomain = recordDateValue.timeDomain,
-    number = recordDateValue.number,
-    unit = recordDateValue.unit,
-    isRecently = recordDateValue.isRecently,
-    values = recordDateValue.value,
-    rest = _objectWithoutProperties(recordDateValue, _excluded2);
-  var _values = dateValue.value,
-    _timeDomain = dateValue.timeDomain,
-    _number = dateValue.number,
-    _unit = dateValue.unit,
-    _isRecently = dateValue.isRecently,
-    dateValueRest = _objectWithoutProperties(dateValue, _excluded3);
+  var isEqualDateValue = useMemo(function () {
+    var timeDomain = recordDateValue.timeDomain,
+      number = recordDateValue.number,
+      unit = recordDateValue.unit,
+      isRecently = recordDateValue.isRecently,
+      values = recordDateValue.value,
+      rest = _objectWithoutProperties(recordDateValue, _excluded2);
+    var _defaultDateValueRef$2 = defaultDateValueRef.current,
+      _values = _defaultDateValueRef$2.value,
+      _timeDomain = _defaultDateValueRef$2.timeDomain,
+      _number = _defaultDateValueRef$2.number,
+      _unit = _defaultDateValueRef$2.unit,
+      _isRecently = _defaultDateValueRef$2.isRecently,
+      dateValueRest = _objectWithoutProperties(_defaultDateValueRef$2, _excluded3);
+    return isEqual(dateValueRest, rest);
+  }, [recordDateValue]);
+
   // 输入框尾缀图标
   var inputSuffix = isHasDate && /*#__PURE__*/React.createElement("div", {
-    className: classnames("cw-range-picker-suffix-wrapper"),
+    className: classnames("cw-range-picker-suffix-wrapper", {
+      "cw-range-picker-suffix-disabled-wrapper": isDisabledInput
+    }),
     onClick: function onClick() {
       setIsFocus(false);
     }
   }, isFocus && showTipIcon ? /*#__PURE__*/React.createElement(_Tooltip, extraTipOption, /*#__PURE__*/React.createElement(_Icon, {
     type: "question-circle",
     className: classnames("cw-range-picker-suffix-tips")
-  })) : !isFocus && !isEqual(dateValueRest, rest) ? /*#__PURE__*/React.createElement(_Tooltip, {
+  })) : showRecoverIcon && !isFocus && !isEqualDateValue ? /*#__PURE__*/React.createElement(_Tooltip, {
     title: formatMessage(localeObj["recover"])
   }, /*#__PURE__*/React.createElement(RecoverSvg, {
     onClick: onRecover,
@@ -466,11 +498,11 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     } else {
       var finalDateOption = getFinalDateOption(inputValue);
-      var _dateValue2 = finalDateOption.dateValue;
-      var dateCount = getTruthDateCount(_dateValue2);
+      var dateValue = finalDateOption.dateValue;
+      var dateCount = getTruthDateCount(dateValue);
       if (dateCount === 2) {
         var _returnValue = getCorrectValue({
-          value: _dateValue2
+          value: dateValue
         });
         var _passValue = _returnValue.value;
         if (isExceedMaxTimeSpan(_passValue, timeSpanBoundary)) {
@@ -531,7 +563,8 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   var refreshProps = _objectSpread(_objectSpread({}, commonProps), {}, {
     isHasDate: isHasDate,
-    isClickAutoRefresh: isClickAutoRefresh
+    isClickAutoRefresh: isClickAutoRefresh,
+    findDataSourceValue: findDataSourceValue
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classnames("cw-range-picker-wrapper", classNameWrapper),
@@ -551,16 +584,16 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       setIsCalendar(false);
       setIsFocus(false);
       if (_value) {
-        var _values2 = getCorrectValue({
+        var values = getCorrectValue({
           value: _value
         });
         if (isAfterDate(_value[1], moment())) {
-          _values2 = _objectSpread(_objectSpread({}, _values2), {}, {
+          values = _objectSpread(_objectSpread({}, values), {}, {
             value: [_value[0], moment()]
           });
         }
-        var _values3 = _values2,
-          resValue = _values3.value;
+        var _values2 = values,
+          resValue = _values2.value;
         if (isSameDate(resValue[0], resValue[1], "second") || isAfterDate(resValue[0], resValue[1])) {
           _message.error(formatMessage(localeObj["the-selected-time-does-not-meet-the-rule-limit"]));
           return;
@@ -569,8 +602,8 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
           _message.error(formatMessage(localeObj["the-maximum-time-span-is-exceeded"]));
           return;
         }
-        _onChange(_values2);
-        var _getHistoryInfo5 = getHistoryInfo(_values2, historyList, {
+        _onChange(values);
+        var _getHistoryInfo5 = getHistoryInfo(values, historyList, {
             localeObj: localeObj,
             locale: locale
           }, format, timeSpanBoundary),
@@ -583,7 +616,7 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
           });
         }
         if (!value) {
-          setRecordDateValue(_values2);
+          setRecordDateValue(values);
         }
       }
     },
@@ -639,18 +672,18 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       var range = info.range;
       if (range === "start" && data0) {
         data0 = moment(data0).set({
-          "hour": 0,
-          "minute": 0,
-          "second": 0,
-          "millisecond": 0
+          hour: 0,
+          minute: 0,
+          second: 0,
+          millisecond: 0
         });
       }
       if (range === "end" && data1) {
         data1 = moment(data1).set({
-          "hour": 23,
-          "minute": 59,
-          "second": 59,
-          "millisecond": 0
+          hour: 23,
+          minute: 59,
+          second: 59,
+          millisecond: 0
         });
         if (moment().isSame(data1, "day")) {
           data1 = moment();
@@ -674,7 +707,8 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       isInputRef.current = true;
       setInputValue(e.target.value);
     },
-    ref: inputRef
+    ref: inputRef,
+    disabled: isDisabledInput
   }), /*#__PURE__*/React.createElement(_Dropdown, {
     overlay: /*#__PURE__*/React.createElement(DropDownMenu, dropdownMenuProps),
     getPopupContainer: function getPopupContainer(triggerNode) {
@@ -737,6 +771,10 @@ CWRangePicker.propTypes = {
    * 时间跨度按钮配置项，详情参考demo中案例注释
    */
   timeSpanOption: PropTypes.object,
+  /**
+   * 输入框相关配置，详情参考demo中案例注释
+   */
+  inputOption: PropTypes.object,
   /**
    * 时间选择器控件外层容器新增外层容器类名
    */
@@ -745,10 +783,6 @@ CWRangePicker.propTypes = {
    * 非最近日期format展示格式
    */
   format: PropTypes.string,
-  /**
-   * 输入框中前缀显示的icon,若不添加按照默认的规则，key值不符合规则且没有value值时为亮色图标，否则为暗色
-   */
-  inputPrefixIcon: PropTypes.node,
   /**
    * 输入框回显内容优先按照title回显
    */

package/lib/CWRangePicker/index.less

@@ -1,77 +1,87 @@
 .cw-range-picker-wrapper {
+  display: flex;
+  align-items: center;
+  .cw-range-picker-box-wrapper {
     display: flex;
-    align-items: center;
-    .cw-range-picker-box-wrapper{
-        display: flex;
-        flex-direction: column;
+    flex-direction: column;
+  }
+  .cw-range-picker-input-wrapper {
+    width: 360px;
+
+    .@{ant-prefix}-input:not(:first-child) {
+      padding-left: 29px;
     }
-    .cw-range-picker-input-wrapper {
-        width: 360px;
 
-        .@{ant-prefix}-input:not(:first-child) {
-            padding-left: 29px;
+    // 前缀尾缀图标共同样式
+    .cw-range-picker-prefix-wrapper,
+    .cw-range-picker-suffix-wrapper {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .cw-range-picker-prefix-wrapper {
+      .cw-range-picker-prefix-icon {
+        color: @menu-dark-arrow-color;
+      }
+      &.cw-range-picker-prefix-disabled-wrapper {
+        .cw-range-picker-prefix-icon {
+          color: @input-placeholder-color;
         }
+      }
+    }
+    // 尾缀图标样式
+    .cw-range-picker-suffix-wrapper {
+      .cw-range-picker-suffix-tips {
+        color: @text-color-secondary;
+        font-size: 14px;
 
-        // 前缀尾缀图标共同样式
-        .cw-range-picker-prefix-wrapper,
-        .cw-range-picker-suffix-wrapper {
-            width: 16px;
-            height: 16px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-        .cw-range-picker-prefix-icon{
-            color: @menu-dark-arrow-color;
+        &:hover {
+          cursor: pointer;
         }
+      }
 
+      .cw-range-picker-suffix-recover {
+        color: @text-color-show;
 
-        // 尾缀图标样式
-        .cw-range-picker-suffix-wrapper {
-            .cw-range-picker-suffix-tips {
-                color: @text-color-secondary;
-                font-size: 14px;
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-
-            .cw-range-picker-suffix-recover {
-                color: @text-color-show;
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
+        &:hover {
+          cursor: pointer;
+        }
+      }
 
-            &:hover {
-                .cw-range-picker-suffix-tips {
-                    color: @primary-5;
-                }
+      &:hover {
+        .cw-range-picker-suffix-tips {
+          color: @primary-5;
+        }
 
-                .cw-range-picker-suffix-recover {
-                    color: @primary-5;
-                }
-            }
+        .cw-range-picker-suffix-recover {
+          color: @primary-5;
         }
+      }
+      &.cw-range-picker-suffix-disabled-wrapper {
+        .cw-range-picker-suffix-recover {
+          pointer-events: none;
+          color: @disabled-color !important;
+        }
+      }
     }
+  }
 
-    .cw-range-picker-calendar-wrapper {
-        width: 360px;
-    }
+  .cw-range-picker-calendar-wrapper {
+    width: 360px;
+  }
 }
 
-
 // 时间刷新模块
 .cw-range-picker-time-refresh-wrapper {
-    margin-left: 8px;
+  margin-left: 8px;
 }
 
 .cw-range-picker-dropdown {
-    min-width: 360px !important;
+  min-width: 360px !important;
 
-    .@{ant-prefix}-dropdown-menu {
-        max-width: 360px;
-    }
-}
+  .@{ant-prefix}-dropdown-menu {
+    max-width: 360px;
+  }
+}