import * as React from 'react' ; import debounce from 'lodash/debounce' ; import get from 'lodash/get' ; import { ITextFieldProps , TextField } from '@fluentui/react/lib/TextField' ; import { IStackTokens , Stack } from '@fluentui/react/lib/Stack' ; import store from '../../store' ; import { getConfig } from '../../core/utils/config' ; import FieldInfoIcon from './FieldInfoIcon' ; import { IRenderFunction } from '@fluentui/react/lib/Utilities' ; import { i18nValue } from '../../core/ui/i18n' ; const stackTokens = { childrenGap : 4 } ; interface ICappedTextFieldProps { id : string ; i18nLabel : string ; i18nPlaceholder : string ; i18nAssistiveText ? : string ; maxLength : number ; multiline ? : boolean ; inline ? : boolean ; description ? : string ; } const CappedTextField = ( props ) => { const { templateExportMetadata , updateTemplateExportPropertyBySelector } = store ( ) , [ textFieldValue , setTextFieldValue ] = React . useState ( get ( templateExportMetadata , props . id , '' ) ) , delayedInput = React . useCallback ( debounce ( ( value ) => { updateTemplateExportPropertyBySelector ( { selector : props . id , value } ) ; } , getConfig ( ) . propertyDefaults . editor . debounceInterval ) , [ ] ) , onChangeField = ( event , newValue ? ) => { const value = newValue || '' ; if ( value . length <= props . maxLength ) { setTextFieldValue ( value ) ; delayedInput ( value ) ; } } , onRenderLabel = ( fieldProps , defaultRender ) => { if ( ! props . inline ) { const description = ( props . i18nAssistiveText && i18nValue ( props . i18nAssistiveText ) ) || '' ; return ( < Stack horizontal verticalAlign = 'center' tokens = { stackTokens } > < span > { defaultRender ( fieldProps ) } < /span> < FieldInfoIcon description = { description } / > < /Stack>); } } ; return ( < TextField id = { props . id } key = { props . id } value = { textFieldValue } label = { `${ i18nValue ( props . i18nLabel ) } (${ textFieldValue ?. length || 0 }/${ props . maxLength })` } placeholder = { i18nValue ( props . i18nPlaceholder ) } onChange = { onChangeField } onRenderLabel = { onRenderLabel } multiline = { props . multiline } description = { props . description } / > ) ; } ; export default CappedTextField ;