@ -3,6 +3,7 @@ import classNames from 'classnames';
import * as React from 'react' ; import * as React from 'react' ;
import type { PresetColorType , PresetStatusColorType } from '../_util/colors' ; import type { PresetColorType , PresetStatusColorType } from '../_util/colors' ;
import { isPresetColor , isPresetStatusColor } from '../_util/colors' ; import { isPresetColor , isPresetStatusColor } from '../_util/colors' ;
import useClosable from '../_util/hooks/useClosable' ;
import type { LiteralUnion } from '../_util/type' ; import type { LiteralUnion } from '../_util/type' ;
import warning from '../_util/warning' ; import warning from '../_util/warning' ;
import Wave from '../_util/wave' ; import Wave from '../_util/wave' ;
@ -18,7 +19,8 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
rootClassName? : string ; rootClassName? : string ;
color? : LiteralUnion < PresetColorType | PresetStatusColorType > ; color? : LiteralUnion < PresetColorType | PresetStatusColorType > ;
closable? : boolean ; closable? : boolean ;
closeIcon? : React.ReactNode ; /** Advised to use closeIcon instead. */
closeIcon? : boolean | React . ReactNode ;
/** @deprecated `visible` will be removed in next major version. */ /** @deprecated `visible` will be removed in next major version. */
visible? : boolean ; visible? : boolean ;
onClose ? : ( e : React.MouseEvent < HTMLElement > ) = > void ; onClose ? : ( e : React.MouseEvent < HTMLElement > ) = > void ;
@ -43,7 +45,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
color , color ,
onClose , onClose ,
closeIcon , closeIcon ,
closable = false , closable ,
bordered = true , bordered = true ,
. . . props . . . props
} = tagProps ; } = tagProps ;
@ -100,18 +102,20 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
setVisible ( false ) ; setVisible ( false ) ;
} ; } ;
const closeIconNode = React . useMemo < React.ReactNode > ( ( ) = > { const [ , mergedCloseIcon ] = useClosable (
if ( closable ) { closable ,
return closeIcon ? ( closeIcon ,
( iconNode : React.ReactNode ) = >
iconNode === null ? (
< CloseOutlined className = { ` ${ prefixCls } -close-icon ` } onClick = { handleCloseClick } / >
) : (
< span className = { ` ${ prefixCls } -close-icon ` } onClick = { handleCloseClick } > < span className = { ` ${ prefixCls } -close-icon ` } onClick = { handleCloseClick } >
{ closeIcon } { iconNode }
< / span > < / span >
) : ( ) ,
< CloseOutlined className = { ` ${ prefixCls } -close-icon ` } onClick = { handleCloseClick } / > null ,
) ; false ,
} ) ;
return null ;
} , [ closable , closeIcon , prefixCls , handleCloseClick ] ) ;
const isNeedWave = const isNeedWave =
typeof props . onClick === 'function' || typeof props . onClick === 'function' ||
@ -131,7 +135,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
const tagNode = ( const tagNode = (
< span { ...props } ref = { ref } className = { tagClassName } style = { tagStyle } > < span { ...props } ref = { ref } className = { tagClassName } style = { tagStyle } >
{ kids } { kids }
{ closeIconNode } { mergedCloseIcon }
< / span > < / span >
) ; ) ;
kiner-tang(文辉)
1 year ago
GitHub