import React , { Component } from 'react' ; import classnames from 'classnames' ; import { RcListItem , RcMenuList , spacing , styled } from '@ringcentral/juno' ; import ContactFilterIcon from '../../assets/images/ContactFilter.svg' ; import ContactFilterSolidIcon from '../../assets/images/ContactFilterSolid.svg' ; import i18n from './i18n' ; import styles from './styles.scss' ; const StyledListItem = styled ( RcListItem ) `
  padding-left: ${ spacing ( 2 ) };
  font-size: 13px;
` ; type ContactSourceFilterProps = { className ? : string ; currentLocale : string ; onSourceSelect ? : ( ... args : any [ ] ) => any ; selectedSourceName ? : string ; contactSourceNames : string [ ] ; unfold ? : boolean ; onUnfoldChange ? : ( ... args : any [ ] ) => any ; } ; type ContactSourceFilterState = { unfold : any ; } ; export class ContactSourceFilter extends Component < ContactSourceFilterProps , ContactSourceFilterState > { _mounted = false ; constructor ( props ) { super ( props ) ; const unfold = props . unfold !== undefined ? props . unfold : false ; this . state = { unfold , } ; } componentDidMount ( ) { this . _mounted = true ; } componentWillUnmount ( ) { this . _mounted = false ; if ( ! this . state . unfold ) { window . removeEventListener ( 'click' , this . hideList ) ; } } getString ( key , locale ) { return i18n . getString ( key , locale ) ; } hideList = ( ) => { if ( this . _mounted ) { this . setState ( { unfold : false , } ) ; if ( typeof this . props . onUnfoldChange === 'function' ) { this . props . onUnfoldChange ( false ) ; } } window . removeEventListener ( 'click' , this . hideList ) ; } ; showList = ( ) => { this . setState ( { unfold : true , } ) ; window . addEventListener ( 'click' , this . hideList ) ; if ( typeof this . props . onUnfoldChange === 'function' ) { this . props . onUnfoldChange ( true ) ; } } ; togglePanel : React . MouseEventHandler < HTMLDivElement > = ( evt ) => { evt . stopPropagation ( ) ; if ( ! this . state . unfold ) { this . showList ( ) ; return ; } this . hideList ( ) ; } ; emitSelect = ( sourceName ) => { const { onSourceSelect } = this . props ; if ( onSourceSelect ) { onSourceSelect ( sourceName ) ; } this . hideList ( ) ; } ; render ( ) { const { className , currentLocale , contactSourceNames , selectedSourceName } = this . props ; const isAllSource = selectedSourceName === contactSourceNames [ 0 ] ; return ( < div className = { classnames ( styles . contactSourceFilter , className ) } data - sign = "contactSourceFilterButton" onClick = { this . togglePanel } > < div data - sign = "filterIconContainer" className = { styles . filterIconContainer } title = { this . getString ( selectedSourceName , currentLocale ) } > { isAllSource ? ( < ContactFilterIcon className = { classnames ( styles . filterIconNode , styles . iconNoneFill ) } / > ) : ( < ContactFilterSolidIcon className = { styles . filterIconNode } / > ) } < /div> { ! this . state . unfold ? null : ( < RcMenuList className = { styles . contactSourceList } onClick = { ( e ) => e . stopPropagation ( ) } data - sign = "contactSourceList" > { contactSourceNames . map ( ( sourceName ) => ( < StyledListItem data - sign = "contactSourceItem" component = "div" onClick = { ( ) => this . emitSelect ( sourceName ) } size = "small" key = { sourceName } selected = { sourceName === selectedSourceName } disableGutters > { this . getString ( sourceName , currentLocale ) } < /StyledListItem>))} < /RcMenuList>)} < /div>); } }