import React , { Component } from 'react' ; import classnames from 'classnames' ; import PropTypes from 'prop-types' ; import isBlank from '@ringcentral-integration/commons/lib/isBlank' ; import { Button } from '../Button' ; import RecipientsInput from '../RecipientsInput' ; import i18n from './i18n' ; import styles from './styles.scss' ; const cleanRegex = /[^\d+*-\s]/g ; function ForwardNumbers ( { numbers , onSelect , selected , formatPhone } ) { return ( < div className = { styles . numbers } > { numbers . map ( ( number , index ) => ( < div key = { number . id } data - sign = { `forward-number-${ number . label . toLowerCase ( ) }` } className = { classnames ( styles . number , index === selected ? styles . active : null ) } onClick = { ( ) => onSelect ( index ) } > < span className = { styles . label } title = { number . label } > { number . label } < /span> < span className = { styles . colon } > : < /span> < span > { formatPhone ( number . phoneNumber ) } < /span> < /div>))} < /div>); } ForwardNumbers . propTypes = { numbers : PropTypes . array . isRequired , onSelect : PropTypes . func . isRequired , selected : PropTypes . number . isRequired , formatPhone : PropTypes . func . isRequired , } ; class ForwardForm extends Component { constructor ( props ) { super ( props ) ; this . state = { selectedIndex : 0 , customValue : '' , handling : false , recipient : null , } ; this . filter = ( value ) => value . replace ( cleanRegex , '' ) ; this . onSelect = ( index ) => { this . setState ( { selectedIndex : index , } ) ; if ( typeof this . props . onChange === 'function' ) { this . props . onChange ( this . getValue ( ) ) ; } } ; this . onForward = async ( ) => { this . setState ( { handling : true , } ) ; const result = await this . props . onForward ( this . getValue ( ) ) ; if ( ! this . _mounted ) { return ; } this . setState ( { handling : false , } ) ; if ( result ) { this . props . onCancel ( ) ; } } ; this . onSelectCustomNumber = ( ) => { this . onSelect ( this . props . forwardingNumbers . length ) ; setTimeout ( ( ) => { if ( this . customInput ) { this . customInput . focus ( ) ; } } , 100 ) ; } ; } componentDidMount ( ) { this . _mounted = true ; } componentWillUnmount ( ) { this . _mounted = false ; } getValue ( ) { if ( this . state . selectedIndex < this . props . forwardingNumbers . length ) { const forwardingNumber = this . props . forwardingNumbers [ this . state . selectedIndex ] ; return forwardingNumber && forwardingNumber . phoneNumber ; } if ( this . state . recipient ) { return this . state . recipient . phoneNumber ; } return this . state . customValue ; } _onCustomValueChange = ( value ) => { this . setState ( { customValue : value , } ) ; } ; _clearToNumber = ( ) => { this . setState ( { customValue : '' , } ) ; } ; _setRecipient = ( recipient ) => { this . setState ( { recipient , } ) ; this . _clearToNumber ( ) ; } ; _clearRecipient = ( ) => { this . setState ( { recipient : null , } ) ; } ; render ( ) { const { className , onCancel , currentLocale , forwardingNumbers , formatPhone , searchContact , searchContactList , phoneTypeRenderer , phoneSourceNameRenderer , autoFocus , } = this . props ; const value = this . getValue ( ) ; const disableButton = isBlank ( value ) || this . state . handling ; return ( < div data - sign = "forwardPage" className = { classnames ( styles . root , className ) } > < ForwardNumbers formatPhone = { formatPhone } numbers = { forwardingNumbers } onSelect = { this . onSelect } selected = { this . state . selectedIndex } / > < div data - sign = "customNumber" className = { classnames ( styles . custromNumber , this . state . selectedIndex === forwardingNumbers . length ? styles . active : null ) } onClick = { this . onSelectCustomNumber } > < div className = { styles . customLabel } > { i18n . getString ( 'customNumber' , currentLocale ) } < /div> < RecipientsInput label = "" placeholder = "" inputRef = { ( ref ) => { this . customInput = ref ; } } value = { this . state . customValue } className = { styles . customInput } onChange = { this . _onCustomValueChange } onClean = { this . _clearToNumber } recipient = { this . state . recipient } addToRecipients = { this . _setRecipient } removeFromRecipients = { this . _clearRecipient } searchContact = { searchContact } searchContactList = { searchContactList } phoneTypeRenderer = { phoneTypeRenderer } phoneSourceNameRenderer = { phoneSourceNameRenderer } formatContactPhone = { formatPhone } currentLocale = { currentLocale } titleEnabled autoFocus = { autoFocus } / > < /div> < div className = { styles . buttonGroup } > < Button dataSign = "cancel" className = { styles . cancelButton } onClick = { onCancel } > { i18n . getString ( 'cancel' , currentLocale ) } < /Button> < Button dataSign = "forwardCall" className = { classnames ( styles . forwardButton , disableButton ? styles . disabled : null ) } onClick = { this . onForward } disabled = { disableButton } > < span className = { styles . buttonText } > { i18n . getString ( 'forward' , currentLocale ) } < /span> < /Button> < /div> < /div>); } } ForwardForm . propTypes = { className : PropTypes . string , onCancel : PropTypes . func . isRequired , currentLocale : PropTypes . string . isRequired , forwardingNumbers : PropTypes . array . isRequired , formatPhone : PropTypes . func . isRequired , onForward : PropTypes . func . isRequired , onChange : PropTypes . func , searchContactList : PropTypes . array . isRequired , searchContact : PropTypes . func . isRequired , phoneTypeRenderer : PropTypes . func , phoneSourceNameRenderer : PropTypes . func , autoFocus : PropTypes . bool , } ; ForwardForm . defaultProps = { className : null , onChange : undefined , phoneTypeRenderer : undefined , phoneSourceNameRenderer : undefined , autoFocus : true , } ; export default ForwardForm ;