@oceanbase/ui 0.4.19 → 0.4.21

package/lib/DateRanger/Ranger.js

@@ -46,6 +46,9 @@ 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 import_jsx_runtime = require("react/jsx-runtime");
+var DefaultMaxHistoryCapacity = 20;
 var prefix = (0, import_util.getPrefix)("date-ranger");
 var Ranger = import_react.default.forwardRef((props, ref) => {
   var _a;
@@ -73,6 +76,7 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
     hideYear = false,
     hideSecond = false,
     autoCalcRange = false,
+    history: historyProp = false,
     onChange = import_lodash.noop,
     disabledDate,
     locale,
@@ -106,10 +110,47 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
   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)(() => {
+    if (historyProp) {
+      return {
+        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) => {
+    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))) {
+      return;
+    }
+    const updatedValue = [formattedValue, ...rangeHistory];
+    if (updatedValue.length > history.capacity) {
+      updatedValue.splice(0, history.capacity);
+    }
+    setRangeHistory(updatedValue);
+  };
+  const delRangeHistory = (range) => {
+    const updatedValue = rangeHistory.filter((item) => !(0, import_lodash.isEqual)(item, range));
+    setRangeHistory(updatedValue);
+  };
   const compare = (m1, m2) => {
     if (Array.isArray(m1) && !Array.isArray(m2))
       return false;
@@ -151,6 +192,7 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
   const rangeChange = (range) => {
     setInnerValue(range);
     onChange(range);
+    updateRangeHistory(range);
   };
   const datePickerChange = (range) => {
     rangeChange(range);
@@ -212,6 +254,9 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
     }
     return isEN ? `Nearly ${differenceSeconds} seconds` : `近 ${differenceSeconds} 秒`;
   };
+  const getHistoryTitle = () => {
+    return isEN ? "History records" : "历史记录";
+  };
   const setNow = () => {
     const selected = selects.find((item) => item.name === rangeName);
     if (selected == null ? void 0 : selected.range) {
@@ -236,7 +281,7 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
     const diffMs = e.diff(s);
     return diffMs > differenceMs;
   }) : selects[rangeNameIndex + 1];
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_design.Space,
     {
       className: (0, import_classnames.default)(rest.className, {
@@ -244,244 +289,368 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
         [`${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`, {
-          [`${prefix}-wrapper-has-jumper`]: hasRewind || hasForward
-        })
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        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__ */ import_react.default.createElement(
-              "div",
-              {
-                ref: popRef,
-                className: (0, import_classnames.default)(`${prefix}-dropdown-picker`, overlayClassName),
-                style: overlayStyle
-              },
-              originNode,
-              /* @__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) => {
-                    setIsPlay(false);
-                    handleNameChange(import_constant.CUSTOMIZE);
-                    rangeChange(
-                      vList.map((v) => {
-                        return isMoment ? (0, import_moment.default)(v) : (0, import_dayjs.default)(v);
+      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
+                          ] })
+                        };
                       })
-                    );
-                    closeTooltip();
-                  },
-                  onCancel: () => {
-                    closeTooltip();
+                    },
+                    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 })
+                        ]
+                      }
+                    )
                   }
-                }
-              )
-            );
-          },
-          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__ */ 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)
-              };
-            })
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          import_design.Space,
-          {
-            ref: labelRef,
-            size: 0,
-            onClick: () => {
-              setOpen(true);
-              setTooltipOpen(true);
+                ),
+                (!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__ */ import_react.default.createElement(
-            "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",
-        {
-          ref: rangeRef,
-          onClick: () => {
-            setOpen(true);
-            setTooltipOpen(true);
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          import_design.DatePicker.RangePicker,
+          /* @__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,
           {
-            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
-              );
+            style: { paddingInline: 8, color: token.colorTextSecondary },
+            onClick: () => {
+              setNow();
             },
-            value: innerValue,
-            onChange: datePickerChange,
-            allowClear: false,
-            size,
-            suffixIcon: null,
-            ...(0, import_lodash.omit)(rest, "value", "onChange", "style", "className"),
-            open: false
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SyncOutlined, {})
           }
-        )
-      )
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_design.Radio.Group,
-      {
-        value: isPlay ? "play" : "",
-        className: `${prefix}-playback-control`,
-        buttonStyle: "solid"
-      },
-      hasRewind && /* @__PURE__ */ import_react.default.createElement(
-        import_design.Tooltip,
-        {
-          title: locale.jumpBack,
-          getPopupContainer: (trigger) => trigger.parentNode
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          import_design.Radio.Button,
+        ),
+        hasZoomOut && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_design.Button,
           {
-            value: "stepBack",
-            style: {
-              paddingInline: 8,
-              borderInlineStart: 0,
-              borderTopLeftRadius: 0,
-              borderBottomLeftRadius: 0
-            },
-            onMouseEnter: () => setBackRadioFocused(true),
-            onMouseLeave: () => setBackRadioFocused(false),
+            disabled: !nextRangeItem,
+            style: { color: token.colorTextSecondary },
             onClick: () => {
-              if (isPlay) {
-                setIsPlay(false);
+              setIsPlay(true);
+              if (nextRangeItem) {
+                setRangeName(nextRangeItem.name);
+                rangeChange(nextRangeItem.range(isMoment ? (0, import_moment.default)() : (0, import_dayjs.default)()));
+                return;
               }
-              if (startTime && endTime) {
-                const newStartTime = startTime.clone().subtract(differenceMs, "milliseconds");
-                const newEndTime = startTime == null ? void 0 : startTime.clone();
-                rangeChange([newStartTime, newEndTime]);
-              }
-            }
-          },
-          /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
-        )
-      ),
-      hasForward && /* @__PURE__ */ import_react.default.createElement(
-        import_design.Tooltip,
-        {
-          title: locale.jumpForward,
-          getPopupContainer: (trigger) => trigger.parentNode
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          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();
-                }
-              }
-            }
-          },
-          /* @__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();
-        }
-      },
-      /* @__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__ */ (0, import_jsx_runtime.jsx)(import_icons.ZoomOutOutlined, {})
           }
-        },
-        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ZoomOutOutlined, null)
-      }
-    )
+        )
+      ]
+    }
   );
 });
 var Ranger_default = (0, import_LocaleWrapper.default)({