import React from 'react' ; import classnames from 'classnames' ; import { MDCTextFieldCharacterCounterAdapter } from '@material/textfield/character-counter/adapter' ; import { MDCTextFieldCharacterCounterFoundation } from '@material/textfield/character-counter/foundation' ; const cssClasses = MDCTextFieldCharacterCounterFoundation . cssClasses ; const TEMPLATE = { COUNT : '${count}' , MAX_LENGTH : '${maxLength}' , } ; export interface CharacterCounterProps extends React . HTMLProps < HTMLDivElement > { count ? : number ; maxLength ? : number ; template ? : string ; } export default class CharacterCounter extends React . Component < CharacterCounterProps > { foundation = new MDCTextFieldCharacterCounterFoundation ( this . adapter ) ; componentWillUnmount ( ) { this . foundation . destroy ( ) ; } get adapter ( ) : MDCTextFieldCharacterCounterAdapter { return { setContent : ( ) => undefined , } ; } renderTemplate ( template ) { const { count = 0 , maxLength = 0 } = this . props ; return template . replace ( TEMPLATE . COUNT , count . toString ( ) ) . replace ( TEMPLATE . MAX_LENGTH , maxLength . toString ( ) ) ; } get classes ( ) { return classnames ( cssClasses . ROOT , this . props . className ) ; } get otherProps ( ) { const { className , count , maxLength , template , ... otherProps } = this . props ; return otherProps ; } render ( ) { const { template } = this . props ; return ( < div className = { this . classes } { ... this . otherProps } > { this . renderTemplate ( template ? template : `${ TEMPLATE . COUNT } / ${ TEMPLATE . MAX_LENGTH }` ) } < /div>); } }