feat(button): useDefaultProps (#485)

* feat(button): useDefaultProps

* chore: update snapshot

* fix: inheritColor

* chore: update snapshot

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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<React.ButtonHTMLAttributes<HTMLButtonElement>, 'content' | 'children'> {}
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((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,14 +60,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
       onClick={!loading && !disabled ? onClick : undefined}
       disabled={disabled || loading}
     >
-      {loading ? <LoadingIcon {...loadingProps} /> : parseTNode(icon)}
+      {loading ? <TLoading inheritColor {...loadingProps} /> : parseTNode(icon)}
       {childNode && <span className={`${classPrefix}-button__content`}> {parseTNode(childNode)}</span>}
       {parseTNode(suffix)}
     </button>
   );
 });
 
 Button.displayName = 'Button';
-Button.defaultProps = buttonDefaultProps;
 
 export default Button;

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`<br/>trigger on click | N

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`<br/>点击时触发 | N

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',

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,7 +69,7 @@ export interface TdButtonProps {
    */
   type?: 'submit' | 'reset' | 'button';
   /**
-   * 按钮形式，基础、线框、文字
+   * 按钮形式，基础、线框、虚线、文字
    * @default base
    */
   variant?: 'base' | 'outline' | 'dashed' | 'text';