diff --git a/components/InputTableField/index.tsx b/components/InputTableField/index.tsx index 5d1e34af..bffc2efc 100644 --- a/components/InputTableField/index.tsx +++ b/components/InputTableField/index.tsx @@ -13,15 +13,21 @@ interface Props { imageAlt?: string imageClass?: string imageSrc?: string[] + onValueChange: (value: number) => void } const InputTableField = (props: Props) => { const [value, setValue] = useState(0) useEffect(() => { - if (props.value) setValue(props.value) + if (props.value !== undefined && props.value !== value) + setValue(props.value) }, [props.value]) + useEffect(() => { + props.onValueChange(value) + }, [value]) + function onInputChange(event: React.ChangeEvent) { setValue(parseInt(event.currentTarget?.value)) } diff --git a/components/SliderTableField/index.tsx b/components/SliderTableField/index.tsx index 04605f8c..941e30b4 100644 --- a/components/SliderTableField/index.tsx +++ b/components/SliderTableField/index.tsx @@ -9,7 +9,7 @@ interface Props { name: string label: string description?: string - value?: number + value: number className?: string imageAlt?: string imageClass?: string @@ -17,15 +17,21 @@ interface Props { min: number max: number step: number + onValueChange: (value: number) => void } const SliderTableField = (props: Props) => { const [value, setValue] = useState(0) useEffect(() => { - if (props.value) setValue(props.value) + if (props.value !== undefined && props.value !== value) + setValue(props.value) }, [props.value]) + useEffect(() => { + props.onValueChange(value) + }, [value]) + function onInputChange(event: React.ChangeEvent) { setValue(parseInt(event.currentTarget?.value)) } diff --git a/components/SwitchTableField/index.tsx b/components/SwitchTableField/index.tsx index 02e69f2f..e2e2e2bd 100644 --- a/components/SwitchTableField/index.tsx +++ b/components/SwitchTableField/index.tsx @@ -8,20 +8,25 @@ interface Props { name: string label: string description?: string - value?: boolean + value: boolean className?: string imageAlt?: string imageClass?: string imageSrc?: string[] + onValueChange: (value: boolean) => void } const SwitchTableField = (props: Props) => { const [value, setValue] = useState(false) useEffect(() => { - if (props.value) setValue(props.value) + if (value !== props.value) setValue(props.value) }, [props.value]) + useEffect(() => { + props.onValueChange(value) + }, [value]) + function onValueChange(value: boolean) { setValue(value) }