Merge pull request #911 from oceanbase/dengfuping-dev

feat(ui): Action add moreType prop and improve its judge logic
oceanbase · Dec 30, 2024 · 3e55aea · 3e55aea
2 parents 9ca0cf5 + 94a260a
commit 3e55aea
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/packages/ui/src/Action/Group.tsx b/packages/ui/src/Action/Group.tsx
@@ -18,13 +18,13 @@ export interface GroupProps {
   shouldVisible?: (key: string) => boolean;
   shouldDisabled?: (key: string) => boolean;
   enableLoading?: boolean;
-  /** 更多操作的自定义展示 */
+  // 设置更多操作的文案
   moreText?: React.ReactNode;
+  // 设置更多操作的元素类型
+  moreType?: 'button' | 'link';
   buttonSize?: ButtonSize;
 }
 
-type ellipsisType = 'default' | 'link';
-
 const getOrder = ({ type, fixed }: { type?: string; fixed?: boolean }) => {
   const ORDER_SET = { primary: 3, fixed: 2, default: 0 };
   let order = ORDER_SET.default;
@@ -45,6 +45,7 @@ export default ({
   shouldDisabled,
   enableLoading,
   moreText,
+  moreType,
   buttonSize,
 }: GroupProps) => {
   const visibleActions = Array.isArray(children)
@@ -74,20 +75,27 @@ export default ({
   const mainActions = visibleActionsSort.slice(0, realSize);
   const ellipsisActions = visibleActionsSort.slice(realSize);
 
-  let ellipsisType: ellipsisType = 'link';
+  let ellipsisType = 'link';
 
   // @ts-ignore
-  if (visibleActionsSort.every(action => action.type.__DISPLAY_NAME === 'button')) {
-    ellipsisType = 'default';
+  if (visibleActionsSort.some(action => action.type.__DISPLAY_NAME === 'button')) {
+    ellipsisType = 'button';
   }
 
+  // @ts-ignore
+  if (visibleActionsSort.some(action => action.type.__DISPLAY_NAME === 'link')) {
+    ellipsisType = 'link';
+  }
+
+  ellipsisType = moreType ?? ellipsisType;
+
   const getDefaultDisabled = (key: string) => shouldDisabled?.(key as string) ?? false;
 
   let moreDom: string | React.ReactElement;
 
-  if (ellipsisType === 'default') {
+  if (ellipsisType === 'button') {
     moreDom = (
-      <Button type={ellipsisType} size={buttonSize}>
+      <Button size={buttonSize}>
         {moreText ?? <EllipsisOutlined style={{ cursor: 'pointer' }} />}
       </Button>
     );

diff --git a/packages/ui/src/Action/index.md b/packages/ui/src/Action/index.md
@@ -27,7 +27,8 @@ nav:
 | shouldVisible | 通过函数对 action 是否展示的处理 | (key: string) => boolean | - |
 | shouldDisabled | 通过函数对 action 是否禁用的处理 | (key: string) => boolean | - |
 | enableLoading | 是否展示 loading 状态 | boolean | true |
-| moreText | 更多操作的自定义展示 | ReactNode | - |
+| moreText | 设置更多操作的文案 | ReactNode | - |
+| moreType | 设置更多操作的元素类型 | button \| link | - |
 
 ### Action.Link