import React , { Component } from 'react' ; import classNames from 'classnames' ; import { bindDebounce } from '../../lib/bindDebounce' ; import { Task } from '../CallLogPanel' ; import { CallLogFieldsProps } from './CallLogFields.interface' ; import { FieldItem } from './FieldItem' ; import styles from './styles.scss' ; const DEFAULT_INPUT_SAVE_TIMEOUT = 2e3 ; export default class CallLogFields extends Component < CallLogFieldsProps , { } > { static defaultProps : Partial < CallLogFieldsProps > = { currentLog : { } , onUpdateCallLog : undefined , onSelectViewVisible : ( ) => null , onSaveCallLog : undefined , customInputDataStruct : undefined , subjectDropdownsTracker : undefined , startAdornmentRender : ( ) => null , contactSearch : undefined , classes : { } , refs : { } , } ; debounce = bindDebounce ( this , DEFAULT_INPUT_SAVE_TIMEOUT ) ; renderFields = ( ) => { const { currentLog : { customLogFields , currentLogCall : { isAutoSave } = { } , call , task = { } as Task , } , refs , onSaveCallLog , } = this . props ; const onSave = ( ) => isAutoSave && task . id && onSaveCallLog ( call ) ; return [ ... customLogFields ] . sort ( ( a , b ) => a . sort - b . sort ) . map ( ( fieldOption , i ) => { return ( < FieldItem { ... this . props } fieldRef = { refs [ fieldOption . value ] } fieldOption = { fieldOption } debounce = { this . debounce } data - sign = "callLogField" key = { `field-${ i }` } onSave = { onSave } timeout = { DEFAULT_INPUT_SAVE_TIMEOUT } / > ) ; } ) ; } ; render ( ) { const { currentLog , classes } = this . props ; if ( ! currentLog . task ) { return null ; } return ( < div className = { classNames ( styles . callLogFieldsSection , classes . root ) } > { this . renderFields ( ) } < /div>); } }