@oceanbase/ui 1.0.0-alpha.2 → 1.0.0-alpha.20

package/lib/DateRanger/Ranger.js

@@ -1,66 +1,41 @@
-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);
-
-// src/DateRanger/Ranger.tsx
-var Ranger_exports = {};
-__export(Ranger_exports, {
-  default: () => Ranger_default
+"use strict";
+"use client";
+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_util = require("../_util");
-var import_constant = require("./constant");
-var import_PickerPanel = __toESM(require("./PickerPanel"));
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var import_index = require("./index.less");
-var import_ahooks = require("ahooks");
-var import_util2 = require("@oceanbase/util");
-var DefaultMaxHistoryCapacity = 20;
-var prefix = (0, import_util.getPrefix)("date-ranger");
-var Ranger = import_react.default.forwardRef((props, ref) => {
-  var _a;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _design = require("@oceanbase/design");
+var _icons = require("@oceanbase/icons");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/zh-cn");
+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 _EditableDateTimeInput = _interopRequireDefault(require("./EditableDateTimeInput"));
+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; }
+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 {
-    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
-    ],
+    wrapSSR
+  } = (0, _style.default)(prefixCls);
+  const prefix = prefixCls;
+  const {
+    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,
@@ -76,12 +51,13 @@ 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,
     //固定 rangeName
     stickRangeName = false,
+    variant,
     tooltipProps,
     isMoment: isMomentProps,
     rules,
@@ -92,52 +68,56 @@ 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);
+  const editableInputRef = (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 [rangeHistory, setRangeHistory] = (0, import_util2.useLocalStorageState)(
-    "ob-design-date-ranger-local-storage-range-history-state",
-    { defaultValue: [], listenStorageChange: true }
-  );
-  const updateRangeHistory = (range) => {
+  const localStorageKey = `${prefixCls}-date-ranger-history`;
+  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];
@@ -146,35 +126,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]);
@@ -182,35 +157,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;
@@ -254,286 +230,279 @@ 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 /* @__PURE__ */ import_react.default.createElement(
-    import_design.Space,
-    {
-      className: (0, import_classnames.default)(rest.className, {
-        [prefix]: true,
-        [`${prefix}-show-range`]: true,
-        [`${prefix}-back-radio-focused`]: backRadioFocused
-      }),
-      style: rest.style
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: 0 }, /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)(`${prefix}-wrapper`, {
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
+    className: (0, _classnames.default)(rest.className, {
+      [prefix]: true,
+      [`${prefix}-show-range`]: true,
+      [`${prefix}-dashed`]: variant === 'dashed',
+      [`${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
-        })
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        import_design.Dropdown,
-        {
-          trigger: ["click"],
-          open,
+        }),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Dropdown, {
+          trigger: ['click'],
+          open: open,
           placement: rest.placement,
-          autoAdjustOverflow,
-          getPopupContainer,
+          autoAdjustOverflow: autoAdjustOverflow,
+          getPopupContainer: getPopupContainer
+          // 关闭后进行销毁，才可以将 Tooltip 进行同步关闭
+          ,
           destroyOnHidden: true,
-          onOpenChange: (o) => {
+          onOpenChange: o => {
             if (o === false && tooltipOpen) {
               return;
             }
             setOpen(o);
           },
-          popupRender: (originNode) => {
-            return /* @__PURE__ */ import_react.default.createElement(
-              "div",
-              {
-                ref: popRef,
-                className: (0, import_classnames.default)(`${prefix}-dropdown-picker`, overlayClassName),
-                style: overlayStyle
-              },
-              /* @__PURE__ */ import_react.default.createElement(import_design.Flex, { vertical: true, justify: "space-between" }, !historyMenuVisible && /* @__PURE__ */ import_react.default.createElement("div", { className: "options" }, originNode), history && historyMenuVisible && /* @__PURE__ */ import_react.default.createElement("div", { className: "history" }, /* @__PURE__ */ import_react.default.createElement(
-                import_design.Button,
-                {
-                  type: "link",
-                  style: { paddingLeft: 8, color: token.colorTextBase },
-                  onClick: (e) => {
-                    setHistoryMenuVisible(false);
-                    e.stopPropagation();
-                  }
-                },
-                /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowLeftOutlined, { color: token.colorTextLabel }),
-                getHistoryTitle()
-              ), /* @__PURE__ */ import_react.default.createElement(
-                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__ */ import_react.default.createElement(
-                        import_design.Flex,
-                        {
+          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`,
-                          key: String(range),
-                          vertical: true
-                        },
-                        /* @__PURE__ */ import_react.default.createElement("span", null, (isMoment ? (0, import_moment.default)(range[0]) : (0, import_dayjs.default)(range[0])).format(
-                          import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN
-                        ), "~"),
-                        /* @__PURE__ */ import_react.default.createElement("span", null, (isMoment ? (0, import_moment.default)(range[1]) : (0, import_dayjs.default)(range[1])).format(
-                          import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN
-                        )),
-                        /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-menu-text-btn-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
-                          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);
-                            }
-                          },
-                          /* @__PURE__ */ import_react.default.createElement(import_icons.CopyOutlined, null)
-                        ), /* @__PURE__ */ import_react.default.createElement(
-                          import_design.Button,
-                          {
-                            className: `${prefix}-menu-text-btn`,
-                            type: "text",
-                            color: "default",
-                            variant: "filled",
-                            size: "small",
-                            onClick: (e) => {
-                              e.stopPropagation();
-                              delRangeHistory(range);
-                            }
-                          },
-                          /* @__PURE__ */ import_react.default.createElement(import_icons.DeleteOutlined, null)
-                        ))
-                      )
-                    };
-                  })
-                }
-              )), history && !historyMenuVisible && /* @__PURE__ */ import_react.default.createElement(
-                import_design.Button,
-                {
+                          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) => {
+                  style: {
+                    width: 'max-content'
+                  },
+                  onClick: e => {
                     setHistoryMenuVisible(true);
                     e.stopPropagation();
-                  }
-                },
-                getHistoryTitle(),
-                /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null)
-              )),
-              /* @__PURE__ */ import_react.default.createElement(import_design.Divider, { type: "vertical", style: { height: "auto", margin: "0px 4px 0px 0px" } }),
-              /* @__PURE__ */ import_react.default.createElement(
-                import_PickerPanel.default,
-                {
-                  defaultValue: innerValue || [],
-                  locale,
-                  disabledDate: pastOnly ? disabledFuture : disabledDate,
-                  tip,
-                  isMoment,
-                  rules,
-                  hideSecond,
-                  onOk: (vList) => {
+                  },
+                  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 => {
+                  // 如果有粘贴值，优先使用粘贴值
+                  if (editableInputRef.current?.hasPastedValue) {
+                    editableInputRef.current.confirmPastedValue();
                     setIsPlay(false);
-                    handleNameChange(import_constant.CUSTOMIZE);
-                    rangeChange(
-                      vList.map((v) => {
-                        return isMoment ? (0, import_moment.default)(v) : (0, import_dayjs.default)(v);
-                      })
-                    );
+                    handleNameChange(_constant.CUSTOMIZE);
                     closeTooltip();
-                  },
-                  onCancel: () => {
+                  } else {
+                    // 否则使用面板中的值
+                    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 == null ? void 0 : selected.range) {
+            onClick: ({
+              key,
+              domEvent
+            }) => {
+              const selected = selects.find(_item => _item.name === key);
+              // 存在快捷选项切换为极简模式
+              if (selected?.range) {
                 handleNameChange(key);
                 setIsPlay(true);
-                rangeChange(selected.range(isMoment ? (0, import_moment.default)() : (0, import_dayjs.default)()));
+                rangeChange(selected.range(isMoment ? (0, _moment.default)() : (0, _dayjs.default)()));
               }
             },
-            items: selects.filter((item) => {
+            items: selects.filter(item => {
               return !!item;
-            }).map((item) => {
+            }).map(item => {
               return {
                 key: item.name,
-                label: /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: 8, style: { minWidth: 100 } }, hasTagInPicker && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-label` }, item.rangeLabel), isEN ? item.enLabel || item.label : item.label)
+                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]
+                })
               };
             })
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          import_design.Space,
-          {
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
             ref: labelRef,
             size: 0,
             onClick: () => {
               setOpen(true);
               setTooltipOpen(true);
-            }
-          },
-          /* @__PURE__ */ import_react.default.createElement(
-            "span",
-            {
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: `${prefix}-label`,
               style: {
                 marginLeft: 8
-              }
-            },
-            rangeLabel
-          ),
-          simpleMode && isPlay && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-play` }, label)
-        )
-      ),
-      (!simpleMode || !isPlay) && /* @__PURE__ */ import_react.default.createElement(
-        "span",
-        {
+              },
+              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);
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          import_design.DatePicker.RangePicker,
-          {
-            className: (0, import_classnames.default)(`${prefix}-picker`),
-            style: {
-              // pointerEvents: 'none',
-              border: 0
+          className: `${prefix}-editable-wrapper`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableDateTimeInput.default, {
+            ref: editableInputRef,
+            prefixCls: prefixCls,
+            value: innerValue,
+            onChange: newValue => {
+              datePickerChange(newValue);
             },
-            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
-              );
+            hideYear: hideYear && isThisYear,
+            hideSecond: hideSecond,
+            isMoment: isMoment,
+            isCn: isCn,
+            format: rest?.format || _constant.YEAR_DATE_TIME_SECOND_FORMAT_CN,
+            open: open,
+            onClick: () => {
+              setOpen(true);
+              setTooltipOpen(true);
             },
-            value: innerValue,
-            onChange: datePickerChange,
-            allowClear: false,
-            size,
-            suffixIcon: null,
-            ...(0, import_lodash.omit)(rest, "value", "onChange", "style", "className"),
-            open: false
-          }
-        )
-      )
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_design.Radio.Group,
-      {
-        value: isPlay ? "play" : "",
+            ...(0, _lodash.omit)(rest, 'value', 'onChange', 'style', 'className', 'onClick', 'disabled', 'format')
+          })
+        })]
+      }), (hasRewind || hasForward) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Radio.Group, {
+        value: isPlay ? 'play' : '',
         className: `${prefix}-playback-control`,
-        buttonStyle: "solid"
-      },
-      hasRewind && /* @__PURE__ */ import_react.default.createElement(
-        import_design.Tooltip,
-        {
+        buttonStyle: "solid",
+        children: [hasRewind && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Tooltip, {
           title: locale.jumpBack,
-          getPopupContainer: (trigger) => trigger.parentNode
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          import_design.Radio.Button,
-          {
+          getPopupContainer: trigger => trigger.parentNode,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Radio.Button, {
             value: "stepBack",
+            "aria-label": locale.jumpBack,
             style: {
               paddingInline: 8,
               borderInlineStart: 0,
@@ -547,77 +516,79 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
                 setIsPlay(false);
               }
               if (startTime && endTime) {
-                const newStartTime = startTime.clone().subtract(differenceMs, "milliseconds");
-                const newEndTime = startTime == null ? void 0 : startTime.clone();
+                const newStartTime = startTime.clone().subtract(differenceMs, 'milliseconds');
+                const newEndTime = startTime?.clone();
                 rangeChange([newStartTime, newEndTime]);
               }
-            }
-          },
-          /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
-        )
-      ),
-      hasForward && /* @__PURE__ */ import_react.default.createElement(
-        import_design.Tooltip,
-        {
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeftOutlined, {
+              "aria-hidden": true
+            })
+          })
+        }), hasForward && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Tooltip, {
           title: locale.jumpForward,
-          getPopupContainer: (trigger) => trigger.parentNode
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          import_design.Radio.Button,
-          {
+          getPopupContainer: trigger => trigger.parentNode,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Radio.Button, {
             value: "stepForward",
+            "aria-label": locale.jumpForward,
             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(/* @__PURE__ */ new Date())) {
+                if (newEndTime.isBefore(new Date())) {
                   rangeChange([newStartTime, newEndTime]);
                 } else {
                   setIsPlay(true);
                   setNow();
                 }
               }
-            }
-          },
-          /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null)
-        )
-      )
-    )),
-    hasSync && rangeName !== import_constant.CUSTOMIZE && /* @__PURE__ */ import_react.default.createElement(
-      import_design.Button,
-      {
-        style: { paddingInline: 8, color: token.colorTextSecondary },
-        onClick: () => {
-          setNow();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {
+              "aria-hidden": true
+            })
+          })
+        })]
+      })]
+    }), hasSync && rangeName !== _constant.CUSTOMIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+      "aria-label": locale.syncToCurrent,
+      style: {
+        paddingInline: 8,
+        color: token.colorTextSecondary
+      },
+      onClick: () => {
+        setNow();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SyncOutlined, {
+        "aria-hidden": true
+      })
+    }), hasZoomOut && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+      "aria-label": locale.zoomOutRange,
+      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;
         }
       },
-      /* @__PURE__ */ import_react.default.createElement(import_icons.SyncOutlined, null)
-    ),
-    hasZoomOut && /* @__PURE__ */ import_react.default.createElement(
-      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;
-          }
-        },
-        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ZoomOutOutlined, null)
-      }
-    )
-  );
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ZoomOutOutlined, {
+        "aria-hidden": true
+      })
+    })]
+  }));
 });
-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);