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

package/lib/Action/Group.js

@@ -37,6 +37,7 @@ var import_design = require("@oceanbase/design");
 var import_icons = require("@oceanbase/icons");
 var import_lodash = require("lodash");
 var import_style = __toESM(require("./style"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var getOrder = ({ type, fixed }) => {
   const ORDER_SET = { primary: 3, fixed: 2, default: 0 };
   let order = ORDER_SET.default;
@@ -48,6 +49,64 @@ var getOrder = ({ type, fixed }) => {
   }
   return order;
 };
+var findActionComponent = (element, depth = 0) => {
+  var _a, _b, _c;
+  if (!import_react.default.isValidElement(element)) {
+    return null;
+  }
+  if (((_a = element.type) == null ? void 0 : _a.__DISPLAY_NAME) === "button" || ((_b = element.type) == null ? void 0 : _b.__DISPLAY_NAME) === "link") {
+    return { action: element, wrapper: null };
+  }
+  if (depth > 10) {
+    return null;
+  }
+  const elementChildren = (_c = element.props) == null ? void 0 : _c.children;
+  if (elementChildren) {
+    const child = import_react.default.Children.only(elementChildren);
+    if (import_react.default.isValidElement(child)) {
+      const result = findActionComponent(child, depth + 1);
+      if (result) {
+        return { action: result.action, wrapper: element };
+      }
+    }
+  }
+  return null;
+};
+var renderMenuItemContent = (action, actionProps, enableLoading) => {
+  const { loading, children, tooltip } = actionProps;
+  const result = findActionComponent(action);
+  if (!result) {
+    const content2 = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      loading && enableLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, {}),
+      " ",
+      children || action
+    ] });
+    return tooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: tooltip, children: content2 }) : content2;
+  }
+  const { action: actualAction, wrapper } = result;
+  const newAction = import_react.default.cloneElement(actualAction, {
+    ...actualAction.props,
+    ...actionProps,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      loading && enableLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, {}),
+      " ",
+      children || actualAction.props.children
+    ] })
+  });
+  if (wrapper) {
+    const wrapperProps = wrapper.props;
+    return import_react.default.cloneElement(wrapper, {
+      ...wrapperProps,
+      children: newAction
+    });
+  }
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    loading && enableLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, {}),
+    " ",
+    children || actualAction.props.children
+  ] });
+  return tooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: tooltip, children: content }) : content;
+};
 var Group_default = ({
   prefixCls: customizePrefixCls,
   size = 3,
@@ -95,58 +154,75 @@ var Group_default = ({
   const getDefaultDisabled = (key) => (shouldDisabled == null ? void 0 : shouldDisabled(key)) ?? false;
   let moreDom;
   if (ellipsisType === "button") {
-    moreDom = /* @__PURE__ */ import_react.default.createElement(
+    moreDom = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_design.Button,
       {
         size: buttonSize,
-        icon: moreText ? void 0 : /* @__PURE__ */ import_react.default.createElement(import_icons.EllipsisOutlined, { style: { cursor: "pointer" } })
-      },
-      moreText
+        icon: moreText ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.EllipsisOutlined, { style: { cursor: "pointer" } }),
+        children: moreText
+      }
     );
   } else {
-    moreDom = /* @__PURE__ */ import_react.default.createElement(import_design.Typography.Link, null, moreText ?? /* @__PURE__ */ import_react.default.createElement(import_icons.EllipsisOutlined, { style: { cursor: "pointer" } }));
+    moreDom = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Typography.Link, { children: moreText ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.EllipsisOutlined, { style: { cursor: "pointer" } }) });
   }
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: ellipsisType === "button" ? 8 : 16 }, mainActions.map((action) => {
-      return import_react.default.cloneElement(action, {
-        // size should be covered by action props
-        size: buttonSize,
-        ...action.props,
-        key: action.key,
-        enableLoading,
-        disabled: (0, import_lodash.isBoolean)(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key)
-      });
-    }), ellipsisActions.length > 0 && /* @__PURE__ */ import_react.default.createElement(
-      import_design.Dropdown,
-      {
-        placement: dropDownPlacement,
-        overlay: /* @__PURE__ */ import_react.default.createElement(import_design.Menu, { className: `${prefixCls}-more-menu` }, ellipsisActions.map((action, index) => {
-          const actionKey = action.key;
-          let disabled = false;
-          if ((0, import_lodash.isBoolean)(action.props.disabled))
-            disabled = action.props.disabled;
-          else if (shouldDisabled)
-            disabled = shouldDisabled(action.key);
-          const actionDisabled = action.props.loading || ((0, import_lodash.isBoolean)(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key));
-          return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-            import_design.Menu.Item,
-            {
-              key: actionKey ?? index.toString(),
-              onClick: ({ domEvent }) => {
-                var _a, _b;
-                (_b = (_a = action.props).onClick) == null ? void 0 : _b.call(
-                  _a,
-                  domEvent
-                );
-              },
-              ...(0, import_lodash.omit)(action.props, ["disabled"]),
-              disabled: actionDisabled
-            },
-            /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { title: action.props.tooltip }, action.props.loading && /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, null), " ", action.props.children || action)
-          ), action.props.divider && /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Divider, null));
-        }))
-      },
-      moreDom
-    ))
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { size: ellipsisType === "button" ? 8 : 16, children: [
+      mainActions.map((action) => {
+        return import_react.default.cloneElement(action, {
+          // size should be covered by action props
+          size: buttonSize,
+          ...action.props,
+          key: action.key,
+          enableLoading,
+          disabled: (0, import_lodash.isBoolean)(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key)
+        });
+      }),
+      ellipsisActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_design.Dropdown,
+        {
+          placement: dropDownPlacement,
+          overlay: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu, { className: `${prefixCls}-more-menu`, children: ellipsisActions.map((action, index) => {
+            const actionKey = action.key;
+            const actionResult = findActionComponent(action);
+            const actualAction = (actionResult == null ? void 0 : actionResult.action) || action;
+            const actionProps = actualAction.props;
+            const actionDisabled = actionProps.loading || ((0, import_lodash.isBoolean)(actionProps.disabled) ? actionProps.disabled : getDefaultDisabled(action.key));
+            const menuItemProps = (0, import_lodash.omit)(actionProps, [
+              "disabled",
+              "loading",
+              "tooltip",
+              "visible",
+              "fixed",
+              "enableLoading",
+              "onClick",
+              "children",
+              "danger"
+            ]);
+            const handleMenuItemClick = (info) => {
+              var _a;
+              if (actionResult == null ? void 0 : actionResult.wrapper) {
+                return;
+              }
+              (_a = actionProps.onClick) == null ? void 0 : _a.call(actionProps, info.domEvent);
+            };
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_design.Menu.Item,
+                {
+                  onClick: handleMenuItemClick,
+                  disabled: actionDisabled,
+                  danger: !!actionProps.danger,
+                  ...menuItemProps,
+                  children: renderMenuItemContent(action, actionProps, enableLoading)
+                },
+                actionKey ?? index.toString()
+              ),
+              actionProps.divider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Divider, {})
+            ] });
+          }) }),
+          children: moreDom
+        }
+      )
+    ] })
   );
 };

package/lib/Action/Item.d.ts

@@ -12,18 +12,9 @@ export interface BaseProps extends ButtonProps {
     loading?: boolean;
     divider?: boolean;
 }
-export declare class ActionButton extends React.PureComponent<BaseProps> {
-    static __DISPLAY_NAME: string;
-    state: {
-        loading: boolean;
-    };
-    render(): import("@emotion/react/jsx-runtime").JSX.Element;
-}
-export declare class ActionLink extends React.PureComponent<BaseProps> {
-    static __DISPLAY_NAME: string;
-    state: {
-        loading: boolean;
-        disabled: boolean;
-    };
-    render(): import("@emotion/react/jsx-runtime").JSX.Element;
-}
+export declare const ActionButton: React.FC<BaseProps> & {
+    __DISPLAY_NAME?: string;
+};
+export declare const ActionLink: React.FC<BaseProps> & {
+    __DISPLAY_NAME?: string;
+};

package/lib/Action/Item.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/Action/Item.tsx
@@ -35,75 +25,75 @@ __export(Item_exports, {
 module.exports = __toCommonJS(Item_exports);
 var import_icons = require("@oceanbase/icons");
 var import_design = require("@oceanbase/design");
-var import_react = __toESM(require("react"));
-var ActionButton = class extends import_react.default.PureComponent {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      loading: false
-    };
-  }
-  render() {
-    const { children, onClick, enableLoading = true, tooltip, loading, ...restProps } = this.props;
-    return /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { placement: "top", title: tooltip }, /* @__PURE__ */ import_react.default.createElement(
-      import_design.Button,
-      {
-        loading: enableLoading && (loading || this.state.loading),
-        onClick: (e) => {
-          const handle = onClick == null ? void 0 : onClick(e);
-          if (enableLoading && (handle == null ? void 0 : handle.then)) {
-            this.setState({ loading: true });
-            handle.then(() => {
-              this.setState({ loading: false });
-            });
-          }
-        },
-        ...restProps
-      },
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ActionButton = ({
+  children,
+  onClick,
+  enableLoading = true,
+  tooltip,
+  loading,
+  ...restProps
+}) => {
+  const [internalLoading, setInternalLoading] = (0, import_react.useState)(false);
+  const handleClick = (e) => {
+    const handle = onClick == null ? void 0 : onClick(e);
+    if (enableLoading && (handle == null ? void 0 : handle.then)) {
+      setInternalLoading(true);
+      handle.then(() => {
+        setInternalLoading(false);
+      });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { placement: "top", title: tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_design.Button,
+    {
+      loading: enableLoading && (loading || internalLoading),
+      onClick: handleClick,
+      ...restProps,
       children
-    ));
-  }
+    }
+  ) });
 };
 ActionButton.__DISPLAY_NAME = "button";
-var ActionLink = class extends import_react.default.PureComponent {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      loading: false,
-      disabled: false
-    };
-  }
-  render() {
-    const {
-      disabled,
-      onClick,
-      children,
-      enableLoading = true,
-      tooltip,
-      loading,
-      type,
-      style,
-      ...restProps
-    } = this.props;
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_design.Typography.Link,
-      {
-        style: { padding: 0, ...style },
-        disabled: loading || disabled || this.state.disabled,
-        onClick: (e) => {
-          const handle = onClick == null ? void 0 : onClick(e);
-          if (enableLoading && (handle == null ? void 0 : handle.then)) {
-            this.setState({ loading: true, disabled: true });
-            handle.then(() => {
-              this.setState({ loading: false, disabled: false });
-            });
-          }
-        },
-        ...restProps
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { placement: "top", title: tooltip }, loading || this.state.disabled ? /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, null) : "", " ", children)
-    );
-  }
+var ActionLink = ({
+  disabled,
+  onClick,
+  children,
+  enableLoading = true,
+  tooltip,
+  loading,
+  type,
+  style,
+  ...restProps
+}) => {
+  const [internalLoading, setInternalLoading] = (0, import_react.useState)(false);
+  const [internalDisabled, setInternalDisabled] = (0, import_react.useState)(false);
+  const handleClick = (e) => {
+    const handle = onClick == null ? void 0 : onClick(e);
+    if (enableLoading && (handle == null ? void 0 : handle.then)) {
+      setInternalLoading(true);
+      setInternalDisabled(true);
+      handle.then(() => {
+        setInternalLoading(false);
+        setInternalDisabled(false);
+      });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_design.Typography.Link,
+    {
+      style: { padding: 0, ...style },
+      disabled: loading || disabled || internalDisabled,
+      onClick: handleClick,
+      ...restProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Tooltip, { placement: "top", title: tooltip, children: [
+        loading || internalDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, {}) : "",
+        " ",
+        children
+      ] })
+    }
+  );
 };
 ActionLink.__DISPLAY_NAME = "link";
 // Annotate the CommonJS export names for ESM import in node:

package/lib/Action/index.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
-import { ActionButton, ActionLink } from './Item';
 export type { GroupProps as ActionGroupProps } from './Group';
 declare const _default: {
     Group: ({ prefixCls: customizePrefixCls, size, children, dropDownPlacement, shouldVisible, shouldDisabled, enableLoading, moreText, moreType, buttonSize, }: import("./Group").GroupProps) => import("react").JSX.Element;
-    Button: typeof ActionButton;
-    Link: typeof ActionLink;
+    Button: import("react").FC<import("./Item").BaseProps> & {
+        __DISPLAY_NAME?: string;
+    };
+    Link: import("react").FC<import("./Item").BaseProps> & {
+        __DISPLAY_NAME?: string;
+    };
 };
 export default _default;

package/lib/Action/style/index.d.ts

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

package/lib/Action/style/index.js

@@ -32,7 +32,6 @@ var genActionStyle = (token) => {
   const margin = `-${paddingVertical}px -${paddingHorizontal}px`;
   return {
     [`${componentCls}-more-menu`]: {
-      background: "red",
       [`${antCls}-dropdown-menu-item`]: {
         [`${antCls}-typography`]: {
           display: "block",
@@ -61,6 +60,22 @@ var genActionStyle = (token) => {
           [`${antCls}-wave`]: {
             display: "none"
           }
+        },
+        // 确保 danger 状态的样式能够正确显示，不覆盖 Menu.Item 的默认 danger 颜色
+        [`&${antCls}-dropdown-menu-item-danger`]: {
+          [`${antCls}-typography`]: {
+            [`&:not(${antCls}-typography-disabled)`]: {
+              color: "unset"
+            }
+          },
+          [`${antCls}-btn`]: {
+            [`&:not(:disabled):not(${antCls}-btn-disabled)`]: {
+              color: "unset",
+              [`&:hover`]: {
+                color: "unset"
+              }
+            }
+          }
         }
       }
     }

package/lib/BackgroundTaskManager/RefreshMan.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/BackgroundTaskManager/RefreshMan.tsx
@@ -34,8 +24,9 @@ __export(RefreshMan_exports, {
 module.exports = __toCommonJS(RefreshMan_exports);
 var import_ahooks = require("ahooks");
 var import_design = require("@oceanbase/design");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_constants = require("./constants");
+var import_jsx_runtime = require("react/jsx-runtime");
 var RefreshMan = (0, import_react.forwardRef)((props, ref) => {
   const {
     run,
@@ -78,7 +69,7 @@ var RefreshMan = (0, import_react.forwardRef)((props, ref) => {
       stopLoop();
     };
   }, [startLoop, stopLoop, timeout]);
-  return /* @__PURE__ */ import_react.default.createElement(import_design.Spin, { spinning: spinning && refreshManLoading }, /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Spin, { spinning: spinning && refreshManLoading, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }) });
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/lib/BackgroundTaskManager/index.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/BackgroundTaskManager/index.tsx
@@ -34,10 +24,11 @@ __export(BackgroundTaskManager_exports, {
   default: () => BackgroundTaskManager_default
 });
 module.exports = __toCommonJS(BackgroundTaskManager_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_design = require("@oceanbase/design");
 var import_constants = require("./constants");
 var import_RefreshMan = require("./RefreshMan");
+var import_jsx_runtime = require("react/jsx-runtime");
 var NotificationApi = /* @__PURE__ */ ((NotificationApi2) => {
   NotificationApi2["success"] = "success";
   NotificationApi2["error"] = "error";
@@ -166,7 +157,7 @@ var BackgroundTaskManager_default = (0, import_react.forwardRef)((props, ref) =>
       window.removeEventListener("beforeunload", onUnload);
     };
   }, [queue, preset]);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, !!taskQueue.length && /* @__PURE__ */ import_react.default.createElement(import_RefreshMan.RefreshMan, { run, rollingFrequency }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: !!taskQueue.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RefreshMan.RefreshMan, { run, rollingFrequency }) });
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {