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

package/lib/Boundary/Components/Exception.js

@@ -38,6 +38,7 @@ var import_LocaleWrapper = __toESM(require("../../locale/LocaleWrapper"));
 var import_constant = require("../constant");
 var import_zh_CN = __toESM(require("../locale/zh-CN"));
 var import_classnames = __toESM(require("classnames"));
+var import_style = __toESM(require("../style"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var BoundaryException = class extends import_react.default.PureComponent {
   constructor() {
@@ -67,29 +68,37 @@ var BoundaryException = class extends import_react.default.PureComponent {
     }
   }
   render() {
-    var _a;
-    const {
-      imageUrl,
-      title,
-      buttonText,
-      subscription,
-      isNotCompatible,
-      showError = false,
-      hasButton = true,
-      locale,
-      className,
-      ...restProps
-    } = this.props;
-    const errorInfo = (0, import_constant.EXCEPTION_PRESET)(locale).ERROR_BOUNDARY;
-    const notCompatibleInfo = (0, import_constant.EXCEPTION_PRESET)(locale).INCOMPATIBLE_VERSION;
-    const { error, info } = this.state;
-    const errorDescription = info == null ? void 0 : info.componentStack;
-    const errorMessage = (error || "").toString();
-    if ((_a = this.state) == null ? void 0 : _a.hasError) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExceptionWrapper, { component: this });
+  }
+};
+var ExceptionWrapper = ({ component }) => {
+  var _a;
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("boundary");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const {
+    imageUrl,
+    title,
+    buttonText,
+    subscription,
+    isNotCompatible,
+    showError = false,
+    hasButton = true,
+    locale,
+    className,
+    ...restProps
+  } = component.props;
+  const errorInfo = (0, import_constant.EXCEPTION_PRESET)(locale).ERROR_BOUNDARY;
+  const notCompatibleInfo = (0, import_constant.EXCEPTION_PRESET)(locale).INCOMPATIBLE_VERSION;
+  const { error, info } = component.state;
+  const errorDescription = info == null ? void 0 : info.componentStack;
+  const errorMessage = (error || "").toString();
+  if ((_a = component.state) == null ? void 0 : _a.hasError) {
+    return wrapSSR(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
-          className: (0, import_classnames.default)("boundary-container", "ob-boundary-error", className),
+          className: (0, import_classnames.default)("boundary-container", `${prefixCls}-error`, className),
           ...restProps,
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "empty", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: imageUrl || errorInfo.imageUrl }),
@@ -110,17 +119,19 @@ var BoundaryException = class extends import_react.default.PureComponent {
                 }
               }
             ) : subscription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: subscription }),
-            hasButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Button, { type: "primary", onClick: () => this.onClick(), children: buttonText || errorInfo.buttonText }) : ""
+            hasButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Button, { type: "primary", onClick: () => component.onClick(), children: buttonText || errorInfo.buttonText }) : ""
           ] })
         }
-      );
-    } else if (isNotCompatible) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      )
+    );
+  } else if (isNotCompatible) {
+    return wrapSSR(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
           className: (0, import_classnames.default)(
             "boundary-container",
-            "ob-boundary-browser-not-compatible",
+            `${prefixCls}-browser-not-compatible`,
             className
           ),
           ...restProps,
@@ -130,10 +141,10 @@ var BoundaryException = class extends import_react.default.PureComponent {
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: subscription ? subscription : notCompatibleInfo.subscription })
           ] })
         }
-      );
-    }
-    return this.props.children;
+      )
+    );
   }
+  return component.props.children;
 };
 var Exception = (0, import_LocaleWrapper.default)({
   componentName: "Boundary",

package/lib/Boundary/Components/Function.js

@@ -35,24 +35,30 @@ module.exports = __toCommonJS(Function_exports);
 var import_design = require("@oceanbase/design");
 var import_react = require("react");
 var import_classnames = __toESM(require("classnames"));
+var import_style = __toESM(require("../style"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var BoundaryFunction = (props) => {
   const { children, state, config, onClick, className, ...restProps } = props;
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("boundary");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const info = (0, import_react.useMemo)(() => {
     return state ? config[state] : config[Object.keys(config)[0]];
   }, [config, state]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className: (0, import_classnames.default)("boundary-container", "ob-boundary-function", className),
-      ...restProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "empty", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: info.imageUrl }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: info.title }),
-        children,
-        info.buttonText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Button, { type: "primary", onClick: onClick || info.onClick, children: info.buttonText })
-      ] })
-    }
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_classnames.default)("boundary-container", `${prefixCls}-function`, className),
+        ...restProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "empty", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: info.imageUrl }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: info.title }),
+          children,
+          info.buttonText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Button, { type: "primary", onClick: onClick || info.onClick, children: info.buttonText })
+        ] })
+      }
+    )
   );
 };
 // Annotate the CommonJS export names for ESM import in node:

package/lib/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/lib/Boundary/index.js

@@ -23,5 +23,4 @@ __export(Boundary_exports, {
 });
 module.exports = __toCommonJS(Boundary_exports);
 var import_Components = require("./Components");
-var import_index = require("./index.less");
 var Boundary_default = { Code: import_Components.Code, Function: import_Components.BoundaryFunction, Exception: import_Components.Exception };

package/lib/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/lib/Boundary/style/index.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Boundary/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genBoundaryStyle: () => genBoundaryStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genBoundaryStyle = (token) => {
+  const { colorTextTertiary } = token;
+  return {
+    [`.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)"
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Boundary", (token) => {
+    return [genBoundaryStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genBoundaryStyle
+});

package/lib/ContentWithIcon/index.d.ts

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

package/lib/ContentWithIcon/index.js

@@ -36,10 +36,8 @@ var import_react = require("react");
 var import_antd = require("antd");
 var import_icons = require("@oceanbase/icons");
 var import_classnames = __toESM(require("classnames"));
-var import_util = require("../_util");
-var import_index = require("./index.less");
+var import_style = __toESM(require("./style"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var prefix = (0, import_util.getPrefix)("content-with-question");
 var ContentWithIcon = ({
   content,
   tooltip,
@@ -57,13 +55,16 @@ var ContentWithIcon = ({
   exclamationColor = "#FAAD14",
   ...restProps
 }) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("content-with-icon");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const defaultIconType = () => {
     if (iconType === "question") {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_icons.QuestionCircleOutlined,
         {
           style: { color: color === "default" ? "#132039" : color, fontSize: size },
-          className: `${prefix}-help`
+          className: `${prefixCls}-help`
         }
       );
     }
@@ -73,7 +74,7 @@ var ContentWithIcon = ({
           import_icons.InfoCircleFilled,
           {
             style: { color: infoColor, fontSize: size },
-            className: `${prefix}-help`
+            className: `${prefixCls}-help`
           }
         );
       } else {
@@ -81,7 +82,7 @@ var ContentWithIcon = ({
           import_icons.InfoCircleOutlined,
           {
             style: { color: "3333333", fontSize: size },
-            className: `${prefix}-help`
+            className: `${prefixCls}-help`
           }
         );
       }
@@ -91,7 +92,7 @@ var ContentWithIcon = ({
         import_icons.ExclamationCircleFilled,
         {
           style: { color: exclamationColor, fontSize: size },
-          className: `${prefix}-help`
+          className: `${prefixCls}-help`
         }
       );
     }
@@ -109,30 +110,32 @@ var ContentWithIcon = ({
       tooltipWithLink ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Popover, { ...popOver, children: (0, import_react.isValidElement)(iconConfig) ? iconConfig : defaultIconType() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { ...tooltip, children: (0, import_react.isValidElement)(iconConfig) ? iconConfig : defaultIconType() })
     ) : null;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "span",
-    {
-      className: (0, import_classnames.default)({
-        [`${prefix}-item`]: true,
-        [className]: !!className
-      }),
-      ...restProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Space, { size: 4, children: [
-        getIcon(
-          //  图标在文字前
-          prefixIcon === true ? defaultIconType() : prefixIcon
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            "data-testid": "content",
-            style: { color: color === "default" ? "#5C6B8A" : color, fontSize: size },
-            children: content ?? children
-          }
-        ),
-        getIcon(suffixIcon)
-      ] })
-    }
-  ) });
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: (0, import_classnames.default)({
+          [`${prefixCls}-item`]: true,
+          [className]: !!className
+        }),
+        ...restProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Space, { size: 4, children: [
+          getIcon(
+            //  图标在文字前
+            prefixIcon === true ? defaultIconType() : prefixIcon
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              "data-testid": "content",
+              style: { color: color === "default" ? "#5C6B8A" : color, fontSize: size },
+              children: content ?? children
+            }
+          ),
+          getIcon(suffixIcon)
+        ] })
+      }
+    )
+  );
 };
 var ContentWithIcon_default = ContentWithIcon;

package/lib/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/lib/ContentWithIcon/style/index.js

@@ -0,0 +1,57 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ContentWithIcon/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genContentWithIconStyle: () => genContentWithIconStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genContentWithIconStyle = (token) => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}-item`]: {
+      display: "inline-flex",
+      alignItems: "center",
+      [`${componentCls}-prefix`]: {
+        marginRight: 8
+      },
+      [`${componentCls}-suffix`]: {
+        marginLeft: 8
+      },
+      [`${componentCls}-help`]: {
+        cursor: "help"
+      },
+      [`${componentCls}-color`]: {
+        color: "red"
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("ContentWithIcon", (token) => {
+    return [genContentWithIconStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genContentWithIconStyle
+});

package/lib/DateRanger/PickerPanel.js

@@ -43,7 +43,6 @@ var import_design = require("@oceanbase/design");
 var import_lodash = require("lodash");
 var import_moment2 = __toESM(require("moment"));
 var import_dayjs2 = __toESM(require("dayjs"));
-var import_util = require("../_util");
 var import_constant = require("./constant");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ALL_ERROR_TYPE_LIST = ["endDate", "startDate", "endTime", "startTime"];
@@ -60,7 +59,6 @@ var useClickFSA = () => {
   };
   return [state, next];
 };
-var prefix = (0, import_util.getPrefix)("ranger-picker-panel");
 var prefixCls = "ant-picker";
 var TIME_FORMAT = "HH:mm:ss";
 var InternalPickerPanel = (props) => {
@@ -76,6 +74,8 @@ var InternalPickerPanel = (props) => {
     disabledDate,
     hideSecond
   } = props;
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefix = getPrefixCls("ranger-picker-panel");
   const rootCls = (0, import_useCSSVarCls.default)(prefixCls);
   const [wrapCSSVar, hashId, cssVarCls] = (0, import_style.default)(prefixCls, rootCls);
   const [clickFSA, clickFSANext] = useClickFSA();

package/lib/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;