diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx index d7aff2f97..a3778f37a 100644 --- a/src/tag/Tag.tsx +++ b/src/tag/Tag.tsx @@ -2,7 +2,6 @@ import React, { ForwardRefRenderFunction, FocusEvent, forwardRef, useMemo } from import classNames from 'classnames'; import { CloseIcon as TdCloseIcon } from 'tdesign-icons-react'; import tinycolor from 'tinycolor2'; - import noop from '../_util/noop'; import useConfig from '../hooks/useConfig'; import useGlobalIcon from '../hooks/useGlobalIcon'; @@ -18,7 +17,6 @@ export interface TagProps extends TdTagProps, StyledProps { /** * 标签内容 */ - children?: React.ReactNode; tabIndex?: number; onFocus?: (e: FocusEvent) => void; onBlur?: (e: FocusEvent) => void; @@ -42,6 +40,7 @@ export const TagFunction: ForwardRefRenderFunction = ( disabled, children, color, + title: titleAttr, ...otherTagProps } = props; @@ -82,10 +81,11 @@ export const TagFunction: ForwardRefRenderFunction = ( /> ); - const title = (() => { + const title = useMemo(() => { + if (Reflect.has(props, 'title')) return titleAttr; if (children && typeof children === 'string') return children; if (content && typeof content === 'string') return content; - })(); + }, [children, content, props, titleAttr]); const titleAttribute = title ? { title } : undefined; const getTagStyle = useMemo(() => { diff --git a/src/tag/defaultProps.ts b/src/tag/defaultProps.ts index 8a9cebe30..78c9ae26f 100644 --- a/src/tag/defaultProps.ts +++ b/src/tag/defaultProps.ts @@ -14,6 +14,6 @@ export const tagDefaultProps: TdTagProps = { variant: 'dark', }; -export const checkTagDefaultProps: TdCheckTagProps = { disabled: false, size: 'medium' }; +export const checkTagDefaultProps: TdCheckTagProps = { defaultChecked: undefined, disabled: false, size: 'medium' }; export const checkTagGroupDefaultProps: TdCheckTagGroupProps = { multiple: false, defaultValue: [] }; diff --git a/src/tag/tag.en-US.md b/src/tag/tag.en-US.md index 9540a520b..2171804e5 100644 --- a/src/tag/tag.en-US.md +++ b/src/tag/tag.en-US.md @@ -18,6 +18,7 @@ maxWidth | String / Number | - | \- | N shape | String | square | options: square/round/mark | N size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N theme | String | default | options: default/primary/warning/danger/success | N +title | String | - | title of tag | N variant | String | dark | options: dark/light/outline/light-outline | N onClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N onClose | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N @@ -29,8 +30,8 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N -checked | Boolean | - | \- | N -defaultChecked | Boolean | - | uncontrolled property | N +checked | Boolean | undefined | \- | N +defaultChecked | Boolean | undefined | uncontrolled property | N checkedProps | Object | - | used to set checked tag props。Typescript:`TdTagProps` | N children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N content | TNode | - | Typescript:`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N @@ -38,7 +39,7 @@ disabled | Boolean | false | \- | N size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N uncheckedProps | Object | - | used to set unchecked tag props。Typescript:`TdTagProps` | N value | String / Number | - | tag unique key | N -onChange | Function | | Typescript:`(checked: boolean, context: CheckTagChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N +onChange | Function | | Typescript:`(checked: boolean, context: CheckTagChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N onClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N diff --git a/src/tag/tag.md b/src/tag/tag.md index 2c065b96d..a6b8353ab 100644 --- a/src/tag/tag.md +++ b/src/tag/tag.md @@ -18,6 +18,7 @@ maxWidth | String / Number | - | 标签最大宽度,宽度超出后会出现 shape | String | square | 标签类型,有三种:方形、圆角方形、标记型。可选项:square/round/mark | N size | String | medium | 标签尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N theme | String | default | 组件风格,用于描述组件不同的应用场景。可选项:default/primary/warning/danger/success | N +title | String | - | 标签标题,在标签hover时展示,默认为标签内容 | N variant | String | dark | 标签风格变体。可选项:dark/light/outline/light-outline | N onClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击时触发 | N onClose | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
如果关闭按钮存在,点击关闭按钮时触发 | N @@ -29,8 +30,8 @@ onClose | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
-- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式,TS 类型:`React.CSSProperties` | N -checked | Boolean | - | 标签选中的状态,默认风格(theme=default)才有选中态 | N -defaultChecked | Boolean | - | 标签选中的状态,默认风格(theme=default)才有选中态。非受控属性 | N +checked | Boolean | undefined | 标签选中的状态,默认风格(theme=default)才有选中态 | N +defaultChecked | Boolean | undefined | 标签选中的状态,默认风格(theme=default)才有选中态。非受控属性 | N checkedProps | Object | - | 透传标签选中态属性。TS 类型:`TdTagProps` | N children | TNode | - | 组件子元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N content | TNode | - | 组件子元素;传入数组时:[选中内容,非选中内容]。TS 类型:`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N @@ -38,7 +39,7 @@ disabled | Boolean | false | 标签禁用态,失效标签不能触发事件。 size | String | medium | 标签尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N uncheckedProps | Object | - | 透传标签未选态属性。TS 类型:`TdTagProps` | N value | String / Number | - | 标签唯一标识,一般用于标签组场景,单个可选择标签无需设置 | N -onChange | Function | | TS 类型:`(checked: boolean, context: CheckTagChangeContext) => void`
状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N +onChange | Function | | TS 类型:`(checked: boolean, context: CheckTagChangeContext) => void`
状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。
`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`
| N onClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击标签时触发 | N diff --git a/src/tag/type.ts b/src/tag/type.ts index db009a705..9848ffb39 100644 --- a/src/tag/type.ts +++ b/src/tag/type.ts @@ -54,6 +54,11 @@ export interface TdTagProps { * @default default */ theme?: 'default' | 'primary' | 'warning' | 'danger' | 'success'; + /** + * 标签标题,在标签hover时展示,默认为标签内容 + * @default '' + */ + title?: string; /** * 标签风格变体 * @default dark