76 lines
1.7 KiB
TypeScript
76 lines
1.7 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]}
|
|
className="table"
|
|
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
|