Merge pull request #719 from oceanbase/dengfuping-dev

feat(ui): Action.Group add buttonSize prop and Action.Button add size prop
oceanbase · Sep 11, 2024 · 54713ca · 54713ca
2 parents 18f13b5 + b5fd779
commit 54713ca
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 57 deletions.
diff --git a/packages/ui/src/Action/Group.tsx b/packages/ui/src/Action/Group.tsx
@@ -1,4 +1,5 @@
 import { Button, Dropdown, Menu, Space, Tooltip, Typography } from '@oceanbase/design';
+import type { ButtonSize } from '@oceanbase/design/es/button';
 import { EllipsisOutlined, LoadingOutlined } from '@oceanbase/icons';
 import { isBoolean, max, omit } from 'lodash';
 import React from 'react';
@@ -18,7 +19,8 @@ export interface GroupProps {
   shouldDisabled?: (key: string) => boolean;
   enableLoading?: boolean;
   /** 更多操作的自定义展示 */
-  moreText?: string | React.ReactElement;
+  moreText?: React.ReactNode;
+  buttonSize?: ButtonSize;
 }
 
 type ellipsisType = 'default' | 'link';
@@ -43,6 +45,7 @@ export default ({
   shouldDisabled,
   enableLoading,
   moreText,
+  buttonSize,
 }: GroupProps) => {
   const visibleActions = Array.isArray(children)
     ? children.filter(c => {
@@ -84,7 +87,7 @@ export default ({
 
   if (ellipsisType === 'default') {
     moreDom = (
-      <Button type={ellipsisType}>
+      <Button type={ellipsisType} size={buttonSize}>
         {moreText ?? <EllipsisOutlined style={{ cursor: 'pointer' }} />}
       </Button>
     );
@@ -100,6 +103,8 @@ export default ({
     <Space size={8}>
       {mainActions.map(action => {
         return React.cloneElement(action, {
+          // size should be covered by action props
+          size: buttonSize,
           ...action.props,
           key: action.key,
           enableLoading: enableLoading,

diff --git a/packages/ui/src/Action/Item.tsx b/packages/ui/src/Action/Item.tsx
@@ -1,21 +1,18 @@
 import { LoadingOutlined } from '@oceanbase/icons';
 import { Button, Tooltip, Typography } from '@oceanbase/design';
+import type { ButtonProps } from '@oceanbase/design';
 import React from 'react';
 
-export interface BaseProps {
+export interface BaseProps extends ButtonProps {
   /** 是否显示 */
   visible?: boolean;
-  disabled?: boolean;
+  /** 固定展示、不会被折叠 */
+  fixed?: boolean;
   onClick?: () => Promise<void> | void;
   children?: React.ReactElement | string;
-  type?: 'default' | 'primary';
-  className?: string;
   enableLoading?: boolean;
   tooltip?: string;
   loading?: boolean;
-  danger?: boolean;
-  /** 不会被隐藏 */
-  fixed?: boolean;
 }
 
 export class ActionButton extends React.PureComponent<BaseProps> {
@@ -24,25 +21,11 @@ export class ActionButton extends React.PureComponent<BaseProps> {
     loading: false,
   };
   render() {
-    const {
-      type,
-      disabled,
-      children,
-      onClick,
-      enableLoading = true,
-      className,
-      tooltip,
-      loading,
-      danger,
-    } = this.props;
+    const { children, onClick, enableLoading = true, tooltip, loading, ...restProps } = this.props;
     return (
       <Tooltip placement="top" title={tooltip}>
         <Button
-          className={className}
           loading={enableLoading && (loading || this.state.loading)}
-          type={type}
-          danger={danger}
-          disabled={disabled}
           onClick={_ => {
             const handle = onClick?.();
 
@@ -54,6 +37,7 @@ export class ActionButton extends React.PureComponent<BaseProps> {
               });
             }
           }}
+          {...restProps}
         >
           {children}
         </Button>
@@ -73,15 +57,16 @@ export class ActionLink extends React.PureComponent<BaseProps> {
       disabled,
       onClick,
       children,
-      className,
       enableLoading = true,
       tooltip,
       loading,
+      type,
+      style,
+      ...restProps
     } = this.props;
     return (
       <Typography.Link
-        className={className}
-        style={{ padding: 0 }}
+        style={{ padding: 0, ...style }}
         disabled={loading || disabled || this.state.disabled}
         onClick={_ => {
           const handle = onClick?.();
@@ -94,6 +79,7 @@ export class ActionLink extends React.PureComponent<BaseProps> {
             });
           }
         }}
+        {...restProps}
       >
         <Tooltip placement="top" title={tooltip}>
           {loading || this.state.disabled ? <LoadingOutlined /> : ''} {children}

diff --git a/packages/ui/src/Action/demo/button.tsx b/packages/ui/src/Action/demo/button.tsx
@@ -1,13 +1,42 @@
+import React, { useState } from 'react';
+import { Form, Radio, Space } from '@oceanbase/design';
+import { ButtonSize } from '@oceanbase/design/es/button';
 import { Action } from '@oceanbase/ui';
+import { DownOutlined } from '@oceanbase/icons';
 
 export default () => {
+  const [buttonSize, setButtonSize] = useState<ButtonSize>('middle');
   return (
-    <Action.Group moreText={'更多操作'}>
-      <Action.Button type="primary">action1</Action.Button>
-      <Action.Button danger>危险按钮</Action.Button>
-      <Action.Button>action3</Action.Button>
-      <Action.Button>action4</Action.Button>
-      <Action.Button>action5</Action.Button>
-    </Action.Group>
+    <>
+      <Form layout="inline" requiredMark={false} style={{ marginBottom: 24 }}>
+        <Form.Item label="buttonSize">
+          <Radio.Group
+            value={buttonSize}
+            onChange={e => {
+              setButtonSize(e.target.value);
+            }}
+          >
+            <Radio value="large">large</Radio>
+            <Radio value="middle">middle</Radio>
+            <Radio value="small">small</Radio>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+      <Action.Group
+        buttonSize={buttonSize}
+        moreText={
+          <Space size={4}>
+            更多
+            <DownOutlined />
+          </Space>
+        }
+      >
+        <Action.Button type="primary">action1</Action.Button>
+        <Action.Button danger>危险按钮</Action.Button>
+        <Action.Button>action3</Action.Button>
+        <Action.Button>action4</Action.Button>
+        <Action.Button>action5</Action.Button>
+      </Action.Group>
+    </>
   );
 };
diff --git a/packages/ui/src/Action/demo/fixed.tsx b/packages/ui/src/Action/demo/fixed.tsx
@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import { Action } from '@oceanbase/ui';
 
 export default () => {

diff --git a/packages/ui/src/Action/demo/groupControl.tsx b/packages/ui/src/Action/demo/groupControl.tsx
@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import { Action } from '@oceanbase/ui';
 
 export default () => {

diff --git a/packages/ui/src/Action/demo/link.tsx b/packages/ui/src/Action/demo/link.tsx
@@ -1,8 +1,18 @@
+import React from 'react';
+import { Space } from '@oceanbase/design';
 import { Action } from '@oceanbase/ui';
+import { DownOutlined } from '@oceanbase/icons';
 
 export default () => {
   return (
-    <Action.Group moreText={'更多操作'}>
+    <Action.Group
+      moreText={
+        <Space size={4}>
+          更多
+          <DownOutlined />
+        </Space>
+      }
+    >
       <Action.Link visible={false}>action1</Action.Link>
       <Action.Link disabled tooltip={'禁用展示tooltip'}>
         禁用提示

diff --git a/packages/ui/src/Action/demo/loading.tsx b/packages/ui/src/Action/demo/loading.tsx
@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import { message } from '@oceanbase/design';
 import { Action } from '@oceanbase/ui';
 

diff --git a/packages/ui/src/Action/index.md b/packages/ui/src/Action/index.md
@@ -13,12 +13,24 @@ nav:
 
 <code src="./demo/loading.tsx" title="loading 状态"></code>
 
-<code src="./demo/fixed.tsx" title="固定的 Action"></code>
+<code src="./demo/fixed.tsx" title="固定展示、不被折叠的 Action"></code>
 
 <code src="./demo/groupControl.tsx" title="整体控制状态"></code>
 
 ## API
 
+### Action.Group
+
+| 参数 | 说明 | 类型 | 默认值 |
+| :-- | :-- | :-- | :-- |
+| size | 最多展示几个 | number | 3 |
+| buttonSize | 设置按钮大小 | large \| middle \| small | middle |
+| dropDownPlacement | 菜单弹出位置 | topLeft \| topCenter \| topRight \| bottomLeft \| bottomCenter \| bottomRight | bottomLeft |
+| shouldVisible | 通过函数对 action 是否展示的处理 | (key: string) => boolean | - |
+| shouldDisabled | 通过函数对 action 是否禁用的处理 | (key: string) => boolean | - |
+| enableLoading | 是否展示 loading 状态 | boolean | true |
+| moreText | 更多操作的自定义展示 | ReactNode | - |
+
 ### Action.Link
 
 | 参数      | 说明               | 类型                           | 默认值 |
@@ -27,29 +39,21 @@ nav:
 | loading   | 设置加载状态       | boolean                        | false  |
 | tooltip   | 设置提示文案       | string                         | -      |
 | disabled  | 是否禁用           | boolean                        | false  |
+| fixed     | 固定展示、不被折叠 | boolean                        | false  |
 | onClick   | 点击链接的回调     | async () => void \| () => void | -      |
 | className | 设置 link 的样式名 | string                         | -      |
 
 ### Action.Button
 
-| 参数      | 说明             | 类型                           | 默认值  |
-| :-------- | :--------------- | :----------------------------- | :------ |
-| visible   | 是否可见         | boolean                        | true    |
-| loading   | 设置加载状态     | boolean                        | false   |
-| tooltip   | 设置提示文案     | string                         | -       |
-| disabled  | 是否禁用         | boolean                        | false   |
-| type      | 设置按钮类型     | primary \| default             | default |
-| danger    | 设置危险按钮     | boolean                        | false   |
-| onClick   | 点击链接的回调   | async () => void \| () => void | -       |
-| className | 设置按钮的样式名 | string                         | -       |
-
-### Action.Group
-
-| 参数 | 说明 | 类型 | 默认值 |
-| :-- | :-- | :-- | :-- |
-| size | 最多展示几个 | number | 3 |
-| dropDownPlacement | 菜单弹出位置 | topLeft \| topCenter \| topRight \| bottomLeft \| bottomCenter \| bottomRight | bottomLeft |
-| shouldVisible | 通过函数对 action 是否展示的处理 | (key: string) => boolean | - |
-| shouldDisabled | 通过函数对 action 是否禁用的处理 | (key: string) => boolean | - |
-| enableLoading | 是否展示 loading 状态 | boolean | true |
-| moreText | 更多操作的自定义展示 | string \| ReactElement | - |
+| 参数      | 说明               | 类型                           | 默认值  |
+| :-------- | :----------------- | :----------------------------- | :------ |
+| visible   | 是否可见           | boolean                        | true    |
+| type      | 设置按钮类型       | primary \| default             | default |
+| size      | 设置按钮大小       | large \| middle \| small       | middle  |
+| danger    | 设置危险按钮       | boolean                        | false   |
+| disabled  | 是否禁用           | boolean                        | false   |
+| loading   | 设置加载状态       | boolean                        | false   |
+| tooltip   | 设置提示文案       | string                         | -       |
+| fixed     | 固定展示、不被折叠 | boolean                        | false   |
+| onClick   | 点击链接的回调     | async () => void \| () => void | -       |
+| className | 设置按钮的样式名   | string                         | -       |