import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Classes } from "../../common" ; import { DISPLAYNAME_PREFIX , Props } from "../../common/props" ; export type TextProps = ITextProps ; deprecated export interface ITextProps extends Props { default ellipsize ? : boolean ; default tagName ? : keyof JSX . IntrinsicElements ; /**
     * HTML title of the element
     */ title ? : string ; } export interface ITextState { textContent : string ; isContentOverflowing : boolean ; } @ polyfill export class Text extends AbstractPureComponent2 < TextProps & Omit < React . HTMLAttributes < HTMLElement > , "title" > , ITextState > { public static displayName = `${ DISPLAYNAME_PREFIX }.Text` ; public static defaultProps : Partial < TextProps > = { ellipsize : false , } ; public state : ITextState = { isContentOverflowing : false , textContent : "" , } ; private textRef : HTMLElement | null = null ; public componentDidMount ( ) { this . update ( ) ; } public componentDidUpdate ( ) { this . update ( ) ; } public render ( ) { const { children , className , ellipsize , tagName = "div" , title , ... htmlProps } = this . props ; const classes = classNames ( className , { [ Classes . TEXT_OVERFLOW_ELLIPSIS ] : ellipsize , } ) ; return React . createElement ( tagName , { ... htmlProps , className : classes , ref : ( ref ) => ( this . textRef = ref ) , title : title ?? ( this . state . isContentOverflowing ? this . state . textContent : undefined ) , } , children ) ; } private update ( ) { if ( this . textRef ?. textContent == null ) { return ; } const newState = { isContentOverflowing : this . props . ellipsize ! && this . textRef . scrollWidth > this . textRef . clientWidth , textContent : this . textRef . textContent , } ; this . setState ( newState ) ; } }