@adcops/autocore-react 3.0.21 → 3.0.22

package/dist/hooks/useScaledValue.js

@@ -1 +1 @@
-import{useCallback,useState}from"react";export const kMillimeters2Inches=1/25.4;export function useScaledValue(e,t,a=0){const[s,c]=useState(e*t+a);return[s,useCallback((e=>{c(e*t+a)}),[t,a])]}
+import{useCallback,useState,useEffect}from"react";export const kMillimeters2Inches=1/25.4;export function useScaledValue(e,t,s=0){const[u,a]=useState(e),[c,l]=useState((()=>e*t+s));useEffect((()=>{l(u*t+s)}),[u,t,s]);return[c,useCallback((e=>{a(e)}),[t,s])]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.21",
+    "version": "3.0.22",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/hooks/useScaledValue.tsx

@@ -2,14 +2,14 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-30 11:41:59
  * -----
- * Last Modified: 2024-04-30 21:33:42
+ * Last Modified: 2024-05-02 15:14:03
  * -----
  * 
  */
 
 
 
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 
 
 export const kMillimeters2Inches: number = 1 / 25.4;
@@ -71,18 +71,22 @@ type UseScaledValueReturn = [number, (newValue: number) => void];
  * input display accordingly. The user's input is converted back to the base unit before being processed.
  */
 export function useScaledValue(initialValue: number, scale: number, offset: number = 0): UseScaledValueReturn {
+    const [baseValue, setBaseValue] = useState<number>(initialValue);
+    const [displayValue, setDisplayValue] = useState<number>(() => (initialValue * scale) + offset);
 
-    const [displayValue, setDisplayValue] = useState<number>(initialValue * scale + offset);
-
-    const handleSetDisplayValue = useCallback((newValue: number) => {
+    // Update display value whenever baseValue, scale, or offset changes
+    useEffect(() => {
 
         // In autocore-react, we multiple to scale incoming values,
         // divide to scale outgoing values.
         // This is an INCOMING value, so we multiply.
 
-        const newDisplayValue = newValue * scale + offset;
-        setDisplayValue(newDisplayValue);
+        setDisplayValue((baseValue * scale) + offset);
+    }, [baseValue, scale, offset]);
 
+    // Function to update baseValue when displayValue changes
+    const handleSetDisplayValue = useCallback((newValue: number) => {
+        setBaseValue(newValue);
     }, [scale, offset]);
 
     return [displayValue, handleSetDisplayValue];