granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixes bug with SliderTablefield control

Browse source 
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.
This commit is contained in:
Justin Edmund 2023-07-02 02:23:00 -07:00
parent f9a8d1db5c
commit 3a684abf57
1 changed files with 5 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
components/common/SliderTableField/index.tsx
View file

@ -3,8 +3,6 @@ import Input from '~components/common/Input'
import Slider from '~components/common/Slider' import Slider from '~components/common/Slider'
import TableField from '~components/common/TableField' import TableField from '~components/common/TableField'
import styles from './index.module.scss'
interface Props { interface Props {
name: string name: string
label: string label: string
@ -26,12 +24,9 @@ const SliderTableField = (props: Props) => {
const [value, setValue] = useState(props.value) const [value, setValue] = useState(props.value)
useEffect(() => { useEffect(() => {
if (props.value !== undefined && props.value !== value) if (value !== undefined && value !== props.value) {
setValue(props.value) props.onValueChange(value)
}, [props.value]) }
useEffect(() => {
if (value !== undefined && value !== props.value) props.onValueChange(value)
}, [value]) }, [value])
function handleValueCommit(value: number[]) { function handleValueCommit(value: number[]) {
@ -58,7 +53,7 @@ const SliderTableField = (props: Props) => {
min={props.min} min={props.min}
max={props.max} max={props.max}
step={props.step} step={props.step}
value={[value ? value : 0]} value={[props.value ? props.value : 0]}
onValueChange={handleValueChange} onValueChange={handleValueChange}
onValueCommit={handleValueCommit} onValueCommit={handleValueCommit}
/> />
@ -66,7 +61,7 @@ const SliderTableField = (props: Props) => {
className="number" className="number"
bound={true} bound={true}
type="number" type="number"
value={`${value}`} value={`${props.value}`}
min={props.min} min={props.min}
max={props.max} max={props.max}
step={props.step} step={props.step}