import React from 'react' ; import classnames from 'classnames' ; import { MDCTextFieldHelperTextAdapter } from '@material/textfield/helper-text/adapter' ; import { MDCTextFieldHelperTextFoundation } from '@material/textfield/helper-text/foundation' ; const cssClasses = MDCTextFieldHelperTextFoundation . cssClasses ; export interface HelperTextProps { 'aria-hidden' ? : boolean ; children : React . ReactNode ; className ? : string ; isValid ? : boolean ; isValidationMessage ? : boolean ; persistent ? : boolean ; role ? : string ; showToScreenReader ? : boolean ; validation ? : boolean ; } interface HelperTextState { 'aria-hidden' : boolean ; role ? : string ; classList : Set < string > ; } export default class HelperText extends React . Component < HelperTextProps , HelperTextState > { foundation ! : MDCTextFieldHelperTextFoundation ; static defaultProps = { [ 'aria-hidden' ] : false , className : '' , isValid : true , isValidationMessage : false , persistent : false , showToScreenReader : false , validation : false , } ; constructor ( props ) { super ( props ) ; this . state = { [ 'aria-hidden' ] : props [ 'aria-hidden' ] ! , role : props . role , classList : new Set ( ) , } ; } componentDidMount ( ) { this . foundation = new MDCTextFieldHelperTextFoundation ( this . adapter ) ; this . foundation . init ( ) ; if ( this . props . showToScreenReader ) { this . foundation . showToScreenReader ( ) ; } if ( ! this . props . isValid ) { this . foundation . setValidity ( false ) ; } if ( this . props . isValidationMessage ) { this . foundation . setValidation ( true ) ; } } componentDidUpdate ( prevProps ) { if ( this . props . showToScreenReader !== prevProps . showToScreenReader && this . props . showToScreenReader ) { this . foundation . showToScreenReader ( ) ; } if ( this . props . isValid !== prevProps . isValid ) { this . foundation . setValidity ( ! ! this . props . isValid ) ; } if ( this . props . isValidationMessage !== prevProps . isValidationMessage && this . props . isValidationMessage ) { this . foundation . setValidation ( this . props . isValidationMessage ) ; } } componentWillUnmount ( ) { this . foundation . destroy ( ) ; } get classes ( ) { const { className , persistent , validation } = this . props ; return classnames ( cssClasses . ROOT , className , { [ cssClasses . HELPER_TEXT_PERSISTENT ] : persistent , [ cssClasses . HELPER_TEXT_VALIDATION_MSG ] : validation , } ) ; } get adapter ( ) : MDCTextFieldHelperTextAdapter { return { addClass : ( className ) => this . setState ( { classList : this . state . classList . add ( className ) } ) , removeClass : ( className ) => { const { classList } = this . state ; classList . delete ( className ) ; this . setState ( { classList } ) ; } , hasClass : ( className ) => this . classes . split ( ' ' ) . includes ( className ) , setAttr : ( attr , value ) => this . setState ( ( prevState ) => ( { ... prevState , [ attr ] : value } ) ) , removeAttr : ( attr ) => this . setState ( ( prevState ) => ( { ... prevState , [ attr ] : null } ) ) , setContent : ( ) => undefined , } ; } render ( ) { return ( < p className = { this . classes } role = { this . state . role } aria - hidden = { this . state [ 'aria-hidden' ] } > { this . props . children } < /p>); } }