import React, { useCallback, useState } from 'react'; import { BaseDataEntryProps } from './data-entry'; import { DataTitleCopyable } from './data-title'; import { FieldRow } from './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: React.FC = (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 (
{ const val = e.target.value === '' ? null : parseFloat(e.target.value); setMinEdited(val != undefined); props.onChange( props.slug, { min: val, max: maxEdited ? maxValue : val } ); } } /> { const val = e.target.value === '' ? null : parseFloat(e.target.value); setMaxEdited(val != undefined); props.onChange( props.slug, { min: minEdited ? minValue : val, max: val } ); } } />
); };