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

package/es/Boundary/Components/Exception.js

@@ -17,12 +17,13 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { Alert, Button } from '@oceanbase/design';
-import React from 'react';
+import { Alert, Button, ConfigProvider } from '@oceanbase/design';
+import React, { useContext } from 'react';
 import LocaleWrapper from "../../locale/LocaleWrapper";
 import { EXCEPTION_PRESET } from "../constant";
 import zhCN from "../locale/zh-CN";
 import classNames from 'classnames';
+import useStyle from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var BoundaryException = /*#__PURE__*/function (_React$PureComponent) {
@@ -65,78 +66,9 @@ var BoundaryException = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$state2,
-        _this2 = this;
-      var _this$props = this.props,
-        imageUrl = _this$props.imageUrl,
-        title = _this$props.title,
-        buttonText = _this$props.buttonText,
-        subscription = _this$props.subscription,
-        isNotCompatible = _this$props.isNotCompatible,
-        _this$props$showError = _this$props.showError,
-        showError = _this$props$showError === void 0 ? false : _this$props$showError,
-        _this$props$hasButton = _this$props.hasButton,
-        hasButton = _this$props$hasButton === void 0 ? true : _this$props$hasButton,
-        locale = _this$props.locale,
-        className = _this$props.className,
-        restProps = _objectWithoutProperties(_this$props, _excluded);
-      var errorInfo = EXCEPTION_PRESET(locale).ERROR_BOUNDARY;
-      var notCompatibleInfo = EXCEPTION_PRESET(locale).INCOMPATIBLE_VERSION;
-      var _this$state = this.state,
-        error = _this$state.error,
-        info = _this$state.info;
-      var errorDescription = info === null || info === void 0 ? void 0 : info.componentStack;
-      var errorMessage = (error || '').toString();
-      if ((_this$state2 = this.state) !== null && _this$state2 !== void 0 && _this$state2.hasError) {
-        return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-          className: classNames('boundary-container', 'ob-boundary-error', className)
-        }, restProps), {}, {
-          children: /*#__PURE__*/_jsxs("div", {
-            className: "empty",
-            children: [/*#__PURE__*/_jsx("img", {
-              src: imageUrl || errorInfo.imageUrl
-            }), /*#__PURE__*/_jsx("h4", {
-              children: title || errorInfo.title
-            }), showError ? /*#__PURE__*/_jsx(Alert, {
-              type: "error",
-              showIcon: true,
-              message: errorMessage,
-              description: errorDescription,
-              style: {
-                marginTop: 24,
-                overflow: 'auto',
-                maxHeight: '50vh',
-                // 为了避免被 Empty 的水平居中样式影响，需要设置 textAlign
-                textAlign: 'left'
-              }
-            }) : subscription && /*#__PURE__*/_jsx("span", {
-              children: subscription
-            }), hasButton ? /*#__PURE__*/_jsx(Button, {
-              type: "primary",
-              onClick: function onClick() {
-                return _this2.onClick();
-              },
-              children: buttonText || errorInfo.buttonText
-            }) : '']
-          })
-        }));
-      } else if (isNotCompatible) {
-        return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-          className: classNames('boundary-container', 'ob-boundary-browser-not-compatible', className)
-        }, restProps), {}, {
-          children: /*#__PURE__*/_jsxs("div", {
-            className: "empty",
-            children: [/*#__PURE__*/_jsx("img", {
-              src: imageUrl || notCompatibleInfo.imageUrl
-            }), /*#__PURE__*/_jsx("h4", {
-              children: title || notCompatibleInfo.title
-            }), /*#__PURE__*/_jsx("span", {
-              children: subscription ? subscription : notCompatibleInfo.subscription
-            })]
-          })
-        }));
-      }
-      return this.props.children;
+      return /*#__PURE__*/_jsx(ExceptionWrapper, {
+        component: this
+      });
     }
   }], [{
     key: "getDerivedStateFromError",
@@ -148,6 +80,85 @@ var BoundaryException = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return BoundaryException;
 }(React.PureComponent);
+var ExceptionWrapper = function ExceptionWrapper(_ref) {
+  var _component$state2;
+  var component = _ref.component;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('boundary');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
+  var _component$props = component.props,
+    imageUrl = _component$props.imageUrl,
+    title = _component$props.title,
+    buttonText = _component$props.buttonText,
+    subscription = _component$props.subscription,
+    isNotCompatible = _component$props.isNotCompatible,
+    _component$props$show = _component$props.showError,
+    showError = _component$props$show === void 0 ? false : _component$props$show,
+    _component$props$hasB = _component$props.hasButton,
+    hasButton = _component$props$hasB === void 0 ? true : _component$props$hasB,
+    locale = _component$props.locale,
+    className = _component$props.className,
+    restProps = _objectWithoutProperties(_component$props, _excluded);
+  var errorInfo = EXCEPTION_PRESET(locale).ERROR_BOUNDARY;
+  var notCompatibleInfo = EXCEPTION_PRESET(locale).INCOMPATIBLE_VERSION;
+  var _component$state = component.state,
+    error = _component$state.error,
+    info = _component$state.info;
+  var errorDescription = info === null || info === void 0 ? void 0 : info.componentStack;
+  var errorMessage = (error || '').toString();
+  if ((_component$state2 = component.state) !== null && _component$state2 !== void 0 && _component$state2.hasError) {
+    return wrapSSR( /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+      className: classNames('boundary-container', "".concat(prefixCls, "-error"), className)
+    }, restProps), {}, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "empty",
+        children: [/*#__PURE__*/_jsx("img", {
+          src: imageUrl || errorInfo.imageUrl
+        }), /*#__PURE__*/_jsx("h4", {
+          children: title || errorInfo.title
+        }), showError ? /*#__PURE__*/_jsx(Alert, {
+          type: "error",
+          showIcon: true,
+          message: errorMessage,
+          description: errorDescription,
+          style: {
+            marginTop: 24,
+            overflow: 'auto',
+            maxHeight: '50vh',
+            // 为了避免被 Empty 的水平居中样式影响，需要设置 textAlign
+            textAlign: 'left'
+          }
+        }) : subscription && /*#__PURE__*/_jsx("span", {
+          children: subscription
+        }), hasButton ? /*#__PURE__*/_jsx(Button, {
+          type: "primary",
+          onClick: function onClick() {
+            return component.onClick();
+          },
+          children: buttonText || errorInfo.buttonText
+        }) : '']
+      })
+    })));
+  } else if (isNotCompatible) {
+    return wrapSSR( /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+      className: classNames('boundary-container', "".concat(prefixCls, "-browser-not-compatible"), className)
+    }, restProps), {}, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "empty",
+        children: [/*#__PURE__*/_jsx("img", {
+          src: imageUrl || notCompatibleInfo.imageUrl
+        }), /*#__PURE__*/_jsx("h4", {
+          children: title || notCompatibleInfo.title
+        }), /*#__PURE__*/_jsx("span", {
+          children: subscription ? subscription : notCompatibleInfo.subscription
+        })]
+      })
+    })));
+  }
+  return component.props.children;
+};
 export var Exception = LocaleWrapper({
   componentName: 'Boundary',
   defaultLocale: zhCN

package/es/Boundary/Components/Function.js

@@ -7,9 +7,10 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Button } from '@oceanbase/design';
-import React, { useMemo } from 'react';
+import { Button, ConfigProvider } from '@oceanbase/design';
+import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
+import useStyle from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var BoundaryFunction = function BoundaryFunction(props) {
@@ -19,11 +20,16 @@ export var BoundaryFunction = function BoundaryFunction(props) {
     onClick = props.onClick,
     className = props.className,
     restProps = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('boundary');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   var info = useMemo(function () {
     return state ? config[state] : config[Object.keys(config)[0]];
   }, [config, state]);
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    className: classNames('boundary-container', 'ob-boundary-function', className)
+  return wrapSSR( /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: classNames('boundary-container', "".concat(prefixCls, "-function"), className)
   }, restProps), {}, {
     children: /*#__PURE__*/_jsxs("div", {
       className: "empty",
@@ -37,5 +43,5 @@ export var BoundaryFunction = function BoundaryFunction(props) {
         children: info.buttonText
       })]
     })
-  }));
+  })));
 };

package/es/Boundary/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import './index.less';
 declare const _default: {
     Code: any;
     Function: import("react").FC<import("./Components/Function").IBoundaryFunction>;

package/es/Boundary/index.js

@@ -1,5 +1,4 @@
 import { BoundaryFunction, Code, Exception } from "./Components";
-import "./index.less";
 export default {
   Code: Code,
   Function: BoundaryFunction,

package/es/Boundary/style/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export type BoundaryToken = OBToken;
+export declare const genBoundaryStyle: GenerateStyle<BoundaryToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;

package/es/Boundary/style/index.js

@@ -0,0 +1,46 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+export var genBoundaryStyle = function genBoundaryStyle(token) {
+  var colorTextTertiary = token.colorTextTertiary;
+  return _defineProperty(_defineProperty({}, ".boundary-container", {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    '.empty': {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingBottom: 60,
+      '> img': {
+        height: 102,
+        marginBottom: 24
+      },
+      '> h4': {
+        margin: 0,
+        fontSize: 18
+      },
+      '> span': {
+        marginTop: 8,
+        color: colorTextTertiary,
+        fontSize: 14,
+        textAlign: 'center'
+      },
+      '> button': {
+        marginTop: 24
+      }
+    }
+  }), ".boundary-code", {
+    minHeight: 'calc(100vh - 120px)'
+  });
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('Boundary', function (token) {
+    return [genBoundaryStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/ContentWithIcon/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.less';
 export interface ContentWithIconProps {
     content?: React.ReactNode;
     tooltip?: any;

package/es/ContentWithIcon/index.js

@@ -7,16 +7,13 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { isValidElement } from 'react';
-import { Tooltip, Space, Popover } from 'antd';
+import React, { isValidElement, useContext } from 'react';
+import { Tooltip, Space, Popover, ConfigProvider } from 'antd';
 import { ExclamationCircleFilled, InfoCircleFilled, InfoCircleOutlined, QuestionCircleOutlined } from '@oceanbase/icons';
 import classNames from 'classnames';
-import { getPrefix } from "../_util";
-import "./index.less";
+import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var prefix = getPrefix('content-with-question');
 var ContentWithIcon = function ContentWithIcon(_ref) {
   var content = _ref.content,
     tooltip = _ref.tooltip,
@@ -38,6 +35,11 @@ var ContentWithIcon = function ContentWithIcon(_ref) {
     _ref$exclamationColor = _ref.exclamationColor,
     exclamationColor = _ref$exclamationColor === void 0 ? '#FAAD14' : _ref$exclamationColor,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('content-with-icon');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   var defaultIconType = function defaultIconType() {
     if (iconType === 'question') {
       return /*#__PURE__*/_jsx(QuestionCircleOutlined, {
@@ -45,7 +47,7 @@ var ContentWithIcon = function ContentWithIcon(_ref) {
           color: color === 'default' ? '#132039' : color,
           fontSize: size
         },
-        className: "".concat(prefix, "-help")
+        className: "".concat(prefixCls, "-help")
       });
     }
     if (iconType === 'info') {
@@ -55,7 +57,7 @@ var ContentWithIcon = function ContentWithIcon(_ref) {
             color: infoColor,
             fontSize: size
           },
-          className: "".concat(prefix, "-help")
+          className: "".concat(prefixCls, "-help")
         });
       } else {
         return /*#__PURE__*/_jsx(InfoCircleOutlined, {
@@ -63,7 +65,7 @@ var ContentWithIcon = function ContentWithIcon(_ref) {
             color: '3333333',
             fontSize: size
           },
-          className: "".concat(prefix, "-help")
+          className: "".concat(prefixCls, "-help")
         });
       }
     }
@@ -73,7 +75,7 @@ var ContentWithIcon = function ContentWithIcon(_ref) {
           color: exclamationColor,
           fontSize: size
         },
-        className: "".concat(prefix, "-help")
+        className: "".concat(prefixCls, "-help")
       });
     }
   };
@@ -102,24 +104,22 @@ var ContentWithIcon = function ContentWithIcon(_ref) {
       children: /*#__PURE__*/isValidElement(iconConfig) ? iconConfig : defaultIconType()
     })) : null;
   };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
-      className: classNames(_defineProperty(_defineProperty({}, "".concat(prefix, "-item"), true), className, !!className))
-    }, restProps), {}, {
-      children: /*#__PURE__*/_jsxs(Space, {
-        size: 4,
-        children: [getIcon(
-        //  图标在文字前
-        prefixIcon === true ? defaultIconType() : prefixIcon), /*#__PURE__*/_jsx("span", {
-          "data-testid": "content",
-          style: {
-            color: color === 'default' ? '#5C6B8A' : color,
-            fontSize: size
-          },
-          children: content !== null && content !== void 0 ? content : children
-        }), getIcon(suffixIcon)]
-      })
-    }))
-  });
+  return wrapSSR( /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    className: classNames(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-item"), true), className, !!className))
+  }, restProps), {}, {
+    children: /*#__PURE__*/_jsxs(Space, {
+      size: 4,
+      children: [getIcon(
+      //  图标在文字前
+      prefixIcon === true ? defaultIconType() : prefixIcon), /*#__PURE__*/_jsx("span", {
+        "data-testid": "content",
+        style: {
+          color: color === 'default' ? '#5C6B8A' : color,
+          fontSize: size
+        },
+        children: content !== null && content !== void 0 ? content : children
+      }), getIcon(suffixIcon)]
+    })
+  })));
 };
 export default ContentWithIcon;

package/es/ContentWithIcon/style/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export type ContentWithIconToken = OBToken;
+export declare const genContentWithIconStyle: GenerateStyle<ContentWithIconToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;

package/es/ContentWithIcon/style/index.js

@@ -0,0 +1,26 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+export var genContentWithIconStyle = function genContentWithIconStyle(token) {
+  var componentCls = token.componentCls;
+  return _defineProperty({}, "".concat(componentCls, "-item"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    display: 'inline-flex',
+    alignItems: 'center'
+  }, "".concat(componentCls, "-prefix"), {
+    marginRight: 8
+  }), "".concat(componentCls, "-suffix"), {
+    marginLeft: 8
+  }), "".concat(componentCls, "-help"), {
+    cursor: 'help'
+  }), "".concat(componentCls, "-color"), {
+    color: 'red'
+  }));
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('ContentWithIcon', function (token) {
+    return [genContentWithIconStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/DateRanger/PickerPanel.js

@@ -8,18 +8,17 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
 import momentGenerateConfig from 'rc-picker/es/generate/moment';
 import useCSSVarCls from 'antd/es/config-provider/hooks/useCSSVarCls';
 import useStyle from 'antd/es/date-picker/style/index';
 import { PickerPanel } from 'rc-picker';
 import classNames from 'classnames';
-import { Alert, Button, Col, DatePicker, Divider, Form, Row, Space, TimePicker } from '@oceanbase/design';
+import { Alert, Button, Col, ConfigProvider, DatePicker, Divider, Form, Row, Space, TimePicker } from '@oceanbase/design';
 import { noop } from 'lodash';
 import moment from 'moment';
 import dayjs from 'dayjs';
-import { getPrefix } from "../_util";
 import { DATE_TIME_MONTH_FORMAT, DATE_TIME_MONTH_FORMAT_CN } from "./constant";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,7 +45,6 @@ var useClickFSA = function useClickFSA() {
   };
   return [state, next];
 };
-var prefix = getPrefix('ranger-picker-panel');
 var prefixCls = 'ant-picker';
 var TIME_FORMAT = 'HH:mm:ss';
 var InternalPickerPanel = function InternalPickerPanel(props) {
@@ -63,6 +61,9 @@ var InternalPickerPanel = function InternalPickerPanel(props) {
     onCancel = _props$onCancel === void 0 ? noop : _props$onCancel,
     disabledDate = props.disabledDate,
     hideSecond = props.hideSecond;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefix = getPrefixCls('ranger-picker-panel');
   var rootCls = useCSSVarCls(prefixCls);
   var _useStyle = useStyle(prefixCls, rootCls),
     _useStyle2 = _slicedToArray(_useStyle, 3),

package/es/DateRanger/Ranger.d.ts

@@ -5,7 +5,6 @@ import type { Dayjs } from 'dayjs';
 import type { Moment } from 'moment';
 import type { RangeOption } from './typing';
 import type { Rule } from './PickerPanel';
-import './index.less';
 export type RangeName = 'customize' | string;
 export type RangeValue = [Moment, Moment] | [Dayjs, Dayjs] | [] | null;
 export type RangeValueFormat = [string, string] | [] | null;

package/es/DateRanger/Ranger.js

@@ -17,27 +17,31 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useEffect, useRef, useState, useImperativeHandle, useMemo } from 'react';
-import { Button, DatePicker, Divider, Dropdown, Flex, Menu, Radio, Space, Tooltip, message, theme } from '@oceanbase/design';
+import React, { useContext, useEffect, useRef, useState, useImperativeHandle, useMemo } from 'react';
+import { Button, ConfigProvider, DatePicker, Divider, Dropdown, Flex, Menu, Radio, Space, Tooltip, message, theme } from '@oceanbase/design';
 import { LeftOutlined, RightOutlined, ZoomOutOutlined, SyncOutlined, ArrowLeftOutlined, CopyOutlined, DeleteOutlined } from '@oceanbase/icons';
 import dayjs from 'dayjs';
 import { findIndex, isEqual as _isEqual, isNil, noop, omit } from 'lodash';
 import moment from 'moment';
 import classNames from 'classnames';
 import LocaleWrapper from "../locale/LocaleWrapper";
-import { getPrefix } from "../_util";
 import { CUSTOMIZE, DATE_TIME_FORMAT, NEAR_1_MINUTES, NEAR_30_MINUTES, NEAR_1_HOURS, NEAR_3_HOURS, NEAR_6_HOURS, TODAY, YEAR_DATE_TIME_FORMAT, LAST_3_DAYS, DATE_TIME_SECOND_FORMAT, YEAR_DATE_TIME_SECOND_FORMAT, DATE_TIME_FORMAT_CN, DATE_TIME_SECOND_FORMAT_CN, YEAR_DATE_TIME_FORMAT_CN, YEAR_DATE_TIME_SECOND_FORMAT_CN } from "./constant";
 import InternalPickerPanel from "./PickerPanel";
 import zhCN from "./locale/zh-CN";
-import "./index.less";
+import useStyle from "./style";
 import { useClickAway } from 'ahooks';
 import { useLocalStorageState } from '@oceanbase/util';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DefaultMaxHistoryCapacity = 20;
-var prefix = getPrefix('date-ranger');
 var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _selects$;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('date-ranger');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
+  var prefix = prefixCls;
   var _props$selects = props.selects,
     selects = _props$selects === void 0 ? [NEAR_1_MINUTES, NEAR_30_MINUTES, NEAR_1_HOURS, NEAR_3_HOURS, NEAR_6_HOURS, TODAY, LAST_3_DAYS] : _props$selects,
     value = props.value,
@@ -141,7 +145,8 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     return false;
   }, [historyProp]);
-  var _useLocalStorageState = useLocalStorageState('ob-design-date-ranger-local-storage-range-history-state', {
+  var localStorageKey = "".concat(prefixCls, "-date-ranger-history");
+  var _useLocalStorageState = useLocalStorageState(localStorageKey, {
       defaultValue: [],
       listenStorageChange: true
     }),
@@ -309,7 +314,7 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var diffMs = e.diff(s);
     return diffMs > differenceMs;
   }) : selects[rangeNameIndex + 1];
-  return /*#__PURE__*/_jsxs(Space, {
+  return wrapSSR( /*#__PURE__*/_jsxs(Space, {
     className: classNames(rest.className, _defineProperty(_defineProperty(_defineProperty({}, prefix, true), "".concat(prefix, "-show-range"), true), "".concat(prefix, "-back-radio-focused"), backRadioFocused)),
     style: rest.style,
     children: [/*#__PURE__*/_jsxs(Space, {
@@ -631,7 +636,7 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       },
       icon: /*#__PURE__*/_jsx(ZoomOutOutlined, {})
     })]
-  });
+  }));
 });
 export default LocaleWrapper({
   componentName: 'DateRanger',

package/es/DateRanger/style/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export type DateRangerToken = OBToken;
+export declare const genDateRangerStyle: GenerateStyle<DateRangerToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;