import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Classes , IRef , IRefCallback , refHandler , setRef } from "../../common" ; import { DISPLAYNAME_PREFIX , IntentProps , Props } from "../../common/props" ; export type TextAreaProps = ITextAreaProps ; deprecated export interface ITextAreaProps extends IntentProps , Props , React . TextareaHTMLAttributes < HTMLTextAreaElement > { /**
     * Whether the text area should take up the full width of its container.
     */ fill ? : boolean ; /**
     * Whether the text area should appear with large styling.
     */ large ? : boolean ; /**
     * Whether the text area should appear with small styling.
     */ small ? : boolean ; /**
     * Whether the text area should automatically grow vertically to accomodate content.
     */ growVertically ? : boolean ; /**
     * Ref handler that receives HTML `<textarea>` element backing this component.
     */ inputRef ? : IRef < HTMLTextAreaElement > ; } export interface ITextAreaState { height ? : number ; } @ polyfill export class TextArea extends AbstractPureComponent2 < TextAreaProps , ITextAreaState > { public static displayName = `${ DISPLAYNAME_PREFIX }.TextArea` ; public state : ITextAreaState = { } ; public textareaElement : HTMLTextAreaElement | null = null ; private handleRef : IRefCallback < HTMLTextAreaElement > = refHandler ( this , "textareaElement" , this . props . inputRef ) ; public componentDidMount ( ) { if ( this . props . growVertically && this . textareaElement !== null ) { this . setState ( { height : this . textareaElement ?. scrollHeight , } ) ; } } public componentDidUpdate ( prevProps ) { if ( prevProps . inputRef !== this . props . inputRef ) { setRef ( prevProps . inputRef , null ) ; this . handleRef = refHandler ( this , "textareaElement" , this . props . inputRef ) ; setRef ( this . props . inputRef , this . textareaElement ) ; } } public render ( ) { const { className , fill , inputRef , intent , large , small , growVertically , ... htmlProps } = this . props ; const rootClasses = classNames ( Classes . INPUT , Classes . intentClass ( intent ) , { [ Classes . FILL ] : fill , [ Classes . LARGE ] : large , [ Classes . SMALL ] : small , } , className ) ; let { style = { } } = htmlProps ; if ( growVertically && this . state . height != null ) { style = { ... style , height : `${ this . state . height }px` , } ; } return ( < textarea { ... htmlProps } className = { rootClasses } onChange = { this . handleChange } ref = { this . handleRef } style = { style } / > ) ; } private handleChange = ( e ) => { if ( this . props . growVertically ) { this . setState ( { height : e . target . scrollHeight , } ) ; } if ( this . props . onChange != null ) { this . props . onChange ( e ) ; } } ; }