1- import React , { useContext } from 'react' ;
1+ import React , { isValidElement , useContext , useState } from 'react' ;
22import { Tag as AntTag } from 'antd' ;
33import type { TagProps as AntTagProps } from 'antd/es/tag' ;
44import classNames from 'classnames' ;
@@ -14,57 +14,58 @@ export interface TagProps extends AntTagProps {
1414 ellipsis ?: Ellipsis ;
1515}
1616
17- const Tag = React . forwardRef < HTMLSpanElement , TagProps > (
18- (
19- {
20- children ,
21- prefixCls : customizePrefixCls ,
22- icon ,
23- className ,
24- ellipsis = {
25- tooltip : {
26- title : children ,
27- } ,
17+ const Tag = React . forwardRef < HTMLSpanElement , TagProps > ( ( props , ref ) => {
18+ const [ ellipsisState , setEllipsisState ] = useState ( false ) ;
19+ console . log ( 'ellipsisState' , ellipsisState ) ;
20+ const {
21+ children ,
22+ prefixCls : customizePrefixCls ,
23+ icon ,
24+ closable ,
25+ ellipsis = {
26+ tooltip : {
27+ title : children ,
2828 } ,
29- ...restProps
3029 } ,
31- ref
32- ) => {
33- const { getPrefixCls } = useContext ( ConfigProvider . ConfigContext ) ;
34- const prefixCls = getPrefixCls ( 'tag' , customizePrefixCls ) ;
35- const { wrapSSR } = useStyle ( prefixCls ) ;
30+ className,
31+ ...restProps
32+ } = props ;
33+ const { getPrefixCls } = useContext ( ConfigProvider . ConfigContext ) ;
34+ const prefixCls = getPrefixCls ( 'tag' , customizePrefixCls ) ;
35+ const { wrapSSR } = useStyle ( prefixCls ) ;
3636
37- const ellipsisConfig = getEllipsisConfig ( ellipsis , children ) ;
38- const tagCls = classNames (
39- {
40- [ `${ prefixCls } ] : ! ! ellipsisConfig ,
41- } ,
42- className
43- ) ;
37+ const ellipsisConfig = getEllipsisConfig ( ellipsis , children ) ;
38+ const tagCls = classNames (
39+ {
40+ [ `${ prefixCls } ] : ! ! closable ,
41+ [ `${ prefixCls } ] : ! ! ellipsisConfig ,
42+ } ,
43+ className
44+ ) ;
4445
45- const realIcon = icon ? < span className = { `${ prefixCls } } > { icon } </ span > : null ;
46+ const realIcon = icon ? < span className = { `${ prefixCls } } > { icon } </ span > : null ;
4647
47- return wrapSSR (
48- < AntTag
49- ref = { ref }
50- prefixCls = { customizePrefixCls }
51- className = { tagCls }
52- icon = { ellipsisConfig ? null : icon }
53- { ... restProps }
54- >
55- { ellipsisConfig ? (
56- < Typography . Text ellipsis = { ellipsisConfig } >
57- { /* Typography.Text 存在 ellipsis 配置时 ，将 icon 放在 Typography.Text 内部，避免溢出时与 icon 发生样式冲突。这里保留 Typography.Text 主要为了使用 Typography.Text 的判断内容溢出展示 Tooltip 的能力，自定义实现成本过大 */ }
58- { realIcon }
59- { children }
60- </ Typography . Text >
61- ) : (
62- children
63- ) }
64- </ AntTag >
65- ) ;
66- }
67- ) ;
48+ return wrapSSR (
49+ < AntTag
50+ ref = { ref }
51+ prefixCls = { customizePrefixCls }
52+ className = { tagCls }
53+ icon = { ellipsisConfig ? null : icon }
54+ closable = { closable }
55+ { ... restProps }
56+ >
57+ { ellipsisConfig ? (
58+ < Typography . Text ellipsis = { ellipsisConfig } >
59+ { /* Typography.Text 存在 ellipsis 配置时 ，将 icon 放在 Typography.Text 内部，避免溢出时与 icon 发生样式冲突。这里保留 Typography.Text 主要为了使用 Typography.Text 的判断内容溢出展示 Tooltip 的能力，自定义实现成本过大 */ }
60+ { realIcon }
61+ { children }
62+ </ Typography . Text >
63+ ) : (
64+ children
65+ ) }
66+ </ AntTag >
67+ ) ;
68+ } ) ;
6869
6970if ( process . env . NODE_ENV !== 'production' ) {
7071 Tag . displayName = AntTag . displayName ;
0 commit comments