@oceanbase/ui 1.0.0-alpha.2 → 1.0.0-alpha.3

package/lib/Welcome/index.js

@@ -35,12 +35,12 @@ module.exports = __toCommonJS(Welcome_exports);
 var import_icons = require("@oceanbase/icons");
 var import_design = require("@oceanbase/design");
 var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_util = require("../_util");
 var import_index = require("./index.less");
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_step = __toESM(require("./step"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var prefix = (0, import_util.getPrefix)("welcome");
 var Welcome = ({
   title,
@@ -58,7 +58,13 @@ var Welcome = ({
 }) => {
   const isDefault = stepType === "default";
   const renderStep = (item, index) => {
-    const DefaultStep = () => /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 12, "data-testid": "steps", key: item.title, className: `${prefix}-item` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-order-wrapper` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-order` }, index + 1)), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, item.title), /* @__PURE__ */ import_react.default.createElement("p", { className: `${prefix}-description` }, item.description)));
+    const DefaultStep = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 12, "data-testid": "steps", className: `${prefix}-item`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-order-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-order`, children: index + 1 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefix}-title`, children: item.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefix}-description`, children: item.description })
+      ] })
+    ] }, item.title);
     const StepProps = {
       title: item.title,
       description: item.description,
@@ -67,44 +73,65 @@ var Welcome = ({
       operations: item.operations,
       locale
     };
-    const StepItem = isDefault ? /* @__PURE__ */ import_react.default.createElement(DefaultStep, { key: item.title }) : /* @__PURE__ */ import_react.default.createElement(import_step.default, { "data-testid": "steps", key: item.title, ...StepProps });
+    const StepItem = isDefault ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultStep, {}, item.title) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_step.default, { "data-testid": "steps", ...StepProps }, item.title);
     return StepItem;
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${`${prefix}-container`} ${className}`, ...restProps }, /* @__PURE__ */ import_react.default.createElement(
-    import_design.Row,
-    {
-      className: `${prefix}-page-header`,
-      style: {
-        backgroundImage: `url("${bgImage}")`
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${`${prefix}-container`} ${className}`, ...restProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_design.Row,
+      {
+        className: `${prefix}-page-header`,
+        style: {
+          backgroundImage: `url("${bgImage}")`
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 24, className: `${prefix}-title`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 16, className: `${prefix}-description`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: description }) })
+        ]
       }
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 24, className: `${prefix}-title` }, /* @__PURE__ */ import_react.default.createElement("div", null, title)),
-    /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 16, className: `${prefix}-description` }, /* @__PURE__ */ import_react.default.createElement("p", null, description))
-  ), /* @__PURE__ */ import_react.default.createElement(import_design.Card, { bordered: false, className: `${prefix}-introduce` }, /* @__PURE__ */ import_react.default.createElement(import_design.Row, { gutter: 78 }, introduces.map((item) => /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 8, key: item.image, className: `${prefix}-item`, "data-testid": "introduces" }, /* @__PURE__ */ import_react.default.createElement("img", { src: item.image, alt: "", height: 80 }), /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, item.title), /* @__PURE__ */ import_react.default.createElement("p", { className: `${prefix}-description` }, item.description)))))), /* @__PURE__ */ import_react.default.createElement(import_design.Row, { className: `${prefix}-content` }, /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 14, className: isDefault ? `${prefix}-left` : `${prefix}-border-right` }, /* @__PURE__ */ import_react.default.createElement(import_design.Row, { justify: "space-around" }, steps.map((item, index) => renderStep(item, index)), isDefault && /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 24 }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-btn-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
-    import_design.Button,
-    {
-      size: "large",
-      type: "primary",
-      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null),
-      block: true,
-      ...buttonProps
-    },
-    buttonText
-  ))))), /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 10, className: `${prefix}-right` }, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, locale.helpTitle), helps.map((item) => /* @__PURE__ */ import_react.default.createElement(
-    import_design.Button,
-    {
-      key: item.title,
-      shape: "round",
-      onClick: () => {
-        (0, import_util.directTo)(item.link);
-      },
-      className: (0, import_classnames.default)({
-        [`${prefix}-more`]: !!item.isMore
-      }),
-      "data-testid": "helps"
-    },
-    item.title
-  )))));
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Card, { bordered: false, className: `${prefix}-introduce`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Row, { gutter: 78, children: introduces.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 8, className: `${prefix}-item`, "data-testid": "introduces", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: item.image, alt: "", height: 80 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefix}-title`, children: item.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefix}-description`, children: item.description })
+      ] })
+    ] }, item.image)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Row, { className: `${prefix}-content`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 14, className: isDefault ? `${prefix}-left` : `${prefix}-border-right`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Row, { justify: "space-around", children: [
+        steps.map((item, index) => renderStep(item, index)),
+        isDefault && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Col, { span: 24, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-btn-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_design.Button,
+          {
+            size: "large",
+            type: "primary",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlusOutlined, {}),
+            block: true,
+            ...buttonProps,
+            children: buttonText
+          }
+        ) }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 10, className: `${prefix}-right`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefix}-title`, children: locale.helpTitle }),
+        helps.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_design.Button,
+          {
+            shape: "round",
+            onClick: () => {
+              (0, import_util.directTo)(item.link);
+            },
+            className: (0, import_classnames.default)({
+              [`${prefix}-more`]: !!item.isMore
+            }),
+            "data-testid": "helps",
+            children: item.title
+          },
+          item.title
+        ))
+      ] })
+    ] })
+  ] });
 };
 var Welcome_default = (0, import_LocaleWrapper.default)({
   componentName: "Welcome",

package/lib/Welcome/step.js

@@ -33,17 +33,24 @@ __export(step_exports, {
 });
 module.exports = __toCommonJS(step_exports);
 var import_design = require("@oceanbase/design");
-var import_react = __toESM(require("react"));
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_util = require("../_util");
 var import_index = require("./index.less");
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var prefix = (0, import_util.getPrefix)("welcome-step");
 var WelcomeStep = (props) => {
   const { title, description, operations, imgUrl, locale } = props;
-  return /* @__PURE__ */ import_react.default.createElement(import_design.Col, { span: 11, key: title, className: prefix }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-left` }, /* @__PURE__ */ import_react.default.createElement("img", { src: imgUrl, alt: "", width: "60" })), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-right` }, /* @__PURE__ */ import_react.default.createElement("h3", { className: `${prefix}-title` }, title), /* @__PURE__ */ import_react.default.createElement("p", { className: `${prefix}-description` }, description), operations && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-operations` }, operations == null ? void 0 : operations.map((operation, index) => {
-    return /* @__PURE__ */ import_react.default.createElement("span", { key: index, onClick: operation.onClick, className: `${prefix}-operation` }, operation.text || locale.defaultOperation);
-  }))));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Col, { span: 11, className: prefix, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-left`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: imgUrl, alt: "", width: "60" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefix}-right`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: `${prefix}-title`, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${prefix}-description`, children: description }),
+      operations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-operations`, children: operations == null ? void 0 : operations.map((operation, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { onClick: operation.onClick, className: `${prefix}-operation`, children: operation.text || locale.defaultOperation }, index);
+      }) })
+    ] })
+  ] }, title);
 };
 var step_default = (0, import_LocaleWrapper.default)({
   componentName: "WelcomeStep",

package/lib/locale/LocaleWrapper.js

@@ -35,6 +35,10 @@ module.exports = __toCommonJS(LocaleWrapper_exports);
 var import_design = require("@oceanbase/design");
 var import_hoist_non_react_statics = __toESM(require("hoist-non-react-statics"));
 var import_react = __toESM(require("react"));
+var import_jsx_runtime = (
+  // @ts-ignore
+  require("react/jsx-runtime")
+);
 var LocaleWrapper_default = ({ componentName, defaultLocale }) => (BaseComponent) => {
   class Hoc extends import_react.default.Component {
     render() {
@@ -48,19 +52,16 @@ var LocaleWrapper_default = ({ componentName, defaultLocale }) => (BaseComponent
         // 这里使用 antLocale，不能直接顶掉 locale 属性，有些组件内部会维护一个 locale 去做特殊判断
         antLocale: (antLocale == null ? void 0 : antLocale.locale) || "zh-cn"
       };
-      return (
-        // @ts-ignore
-        /* @__PURE__ */ import_react.default.createElement(
-          BaseComponent,
-          {
-            ref: forwardedRef,
-            theme: {
-              hashed: ((_a = process.env.NODE_ENV) == null ? void 0 : _a.toLowerCase()) !== "test"
-            },
-            locale: { ...localeData, ...customLocale },
-            ...newProps
-          }
-        )
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        BaseComponent,
+        {
+          ref: forwardedRef,
+          theme: {
+            hashed: ((_a = process.env.NODE_ENV) == null ? void 0 : _a.toLowerCase()) !== "test"
+          },
+          locale: { ...localeData, ...customLocale },
+          ...newProps
+        }
       );
     }
   }
@@ -69,7 +70,7 @@ var LocaleWrapper_default = ({ componentName, defaultLocale }) => (BaseComponent
   Hoc.contextType = import_design.ConfigProvider.ConfigContext;
   const ForwardComponent = import_react.default.forwardRef(
     // @ts-ignore
-    (props, ref) => /* @__PURE__ */ import_react.default.createElement(Hoc, { ...props, forwardedRef: ref })
+    (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Hoc, { ...props, forwardedRef: ref })
   );
   return (0, import_hoist_non_react_statics.default)(ForwardComponent, BaseComponent);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/ui",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "The UI library based on OceanBase Design",
   "keywords": [
     "oceanbase",
@@ -41,7 +41,7 @@
     "@ant-design/cssinjs": "^1.24.0",
     "@ant-design/pro-components": "^2.8.10",
     "@antv/g6": "3.4.10",
-    "@oceanbase/design": "^1.0.0-alpha.2",
+    "@oceanbase/design": "^1.0.0-alpha.3",
     "@oceanbase/icons": "^1.0.0-alpha.0",
     "@oceanbase/util": "^1.0.0-alpha.1",
     "ahooks": "^2.10.14",
@@ -70,5 +70,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "72910b1a2b037811f3ed5561ee5e897d7b744135"
+  "gitHead": "62c3cf2b25248d70e4f1826e69c019a38e03753e"
 }