@oceanbase/ui 1.0.0-alpha.10 → 1.0.0-alpha.11

package/lib/DateRanger/Ranger.js

@@ -1,69 +1,40 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/DateRanger/Ranger.tsx
-var Ranger_exports = {};
-__export(Ranger_exports, {
-  default: () => Ranger_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Ranger_exports);
-var import_react = __toESM(require("react"));
-var import_design = require("@oceanbase/design");
-var import_icons = require("@oceanbase/icons");
-var import_dayjs = __toESM(require("dayjs"));
-var import_lodash = require("lodash");
-var import_moment = __toESM(require("moment"));
-var import_classnames = __toESM(require("classnames"));
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_constant = require("./constant");
-var import_PickerPanel = __toESM(require("./PickerPanel"));
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var import_style = __toESM(require("./style"));
-var import_ahooks = require("ahooks");
-var import_util = require("@oceanbase/util");
-var import_jsx_runtime = require("react/jsx-runtime");
-var DefaultMaxHistoryCapacity = 20;
-var Ranger = import_react.default.forwardRef((props, ref) => {
-  var _a;
-  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls("date-ranger");
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _design = require("@oceanbase/design");
+var _icons = require("@oceanbase/icons");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _lodash = require("lodash");
+var _moment = _interopRequireDefault(require("moment"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _LocaleWrapper = _interopRequireDefault(require("../locale/LocaleWrapper"));
+var _constant = require("./constant");
+var _PickerPanel = _interopRequireDefault(require("./PickerPanel"));
+var _zhCN = _interopRequireDefault(require("./locale/zh-CN"));
+var _style = _interopRequireDefault(require("./style"));
+var _ahooks = require("ahooks");
+var _util = require("@oceanbase/util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+"use client";
+const DefaultMaxHistoryCapacity = 20;
+const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('date-ranger');
+  const {
+    wrapSSR
+  } = (0, _style.default)(prefixCls);
   const prefix = prefixCls;
   const {
-    selects = [
-      import_constant.NEAR_1_MINUTES,
-      import_constant.NEAR_30_MINUTES,
-      import_constant.NEAR_1_HOURS,
-      import_constant.NEAR_3_HOURS,
-      import_constant.NEAR_6_HOURS,
-      import_constant.TODAY,
-      import_constant.LAST_3_DAYS
-    ],
+    selects = [_constant.NEAR_1_MINUTES, _constant.NEAR_30_MINUTES, _constant.NEAR_1_HOURS, _constant.NEAR_3_HOURS, _constant.NEAR_6_HOURS, _constant.TODAY, _constant.LAST_3_DAYS],
     value,
     defaultValue,
     defaultQuickValue,
@@ -79,7 +50,7 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
     hideSecond = false,
     autoCalcRange = false,
     history: historyProp = false,
-    onChange = import_lodash.noop,
+    onChange = _lodash.noop,
     disabledDate,
     locale,
     size,
@@ -95,53 +66,55 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
     getPopupContainer,
     ...rest
   } = props;
-  const { token } = import_design.theme.useToken();
-  const isCn = locale.antLocale === "zh-cn";
-  const isEN = locale.antLocale === "en";
-  const isMoment = import_moment.default.isMoment(defaultValue == null ? void 0 : defaultValue[0]) || import_moment.default.isMoment(defaultValue == null ? void 0 : defaultValue[1]) || import_moment.default.isMoment(value == null ? void 0 : value[0]) || import_moment.default.isMoment(value == null ? void 0 : value[1]) || isMomentProps;
-  const defaultRangeName = value || defaultValue ? import_constant.CUSTOMIZE : defaultQuickValue ?? ((_a = selects == null ? void 0 : selects[0]) == null ? void 0 : _a.name);
-  const [rangeName, setRangeName] = (0, import_react.useState)(defaultRangeName);
-  const [innerValue, setInnerValue] = (0, import_react.useState)(() => {
-    var _a2;
-    const initValue = value ?? defaultValue ?? ((_a2 = selects.find((item) => item.name === defaultRangeName)) == null ? void 0 : _a2.range(isMoment ? (0, import_moment.default)() : (0, import_dayjs.default)()));
+  const {
+    token
+  } = _design.theme.useToken();
+  const isCn = locale.antLocale === 'zh-cn';
+  const isEN = locale.antLocale === 'en';
+
+  // 是否为 moment 时间对象
+  const isMoment = _moment.default.isMoment(defaultValue?.[0]) || _moment.default.isMoment(defaultValue?.[1]) || _moment.default.isMoment(value?.[0]) || _moment.default.isMoment(value?.[1]) || isMomentProps;
+  const defaultRangeName = value || defaultValue ? _constant.CUSTOMIZE : defaultQuickValue ?? selects?.[0]?.name;
+  const [rangeName, setRangeName] = (0, _react.useState)(defaultRangeName);
+  const [innerValue, setInnerValue] = (0, _react.useState)(() => {
+    const initValue = value ?? defaultValue ?? selects.find(item => item.name === defaultRangeName)?.range(isMoment ? (0, _moment.default)() : (0, _dayjs.default)());
     if (onChange) {
       onChange(initValue);
     }
     return initValue;
   });
-  const [open, setOpen] = (0, import_react.useState)(false);
-  const [tooltipOpen, setTooltipOpen] = (0, import_react.useState)(false);
-  const [backRadioFocused, setBackRadioFocused] = (0, import_react.useState)(false);
-  const [historyMenuVisible, setHistoryMenuVisible] = (0, import_react.useState)(false);
-  const rangeRef = (0, import_react.useRef)(null);
-  const popRef = (0, import_react.useRef)(null);
-  const labelRef = (0, import_react.useRef)(null);
-  const [isPlay, setIsPlay] = (0, import_react.useState)(rangeName !== import_constant.CUSTOMIZE);
-  const history = (0, import_react.useMemo)(() => {
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [tooltipOpen, setTooltipOpen] = (0, _react.useState)(false);
+  const [backRadioFocused, setBackRadioFocused] = (0, _react.useState)(false);
+  const [historyMenuVisible, setHistoryMenuVisible] = (0, _react.useState)(false);
+  const rangeRef = (0, _react.useRef)(null);
+  const popRef = (0, _react.useRef)(null);
+  const labelRef = (0, _react.useRef)(null);
+
+  // 没有 selects 时，回退到普通 RangePicker, 当前时间选项为自定义时，应该显示 RangePicker
+  const [isPlay, setIsPlay] = (0, _react.useState)(rangeName !== _constant.CUSTOMIZE);
+  const history = (0, _react.useMemo)(() => {
     if (historyProp) {
       return {
-        capacity: typeof historyProp === "object" ? historyProp.capacity : DefaultMaxHistoryCapacity
+        capacity: typeof historyProp === 'object' ? historyProp.capacity : DefaultMaxHistoryCapacity
       };
     }
     return false;
   }, [historyProp]);
   const localStorageKey = `${prefixCls}-date-ranger-history`;
-  const [rangeHistory, setRangeHistory] = (0, import_util.useLocalStorageState)(
-    localStorageKey,
-    { defaultValue: [], listenStorageChange: true }
-  );
-  const updateRangeHistory = (range) => {
+  const [rangeHistory, setRangeHistory] = (0, _util.useLocalStorageState)(localStorageKey, {
+    defaultValue: [],
+    listenStorageChange: true
+  });
+  const updateRangeHistory = range => {
     if (!range) {
       return;
     }
     if (range.length < 2 || !history) {
       return;
     }
-    const formattedValue = [
-      range[0].format(import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN),
-      range[1].format(import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN)
-    ];
-    if (rangeHistory.find((item) => (0, import_lodash.isEqual)(item, formattedValue))) {
+    const formattedValue = [range[0].format(_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN), range[1].format(_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN)];
+    if (rangeHistory.find(item => (0, _lodash.isEqual)(item, formattedValue))) {
       return;
     }
     const updatedValue = [formattedValue, ...rangeHistory];
@@ -150,35 +123,30 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
     }
     setRangeHistory(updatedValue);
   };
-  const delRangeHistory = (range) => {
-    const updatedValue = rangeHistory.filter((item) => !(0, import_lodash.isEqual)(item, range));
+  const delRangeHistory = range => {
+    const updatedValue = rangeHistory.filter(item => !(0, _lodash.isEqual)(item, range));
     setRangeHistory(updatedValue);
   };
   const compare = (m1, m2) => {
-    if (Array.isArray(m1) && !Array.isArray(m2))
-      return false;
-    if (Array.isArray(m2) && !Array.isArray(m1))
-      return false;
+    if (Array.isArray(m1) && !Array.isArray(m2)) return false;
+    if (Array.isArray(m2) && !Array.isArray(m1)) return false;
     return value[0] === innerValue[0] || value[1] === innerValue[1];
   };
-  (0, import_ahooks.useClickAway)(() => {
+  (0, _ahooks.useClickAway)(() => {
     closeTooltip();
   }, [
-    // 有range输入框时才将其ref引用加入依赖（即极简模式不加入）
-    ...!simpleMode || !isPlay ? [rangeRef] : [],
-    popRef,
-    labelRef
-  ]);
-  (0, import_react.useEffect)(() => {
-    if ((0, import_lodash.isNil)(value) && (0, import_lodash.isNil)(innerValue))
-      return;
-    if ((0, import_lodash.isNil)(value) && !(0, import_lodash.isNil)(innerValue))
-      return;
+  // 有range输入框时才将其ref引用加入依赖（即极简模式不加入）
+  ...(!simpleMode || !isPlay ? [rangeRef] : []), popRef, labelRef]);
+  (0, _react.useEffect)(() => {
+    if ((0, _lodash.isNil)(value) && (0, _lodash.isNil)(innerValue)) return;
+    // FIXME: 当前存在值的时候赋空值给组件，不好处理先 workaround 绕过，后面再想一个整体的方案
+    if ((0, _lodash.isNil)(value) && !(0, _lodash.isNil)(innerValue)) return;
     const isEqual = compare(value, innerValue);
+    // 前后时间有差异时，进行赋值
     if (!isEqual) {
       setInnerValue(value);
       if (!stickRangeName) {
-        setRangeName(import_constant.CUSTOMIZE);
+        setRangeName(_constant.CUSTOMIZE);
       }
     }
   }, [value, stickRangeName]);
@@ -186,35 +154,36 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
     setOpen(false);
     setTooltipOpen(false);
   };
-  const handleNameChange = (name) => {
-    if (name !== import_constant.CUSTOMIZE) {
+  const handleNameChange = name => {
+    if (name !== _constant.CUSTOMIZE) {
       closeTooltip();
     }
     setRangeName(name);
   };
-  const rangeChange = (range) => {
+  const rangeChange = range => {
     setInnerValue(range);
     onChange(range);
     updateRangeHistory(range);
   };
-  const datePickerChange = (range) => {
+  const datePickerChange = range => {
     rangeChange(range);
-    setRangeName(import_constant.CUSTOMIZE);
+    setRangeName(_constant.CUSTOMIZE);
   };
-  const disabledFuture = (current) => {
-    const futureDay = import_moment.default.isMoment(current) ? (0, import_moment.default)().endOf("day") : (0, import_dayjs.default)().endOf("day");
+  const disabledFuture = current => {
+    const futureDay = _moment.default.isMoment(current) ? (0, _moment.default)().endOf('day') : (0, _dayjs.default)().endOf('day');
+    // 禁止选择未来日期
     return current && futureDay && current > futureDay;
   };
-  const startTime = innerValue == null ? void 0 : innerValue[0];
-  const endTime = innerValue == null ? void 0 : innerValue[1];
-  const differenceMs = endTime == null ? void 0 : endTime.diff(startTime);
-  const differenceSeconds = endTime == null ? void 0 : endTime.diff(startTime, "seconds");
-  const differenceMinutes = endTime == null ? void 0 : endTime.diff(startTime, "minutes");
-  const differenceHours = endTime == null ? void 0 : endTime.diff(startTime, "hours");
-  const differenceDays = endTime == null ? void 0 : endTime.diff(startTime, "days");
-  const differenceWeeks = endTime == null ? void 0 : endTime.diff(startTime, "weeks");
-  const differenceMonths = endTime == null ? void 0 : endTime.diff(startTime, "months");
-  const differenceYears = endTime == null ? void 0 : endTime.diff(startTime, "years");
+  const startTime = innerValue?.[0];
+  const endTime = innerValue?.[1];
+  const differenceMs = endTime?.diff(startTime);
+  const differenceSeconds = endTime?.diff(startTime, 'seconds');
+  const differenceMinutes = endTime?.diff(startTime, 'minutes');
+  const differenceHours = endTime?.diff(startTime, 'hours');
+  const differenceDays = endTime?.diff(startTime, 'days');
+  const differenceWeeks = endTime?.diff(startTime, 'weeks');
+  const differenceMonths = endTime?.diff(startTime, 'months');
+  const differenceYears = endTime?.diff(startTime, 'years');
   const getCustomizeRangeLabel = () => {
     if (!autoCalcRange) {
       return locale.customize;
@@ -258,407 +227,353 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
     return isEN ? `Nearly ${differenceSeconds} seconds` : `近 ${differenceSeconds} 秒`;
   };
   const getHistoryTitle = () => {
-    return isEN ? "History records" : "历史记录";
+    return isEN ? 'History records' : '历史记录';
   };
   const setNow = () => {
-    const selected = selects.find((item) => item.name === rangeName);
-    if (selected == null ? void 0 : selected.range) {
-      rangeChange(selected.range(isMoment ? (0, import_moment.default)() : (0, import_dayjs.default)()));
+    const selected = selects.find(item => item.name === rangeName);
+    if (selected?.range) {
+      rangeChange(selected.range(isMoment ? (0, _moment.default)() : (0, _dayjs.default)()));
     }
-    if (rangeName === import_constant.CUSTOMIZE) {
-      const eTime = isMoment ? (0, import_moment.default)() : (0, import_dayjs.default)();
-      rangeChange([eTime == null ? void 0 : eTime.clone().subtract(differenceMs), eTime]);
+    if (rangeName === _constant.CUSTOMIZE) {
+      const eTime = isMoment ? (0, _moment.default)() : (0, _dayjs.default)();
+      rangeChange([eTime?.clone().subtract(differenceMs), eTime]);
     }
   };
-  (0, import_react.useImperativeHandle)(ref, () => ({
+  (0, _react.useImperativeHandle)(ref, () => ({
     updateCurrentTime: setNow
   }));
-  const currentRange = selects.find((_item) => _item.name === rangeName);
-  const rangeLabel = rangeName === import_constant.CUSTOMIZE ? getCustomizeRangeLabel() : currentRange == null ? void 0 : currentRange.rangeLabel;
-  const label = rangeName === import_constant.CUSTOMIZE ? getCustomizeLabel() : isEN ? currentRange.enLabel || currentRange.label : currentRange.label;
-  const thisYear = (/* @__PURE__ */ new Date()).getFullYear();
-  const isThisYear = (startTime == null ? void 0 : startTime.year()) === thisYear && (endTime == null ? void 0 : endTime.year()) === thisYear;
-  const rangeNameIndex = (0, import_lodash.findIndex)(selects, (item) => item.name === rangeName);
-  const nextRangeItem = rangeNameIndex === -1 ? selects.find((item) => {
-    const [s, e] = item.range(isMoment ? (0, import_moment.default)() : (0, import_dayjs.default)());
+  const currentRange = selects.find(_item => _item.name === rangeName);
+  const rangeLabel = rangeName === _constant.CUSTOMIZE ? getCustomizeRangeLabel() : currentRange?.rangeLabel;
+  const label = rangeName === _constant.CUSTOMIZE ? getCustomizeLabel() : isEN ? currentRange.enLabel || currentRange.label : currentRange.label;
+  const thisYear = new Date().getFullYear();
+  const isThisYear = startTime?.year() === thisYear && endTime?.year() === thisYear;
+  const rangeNameIndex = (0, _lodash.findIndex)(selects, item => item.name === rangeName);
+  const nextRangeItem = rangeNameIndex === -1 ? selects.find(item => {
+    const [s, e] = item.range(isMoment ? (0, _moment.default)() : (0, _dayjs.default)());
+    // 自定义模式下，对比毫秒来选出比当前范围大一级的 rangeItem
     const diffMs = e.diff(s);
     return diffMs > differenceMs;
   }) : selects[rangeNameIndex + 1];
-  return wrapSSR(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_design.Space,
-      {
-        className: (0, import_classnames.default)(rest.className, {
-          [prefix]: true,
-          [`${prefix}-show-range`]: true,
-          [`${prefix}-back-radio-focused`]: backRadioFocused
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
+    className: (0, _classnames.default)(rest.className, {
+      [prefix]: true,
+      [`${prefix}-show-range`]: true,
+      [`${prefix}-back-radio-focused`]: backRadioFocused
+    }),
+    style: rest.style,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
+      size: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(`${prefix}-wrapper`, {
+          [`${prefix}-wrapper-has-jumper`]: hasRewind || hasForward
         }),
-        style: rest.style,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { size: 0, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "div",
-              {
-                className: (0, import_classnames.default)(`${prefix}-wrapper`, {
-                  [`${prefix}-wrapper-has-jumper`]: hasRewind || hasForward
-                }),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_design.Dropdown,
-                    {
-                      trigger: ["click"],
-                      open,
-                      placement: rest.placement,
-                      autoAdjustOverflow,
-                      getPopupContainer,
-                      destroyOnHidden: true,
-                      onOpenChange: (o) => {
-                        if (o === false && tooltipOpen) {
-                          return;
-                        }
-                        setOpen(o);
-                      },
-                      popupRender: (originNode) => {
-                        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                          "div",
-                          {
-                            ref: popRef,
-                            className: (0, import_classnames.default)(`${prefix}-dropdown-picker`, overlayClassName),
-                            style: overlayStyle,
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Flex, { vertical: true, justify: "space-between", children: [
-                                !historyMenuVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "options", children: originNode }),
-                                history && historyMenuVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "history", children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                                    import_design.Button,
-                                    {
-                                      type: "link",
-                                      style: { paddingLeft: 8, color: token.colorTextBase },
-                                      onClick: (e) => {
-                                        setHistoryMenuVisible(false);
-                                        e.stopPropagation();
-                                      },
-                                      children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowLeftOutlined, { color: token.colorTextLabel }),
-                                        getHistoryTitle()
-                                      ]
-                                    }
-                                  ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                    import_design.Menu,
-                                    {
-                                      onClick: ({ key: rangeString }) => {
-                                        const vList = rangeString.split(",").map((v) => v.trim());
-                                        rangeChange(
-                                          vList.map((v) => {
-                                            return isMoment ? (0, import_moment.default)(v) : (0, import_dayjs.default)(v);
-                                          })
-                                        );
-                                        handleNameChange(import_constant.CUSTOMIZE);
-                                      },
-                                      style: { maxHeight: 480, overflowY: "auto" },
-                                      items: rangeHistory.map((range) => {
-                                        return {
-                                          key: String(range),
-                                          label: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                                            import_design.Flex,
-                                            {
-                                              className: `${prefix}-history-menu-item`,
-                                              vertical: true,
-                                              children: [
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-                                                  (isMoment ? (0, import_moment.default)(range[0]) : (0, import_dayjs.default)(range[0])).format(
-                                                    import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN
-                                                  ),
-                                                  "~"
-                                                ] }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: (isMoment ? (0, import_moment.default)(range[1]) : (0, import_dayjs.default)(range[1])).format(
-                                                  import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN
-                                                ) }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { className: `${prefix}-menu-text-btn-wrapper`, children: [
-                                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                                    import_design.Button,
-                                                    {
-                                                      className: `${prefix}-menu-text-btn`,
-                                                      type: "text",
-                                                      color: "default",
-                                                      variant: "filled",
-                                                      size: "small",
-                                                      onClick: (e) => {
-                                                        e.stopPropagation();
-                                                        const vList = range.map((v) => v);
-                                                        const text = `${vList.join("~")}`;
-                                                        navigator.clipboard.writeText(text);
-                                                        import_design.message.success(text);
-                                                      },
-                                                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CopyOutlined, {})
-                                                    }
-                                                  ),
-                                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                                    import_design.Button,
-                                                    {
-                                                      className: `${prefix}-menu-text-btn`,
-                                                      type: "text",
-                                                      color: "default",
-                                                      variant: "filled",
-                                                      size: "small",
-                                                      onClick: (e) => {
-                                                        e.stopPropagation();
-                                                        delRangeHistory(range);
-                                                      },
-                                                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DeleteOutlined, {})
-                                                    }
-                                                  )
-                                                ] })
-                                              ]
-                                            },
-                                            String(range)
-                                          )
-                                        };
-                                      })
-                                    }
-                                  )
-                                ] }),
-                                history && !historyMenuVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                                  import_design.Button,
-                                  {
-                                    type: "link",
-                                    style: { width: "max-content" },
-                                    onClick: (e) => {
-                                      setHistoryMenuVisible(true);
-                                      e.stopPropagation();
-                                    },
-                                    children: [
-                                      getHistoryTitle(),
-                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.RightOutlined, {})
-                                    ]
-                                  }
-                                )
-                              ] }),
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Divider, { type: "vertical", style: { height: "auto", margin: "0px 4px 0px 0px" } }),
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                import_PickerPanel.default,
-                                {
-                                  defaultValue: innerValue || [],
-                                  locale,
-                                  disabledDate: pastOnly ? disabledFuture : disabledDate,
-                                  tip,
-                                  isMoment,
-                                  rules,
-                                  hideSecond,
-                                  onOk: (vList) => {
-                                    setIsPlay(false);
-                                    handleNameChange(import_constant.CUSTOMIZE);
-                                    rangeChange(
-                                      vList.map((v) => {
-                                        return isMoment ? (0, import_moment.default)(v) : (0, import_dayjs.default)(v);
-                                      })
-                                    );
-                                    closeTooltip();
-                                  },
-                                  onCancel: () => {
-                                    closeTooltip();
-                                  }
-                                }
-                              )
-                            ]
-                          }
-                        );
-                      },
-                      menu: {
-                        selectable: true,
-                        defaultSelectedKeys: [rangeName],
-                        onClick: ({ key, domEvent }) => {
-                          const selected = selects.find((_item) => _item.name === key);
-                          if (selected == null ? void 0 : selected.range) {
-                            handleNameChange(key);
-                            setIsPlay(true);
-                            rangeChange(selected.range(isMoment ? (0, import_moment.default)() : (0, import_dayjs.default)()));
-                          }
-                        },
-                        items: selects.filter((item) => {
-                          return !!item;
-                        }).map((item) => {
-                          return {
-                            key: item.name,
-                            label: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { size: 8, style: { minWidth: 100 }, children: [
-                              hasTagInPicker && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefix}-label`, children: item.rangeLabel }),
-                              isEN ? item.enLabel || item.label : item.label
-                            ] })
-                          };
-                        })
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                        import_design.Space,
-                        {
-                          ref: labelRef,
-                          size: 0,
-                          onClick: () => {
-                            setOpen(true);
-                            setTooltipOpen(true);
-                          },
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                              "span",
-                              {
-                                className: `${prefix}-label`,
-                                style: {
-                                  marginLeft: 8
-                                },
-                                children: rangeLabel
-                              }
-                            ),
-                            simpleMode && isPlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-play`, children: label })
-                          ]
-                        }
-                      )
-                    }
-                  ),
-                  (!simpleMode || !isPlay) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "span",
-                    {
-                      ref: rangeRef,
-                      onClick: () => {
-                        setOpen(true);
-                        setTooltipOpen(true);
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_design.DatePicker.RangePicker,
-                        {
-                          className: (0, import_classnames.default)(`${prefix}-picker`),
-                          style: {
-                            // pointerEvents: 'none',
-                            border: 0
-                          },
-                          format: (v) => {
-                            if (hideYear && isThisYear) {
-                              return hideSecond ? v.format(isCn ? import_constant.DATE_TIME_FORMAT_CN : import_constant.DATE_TIME_FORMAT) : v.format(isCn ? import_constant.DATE_TIME_SECOND_FORMAT_CN : import_constant.DATE_TIME_SECOND_FORMAT);
-                            }
-                            return hideSecond ? v.format(isCn ? import_constant.YEAR_DATE_TIME_FORMAT_CN : import_constant.YEAR_DATE_TIME_FORMAT) : v.format(
-                              isCn ? import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN : import_constant.YEAR_DATE_TIME_SECOND_FORMAT
-                            );
-                          },
-                          value: innerValue,
-                          onChange: datePickerChange,
-                          allowClear: false,
-                          size,
-                          suffixIcon: null,
-                          ...(0, import_lodash.omit)(rest, "value", "onChange", "style", "className"),
-                          open: false
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              import_design.Radio.Group,
-              {
-                value: isPlay ? "play" : "",
-                className: `${prefix}-playback-control`,
-                buttonStyle: "solid",
-                children: [
-                  hasRewind && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_design.Tooltip,
-                    {
-                      title: locale.jumpBack,
-                      getPopupContainer: (trigger) => trigger.parentNode,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_design.Radio.Button,
-                        {
-                          value: "stepBack",
-                          style: {
-                            paddingInline: 8,
-                            borderInlineStart: 0,
-                            borderTopLeftRadius: 0,
-                            borderBottomLeftRadius: 0
-                          },
-                          onMouseEnter: () => setBackRadioFocused(true),
-                          onMouseLeave: () => setBackRadioFocused(false),
-                          onClick: () => {
-                            if (isPlay) {
-                              setIsPlay(false);
-                            }
-                            if (startTime && endTime) {
-                              const newStartTime = startTime.clone().subtract(differenceMs, "milliseconds");
-                              const newEndTime = startTime == null ? void 0 : startTime.clone();
-                              rangeChange([newStartTime, newEndTime]);
-                            }
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LeftOutlined, {})
-                        }
-                      )
-                    }
-                  ),
-                  hasForward && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_design.Tooltip,
-                    {
-                      title: locale.jumpForward,
-                      getPopupContainer: (trigger) => trigger.parentNode,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_design.Radio.Button,
-                        {
-                          value: "stepForward",
-                          style: {
-                            paddingInline: 8,
-                            borderInlineStart: 0,
-                            borderTopLeftRadius: 0,
-                            borderBottomLeftRadius: 0
-                          },
-                          onClick: () => {
-                            if (startTime && endTime) {
-                              const newStartTime = endTime.clone();
-                              const newEndTime = endTime.clone().add(differenceMs);
-                              if (newEndTime.isBefore(/* @__PURE__ */ new Date())) {
-                                rangeChange([newStartTime, newEndTime]);
-                              } else {
-                                setIsPlay(true);
-                                setNow();
-                              }
-                            }
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.RightOutlined, {})
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            )
-          ] }),
-          hasSync && rangeName !== import_constant.CUSTOMIZE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_design.Button,
-            {
-              style: { paddingInline: 8, color: token.colorTextSecondary },
-              onClick: () => {
-                setNow();
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SyncOutlined, {})
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Dropdown, {
+          trigger: ['click'],
+          open: open,
+          placement: rest.placement,
+          autoAdjustOverflow: autoAdjustOverflow,
+          getPopupContainer: getPopupContainer
+          // 关闭后进行销毁，才可以将 Tooltip 进行同步关闭
+          ,
+          destroyOnHidden: true,
+          onOpenChange: o => {
+            if (o === false && tooltipOpen) {
+              return;
             }
-          ),
-          hasZoomOut && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_design.Button,
-            {
-              disabled: !nextRangeItem,
-              style: { color: token.colorTextSecondary },
-              onClick: () => {
-                setIsPlay(true);
-                if (nextRangeItem) {
-                  setRangeName(nextRangeItem.name);
-                  rangeChange(nextRangeItem.range(isMoment ? (0, import_moment.default)() : (0, import_dayjs.default)()));
-                  return;
+            setOpen(o);
+          },
+          popupRender: originNode => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              ref: popRef,
+              className: (0, _classnames.default)(`${prefix}-dropdown-picker`, overlayClassName),
+              style: overlayStyle,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Flex, {
+                vertical: true,
+                justify: "space-between",
+                children: [!historyMenuVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "options",
+                  children: originNode
+                }), history && historyMenuVisible && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  className: "history",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Button, {
+                    type: "link",
+                    style: {
+                      paddingLeft: 8,
+                      color: token.colorTextBase
+                    },
+                    onClick: e => {
+                      setHistoryMenuVisible(false);
+                      e.stopPropagation();
+                    },
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowLeftOutlined, {
+                      color: token.colorTextLabel
+                    }), getHistoryTitle()]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Menu, {
+                    onClick: ({
+                      key: rangeString
+                    }) => {
+                      const vList = rangeString.split(',').map(v => v.trim());
+                      rangeChange(vList.map(v => {
+                        return isMoment ? (0, _moment.default)(v) : (0, _dayjs.default)(v);
+                      }));
+                      handleNameChange(_constant.CUSTOMIZE);
+                    },
+                    style: {
+                      maxHeight: 480,
+                      overflowY: 'auto'
+                    },
+                    items: rangeHistory.map(range => {
+                      return {
+                        key: String(range),
+                        label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Flex, {
+                          className: `${prefix}-history-menu-item`,
+                          vertical: true,
+                          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                            children: [(isMoment ? (0, _moment.default)(range[0]) : (0, _dayjs.default)(range[0])).format(_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN), "~"]
+                          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                            children: (isMoment ? (0, _moment.default)(range[1]) : (0, _dayjs.default)(range[1])).format(_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN)
+                          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
+                            className: `${prefix}-menu-text-btn-wrapper`,
+                            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+                              className: `${prefix}-menu-text-btn`,
+                              type: "text",
+                              color: "default",
+                              variant: "filled",
+                              size: "small",
+                              onClick: e => {
+                                e.stopPropagation();
+                                const vList = range.map(v => v);
+                                const text = `${vList.join('~')}`;
+                                navigator.clipboard.writeText(text);
+                                _design.message.success(text);
+                              },
+                              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CopyOutlined, {})
+                            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+                              className: `${prefix}-menu-text-btn`,
+                              type: "text",
+                              color: "default",
+                              variant: "filled",
+                              size: "small",
+                              onClick: e => {
+                                e.stopPropagation();
+                                delRangeHistory(range);
+                              },
+                              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteOutlined, {})
+                            })]
+                          })]
+                        }, String(range))
+                      };
+                    })
+                  })]
+                }), history && !historyMenuVisible && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Button, {
+                  type: "link",
+                  style: {
+                    width: 'max-content'
+                  },
+                  onClick: e => {
+                    setHistoryMenuVisible(true);
+                    e.stopPropagation();
+                  },
+                  children: [getHistoryTitle(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {})]
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Divider, {
+                type: "vertical",
+                style: {
+                  height: 'auto',
+                  margin: '0px 4px 0px 0px'
                 }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerPanel.default, {
+                defaultValue: innerValue || []
+                // @ts-ignore
+                ,
+                locale: locale,
+                disabledDate: pastOnly ? disabledFuture : disabledDate,
+                tip: tip,
+                isMoment: isMoment,
+                rules: rules,
+                hideSecond: hideSecond,
+                onOk: vList => {
+                  setIsPlay(false);
+                  handleNameChange(_constant.CUSTOMIZE);
+                  rangeChange(vList.map(v => {
+                    return isMoment ? (0, _moment.default)(v) : (0, _dayjs.default)(v);
+                  }));
+                  closeTooltip();
+                },
+                onCancel: () => {
+                  closeTooltip();
+                }
+              })]
+            });
+          },
+          menu: {
+            selectable: true,
+            defaultSelectedKeys: [rangeName],
+            onClick: ({
+              key,
+              domEvent
+            }) => {
+              const selected = selects.find(_item => _item.name === key);
+              // 存在快捷选项切换为极简模式
+              if (selected?.range) {
+                handleNameChange(key);
+                setIsPlay(true);
+                rangeChange(selected.range(isMoment ? (0, _moment.default)() : (0, _dayjs.default)()));
+              }
+            },
+            items: selects.filter(item => {
+              return !!item;
+            }).map(item => {
+              return {
+                key: item.name,
+                label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
+                  size: 8,
+                  style: {
+                    minWidth: 100
+                  },
+                  children: [hasTagInPicker && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: `${prefix}-label`,
+                    children: item.rangeLabel
+                  }), isEN ? item.enLabel || item.label : item.label]
+                })
+              };
+            })
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
+            ref: labelRef,
+            size: 0,
+            onClick: () => {
+              setOpen(true);
+              setTooltipOpen(true);
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: `${prefix}-label`,
+              style: {
+                marginLeft: 8
               },
-              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ZoomOutOutlined, {})
+              children: rangeLabel
+            }), simpleMode && isPlay && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: `${prefix}-play`,
+              children: label
+            })]
+          })
+        }), (!simpleMode || !isPlay) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          ref: rangeRef,
+          onClick: () => {
+            setOpen(true);
+            setTooltipOpen(true);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.DatePicker.RangePicker, {
+            className: (0, _classnames.default)(`${prefix}-picker`),
+            style: {
+              // pointerEvents: 'none',
+              border: 0
+            },
+            format: v => {
+              // format 会影响布局，原先采用 v.year() === new Date().getFullYear() 进行判断，value 一共会传入三次(range0 range1 now), 会传入最新的时间导致判断异常
+              if (hideYear && isThisYear) {
+                return hideSecond ? v.format(isCn ? _constant.DATE_TIME_FORMAT_CN : _constant.DATE_TIME_FORMAT) : v.format(isCn ? _constant.DATE_TIME_SECOND_FORMAT_CN : _constant.DATE_TIME_SECOND_FORMAT);
+              }
+              return hideSecond ? v.format(isCn ? _constant.YEAR_DATE_TIME_FORMAT_CN : _constant.YEAR_DATE_TIME_FORMAT) : v.format(isCn ? _constant.YEAR_DATE_TIME_SECOND_FORMAT_CN : _constant.YEAR_DATE_TIME_SECOND_FORMAT);
             }
-          )
-        ]
-      }
-    )
-  );
+            // @ts-ignore
+            ,
+            value: innerValue,
+            onChange: datePickerChange,
+            allowClear: false,
+            size: size,
+            suffixIcon: null
+            // 透传 props 到 antd Ranger
+            ,
+            ...(0, _lodash.omit)(rest, 'value', 'onChange', 'style', 'className'),
+            open: false
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Radio.Group, {
+        value: isPlay ? 'play' : '',
+        className: `${prefix}-playback-control`,
+        buttonStyle: "solid",
+        children: [hasRewind && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Tooltip, {
+          title: locale.jumpBack,
+          getPopupContainer: trigger => trigger.parentNode,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Radio.Button, {
+            value: "stepBack",
+            style: {
+              paddingInline: 8,
+              borderInlineStart: 0,
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0
+            },
+            onMouseEnter: () => setBackRadioFocused(true),
+            onMouseLeave: () => setBackRadioFocused(false),
+            onClick: () => {
+              if (isPlay) {
+                setIsPlay(false);
+              }
+              if (startTime && endTime) {
+                const newStartTime = startTime.clone().subtract(differenceMs, 'milliseconds');
+                const newEndTime = startTime?.clone();
+                rangeChange([newStartTime, newEndTime]);
+              }
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeftOutlined, {})
+          })
+        }), hasForward && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Tooltip, {
+          title: locale.jumpForward,
+          getPopupContainer: trigger => trigger.parentNode,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Radio.Button, {
+            value: "stepForward",
+            style: {
+              paddingInline: 8,
+              borderInlineStart: 0,
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0
+            }
+            // disabled={isPlay}
+            ,
+            onClick: () => {
+              if (startTime && endTime) {
+                const newStartTime = endTime.clone();
+                const newEndTime = endTime.clone().add(differenceMs);
+                if (newEndTime.isBefore(new Date())) {
+                  rangeChange([newStartTime, newEndTime]);
+                } else {
+                  setIsPlay(true);
+                  setNow();
+                }
+              }
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {})
+          })
+        })]
+      })]
+    }), hasSync && rangeName !== _constant.CUSTOMIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+      style: {
+        paddingInline: 8,
+        color: token.colorTextSecondary
+      },
+      onClick: () => {
+        setNow();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SyncOutlined, {})
+    }), hasZoomOut && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+      disabled: !nextRangeItem,
+      style: {
+        color: token.colorTextSecondary
+      },
+      onClick: () => {
+        setIsPlay(true);
+        if (nextRangeItem) {
+          setRangeName(nextRangeItem.name);
+          rangeChange(nextRangeItem.range(isMoment ? (0, _moment.default)() : (0, _dayjs.default)()));
+          return;
+        }
+      },
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ZoomOutOutlined, {})
+    })]
+  }));
 });
-var Ranger_default = (0, import_LocaleWrapper.default)({
-  componentName: "DateRanger",
-  defaultLocale: import_zh_CN.default
-})(Ranger);
+var _default = exports.default = (0, _LocaleWrapper.default)({
+  componentName: 'DateRanger',
+  defaultLocale: _zhCN.default
+})(Ranger);