hc-busin-components 1.0.2 → 1.0.4

package/dist/DateRangePicker/index.js

@@ -1,9 +1,3 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -14,8 +8,14 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { CalendarOutlined, CloseOutlined } from '@ant-design/icons';
-import { Button, ConfigProvider, DatePicker, Input, Popover, Radio, Slider, Switch } from 'antd';
+import { Button, ConfigProvider, DatePicker, Input, Popover, Segmented, Slider, Switch } from 'antd';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import moment from 'moment';
@@ -24,56 +24,55 @@ import enUS from 'rc-calendar/lib/locale/en_US';
 import zhCN from 'rc-calendar/lib/locale/zh_CN';
 import zhHK from 'rc-calendar/lib/locale/zh_TW';
 import TimePickerPanel from 'rc-time-picker/lib/Panel';
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import 'rc-calendar/assets/index.css';
 import 'rc-time-picker/assets/index.css';
 import "./index.less";
 dayjs.extend(customParseFormat);
 var RangePicker = DatePicker.RangePicker;
 var DEFAULT_DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-var DEFAULT_QUICK_TIME_OPTIONS = [{
+var DEFAULT_QUICK_TIME_OPTION_PRESETS = [{
   id: 1,
   value: 1,
-  label: '5分钟',
   diff: 5 * 60 * 1000,
   interval: 1,
   timeUnitId: 1
 }, {
   id: 2,
   value: 2,
-  label: '1小时',
   diff: 60 * 60 * 1000,
   interval: 2,
   timeUnitId: 2
 }, {
   id: 3,
   value: 3,
-  label: '6小时',
   diff: 6 * 60 * 60 * 1000,
   interval: 4,
   timeUnitId: 2
 }, {
   id: 4,
   value: 4,
-  label: '12小时',
   diff: 12 * 60 * 60 * 1000,
   interval: 5,
   timeUnitId: 4
 }, {
   id: 5,
   value: 5,
-  label: '1天',
   diff: 24 * 60 * 60 * 1000,
   interval: 6,
   timeUnitId: 5
 }, {
   id: 6,
   value: 6,
-  label: '7天',
   diff: 7 * 24 * 60 * 60 * 1000,
   interval: 5,
   timeUnitId: 5
 }];
+var DEFAULT_QUICK_TIME_OPTION_LABELS = {
+  'zh-CN': ['5分钟', '1小时', '6小时', '12小时', '1天', '7天'],
+  'zh-HK': ['5分鐘', '1小時', '6小時', '12小時', '1天', '7天'],
+  'en-US': ['5m', '1h', '6h', '12h', '1d', '7d']
+};
 var LOCALE_TEXT = {
   'zh-CN': {
     recent: '最近',
@@ -98,21 +97,83 @@ var CALENDAR_LOCALE_MAP = {
 };
 var PRIMARY = 'var(--ant-color-primary, #1677ff)';
 var TEXT_SECONDARY = 'rgba(0, 0, 0, 0.65)';
+var getDefaultQuickTimeOptions = function getDefaultQuickTimeOptions(locale) {
+  return DEFAULT_QUICK_TIME_OPTION_PRESETS.map(function (item, index) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      label: DEFAULT_QUICK_TIME_OPTION_LABELS[locale][index]
+    });
+  });
+};
+var getSafeDayjs = function getSafeDayjs(value, format) {
+  var strictValue = dayjs(value, format, true);
+  return strictValue.isValid() ? strictValue : dayjs(value);
+};
+var getPickerStateSnapshot = function getPickerStateSnapshot(value, format, quickTimeOptions) {
+  var _quickTimeOptions$;
+  var defaultOption = (_quickTimeOptions$ = quickTimeOptions[0]) !== null && _quickTimeOptions$ !== void 0 ? _quickTimeOptions$ : getDefaultQuickTimeOptions('zh-CN')[0];
+  var defaultTo = dayjs();
+  var defaultFrom = dayjs().subtract(defaultOption.diff, 'millisecond');
+  if (!value) {
+    return {
+      isRecent: true,
+      sliderValue: defaultOption.value,
+      selectTimeRange: [defaultFrom, defaultTo],
+      customTimeRange: [moment(defaultFrom.valueOf()), moment(defaultTo.valueOf())],
+      displayValue: defaultOption.label,
+      flatRadioValue: defaultOption.id
+    };
+  }
+  var safeFrom = getSafeDayjs(value.from, format);
+  var safeTo = getSafeDayjs(value.to, format);
+  if (value.sliderValue !== null && value.sliderValue !== undefined) {
+    var _matchedOption$value, _ref, _matchedOption$label;
+    var matchedOption = quickTimeOptions.find(function (option) {
+      return option.id === value.id || option.value === value.sliderValue;
+    });
+    return {
+      isRecent: true,
+      sliderValue: (_matchedOption$value = matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.value) !== null && _matchedOption$value !== void 0 ? _matchedOption$value : value.sliderValue,
+      selectTimeRange: [safeFrom, safeTo],
+      customTimeRange: [moment(safeFrom.valueOf()), moment(safeTo.valueOf())],
+      displayValue: (_ref = (_matchedOption$label = matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.label) !== null && _matchedOption$label !== void 0 ? _matchedOption$label : value.inputValue) !== null && _ref !== void 0 ? _ref : "".concat(value.from, " - ").concat(value.to),
+      flatRadioValue: matchedOption === null || matchedOption === void 0 ? void 0 : matchedOption.id
+    };
+  }
+  return {
+    isRecent: false,
+    sliderValue: defaultOption.value,
+    selectTimeRange: [safeFrom, safeTo],
+    customTimeRange: [moment(safeFrom.valueOf()), moment(safeTo.valueOf())],
+    displayValue: value.inputValue || "".concat(value.from, " - ").concat(value.to),
+    flatRadioValue: undefined
+  };
+};
+var normalizeDisabledDateFrom = function normalizeDisabledDateFrom(source) {
+  if (!source) {
+    return [];
+  }
+  var rawFrom = _typeof(source) === 'object' && !Array.isArray(source) && 'from' in source ? source.from : source;
+  var fromList = Array.isArray(rawFrom) ? rawFrom : [rawFrom];
+  return fromList.filter(function (item) {
+    return Boolean(item);
+  }).map(function (item) {
+    return dayjs(item.valueOf());
+  });
+};
 var DateRangePicker = function DateRangePicker(props) {
-  var _quickTimeOptions$2;
   var onChange = props.onChange,
     value = props.value,
     _props$format = props.format,
     format = _props$format === void 0 ? DEFAULT_DATE_TIME_FORMAT : _props$format,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement,
-    _props$quickTimeOptio = props.quickTimeOptions,
-    quickTimeOptions = _props$quickTimeOptio === void 0 ? DEFAULT_QUICK_TIME_OPTIONS : _props$quickTimeOptio,
+    quickTimeOptionsProp = props.quickTimeOptions,
     disabledDate = props.disabledDate,
     width = props.width,
     disabled = props.disabled,
     _props$flat = props.flat,
-    flat = _props$flat === void 0 ? false : _props$flat;
+    flat = _props$flat === void 0 ? false : _props$flat,
+    localeProp = props.locale;
   var _useContext = useContext(ConfigProvider.ConfigContext),
     antdLocale = _useContext.locale;
   var currentLocale = useMemo(function () {
@@ -128,40 +189,53 @@ var DateRangePicker = function DateRangePicker(props) {
     }
     return 'zh-CN';
   }, [antdLocale]);
-  var i18n = useMemo(function () {
-    return LOCALE_TEXT[currentLocale];
+  var defaultQuickTimeOptions = useMemo(function () {
+    return getDefaultQuickTimeOptions(currentLocale);
   }, [currentLocale]);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isRecent = _useState4[0],
-    setIsRecent = _useState4[1];
-  var _useState5 = useState(function () {
-      var _quickTimeOptions$0$v, _quickTimeOptions$;
-      return (_quickTimeOptions$0$v = (_quickTimeOptions$ = quickTimeOptions[0]) === null || _quickTimeOptions$ === void 0 ? void 0 : _quickTimeOptions$.value) !== null && _quickTimeOptions$0$v !== void 0 ? _quickTimeOptions$0$v : DEFAULT_QUICK_TIME_OPTIONS[0].value;
+  var quickTimeOptions = useMemo(function () {
+    return quickTimeOptionsProp !== null && quickTimeOptionsProp !== void 0 && quickTimeOptionsProp.length ? quickTimeOptionsProp : defaultQuickTimeOptions;
+  }, [quickTimeOptionsProp, defaultQuickTimeOptions]);
+  var mergedLocale = useMemo(function () {
+    return _objectSpread(_objectSpread({}, LOCALE_TEXT[currentLocale]), localeProp);
+  }, [currentLocale, localeProp]);
+  var _useState = useState(function () {
+      return getPickerStateSnapshot(value, format, quickTimeOptions);
     }),
+    _useState2 = _slicedToArray(_useState, 1),
+    initialState = _useState2[0];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  var _useState5 = useState(initialState.isRecent),
     _useState6 = _slicedToArray(_useState5, 2),
-    sliderValue = _useState6[0],
-    setSliderValue = _useState6[1];
-  var _useState7 = useState([dayjs().subtract(1, 'day'), dayjs()]),
+    isRecent = _useState6[0],
+    setIsRecent = _useState6[1];
+  var _useState7 = useState(initialState.sliderValue),
     _useState8 = _slicedToArray(_useState7, 2),
-    selectTimeRange = _useState8[0],
-    setSelectTimeRange = _useState8[1];
-  var _useState9 = useState([moment().subtract(1, 'days'), moment()]),
+    sliderValue = _useState8[0],
+    setSliderValue = _useState8[1];
+  var _useState9 = useState(initialState.selectTimeRange),
     _useState10 = _slicedToArray(_useState9, 2),
-    customTimeRange = _useState10[0],
-    setCustomTimeRange = _useState10[1];
-  var _useState11 = useState(''),
+    selectTimeRange = _useState10[0],
+    setSelectTimeRange = _useState10[1];
+  var _useState11 = useState(initialState.customTimeRange),
     _useState12 = _slicedToArray(_useState11, 2),
-    displayValue = _useState12[0],
-    setDisplayValue = _useState12[1];
-  var _useState13 = useState((_quickTimeOptions$2 = quickTimeOptions[0]) === null || _quickTimeOptions$2 === void 0 ? void 0 : _quickTimeOptions$2.id),
+    customTimeRange = _useState12[0],
+    setCustomTimeRange = _useState12[1];
+  var _useState13 = useState(initialState.displayValue),
     _useState14 = _slicedToArray(_useState13, 2),
-    flatRadioValue = _useState14[0],
-    setFlatRadioValue = _useState14[1];
+    displayValue = _useState14[0],
+    setDisplayValue = _useState14[1];
+  var _useState15 = useState(initialState.flatRadioValue),
+    _useState16 = _slicedToArray(_useState15, 2),
+    flatRadioValue = _useState16[0],
+    setFlatRadioValue = _useState16[1];
+  var flatSegmentedRef = useRef(null);
+  var _useState17 = useState({}),
+    _useState18 = _slicedToArray(_useState17, 2),
+    flatSegmentedThumbStyle = _useState18[0],
+    setFlatSegmentedThumbStyle = _useState18[1];
   var marks = useMemo(function () {
     var marksObj = {};
     quickTimeOptions.forEach(function (option) {
@@ -178,10 +252,70 @@ var DateRangePicker = function DateRangePicker(props) {
       max: Math.max.apply(Math, _toConsumableArray(values))
     };
   }, [quickTimeOptions]);
+  var flatSegmentedOptions = useMemo(function () {
+    return quickTimeOptions.map(function (item) {
+      return {
+        label: item.label,
+        value: item.id
+      };
+    });
+  }, [quickTimeOptions]);
+  var flatSegmentedTheme = useMemo(function () {
+    return {
+      cssVar: {
+        key: 'hc-date-range-picker-flat-segmented'
+      },
+      token: {
+        borderRadius: 4,
+        borderRadiusSM: 4,
+        boxShadowTertiary: '0 1px 10px rgba(0, 0, 0, 0.08)',
+        colorBgElevated: '#FFFFFF'
+      },
+      components: {
+        Segmented: {
+          trackBg: 'rgba(40, 105, 246, 0.1)',
+          trackPadding: 3,
+          itemColor: 'rgba(0, 0, 0, 0.85)',
+          itemHoverColor: 'rgba(0, 0, 0, 0.85)',
+          itemSelectedColor: '#2869F6'
+        }
+      }
+    };
+  }, []);
+  var quickTimeOptionsSignature = useMemo(function () {
+    return quickTimeOptions.map(function (item) {
+      var _item$interval, _item$timeUnitId;
+      return "".concat(item.id, ":").concat(item.value, ":").concat(item.label, ":").concat(item.diff, ":").concat((_item$interval = item.interval) !== null && _item$interval !== void 0 ? _item$interval : '', ":").concat((_item$timeUnitId = item.timeUnitId) !== null && _item$timeUnitId !== void 0 ? _item$timeUnitId : '');
+    }).join('|');
+  }, [quickTimeOptions]);
   var setRangeByDate = useCallback(function (from, to) {
     setSelectTimeRange([from, to]);
     setCustomTimeRange([moment(from.valueOf()), moment(to.valueOf())]);
   }, []);
+  var updateFlatSegmentedThumb = useCallback(function () {
+    var _items$find;
+    if (!flatSegmentedRef.current || flatRadioValue === undefined) {
+      setFlatSegmentedThumbStyle(_defineProperty({}, '--hc-date-range-picker-flat-segmented-thumb-opacity', 0));
+      return;
+    }
+    var rootElement = flatSegmentedRef.current;
+    var items = Array.from(rootElement.querySelectorAll('.ant-segmented-item'));
+    var targetItem = (_items$find = items.find(function (item) {
+      var input = item.querySelector('.ant-segmented-item-input');
+      return input === null || input === void 0 ? void 0 : input.checked;
+    })) !== null && _items$find !== void 0 ? _items$find : items.find(function (item) {
+      var input = item.querySelector('.ant-segmented-item-input');
+      return Number(input === null || input === void 0 ? void 0 : input.value) === flatRadioValue;
+    });
+    var targetLabel = targetItem === null || targetItem === void 0 ? void 0 : targetItem.querySelector('.ant-segmented-item-label');
+    if (!targetItem || !targetLabel) {
+      setFlatSegmentedThumbStyle(_defineProperty({}, '--hc-date-range-picker-flat-segmented-thumb-opacity', 0));
+      return;
+    }
+    var rootRect = rootElement.getBoundingClientRect();
+    var labelRect = targetLabel.getBoundingClientRect();
+    setFlatSegmentedThumbStyle(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '--hc-date-range-picker-flat-segmented-thumb-left', "".concat(labelRect.left - rootRect.left, "px")), '--hc-date-range-picker-flat-segmented-thumb-top', "".concat(labelRect.top - rootRect.top, "px")), '--hc-date-range-picker-flat-segmented-thumb-width', "".concat(labelRect.width, "px")), '--hc-date-range-picker-flat-segmented-thumb-height', "".concat(labelRect.height, "px")), '--hc-date-range-picker-flat-segmented-thumb-opacity', 1));
+  }, [flatRadioValue]);
   var calculateInterval = useCallback(function (fromTime, toTime) {
     var diff = dayjs(toTime).valueOf() - dayjs(fromTime).valueOf();
     var hours = diff / (60 * 60 * 1000);
@@ -215,46 +349,34 @@ var DateRangePicker = function DateRangePicker(props) {
     };
   }, []);
   useEffect(function () {
-    if (value) {
-      var sValue = value.sliderValue,
-        from = value.from,
-        to = value.to;
-      var fromD = dayjs(from, format, true);
-      var toD = dayjs(to, format, true);
-      var safeFrom = fromD.isValid() ? fromD : dayjs(from);
-      var safeTo = toD.isValid() ? toD : dayjs(to);
-      setRangeByDate(safeFrom, safeTo);
-      if (sValue !== null && sValue !== undefined) {
-        setIsRecent(true);
-        setSliderValue(sValue);
-        var option = quickTimeOptions.find(function (opt) {
-          return opt.id === value.id || opt.value === sValue;
-        });
-        if (option) {
-          setDisplayValue(option.label);
-          if (flat) {
-            setFlatRadioValue(option.id);
-          }
-        }
-      } else {
-        setIsRecent(false);
-        setDisplayValue("".concat(from, " - ").concat(to));
-        if (flat) {
-          setFlatRadioValue(undefined);
-        }
-      }
-    } else if (quickTimeOptions.length > 0) {
-      var defaultOption = quickTimeOptions[0];
-      var _to = dayjs();
-      var _from = dayjs().subtract(defaultOption.diff, 'millisecond');
-      setSliderValue(defaultOption.value);
-      setDisplayValue(defaultOption.label);
-      setRangeByDate(_from, _to);
-      if (flat) {
-        setFlatRadioValue(defaultOption.id);
-      }
+    var nextState = getPickerStateSnapshot(value, format, quickTimeOptions);
+    setIsRecent(nextState.isRecent);
+    setSliderValue(nextState.sliderValue);
+    setSelectTimeRange(nextState.selectTimeRange);
+    setCustomTimeRange(nextState.customTimeRange);
+    setDisplayValue(nextState.displayValue);
+    setFlatRadioValue(flat ? nextState.flatRadioValue : undefined);
+  }, [value, quickTimeOptionsSignature, flat, format, quickTimeOptions]);
+  useEffect(function () {
+    if (!flat) {
+      return;
+    }
+    var frameId = window.requestAnimationFrame(function () {
+      updateFlatSegmentedThumb();
+    });
+    var resizeObserver = typeof ResizeObserver === 'undefined' || !flatSegmentedRef.current ? null : new ResizeObserver(function () {
+      updateFlatSegmentedThumb();
+    });
+    if (flatSegmentedRef.current) {
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(flatSegmentedRef.current);
     }
-  }, [value, quickTimeOptions, flat, format, setRangeByDate]);
+    window.addEventListener('resize', updateFlatSegmentedThumb);
+    return function () {
+      window.cancelAnimationFrame(frameId);
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
+      window.removeEventListener('resize', updateFlatSegmentedThumb);
+    };
+  }, [flat, flatSegmentedOptions, updateFlatSegmentedThumb]);
   var handleRecentSave = useCallback(function () {
     var option = quickTimeOptions.find(function (opt) {
       return opt.value === sliderValue;
@@ -305,13 +427,10 @@ var DateRangePicker = function DateRangePicker(props) {
     onChange === null || onChange === void 0 || onChange(timeInfo);
   }, [customTimeRange, format, calculateInterval, onChange]);
   var wrappedDisabledDateForCalendar = useCallback(function (current, options) {
-    var _options$from$map, _options$from;
     if (!disabledDate) {
       return false;
     }
-    var fromArr = (_options$from$map = options === null || options === void 0 || (_options$from = options.from) === null || _options$from === void 0 ? void 0 : _options$from.map(function (item) {
-      return dayjs(item.valueOf());
-    })) !== null && _options$from$map !== void 0 ? _options$from$map : [];
+    var fromArr = normalizeDisabledDateFrom(options);
     var currentDayjs = current ? dayjs(current.valueOf()) : null;
     return disabledDate(currentDayjs, {
       from: fromArr
@@ -326,8 +445,8 @@ var DateRangePicker = function DateRangePicker(props) {
       from: fromArr
     });
   }, [disabledDate]);
-  var handleFlatRadioChange = useCallback(function (e) {
-    var selectedId = e.target.value;
+  var handleFlatSegmentedChange = useCallback(function (selectedValue) {
+    var selectedId = Number(selectedValue);
     setFlatRadioValue(selectedId);
     var option = quickTimeOptions.find(function (opt) {
       return opt.id === selectedId;
@@ -383,7 +502,7 @@ var DateRangePicker = function DateRangePicker(props) {
     style: {
       color: isRecent ? PRIMARY : TEXT_SECONDARY
     }
-  }, i18n.recent), /*#__PURE__*/React.createElement(Switch, {
+  }, mergedLocale.recent), /*#__PURE__*/React.createElement(Switch, {
     checked: !isRecent,
     onChange: function onChange(checked) {
       return setIsRecent(!checked);
@@ -396,7 +515,7 @@ var DateRangePicker = function DateRangePicker(props) {
     style: {
       color: isRecent ? TEXT_SECONDARY : PRIMARY
     }
-  }, i18n.custom)), /*#__PURE__*/React.createElement(CloseOutlined, {
+  }, mergedLocale.custom)), /*#__PURE__*/React.createElement(CloseOutlined, {
     className: "hc-date-range-picker-close",
     onClick: function onClick() {
       return setVisible(false);
@@ -421,7 +540,7 @@ var DateRangePicker = function DateRangePicker(props) {
     type: "primary",
     size: "small",
     onClick: handleRecentSave
-  }, i18n.confirm))) : /*#__PURE__*/React.createElement("div", {
+  }, mergedLocale.confirm))) : /*#__PURE__*/React.createElement("div", {
     className: "hc-date-range-picker-custom"
   }, /*#__PURE__*/React.createElement(RangeCalendar, {
     showToday: false,
@@ -439,16 +558,15 @@ var DateRangePicker = function DateRangePicker(props) {
     className: "hc-date-range-picker-wrapper ".concat(flat ? 'hc-date-range-picker-flat' : '')
   }, flat ? /*#__PURE__*/React.createElement("div", {
     className: "hc-date-range-picker-flat-content"
-  }, /*#__PURE__*/React.createElement(Radio.Group, {
-    className: "hc-date-range-picker-flat-radio-group",
-    buttonStyle: "solid",
+  }, /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: flatSegmentedTheme
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    ref: flatSegmentedRef,
+    className: "hc-date-range-picker-flat-segmented",
     value: flatRadioValue,
-    onChange: handleFlatRadioChange
-  }, quickTimeOptions.map(function (item) {
-    return /*#__PURE__*/React.createElement(Radio.Button, {
-      key: item.id,
-      value: item.id
-    }, item.label);
+    onChange: handleFlatSegmentedChange,
+    options: flatSegmentedOptions,
+    style: flatSegmentedThumbStyle
   })), /*#__PURE__*/React.createElement(RangePicker, {
     allowClear: false,
     disabledDate: disabledDate ? wrappedDisabledDateForAntd : undefined,

package/dist/DateRangePicker/index.less

@@ -1,4 +1,4 @@
-@hc-primary: var(--ant-color-primary, #1677ff);
+@hc-primary: var(--ant-color-primary, #2869f6);
 
 .hc-date-range-picker-wrapper {
   position: relative;
@@ -23,33 +23,66 @@
       align-items: center;
     }
 
-    .hc-date-range-picker-flat-radio-group {
+    .hc-date-range-picker-flat-segmented {
+      position: relative;
       display: inline-flex;
       flex-wrap: nowrap;
-      gap: 3px;
       margin: 0;
-      padding: 3px;
-      background: rgba(40, 105, 246, 10%);
+      border: none;
       border-radius: 4px;
+      box-shadow: none;
+
+      &::before {
+        position: absolute;
+        top: var(--hc-date-range-picker-flat-segmented-thumb-top, 3px);
+        left: var(--hc-date-range-picker-flat-segmented-thumb-left, 3px);
+        z-index: 0;
+        width: var(--hc-date-range-picker-flat-segmented-thumb-width, 0);
+        height: var(--hc-date-range-picker-flat-segmented-thumb-height, 26px);
+        background: var(--ant-color-bg-elevated, #fff);
+        border-radius: var(--ant-border-radius-sm, 4px);
+        box-shadow: var(--ant-box-shadow-tertiary, 0 1px 10px #00000014);
+        opacity: var(--hc-date-range-picker-flat-segmented-thumb-opacity, 0);
+        transition:
+          left 0.2s ease,
+          top 0.2s ease,
+          width 0.2s ease,
+          height 0.2s ease,
+          opacity 0.2s ease;
+        pointer-events: none;
+        content: '';
+      }
+
+      .ant-segmented-group {
+        position: relative;
+        z-index: 1;
+        gap: 3px;
+      }
 
-      .ant-radio-button-wrapper {
+      .ant-segmented-item {
         height: 26px;
+        padding: 0;
+        background: transparent;
+        box-shadow: none;
+        border-radius: 4px;
+      }
+
+      .ant-segmented-item-label {
+        min-height: 26px;
         padding: 0 12px;
         line-height: 26px;
-        background: none;
-        border: none;
         border-radius: 4px;
+      }
 
-        &:not(:first-child)::before {
-          width: 0;
-        }
+      .ant-segmented-thumb {
+        pointer-events: none;
+        opacity: 0;
+      }
 
-        &.ant-radio-button-wrapper-checked {
-          color: @hc-primary;
-          font-weight: 500;
-          background: #fff;
-          box-shadow: 0 1px 10px #00000014;
-        }
+      .ant-segmented-item-selected,
+      .ant-segmented-item-selected:hover {
+        background: transparent;
+        box-shadow: none;
       }
     }
   }

package/dist/HCDrawer/index.d.ts

@@ -0,0 +1,14 @@
+import type { DrawerProps } from 'antd';
+import React from 'react';
+import './index.less';
+export interface HCDrawerProps extends DrawerProps {
+    showFooter?: boolean;
+    onOk?: () => void | Promise<void>;
+    okText?: React.ReactNode;
+    cancelText?: React.ReactNode;
+    resizable?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+}
+declare const HCDrawer: React.FC<HCDrawerProps>;
+export default HCDrawer;