import * as React from 'react' ; import { IDropdownLabel } from '../interfaces' ; interface IDropdownItem { label : string ; value : number ; } interface IProps { label : React . ReactElement < HTMLButtonElement | HTMLDivElement > ; items : Array < IDropdownItem > ; onSelect : ( item : number ) => void ; isButton ? : boolean ; className ? : string ; disabled ? : boolean ; gettext : ( text : string ) => string ; } interface IState { open : boolean ; selectedItem : IDropdownItem ; } export class Dropdown extends React . Component < IProps , IState > { constructor ( props ) { super ( props ) ; this . state = { open : false , selectedItem : { label : '' , value : 0 } , } ; this . handleToggle = this . handleToggle . bind ( this ) ; this . handleSelect = this . handleSelect . bind ( this ) ; } componentDidUpdate ( prevProps ) { if ( this . props . disabled !== prevProps . disabled ) { this . handleDisable ( ) ; } } handleDisable ( ) { if ( this . props . disabled === true ) { this . setState ( { open : false , selectedItem : { label : '' , value : 0 } , } ) ; } } handleToggle ( ) { if ( ! this . state . open && this . state . selectedItem . value && this . props . isButton ) { this . props . onSelect ( 0 ) ; this . setState ( { selectedItem : { label : '' , value : 0 } } ) ; return ; } this . setState ( { open : ! this . state . open , } ) ; } handleSelect ( item ) { this . setState ( { open : false , selectedItem : item } ) ; this . props . onSelect ( item . value ) ; } render ( ) { const { gettext } = this . props ; return ( < div className = { `dropdown ${ this . state . open ? 'open' : '' } ${ this . props . className || '' }` } > { React . cloneElement < IDropdownLabel > ( this . props . label , { onClick : this . handleToggle , selectedItem : this . state . selectedItem , } ) } < ul className = "dropdown__menu" > { this . props . items . map ( ( item ) => ( < li key = { item . value } onClick = { ( ) => this . handleSelect ( item ) } > < button > { gettext ( item . label ) } < /button> < /li>))} < /ul> < /div>); } }