import React from 'react' ; import classnames from 'classnames' ; import { MDCSelectHelperTextAdapter } from '@material/select/helper-text/adapter' ; import { MDCSelectHelperTextFoundation } from '@material/select/helper-text/foundation' ; export interface SelectHelperTextProps extends React . HTMLProps < HTMLParagraphElement > { persistent ? : boolean ; setHelperTextFoundation ? : ( foundation ? : MDCSelectHelperTextFoundation ) => void ; } interface ElementAttributes { 'aria-hidden' ? : boolean | 'false' | 'true' ; role ? : string ; } interface SelectHelperTextState extends ElementAttributes { classList : Set < string > ; } export class SelectHelperText extends React . Component < SelectHelperTextProps , SelectHelperTextState > { foundation ? : MDCSelectHelperTextFoundation ; state : SelectHelperTextState = { 'aria-hidden' : undefined , role : undefined , classList : new Set ( ) , } ; componentDidMount ( ) { const { setHelperTextFoundation } = this . props ; this . foundation = new MDCSelectHelperTextFoundation ( this . adapter ) ; this . foundation . init ( ) ; setHelperTextFoundation && setHelperTextFoundation ( this . foundation ) ; } componentWillUnmount ( ) { const { setHelperTextFoundation } = this . props ; if ( this . foundation ) { this . foundation . destroy ( ) ; setHelperTextFoundation && setHelperTextFoundation ( undefined ) ; } } get classes ( ) { const { className , persistent } = this . props ; const { classList } = this . state ; return classnames ( 'mdc-select-helper-text' , Array . from ( classList ) , className , { 'mdc-select-helper-text--persistent' : persistent , } ) ; } get adapter ( ) : MDCSelectHelperTextAdapter { return { addClass : ( className ) => { const classList = new Set ( this . state . classList ) ; classList . add ( className ) ; this . setState ( { classList } ) ; } , removeClass : ( className ) => { const classList = new Set ( this . state . classList ) ; classList . delete ( className ) ; this . setState ( { classList } ) ; } , hasClass : ( className ) => { return this . classes . split ( ' ' ) . includes ( className ) ; } , setAttr : ( attr , value ) => { this . setState ( ( prevState ) => ( { ... prevState , [ attr ] : value , } ) ) ; } , removeAttr : ( attr ) => { this . setState ( ( prevState ) => ( { ... prevState , [ attr ] : null } ) ) ; } , setContent : ( ) => { } , } ; } render ( ) { const { children , persistent , className , setHelperTextFoundation , ... otherProps } = this . props ; const { 'aria-hidden' : ariaHidden , role } = this . state ; return ( < p className = { this . classes } aria - hidden = { ariaHidden } role = { role } { ... otherProps } > { children } < /p>); } }