import React from 'react' ; import classnames from 'classnames' ; import { MDCSelectIconAdapter } from '@material/select/icon/adapter' ; import { MDCSelectIconFoundation } from '@material/select/icon/foundation' ; export interface SelectIconProps extends React . HTMLProps < HTMLElement > { setIconFoundation ? : ( foundation ? : MDCSelectIconFoundation ) => void ; tag ? : keyof React . ReactHTML ; } interface ElementAttributes { tabindex ? : number ; role ? : string ; } interface SelectIconState extends ElementAttributes { } export class SelectIcon extends React . Component < SelectIconProps , SelectIconState > { foundation ? : MDCSelectIconFoundation ; state : SelectIconState = { tabindex : undefined , role : undefined , } ; static defaultProps = { tag : 'i' , } ; componentDidMount ( ) { const { setIconFoundation } = this . props ; this . foundation = new MDCSelectIconFoundation ( this . adapter ) ; this . foundation . init ( ) ; setIconFoundation && setIconFoundation ( this . foundation ) ; } componentWillUnmount ( ) { const { setIconFoundation } = this . props ; if ( this . foundation ) { this . foundation . destroy ( ) ; setIconFoundation && setIconFoundation ( undefined ) ; } } get adapter ( ) : MDCSelectIconAdapter { return { getAttr : ( attr ) => { if ( this . state [ attr ] !== undefined ) { return ( this . state [ attr ] as ElementAttributes [ keyof ElementAttributes ] ) ! . toString ( ) ; } const reactAttr = attr === 'tabindex' ? 'tabIndex' : attr ; if ( this . props [ reactAttr ] !== undefined ) { return this . props [ reactAttr ] ! . toString ( ) ; } return null ; } , setAttr : ( attr , value ) => { this . setState ( ( prevState ) => ( { ... prevState , [ attr ] : value , } ) ) ; } , removeAttr : ( attr ) => { this . setState ( ( prevState ) => ( { ... prevState , [ attr ] : null } ) ) ; } , setContent : ( ) => { } , registerInteractionHandler : ( ) => undefined , deregisterInteractionHandler : ( ) => undefined , notifyIconAction : ( ) => undefined , } ; } render ( ) { const { tag : Tag , setIconFoundation , children , className , ... otherProps } = this . props ; const { tabindex : tabIndex , role } = this . state ; return ( < Tag className = { classnames ( 'mdc-select__icon' , className ) } role = { role } tabIndex = { tabIndex } { ... otherProps } > { children } < /Tag>); } }