import React , { Component } from 'react' ; import classnames from 'classnames' ; import PropTypes from 'prop-types' ; import { isRingingInboundCall } from '@ringcentral-integration/commons/lib/callLogHelpers' ; import { Button } from '../Button' ; import LogBasicInfo from '../LogBasicInfo' ; import { SpinnerOverlay } from '../SpinnerOverlay' ; import i18n from './i18n' ; import styles from './styles.scss' ; const EditSection = ( { children , scrollerRef , ... rest } ) => ( < div { ... rest } ref = { scrollerRef } className = { classnames ( styles . editSection ) } > { children } < /div>); EditSection . propTypes = { children : PropTypes . object , scrollerRef : PropTypes . func , } ; EditSection . defaultProps = { children : null , scrollerRef : undefined , } ; const SaveButton = ( { isSaving , onClick , overlapped , children } ) => ( < div className = { classnames ( styles . buttonPanel , overlapped && styles . overlapped ) } > < Button className = { classnames ( styles . primaryButton , isSaving && styles . disabled ) } disabled = { isSaving } onClick = { onClick } > { children } < /Button> < /div>); SaveButton . propTypes = { isSaving : PropTypes . bool , onClick : PropTypes . func , overlapped : PropTypes . bool , children : PropTypes . string , } ; SaveButton . defaultProps = { isSaving : false , onClick ( ) { } , overlapped : false , children : null , } ; class LogSection extends Component { constructor ( props ) { super ( props ) ; this . state = { mainCtrlOverlapped : false , } ; } componentDidMount ( ) { window . addEventListener ( 'resize' , this . checkOverlap , false ) ; } componentWillUnmount ( ) { window . removeEventListener ( 'resize' , this . checkOverlap , false ) ; } checkOverlap ( ) { if ( ! this . mainCtrl ) { return ; } const { scrollHeight , clientHeight , scrollTop } = this . mainCtrl ; const overlappedHeight = scrollHeight - clientHeight - scrollTop ; const mainCtrlOverlapped = overlappedHeight > 1 ; if ( mainCtrlOverlapped !== this . state . mainCtrlOverlapped ) { this . setState ( { mainCtrlOverlapped } ) ; } } getEditLogSection ( ) { const { renderEditLogSection , currentLocale , onSaveCallLog , onUpdateCallLog , currentLog , additionalInfo , onCallLogSaved , } = this . props ; return renderEditLogSection ( { currentLocale , onSaveCallLog , onUpdateCallLog , currentLog , additionalInfo , onCallLogSaved , } ) ; } genSaveLogButton ( ) { const { showSaveLogBtn , renderSaveLogButton , currentLocale , onSaveCallLog , currentLog , } = this . props ; const { call , currentLogCall } = currentLog ; if ( ! showSaveLogBtn ) { return null ; } if ( renderSaveLogButton ) { return renderSaveLogButton ( { currentLocale , onSaveCallLog , currentLog , overlapped : this . state . mainCtrlOverlapped , } ) ; } return ( < SaveButton isSaving = { currentLogCall . isSaving } onClick = { ( ) => onSaveCallLog ( call ) } overlapped = { this . state . mainCtrlOverlapped } > { i18n . getString ( 'saveLog' , currentLocale ) } < /SaveButton>); } renderLogBasicInfo ( ) { const { currentLog , showSmallCallControl } = this . props ; const { currentSessionId , call } = currentLog ; const { telephonyStatus , result } = call ; const status = telephonyStatus || result ; const isActive = ! result ; const clickable = isActive && ! isRingingInboundCall ( call ) ; let extraButton ; if ( showSmallCallControl && isActive ) { extraButton = this . props . renderSmallCallContrl ( status , currentSessionId ) ; } return ( < LogBasicInfo dataSign = "leftSectionInfo" currentLog = { this . props . currentLog } currentLocale = { this . props . currentLocale } formatPhone = { this . props . formatPhone } extraButton = { extraButton } clickable = { clickable } onClick = { clickable ? this . props . onLogBasicInfoClick : ( ) => console . log ( 'noop' ) } />); } render ( ) { const { currentLog , isInnerMask , } = this . props ; const { showSpinner } = currentLog ; if ( showSpinner ) { return < SpinnerOverlay className = { styles . spinner } />; } return ( < div className = { styles . root } > { this . renderLogBasicInfo ( ) } < EditSection scrollerRef = { ( el ) => { this . mainCtrl = el ; } } onScroll = { ( ) => this . checkOverlap ( ) } > { this . getEditLogSection ( ) } < /EditSection> { this . genSaveLogButton ( ) } { isInnerMask ? < div className = { styles . innerMask } /> : null} < /div>); } } LogSection . propTypes = { currentLog : PropTypes . object , additionalInfo : PropTypes . object , currentLocale : PropTypes . string . isRequired , formatPhone : PropTypes . func , onUpdateCallLog : PropTypes . func , onSaveCallLog : PropTypes . func , renderEditLogSection : PropTypes . func , renderSaveLogButton : PropTypes . func , isInnerMask : PropTypes . bool , onLogBasicInfoClick : PropTypes . func , showSaveLogBtn : PropTypes . bool , showSmallCallControl : PropTypes . bool , renderSmallCallContrl : PropTypes . func , onCallLogSaved : PropTypes . func , } ; LogSection . defaultProps = { currentLog : { } , additionalInfo : undefined , formatPhone : undefined , onUpdateCallLog : undefined , onSaveCallLog : undefined , renderEditLogSection : undefined , renderSaveLogButton : undefined , isInnerMask : undefined , onLogBasicInfoClick ( ) { } , renderSmallCallContrl ( ) { } , showSaveLogBtn : true , showSmallCallControl : true , onCallLogSaved : undefined , } ; export default LogSection ;