diff --git a/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx b/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx index 56ea477f..d4d1039f 100644 --- a/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx +++ b/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx @@ -1,5 +1,5 @@ import { FurnitureStackHeightComposer } from '@nitrots/nitro-renderer'; -import { FC } from 'react'; +import { FC, useEffect, useState } from 'react'; import ReactSlider from 'react-slider'; import { LocalizeText, SendMessageComposer } from '../../../../api'; import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; @@ -7,7 +7,24 @@ import { useFurnitureStackHeightWidget } from '../../../../hooks'; export const FurnitureStackHeightView: FC<{}> = props => { - const { objectId = -1, height = 0, maxHeight = 40, onClose = null, setHeight = null } = useFurnitureStackHeightWidget(); + const { objectId = -1, height = 0, maxHeight = 40, onClose = null, updateHeight = null } = useFurnitureStackHeightWidget(); + const [ tempHeight, setTempHeight ] = useState(''); + + const updateTempHeight = (value: string) => + { + setTempHeight(value); + + const newValue = parseFloat(value); + + if(isNaN(newValue) || (newValue === height)) return; + + updateHeight(newValue); + } + + useEffect(() => + { + setTempHeight(height.toString()); + }, [ height ]); if(objectId === -1) return null; @@ -22,10 +39,10 @@ export const FurnitureStackHeightView: FC<{}> = props => min={ 0 } max={ maxHeight } step={ 0.01 } - value={ isNaN(parseFloat(height.toString())) ? 0 : parseFloat(height.toString()) } - onChange={ event => setHeight(parseFloat(event.toString())) } + value={ height } + onChange={ event => updateHeight(event) } renderThumb={ (props, state) =>
{ state.valueNow }
} /> - setHeight(parseFloat(event.target.value)) } /> + updateTempHeight(event.target.value) } />