import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Classes , DISPLAYNAME_PREFIX , IElementRefProps , IntentProps , Props , MaybeElement , Utils , } from "../../common" ; import { isReactNodeEmpty } from "../../common/utils" ; import { Icon , IconName , IconSize } from "../icon/icon" ; import { Text } from "../text/text" ; export type TagProps = ITagProps ; deprecated export interface ITagProps extends Props , IntentProps , IElementRefProps < HTMLSpanElement > , React . HTMLAttributes < HTMLSpanElement > { default active ? : boolean ; default fill ? : boolean ; /** Name of a Blueprint UI icon (or an icon element) to render before the children. */ icon ? : IconName | MaybeElement ; default interactive ? : boolean ; default large ? : boolean ; default minimal ? : boolean ; default multiline ? : boolean ; /**
     * Callback invoked when the tag is clicked.
     * Recommended when `interactive` is `true`.
     */ onClick ? : ( e : React . MouseEvent < HTMLDivElement > ) => void ; /**
     * Click handler for remove button.
     * The remove button will only be rendered if this prop is defined.
     */ onRemove ? : ( e : React . MouseEvent < HTMLButtonElement > , tagProps : TagProps ) => void ; /** Name of a Blueprint UI icon (or an icon element) to render after the children. */ rightIcon ? : IconName | MaybeElement ; default round ? : boolean ; /**
     * HTML title to be passed to the <Text> component
     */ htmlTitle ? : string ; } @ polyfill export class Tag extends AbstractPureComponent2 < TagProps > { public static displayName = `${ DISPLAYNAME_PREFIX }.Tag` ; public render ( ) { const { active , children , className , fill , icon , intent , interactive , large , minimal , multiline , onRemove , rightIcon , round , tabIndex = 0 , htmlTitle , elementRef , ... htmlProps } = this . props ; const isRemovable = Utils . isFunction ( onRemove ) ; const tagClasses = classNames ( Classes . TAG , Classes . intentClass ( intent ) , { [ Classes . ACTIVE ] : active , [ Classes . FILL ] : fill , [ Classes . INTERACTIVE ] : interactive , [ Classes . LARGE ] : large , [ Classes . MINIMAL ] : minimal , [ Classes . ROUND ] : round , } , className ) ; const isLarge = large || tagClasses . indexOf ( Classes . LARGE ) >= 0 ; const removeButton = isRemovable ? ( < button aria - label = "Remove" type = "button" className = { Classes . TAG_REMOVE } onClick = { this . onRemoveClick } tabIndex = { interactive ? tabIndex : undefined } > < Icon icon = "small-cross" size = { isLarge ? IconSize . LARGE : IconSize . STANDARD } / > < /button>) : null; return ( < span { ... htmlProps } className = { tagClasses } tabIndex = { interactive ? tabIndex : undefined } ref = { elementRef } > < Icon icon = { icon } /> { ! isReactNodeEmpty ( children ) && ( < Text className = { Classes . FILL } ellipsize = { ! multiline } tagName = "span" title = { htmlTitle } > { children } < /Text>)} < Icon icon = { rightIcon } / > { removeButton } < /span>); } private onRemoveClick = ( e ) => { this . props . onRemove ?. ( e , this . props ) ; } ; }