From db59a18952a2ba5631fd40230536093013abeae1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Thu, 22 Aug 2024 13:26:31 +0800 Subject: [PATCH] feat(button): useDefaultProps --- src/button/Button.tsx | 24 ++++++++++++------------ src/button/button.en-US.md | 25 +++++++++++++++++++++++++ src/button/button.md | 15 ++++++++------- src/button/defaultProps.ts | 2 +- src/button/type.ts | 17 ++++++++--------- 5 files changed, 54 insertions(+), 29 deletions(-) create mode 100644 src/button/button.en-US.md diff --git a/src/button/Button.tsx b/src/button/Button.tsx index eaa346a8..bff0a48d 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -1,35 +1,36 @@ import React, { forwardRef } from 'react'; import classnames from 'classnames'; -import { LoadingIcon } from 'tdesign-icons-react'; +import TLoading from '../loading'; import useConfig from '../_util/useConfig'; import parseTNode from '../_util/parseTNode'; import { TdButtonProps } from './type'; -import noop from '../_util/noop'; import { buttonDefaultProps } from './defaultProps'; +import useDefaultProps from '../hooks/useDefaultProps'; export interface ButtonProps extends TdButtonProps, - Omit, 'content' | 'children'> {} + Omit, 'content' | 'children'> {} -const Button = forwardRef((props, ref) => { +const Button = forwardRef((originProps, ref) => { + const props = useDefaultProps(originProps, buttonDefaultProps); const { - className = '', + className, style, block, children, - content = '', + content, disabled, ghost, - icon = null, - suffix = null, + icon, + suffix, loading, shape, size, theme, type, variant, - onClick = noop, - loadingProps = {}, + onClick, + loadingProps, } = props; const { classPrefix } = useConfig(); @@ -59,7 +60,7 @@ const Button = forwardRef((props, ref) => { onClick={!loading && !disabled ? onClick : undefined} disabled={disabled || loading} > - {loading ? : parseTNode(icon)} + {loading ? : parseTNode(icon)} {childNode && {parseTNode(childNode)}} {parseTNode(suffix)} @@ -67,6 +68,5 @@ const Button = forwardRef((props, ref) => { }); Button.displayName = 'Button'; -Button.defaultProps = buttonDefaultProps; export default Button; diff --git a/src/button/button.en-US.md b/src/button/button.en-US.md new file mode 100644 index 00000000..ad6ea5fe --- /dev/null +++ b/src/button/button.en-US.md @@ -0,0 +1,25 @@ +:: BASE_DOC :: + +## API + +### Button Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +block | Boolean | false | make button to be a block-level element | N +children | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +disabled | Boolean | undefined | disable the button, make it can not be clicked | N +ghost | Boolean | false | make background-color to be transparent | N +icon | TElement | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +loading | Boolean | false | set button to be loading state | N +loadingProps | Object | - | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/button/type.ts) | N +shape | String | rectangle | button shape。options: rectangle/square/round/circle | N +size | String | medium | a button has four size。options: extra-small/small/medium/large | N +suffix | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +theme | String | default | button theme。options: default/primary/danger/light | N +type | String | button | type of button element in html。options: submit/reset/button | N +variant | String | base | variant of button。options: base/outline/dashed/text | N +onClick | Function | | Typescript：`(e: MouseEvent) => void`
trigger on click | N diff --git a/src/button/button.md b/src/button/button.md index 1695c142..c673385d 100644 --- a/src/button/button.md +++ b/src/button/button.md @@ -1,24 +1,25 @@ :: BASE_DOC :: ## API + ### Button Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N block | Boolean | false | 是否为块级元素 | N -content | TNode | - | 按钮内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -children | TNode | - | 按钮内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -disabled | Boolean | false | 是否禁用按钮 | N +children | TNode | - | 按钮内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +disabled | Boolean | undefined | 禁用状态。优先级：Button.disabled > Form.disabled | N ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N -icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TElement`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N loading | Boolean | false | 是否显示为加载状态 | N loadingProps | Object | - | 透传 Loading 组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/button/type.ts) | N shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large | N -suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TElement`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -theme | String | default | 组件风格，依次为默认色、品牌色、危险色、淡雅主色。可选项：default/primary/danger/light | N +suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N type | String | button | 按钮类型。可选项：submit/reset/button | N variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N onClick | Function | | TS 类型：`(e: MouseEvent) => void`
点击时触发 | N diff --git a/src/button/defaultProps.ts b/src/button/defaultProps.ts index 740fb1f3..eb777d23 100644 --- a/src/button/defaultProps.ts +++ b/src/button/defaultProps.ts @@ -6,7 +6,7 @@ import { TdButtonProps } from './type'; export const buttonDefaultProps: TdButtonProps = { block: false, - disabled: false, + disabled: undefined, ghost: false, loading: false, shape: 'rectangle', diff --git a/src/button/type.ts b/src/button/type.ts index dfef8265..3a543a47 100644 --- a/src/button/type.ts +++ b/src/button/type.ts @@ -5,7 +5,7 @@ * */ import { LoadingProps } from '../loading'; -import { TNode, TElement, SizeEnum } from '../common'; +import { TNode, TElement } from '../common'; import { MouseEvent } from 'react'; export interface TdButtonProps { @@ -23,8 +23,7 @@ export interface TdButtonProps { */ content?: TNode; /** - * 是否禁用按钮 - * @default false + * 禁用状态。优先级：Button.disabled > Form.disabled */ disabled?: boolean; /** @@ -36,10 +35,6 @@ export interface TdButtonProps { * 按钮内部图标，可完全自定义 */ icon?: TElement; - /** - * 右侧内容，可用于定义右侧图标 - */ - suffix?: TElement; /** * 是否显示为加载状态 * @default false @@ -59,6 +54,10 @@ export interface TdButtonProps { * @default medium */ size?: 'extra-small' | 'small' | 'medium' | 'large'; + /** + * 右侧内容，可用于定义右侧图标 + */ + suffix?: TElement; /** * 组件风格，依次为品牌色、危险色 * @default default @@ -70,12 +69,12 @@ export interface TdButtonProps { */ type?: 'submit' | 'reset' | 'button'; /** - * 按钮形式，基础、线框、文字 + * 按钮形式，基础、线框、虚线、文字 * @default base */ variant?: 'base' | 'outline' | 'dashed' | 'text'; /** * 点击时触发 */ - onClick?: (e: MouseEvent) => void; + onClick?: (e: MouseEvent) => void; }