Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(button): 支持 href、tag、suffix api #1120

Merged
merged 5 commits into from
Jul 18, 2022
Merged

feat(button): 支持 href、tag、suffix api #1120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
05efdc1
feat(button): 支持 href、tag api
honkinglin Jul 18, 2022
e03c3fb
feat: button 支持 suffix、tag、href api
honkinglin Jul 18, 2022
b7919a8
feat: button 支持 suffix、tag、href api
honkinglin Jul 18, 2022
4480df9
feat: rebase develop
honkinglin Jul 18, 2022
bea0d09
fix: snapshhot
honkinglin Jul 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 2 files
+2 −3 js/tree/tree-node-model.ts
+8 −2 style/web/components/button/_index.less
62 changes: 33 additions & 29 deletions src/button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { forwardRef, useRef } from 'react';
import React, { forwardRef, useRef, useMemo } from 'react';
import classNames from 'classnames';
import useConfig from '../_util/useConfig';
import useRipple from '../_util/useRipple';
Expand All @@ -9,7 +9,7 @@ import { buttonDefaultProps } from './defaultProps';
/**
* 除表格中列出的属性外，支持透传原生 `<button>` 标签支持的属性。
*/
export interface ButtonProps extends TdButtonProps, React.ButtonHTMLAttributes<HTMLButtonElement> {}
export interface ButtonProps extends TdButtonProps, React.HTMLAttributes<HTMLElement> {}

/**
* 按钮组件
Expand All @@ -30,6 +30,9 @@ const Button = forwardRef(
children,
content,
className,
suffix,
href,
tag,
onClick,
...buttonProps
}: ButtonProps,
Expand All @@ -45,22 +48,28 @@ const Button = forwardRef(
let iconNode = icon;
if (loading) iconNode = <Loading loading={loading} inheritColor={true} />;

let renderTheme = theme;

if (!theme) {
if (variant === 'base') {
renderTheme = 'primary';
} else {
renderTheme = 'default';
const renderTheme = useMemo(() => {
if (!theme) {
if (variant === 'base') return 'primary';
return 'default';
}
}
return theme;
}, [theme, variant]);

const renderTag = useMemo(() => {
if (!tag && href) return 'a';
return tag || 'button';
}, [tag, href]);

return (
<button
{...buttonProps}
ref={ref || btnRef}
type={type}
className={classNames(
return React.createElement(
renderTag,
{
...buttonProps,
href,
type,
ref: ref || btnRef,
disabled: disabled || loading,
className: classNames(
className,
[
`${classPrefix}-button`,
Expand All @@ -76,19 +85,14 @@ const Button = forwardRef(
[`${classPrefix}-size-l`]: size === 'large',
[`${classPrefix}-size-full-width`]: block,
},
)}
onClick={!disabled && !loading ? onClick : undefined}
disabled={disabled || loading}
>
{iconNode ? (
<>
{iconNode}
{renderChildren && <span className={`${classPrefix}-button__text`}>{renderChildren}</span>}
</>
) : (
<span className={`${classPrefix}-button__text`}>{renderChildren}</span>
)}
</button>
),
onClick: !disabled && !loading ? onClick : undefined,
},
<>
{iconNode}
{<span className={`${classPrefix}-button__text`}>{renderChildren}</span>}
{suffix && <span className={`${classPrefix}-button__suffix`}>{suffix}</span>}
</>,
);
},
);
Expand Down
9 changes: 9 additions & 0 deletions src/button/__tests__/__snapshots__/button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ exports[`Button 组件测试 icon 1`] = `
xlink:href="#t-icon-loading"
/>
</svg>
<span
class="t-button__text"
/>
</button>
</DocumentFragment>
`;
Expand Down Expand Up @@ -506,6 +509,9 @@ exports[`icon.jsx 1`] = `
fill-rule="evenodd"
/>
</svg>
<span
class="t-button__text"
/>
</button>
</div>
<div
Expand Down Expand Up @@ -533,6 +539,9 @@ exports[`icon.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
</div>
<div
Expand Down
5 changes: 4 additions & 1 deletion src/button/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,15 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
block | Boolean | false | 是否为块级元素 | N
children | TNode | - | 按钮内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
content | TNode | - | 按钮内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
disabled | Boolean | false | 是否禁用按钮 | N
disabled | Boolean | - | 禁用状态 | N
ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N
icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
loading | Boolean | false | 是否显示为加载状态 | N
shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
tag | String | - | 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题。可选项：button/a/div | N
theme | String | - | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
type | String | button | 按钮类型。可选项：submit/reset/button | N
variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N
Expand Down
18 changes: 15 additions & 3 deletions src/button/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,19 @@ export interface TdButtonProps {
*/
content?: TNode;
/**
* 是否禁用按钮
* @default false
* 禁用状态
*/
disabled?: boolean;
/**
* 是否为幽灵按钮（镂空按钮）
* @default false
*/
ghost?: boolean;
/**
* 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染
* @default ''
*/
href?: string;
/**
* 按钮内部图标，可完全自定义
*/
Expand All @@ -50,6 +54,14 @@ export interface TdButtonProps {
* @default medium
*/
size?: SizeEnum;
/**
* 右侧内容，可用于定义右侧图标
*/
suffix?: TElement;
/**
* 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题
*/
tag?: 'button' | 'a' | 'div';
/**
* 组件风格，依次为默认色、品牌色、危险色、警告色、成功色
*/
Expand All @@ -67,5 +79,5 @@ export interface TdButtonProps {
/**
* 点击时触发
*/
onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
onClick?: (e: MouseEvent<HTMLElement>) => void;
}
6 changes: 6 additions & 0 deletions src/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -811,6 +811,9 @@ exports[`max.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
<div
class="t-input__wrap"
Expand Down Expand Up @@ -844,6 +847,9 @@ exports[`max.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
</div>
</div>
Expand Down
45 changes: 45 additions & 0 deletions src/date-picker/__tests__/__snapshots__/date-picker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1468,6 +1468,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
<button
class="t-jumper__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s"
Expand All @@ -1487,6 +1490,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
<button
class="t-jumper__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s"
Expand All @@ -1506,6 +1512,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
</div>
</div>
Expand Down Expand Up @@ -2072,6 +2081,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
<button
class="t-jumper__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s"
Expand All @@ -2091,6 +2103,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
<button
class="t-jumper__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s"
Expand All @@ -2110,6 +2125,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
</div>
</div>
Expand Down Expand Up @@ -3457,6 +3475,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
<button
class="t-jumper__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s"
Expand All @@ -3476,6 +3497,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
<button
class="t-jumper__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s"
Expand All @@ -3495,6 +3519,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
</div>
</div>
Expand Down Expand Up @@ -4049,6 +4076,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
<button
class="t-jumper__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s"
Expand All @@ -4068,6 +4098,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
<button
class="t-jumper__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s"
Expand All @@ -4087,6 +4120,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
</div>
</div>
Expand Down Expand Up @@ -4657,6 +4693,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
<button
class="t-jumper__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s"
Expand All @@ -4676,6 +4715,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
<button
class="t-jumper__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s"
Expand All @@ -4695,6 +4737,9 @@ exports[`panel.jsx 1`] = `
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
/>
</button>
</div>
</div>
Expand Down
Loading