@oceanbase/ui 1.0.0-alpha.4 → 1.0.0-alpha.6

package/lib/DateRanger/Ranger.js

@@ -40,18 +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 import_util2 = require("@oceanbase/util");
+var import_util = 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;
+  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,
@@ -123,8 +125,9 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
     }
     return false;
   }, [historyProp]);
-  const [rangeHistory, setRangeHistory] = (0, import_util2.useLocalStorageState)(
-    "ob-design-date-ranger-local-storage-range-history-state",
+  const localStorageKey = `${prefixCls}-date-ranger-history`;
+  const [rangeHistory, setRangeHistory] = (0, import_util.useLocalStorageState)(
+    localStorageKey,
     { defaultValue: [], listenStorageChange: true }
   );
   const updateRangeHistory = (range) => {
@@ -281,376 +284,378 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
     const diffMs = e.diff(s);
     return diffMs > differenceMs;
   }) : selects[rangeNameIndex + 1];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_design.Space,
-    {
-      className: (0, import_classnames.default)(rest.className, {
-        [prefix]: true,
-        [`${prefix}-show-range`]: true,
-        [`${prefix}-back-radio-focused`]: backRadioFocused
-      }),
-      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)(
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_design.Space,
+      {
+        className: (0, import_classnames.default)(rest.className, {
+          [prefix]: true,
+          [`${prefix}-show-range`]: true,
+          [`${prefix}-back-radio-focused`]: backRadioFocused
+        }),
+        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: { paddingLeft: 8, color: token.colorTextBase },
+                                    style: { width: "max-content" },
                                     onClick: (e) => {
-                                      setHistoryMenuVisible(false);
+                                      setHistoryMenuVisible(true);
                                       e.stopPropagation();
                                     },
                                     children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowLeftOutlined, { color: token.colorTextLabel }),
-                                      getHistoryTitle()
+                                      getHistoryTitle(),
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.RightOutlined, {})
                                     ]
                                   }
-                                ),
-                                /* @__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,
+                              /* @__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,
                                 {
-                                  type: "link",
-                                  style: { width: "max-content" },
-                                  onClick: (e) => {
-                                    setHistoryMenuVisible(true);
-                                    e.stopPropagation();
+                                  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();
                                   },
-                                  children: [
-                                    getHistoryTitle(),
-                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.RightOutlined, {})
-                                  ]
+                                  onCancel: () => {
+                                    closeTooltip();
+                                  }
                                 }
                               )
-                            ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Divider, { type: "vertical", style: { height: "auto", margin: "0px 4px 0px 0px" } }),
+                            ]
+                          }
+                        );
+                      },
+                      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)(
-                              import_PickerPanel.default,
+                              "span",
                               {
-                                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();
+                                className: `${prefix}-label`,
+                                style: {
+                                  marginLeft: 8
                                 },
-                                onCancel: () => {
-                                  closeTooltip();
-                                }
+                                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)()));
-                        }
+                      )
+                    }
+                  ),
+                  (!simpleMode || !isPlay) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      ref: rangeRef,
+                      onClick: () => {
+                        setOpen(true);
+                        setTooltipOpen(true);
                       },
-                      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
+                      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);
                             }
-                          ),
-                          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
-                      }
-                    )
-                  }
-                )
-              ]
+                            return hideSecond ? v.format(isCn ? import_constant.YEAR_DATE_TIME_FORMAT_CN : import_constant.YEAR_DATE_TIME_FORMAT) : v.format(
+                              isCn ? import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN : import_constant.YEAR_DATE_TIME_SECOND_FORMAT
+                            );
+                          },
+                          value: innerValue,
+                          onChange: datePickerChange,
+                          allowClear: false,
+                          size,
+                          suffixIcon: null,
+                          ...(0, import_lodash.omit)(rest, "value", "onChange", "style", "className"),
+                          open: false
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_design.Radio.Group,
+              {
+                value: isPlay ? "play" : "",
+                className: `${prefix}-playback-control`,
+                buttonStyle: "solid",
+                children: [
+                  hasRewind && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_design.Tooltip,
+                    {
+                      title: locale.jumpBack,
+                      getPopupContainer: (trigger) => trigger.parentNode,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_design.Radio.Button,
+                        {
+                          value: "stepBack",
+                          style: {
+                            paddingInline: 8,
+                            borderInlineStart: 0,
+                            borderTopLeftRadius: 0,
+                            borderBottomLeftRadius: 0
+                          },
+                          onMouseEnter: () => setBackRadioFocused(true),
+                          onMouseLeave: () => setBackRadioFocused(false),
+                          onClick: () => {
+                            if (isPlay) {
+                              setIsPlay(false);
+                            }
+                            if (startTime && endTime) {
+                              const newStartTime = startTime.clone().subtract(differenceMs, "milliseconds");
+                              const newEndTime = startTime == null ? void 0 : startTime.clone();
+                              rangeChange([newStartTime, newEndTime]);
+                            }
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LeftOutlined, {})
+                        }
+                      )
+                    }
+                  ),
+                  hasForward && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_design.Tooltip,
+                    {
+                      title: locale.jumpForward,
+                      getPopupContainer: (trigger) => trigger.parentNode,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_design.Radio.Button,
+                        {
+                          value: "stepForward",
+                          style: {
+                            paddingInline: 8,
+                            borderInlineStart: 0,
+                            borderTopLeftRadius: 0,
+                            borderBottomLeftRadius: 0
+                          },
+                          onClick: () => {
+                            if (startTime && endTime) {
+                              const newStartTime = endTime.clone();
+                              const newEndTime = endTime.clone().add(differenceMs);
+                              if (newEndTime.isBefore(/* @__PURE__ */ new Date())) {
+                                rangeChange([newStartTime, newEndTime]);
+                              } else {
+                                setIsPlay(true);
+                                setNow();
+                              }
+                            }
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.RightOutlined, {})
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          hasSync && rangeName !== import_constant.CUSTOMIZE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_design.Button,
+            {
+              style: { paddingInline: 8, color: token.colorTextSecondary },
+              onClick: () => {
+                setNow();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SyncOutlined, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            import_design.Radio.Group,
+          hasZoomOut && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_design.Button,
             {
-              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, {})
-                      }
-                    )
-                  }
-                )
-              ]
+              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, {})
             }
           )
-        ] }),
-        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, {})
-          }
-        ),
-        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, {})
-          }
-        )
-      ]
-    }
+        ]
+      }
+    )
   );
 });
 var Ranger_default = (0, import_LocaleWrapper.default)({