Justin Edmund
3a684abf57
This fixes a bug where the SliderTableField's slider was not changing the input's value. We essentially let the parent component control the value so the component is only ever reading from props, instead of using its stored state as a display.
75 lines
1.6 KiB
TypeScript
75 lines
1.6 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import Input from '~components/common/Input'
|
|
import Slider from '~components/common/Slider'
|
|
import TableField from '~components/common/TableField'
|
|
|
|
interface Props {
|
|
name: string
|
|
label: string
|
|
description?: string
|
|
value?: number
|
|
className?: string
|
|
image?: {
|
|
className?: String
|
|
alt?: string
|
|
src: string[]
|
|
}
|
|
min: number
|
|
max: number
|
|
step: number
|
|
onValueChange: (value: number) => void
|
|
}
|
|
|
|
const SliderTableField = (props: Props) => {
|
|
const [value, setValue] = useState(props.value)
|
|
|
|
useEffect(() => {
|
|
if (value !== undefined && value !== props.value) {
|
|
props.onValueChange(value)
|
|
}
|
|
}, [value])
|
|
|
|
function handleValueCommit(value: number[]) {
|
|
setValue(value[0])
|
|
}
|
|
|
|
function handleValueChange(value: number[]) {
|
|
setValue(value[0])
|
|
}
|
|
|
|
function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
|
|
setValue(parseInt(event.currentTarget?.value))
|
|
}
|
|
|
|
return (
|
|
<TableField
|
|
name={props.name}
|
|
className="slider"
|
|
image={props.image}
|
|
label={props.label}
|
|
>
|
|
<Slider
|
|
name={props.name}
|
|
min={props.min}
|
|
max={props.max}
|
|
step={props.step}
|
|
value={[props.value ? props.value : 0]}
|
|
onValueChange={handleValueChange}
|
|
onValueCommit={handleValueCommit}
|
|
/>
|
|
<Input
|
|
className="number"
|
|
bound={true}
|
|
type="number"
|
|
value={`${props.value}`}
|
|
min={props.min}
|
|
max={props.max}
|
|
step={props.step}
|
|
onChange={handleInputChange}
|
|
hide1Password={false}
|
|
/>
|
|
</TableField>
|
|
)
|
|
}
|
|
|
|
export default SliderTableField
|