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

package/es/Action/Group.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
 import type { ButtonSize } from '@oceanbase/design/es/button';
-import type { BaseProps } from './Item';
 export interface GroupProps {
     prefixCls?: string;
     size?: number;
     dropDownPlacement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
-    children: React.ReactElement<BaseProps> | React.ReactElement<BaseProps>[];
+    children: React.ReactNode;
     shouldVisible?: (key: string) => boolean;
     shouldDisabled?: (key: string) => boolean;
     enableLoading?: boolean;

package/es/Action/Group.js

@@ -1,17 +1,21 @@
+"use client";
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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; }
 import React, { useContext } from 'react';
-import { Button, Dropdown, Menu, Space, Tooltip, Typography, ConfigProvider } from '@oceanbase/design';
+import { Button, Dropdown, Drawer, Menu, Modal, Space, Tooltip, Typography, ConfigProvider } from '@oceanbase/design';
 import { EllipsisOutlined, LoadingOutlined } from '@oceanbase/icons';
 import { isBoolean, max, omit } from 'lodash';
 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";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var getOrder = function getOrder(_ref) {
   var type = _ref.type,
     fixed = _ref.fixed;
@@ -29,6 +33,202 @@ var getOrder = function getOrder(_ref) {
   }
   return order;
 };
+
+/**
+ * 判断是否是 Action 组件（Action.Button 或 Action.Link）
+ */
+var getActionDisplayName = function getActionDisplayName(element) {
+  var _element$type;
+  return (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.__DISPLAY_NAME;
+};
+var isActionComponent = function isActionComponent(element) {
+  var name = getActionDisplayName(element);
+  return name === 'button' || name === 'link';
+};
+
+/** 不向内部查找 Action：与操作列同级的 Modal/Drawer 等应整体忽略 */
+var isOpaqueToActionSearch = function isOpaqueToActionSearch(element) {
+  var t = element.type;
+  return t === Modal || t === Drawer;
+};
+var REACT_HOOKS_IN_SOURCE = /\buse(?:State|Effect|Reducer|Ref|Context|Memo|Callback|LayoutEffect|ImperativeHandle|DeferredValue|SyncExternalStore|Insertion|Id)\b/;
+
+/**
+ * 粗略判断函数组件是否可能使用 Hooks。含 Hooks 的不能在 Group 渲染阶段同步调用，需按「函数子树」整体参与折叠。
+ */
+var isLikelyUsingReactHooks = function isLikelyUsingReactHooks(fn) {
+  return REACT_HOOKS_IN_SOURCE.test(Function.prototype.toString.call(fn));
+};
+var isClassComponent = function isClassComponent(type) {
+  if (typeof type !== 'function') {
+    return false;
+  }
+  var proto = type.prototype;
+  return !!(proto && (proto.isReactComponent || proto.render));
+};
+
+/**
+ * 递归查找 Action 组件（可能被 Popconfirm/Tooltip 等组件包裹）
+ * 返回实际的 Action 组件和是否被包裹
+ */
+var findActionComponent = function findActionComponent(element) {
+  var _element$props;
+  var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (! /*#__PURE__*/React.isValidElement(element)) {
+    return null;
+  }
+  if (isOpaqueToActionSearch(element)) {
+    return null;
+  }
+  if (isActionComponent(element)) {
+    return {
+      action: element,
+      hasWrapper: false
+    };
+  }
+
+  // 如果深度太深，避免无限递归
+  if (depth > 10) {
+    return null;
+  }
+  var elementChildren = (_element$props = element.props) === null || _element$props === void 0 ? void 0 : _element$props.children;
+  if (elementChildren == null) {
+    return null;
+  }
+  var childArray = React.Children.toArray(elementChildren).filter(React.isValidElement);
+  var _iterator = _createForOfIteratorHelper(childArray),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var child = _step.value;
+      var result = findActionComponent(child, depth + 1);
+      if (result) {
+        return {
+          action: result.action,
+          hasWrapper: true
+        };
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return null;
+};
+/**
+ * 扁平化 Fragment，过滤 null / false。
+ * - Action（及可解析的外包）→ 操作位
+ * - 无 Hooks 的函数组件 → 同步求值后递归展开（如 () => <Action.Button />）
+ * - 含 Hooks 的函数组件 → 整体占 1 位
+ * - Modal / Drawer → 透传挂载，不占折叠位
+ */
+var normalizeActionGroupPieces = function normalizeActionGroupPieces(node) {
+  var out = [];
+  React.Children.forEach(node, function (child) {
+    if (child == null || typeof child === 'boolean') {
+      return;
+    }
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === React.Fragment) {
+      normalizeActionGroupPieces(child.props.children).forEach(function (p) {
+        return out.push(p);
+      });
+      return;
+    }
+    if (findActionComponent(child)) {
+      out.push({
+        kind: 'action',
+        el: child
+      });
+      return;
+    }
+    if (isOpaqueToActionSearch(child)) {
+      out.push({
+        kind: 'passthrough',
+        el: child
+      });
+      return;
+    }
+    var t = child.type;
+    if (typeof t === 'function' && !isClassComponent(t)) {
+      if (isLikelyUsingReactHooks(t)) {
+        out.push({
+          kind: 'function-child',
+          el: child
+        });
+        return;
+      }
+      try {
+        var rendered = t(child.props);
+        if (rendered == null) {
+          return;
+        }
+        normalizeActionGroupPieces(rendered).forEach(function (p) {
+          return out.push(p);
+        });
+      } catch (_unused) {
+        out.push({
+          kind: 'function-child',
+          el: child
+        });
+      }
+      return;
+    }
+    out.push({
+      kind: 'function-child',
+      el: child
+    });
+  });
+  return out;
+};
+
+/**
+ * 递归克隆元素树，将 newProps 应用到最内层的 Action 组件
+ */
+var cloneWithActionProps = function cloneWithActionProps(element, newProps) {
+  var _element$props2;
+  if (isActionComponent(element)) {
+    return /*#__PURE__*/React.cloneElement(element, _objectSpread(_objectSpread({}, newProps), element.props));
+  }
+  var elementChildren = (_element$props2 = element.props) === null || _element$props2 === void 0 ? void 0 : _element$props2.children;
+  if ( /*#__PURE__*/React.isValidElement(elementChildren)) {
+    return /*#__PURE__*/React.cloneElement(element, _objectSpread(_objectSpread({}, element.props), {}, {
+      key: newProps.key,
+      children: cloneWithActionProps(elementChildren, newProps)
+    }));
+  }
+  return element;
+};
+
+/**
+ * 渲染菜单项内容，保持嵌套的 Popconfirm/Tooltip 结构
+ */
+var renderMenuItemContent = function renderMenuItemContent(action, actionProps, enableLoading) {
+  var loading = actionProps.loading,
+    children = actionProps.children,
+    tooltip = actionProps.tooltip;
+  var result = findActionComponent(action);
+  var actualAction = (result === null || result === void 0 ? void 0 : result.action) || action;
+  var content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [loading && enableLoading && /*#__PURE__*/_jsx(LoadingOutlined, {}), " ", children || actualAction.props.children]
+  });
+
+  // 如果有 wrapper，需要重新构建包裹结构
+  if (result !== null && result !== void 0 && result.hasWrapper) {
+    return cloneWithActionProps(action, _objectSpread(_objectSpread({}, actionProps), {}, {
+      children: content
+    }));
+  }
+
+  // 没有包裹时，如果有 tooltip 则用 Tooltip 包裹
+  return tooltip ? /*#__PURE__*/_jsx(Tooltip, {
+    title: tooltip,
+    children: content
+  }) : content;
+};
 export default (function (_ref2) {
   var customizePrefixCls = _ref2.prefixCls,
     _ref2$size = _ref2.size,
@@ -46,35 +246,79 @@ export default (function (_ref2) {
   var prefixCls = getPrefixCls('action', customizePrefixCls);
   var _useStyle = useStyle(prefixCls),
     wrapSSR = _useStyle.wrapSSR;
-  var visibleActions = Array.isArray(children) ? children.filter(function (c) {
-    if (isBoolean(c.props.visible) && shouldVisible) return c.props.visible && shouldVisible(c.key);
-    if (isBoolean(c.props.visible)) return c.props.visible;else if (shouldVisible) return shouldVisible(c.key);
+  var childPieces = normalizeActionGroupPieces(children);
+  var passthroughChildren = childPieces.filter(function (p) {
+    return p.kind === 'passthrough';
+  }).map(function (p) {
+    return p.el;
+  });
+  var slotPieces = childPieces.filter(function (p) {
+    return p.kind === 'action' || p.kind === 'function-child';
+  });
+  var visibleSlots = slotPieces.filter(function (p) {
+    var _findActionComponent;
+    if (p.kind === 'function-child') {
+      return true;
+    }
+    var c = p.el;
+    var inner = (_findActionComponent = findActionComponent(c)) === null || _findActionComponent === void 0 ? void 0 : _findActionComponent.action;
+    if (!inner) {
+      return false;
+    }
+    var bp = inner.props;
+    if (isBoolean(bp.visible) && shouldVisible) {
+      return bp.visible && shouldVisible(c.key);
+    }
+    if (isBoolean(bp.visible)) {
+      return bp.visible;
+    }
+    if (shouldVisible) {
+      return shouldVisible(c.key);
+    }
     return true;
-  }) : [children];
-  var visibleActionsSort = visibleActions.slice(0);
-  visibleActionsSort.sort(function (a, b) {
-    var orderA = getOrder(a.props);
-    var orderB = getOrder(b.props);
-    return orderB - orderA;
   });
-  var fixedSize = visibleActionsSort.filter(function (action) {
-    return action.props.type === 'primary' || action.props.fixed;
+  var visibleSlotsWithOrder = visibleSlots.map(function (p, sourceIdx) {
+    var _findActionComponent$, _findActionComponent2;
+    return {
+      piece: p,
+      sourceIdx: sourceIdx,
+      sortOrder: p.kind === 'action' ? getOrder(((_findActionComponent$ = (_findActionComponent2 = findActionComponent(p.el)) === null || _findActionComponent2 === void 0 ? void 0 : _findActionComponent2.action) !== null && _findActionComponent$ !== void 0 ? _findActionComponent$ : p.el).props) : getOrder({
+        type: undefined,
+        fixed: false
+      })
+    };
+  });
+  visibleSlotsWithOrder.sort(function (a, b) {
+    var d = b.sortOrder - a.sortOrder;
+    if (d !== 0) {
+      return d;
+    }
+    return a.sourceIdx - b.sourceIdx;
+  });
+  var visibleOrderedSlots = visibleSlotsWithOrder.map(function (x) {
+    return x.piece;
+  });
+  var fixedSize = visibleOrderedSlots.filter(function (p) {
+    var _findActionComponent$2, _findActionComponent3;
+    if (p.kind !== 'action') {
+      return false;
+    }
+    var props = ((_findActionComponent$2 = (_findActionComponent3 = findActionComponent(p.el)) === null || _findActionComponent3 === void 0 ? void 0 : _findActionComponent3.action) !== null && _findActionComponent$2 !== void 0 ? _findActionComponent$2 : p.el).props;
+    return props.type === 'primary' || props.fixed;
   }).length;
   var realSize = max([fixedSize, size]);
-  var mainActions = visibleActionsSort.slice(0, realSize);
-  var ellipsisActions = visibleActionsSort.slice(realSize);
+  var mainSlots = visibleOrderedSlots.slice(0, realSize);
+  var ellipsisSlots = visibleOrderedSlots.slice(realSize);
   var ellipsisType = 'link';
-
-  // @ts-ignore
-  if (visibleActionsSort.some(function (action) {
-    return action.type.__DISPLAY_NAME === 'button';
+  if (visibleOrderedSlots.some(function (p) {
+    var _findActionComponent$3, _findActionComponent4;
+    return p.kind === 'action' && getActionDisplayName((_findActionComponent$3 = (_findActionComponent4 = findActionComponent(p.el)) === null || _findActionComponent4 === void 0 ? void 0 : _findActionComponent4.action) !== null && _findActionComponent$3 !== void 0 ? _findActionComponent$3 : p.el) === 'button';
   })) {
     ellipsisType = 'button';
   }
-
-  // @ts-ignore
-  if (visibleActionsSort.some(function (action) {
-    return action.type.__DISPLAY_NAME === 'link';
+  if (visibleOrderedSlots.some(function (p) {
+    var _findActionComponent$4, _findActionComponent5;
+    return p.kind === 'action' && getActionDisplayName((_findActionComponent$4 = (_findActionComponent5 = findActionComponent(p.el)) === null || _findActionComponent5 === void 0 ? void 0 : _findActionComponent5.action) !== null && _findActionComponent$4 !== void 0 ? _findActionComponent$4 : p.el) === 'link';
   })) {
     ellipsisType = 'link';
   }
@@ -103,47 +347,81 @@ export default (function (_ref2) {
       })
     });
   }
-  return wrapSSR( /*#__PURE__*/_jsxs(Space, {
-    size: ellipsisType === 'button' ? 8 : 16,
-    children: [mainActions.map(function (action) {
-      return /*#__PURE__*/React.cloneElement(action, _objectSpread(_objectSpread({
-        // size should be covered by action props
-        size: buttonSize
-      }, action.props), {}, {
-        key: action.key,
-        enableLoading: enableLoading,
-        disabled: isBoolean(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key)
-      }));
-    }), ellipsisActions.length > 0 && /*#__PURE__*/_jsx(Dropdown, {
-      placement: dropDownPlacement,
-      overlay: /*#__PURE__*/_jsx(Menu, {
-        className: "".concat(prefixCls, "-more-menu"),
-        children: ellipsisActions.map(function (action, index) {
+  return wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Space, {
+      size: ellipsisType === 'button' ? 8 : 16,
+      children: [mainSlots.map(function (slot, slotIndex) {
+        if (slot.kind === 'function-child') {
           var _ref3;
-          var actionKey = action.key;
-          var disabled = false;
-          if (isBoolean(action.props.disabled)) disabled = action.props.disabled;else if (shouldDisabled) disabled = shouldDisabled(action.key);
-          // 当用户传入loading 或者 传入 disabled 的情况都要禁用按钮
-          var actionDisabled = action.props.loading || (isBoolean(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key));
-          return /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Menu.Item, _objectSpread(_objectSpread({
-              // @ts-ignore
-              onClick: function onClick(_ref4) {
-                var _action$props$onClick, _action$props;
-                var domEvent = _ref4.domEvent;
-                (_action$props$onClick = (_action$props = action.props).onClick) === null || _action$props$onClick === void 0 || _action$props$onClick.call(_action$props, domEvent);
+          return /*#__PURE__*/_jsx(React.Fragment, {
+            children: slot.el
+          }, (_ref3 = slot.el.key) !== null && _ref3 !== void 0 ? _ref3 : "fn-main-".concat(slotIndex));
+        }
+        var action = slot.el;
+        var actionResult = findActionComponent(action);
+        var actualAction = (actionResult === null || actionResult === void 0 ? void 0 : actionResult.action) || action;
+        var actualActionProps = actualAction.props;
+        var newProps = {
+          key: action.key,
+          size: buttonSize,
+          enableLoading: enableLoading,
+          disabled: isBoolean(actualActionProps.disabled) ? actualActionProps.disabled : getDefaultDisabled(action.key)
+        };
+        return cloneWithActionProps(action, newProps);
+      }), ellipsisSlots.length > 0 && /*#__PURE__*/_jsx(Dropdown, {
+        placement: dropDownPlacement,
+        overlay: /*#__PURE__*/_jsx(Menu, {
+          className: "".concat(prefixCls, "-more-menu"),
+          children: ellipsisSlots.map(function (slot, index) {
+            var _ref5;
+            if (slot.kind === 'function-child') {
+              var _ref4;
+              var fcKey = (_ref4 = slot.el.key) !== null && _ref4 !== void 0 ? _ref4 : "fn-".concat(index);
+              return /*#__PURE__*/_jsx(Menu.Item, {
+                className: "".concat(prefixCls, "-more-menu-fn"),
+                style: {
+                  height: 'auto',
+                  lineHeight: 'normal',
+                  paddingBlock: 4
+                },
+                children: /*#__PURE__*/React.cloneElement(slot.el, {
+                  key: fcKey
+                })
+              }, fcKey);
+            }
+            var action = slot.el;
+            var actionKey = action.key;
+            var actionResult = findActionComponent(action);
+            var actualAction = (actionResult === null || actionResult === void 0 ? void 0 : actionResult.action) || action;
+            var actionProps = actualAction.props;
+            var actionDisabled = actionProps.loading || (isBoolean(actionProps.disabled) ? actionProps.disabled : getDefaultDisabled(action.key));
+            var menuItemProps = omit(actionProps, ['disabled', 'loading', 'tooltip', 'visible', 'fixed', 'enableLoading', 'onClick', 'children', 'danger']);
+            var handleMenuItemClick = function handleMenuItemClick(info) {
+              var _actionProps$onClick;
+              if (actionResult !== null && actionResult !== void 0 && actionResult.hasWrapper) {
+                return;
               }
-            }, omit(action.props, ['disabled'])), {}, {
-              disabled: actionDisabled,
-              children: /*#__PURE__*/_jsxs(Tooltip, {
-                title: action.props.tooltip,
-                children: [action.props.loading && /*#__PURE__*/_jsx(LoadingOutlined, {}), ' ', action.props.children || action]
-              })
-            }), (_ref3 = actionKey) !== null && _ref3 !== void 0 ? _ref3 : index.toString()), action.props.divider && /*#__PURE__*/_jsx(Menu.Divider, {})]
-          });
-        })
-      }),
-      children: moreDom
+              (_actionProps$onClick = actionProps.onClick) === null || _actionProps$onClick === void 0 || _actionProps$onClick.call(actionProps, info.domEvent);
+            };
+            return /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Menu.Item, _objectSpread(_objectSpread({
+                // @ts-ignore
+                onClick: handleMenuItemClick,
+                disabled: actionDisabled,
+                danger: !!actionProps.danger
+              }, menuItemProps), {}, {
+                children: renderMenuItemContent(action, actionProps, enableLoading)
+              }), (_ref5 = actionKey) !== null && _ref5 !== void 0 ? _ref5 : index.toString()), actionProps.divider && /*#__PURE__*/_jsx(Menu.Divider, {})]
+            });
+          })
+        }),
+        children: moreDom
+      })]
+    }), passthroughChildren.map(function (el, index) {
+      var _ref6;
+      return /*#__PURE__*/React.cloneElement(el, {
+        key: (_ref6 = el.key) !== null && _ref6 !== void 0 ? _ref6 : "action-group-extra-".concat(index)
+      });
     })]
   }));
 });

package/es/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;
+};