Fix number stacktile

This commit is contained in:
object 2022-08-17 01:52:00 +00:00
parent 2fa3662860
commit 96508ab5f2
2 changed files with 24 additions and 12 deletions

View File

@ -7,7 +7,7 @@ import { useFurnitureStackHeightWidget } from '../../../../hooks';
export const FurnitureStackHeightView: FC<{}> = props => export const FurnitureStackHeightView: FC<{}> = props =>
{ {
const { objectId = -1, height = 0, maxHeight = 40, onClose = null, updateHeight = null } = useFurnitureStackHeightWidget(); const { objectId = -1, height = 0, maxHeight = 40, onClose = null, setHeight = null } = useFurnitureStackHeightWidget();
if(objectId === -1) return null; if(objectId === -1) return null;
@ -22,10 +22,10 @@ export const FurnitureStackHeightView: FC<{}> = props =>
min={ 0 } min={ 0 }
max={ maxHeight } max={ maxHeight }
step={ 0.01 } step={ 0.01 }
value={ height } value={ isNaN(parseFloat(height.toString())) ? 0 : parseFloat(height.toString()) }
onChange={ event => updateHeight(event) } onChange={ event => setHeight(parseFloat(event.toString())) }
renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } /> renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
<input className="show-number-arrows" type="number" min={ 0 } max={ maxHeight } value={ height } onChange={ event => updateHeight(parseFloat(event.target.value)) } /> <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)) } />
</Flex> </Flex>
<Column gap={ 1 }> <Column gap={ 1 }>
<Button onClick={ event => SendMessageComposer(new FurnitureStackHeightComposer(objectId, -100)) }> <Button onClick={ event => SendMessageComposer(new FurnitureStackHeightComposer(objectId, -100)) }>

View File

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