import React , { useCallback , useState } from 'react' ; import { BaseDataEntryProps } from '../../data-components/data-entry' ; import { DataTitleCopyable } from '../../data-components/data-title' ; import { FieldRow } from '../../data-components/field-row' ; import './number-range-data-entry.css' ; interface NumberRangeDataEntryProps extends BaseDataEntryProps { value ? : { min : number ; max : number ; } ; placeholderMin ? : string ; placeholderMax ? : string ; titleMin ? : string ; titleMax ? : string ; step ? : number ; min ? : number ; max ? : number ; } export const NumberRangeDataEntry = ( props ) => { const { min : minValue , max : maxValue } = props . value ?? { } ; const [ minEdited , setMinEdited ] = useState ( minValue != undefined ) ; const [ maxEdited , setMaxEdited ] = useState ( maxValue != undefined ) ; const isDisabled = props . mode === 'view' || props . disabled ; const slugWithModifier = props . slug + ( props . slugModifier ?? '' ) ; return ( < div > < DataTitleCopyable slug = { props . slug } slugModifier = { props . slugModifier } title = { props . title } tooltip = { props . tooltip } disabled = { props . disabled || props . value == undefined } copy = { props . copy } / > < FieldRow > < input className = "form-control min-number-input" type = "number" id = { slugWithModifier } name = { slugWithModifier } value = { minValue ?? '' } step = { props . step ?? 1 } max = { ( maxEdited ? maxValue : null ) ?? props . max } min = { props . min } disabled = { isDisabled } placeholder = { props . placeholderMin } title = { props . titleMin } required = { props . required } onChange = { e => { const val = e . target . value === '' ? null : parseFloat ( e . target . value ) ; setMinEdited ( val != undefined ) ; props . onChange ( props . slug , { min : val , max : maxEdited ? maxValue : val } ) ; } } /> < input className = "form-control max-number-input" type = "number" id = { `${ props . slug }-max` } name = { `${ props . slug }-max` } value = { maxValue ?? '' } step = { props . step ?? 1 } max = { props . max } min = { ( minEdited ? minValue : null ) ?? props . min } disabled = { isDisabled } placeholder = { props . placeholderMax } title = { props . titleMax } required = { props . required } onChange = { e => { const val = e . target . value === '' ? null : parseFloat ( e . target . value ) ; setMaxEdited ( val != undefined ) ; props . onChange ( props . slug , { min : minEdited ? minValue : val , max : val } ) ; } } /> < /FieldRow> < /div>); } ;