Update FurnitureStackHeightWidget

This commit is contained in:
Bill 2022-08-17 18:44:50 -04:00
parent 140728e754
commit 1778204e19
2 changed files with 30 additions and 25 deletions

View File

@ -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) => <div { ...props }>{ state.valueNow }</div> } />
<input className="show-number-arrows" style={ { width: '50px' } } type="number" min={ 0 } max={ maxHeight } value={ isNaN(parseFloat(height.toString())) ? '' : height } onChange={ event => setHeight(parseFloat(event.target.value)) } />
<input className="show-number-arrows" style={ { width: 50 } } type="number" min={ 0 } max={ maxHeight } value={ tempHeight } onChange={ event => updateTempHeight(event.target.value) } />
</Flex>
<Column gap={ 1 }>
<Button onClick={ event => SendMessageComposer(new FurnitureStackHeightComposer(objectId, -100)) }>

View File

@ -10,7 +10,7 @@ const useFurnitureStackHeightWidgetState = () =>
{
const [ objectId, setObjectId ] = useState(-1);
const [ category, setCategory ] = useState(-1);
const [ height, setHeight ] = useState<number | string>(0);
const [ height, setHeight ] = useState(0);
const [ pendingHeight, setPendingHeight ] = useState(-1);
const onClose = () =>
@ -21,22 +21,11 @@ const useFurnitureStackHeightWidgetState = () =>
setPendingHeight(-1);
}
useEffect(() =>
{
if (isNaN(parseFloat(height.toString()))) return;
if (Number(height) || height == 0)
{
setHeight(parseFloat(height.toString()));
updateHeight(parseFloat(height.toString()));
}
});
const updateHeight = (height: number, server: boolean = false) =>
{
if (height || height == 0)
{
height = Math.abs(parseFloat(height.toString()));
if(!height) height = 0;
height = Math.abs(height);
if(!server) ((height > MAX_HEIGHT) && (height = MAX_HEIGHT));
@ -44,7 +33,6 @@ const useFurnitureStackHeightWidgetState = () =>
if(!server) setPendingHeight(height * 100);
}
}
useMessageEvent<FurnitureStackHeightEvent>(FurnitureStackHeightEvent, event =>
{
@ -85,7 +73,7 @@ const useFurnitureStackHeightWidgetState = () =>
return () => clearTimeout(timeout);
}, [ objectId, pendingHeight ]);
return { objectId, height, maxHeight: MAX_HEIGHT, onClose, setHeight };
return { objectId, height, maxHeight: MAX_HEIGHT, onClose, updateHeight };
}
export const useFurnitureStackHeightWidget = useFurnitureStackHeightWidgetState;