From 1778204e19c748840aa5baf23f7a9d152c70abf0 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 17 Aug 2022 18:44:50 -0400
Subject: [PATCH] Update FurnitureStackHeightWidget

---
 .../furniture/FurnitureStackHeightView.tsx    | 27 ++++++++++++++----
 .../useFurnitureStackHeightWidget.ts          | 28 ++++++-------------
 2 files changed, 30 insertions(+), 25 deletions(-)

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) => <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)) }>
diff --git a/src/hooks/rooms/widgets/furniture/useFurnitureStackHeightWidget.ts b/src/hooks/rooms/widgets/furniture/useFurnitureStackHeightWidget.ts
index be92c784..3f8c851d 100644
--- a/src/hooks/rooms/widgets/furniture/useFurnitureStackHeightWidget.ts
+++ b/src/hooks/rooms/widgets/furniture/useFurnitureStackHeightWidget.ts
@@ -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,29 +21,17 @@ 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;
 
-            if(!server) ((height > MAX_HEIGHT) && (height = MAX_HEIGHT));
+        height = Math.abs(height);
 
-            setHeight(parseFloat(height.toFixed(2)));
+        if(!server) ((height > MAX_HEIGHT) && (height = MAX_HEIGHT));
 
-            if(!server) setPendingHeight(height * 100);
-        }
+        setHeight(parseFloat(height.toFixed(2)));
+
+        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;