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

package/lib/DateRanger/Ranger.js

@@ -40,15 +40,20 @@ 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_style = __toESM(require("./style"));
 var import_ahooks = require("ahooks");
-var prefix = (0, import_util.getPrefix)("date-ranger");
+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);
+  const prefix = prefixCls;
   const {
     selects = [
       import_constant.NEAR_1_MINUTES,
@@ -73,6 +78,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 +112,48 @@ 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 localStorageKey = `${prefixCls}-date-ranger-history`;
+  const [rangeHistory, setRangeHistory] = (0, import_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))) {
+      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 +195,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 +257,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,250 +284,376 @@ 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(
-    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",
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_design.Space,
       {
-        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(
+        className: (0, import_classnames.default)(rest.className, {
+          [prefix]: true,
+          [`${prefix}-show-range`]: true,
+          [`${prefix}-back-radio-focused`]: backRadioFocused
+        }),
+        style: rest.style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { size: 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               "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);
-                      })
-                    );
-                    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)()));
+                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
+                        }
+                      )
+                    }
+                  )
+                ]
               }
-            },
-            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);
-            }
-          },
-          /* @__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,
-          {
-            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(
-      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,
-          {
-            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]);
+            ),
+            /* @__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, {})
             }
-          },
-          /* @__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();
+          ),
+          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;
                 }
-              }
+              },
+              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ZoomOutOutlined, {})
             }
-          },
-          /* @__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__ */ import_react.default.createElement(import_icons.ZoomOutOutlined, null)
+          )
+        ]
       }
     )
   );