From ef9eff65bac45b921618626b74b245415cbae5f5 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Sat, 22 Jun 2024 16:58:20 +0700
Subject: [PATCH 1/5] inital commit

---
 doc/gui/examples/controls/number-step.py      | 25 +++++++++++++++++
 .../taipy-gui/src/components/Taipy/Input.tsx  | 28 +++++++++++++------
 .../taipy-gui/src/components/Taipy/utils.ts   |  2 ++
 taipy/gui/_renderers/factory.py               |  2 ++
 4 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 doc/gui/examples/controls/number-step.py

diff --git a/doc/gui/examples/controls/number-step.py b/doc/gui/examples/controls/number-step.py
new file mode 100644
index 0000000000..28e359d589
--- /dev/null
+++ b/doc/gui/examples/controls/number-step.py
@@ -0,0 +1,25 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 50
+
+page = """
+<|{value}|number|>
+"""
+
+Gui(page).run()
+
diff --git a/frontend/taipy-gui/src/components/Taipy/Input.tsx b/frontend/taipy-gui/src/components/Taipy/Input.tsx
index 88926d8fc2..a022239694 100644
--- a/frontend/taipy-gui/src/components/Taipy/Input.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Input.tsx
@@ -11,13 +11,13 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { useState, useEffect, useCallback, useRef, KeyboardEvent } from "react";
+import React, {useState, useEffect, useCallback, useRef, KeyboardEvent} from "react";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 
-import { createSendActionNameAction, createSendUpdateAction } from "../../context/taipyReducers";
-import { TaipyInputProps } from "./utils";
-import { useClassNames, useDispatch, useDynamicProperty, useModule } from "../../utils/hooks";
+import {createSendActionNameAction, createSendUpdateAction} from "../../context/taipyReducers";
+import {TaipyInputProps} from "./utils";
+import {useClassNames, useDispatch, useDynamicProperty, useModule} from "../../utils/hooks";
 
 const AUTHORIZED_KEYS = ["Enter", "Escape", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"];
 
@@ -25,9 +25,9 @@ const getActionKeys = (keys?: string): string[] => {
     const ak = (
         keys
             ? keys
-                  .split(";")
-                  .map((v) => v.trim().toLowerCase())
-                  .filter((v) => AUTHORIZED_KEYS.some((k) => k.toLowerCase() === v))
+                .split(";")
+                .map((v) => v.trim().toLowerCase())
+                .filter((v) => AUTHORIZED_KEYS.some((k) => k.toLowerCase() === v))
             : []
     ).map((v) => AUTHORIZED_KEYS.find((k) => k.toLowerCase() == v) as string);
     return ak.length > 0 ? ak : [AUTHORIZED_KEYS[0]];
@@ -79,6 +79,12 @@ const Input = (props: TaipyInputProps) => {
 
     const handleAction = useCallback(
         (evt: KeyboardEvent<HTMLDivElement>) => {
+            if (evt.shiftKey && evt.key === 'ArrowUp') {
+                setValue(((Number(evt.currentTarget.querySelector("input")?.value || 0) + (props.step || 1) * (props.stepMultiplier || 10) - (props.step || 1)).toString()));
+            }
+            if (evt.shiftKey && evt.key === 'ArrowDown') {
+                setValue(((Number(evt.currentTarget.querySelector("input")?.value || 0) - (props.step || 1) * (props.stepMultiplier || 10) + (props.step || 1)).toString()));
+            }
             if (!evt.shiftKey && !evt.ctrlKey && !evt.altKey && actionKeys.includes(evt.key)) {
                 const val = evt.currentTarget.querySelector("input")?.value;
                 if (changeDelay > 0 && delayCall.current > 0) {
@@ -92,7 +98,7 @@ const Input = (props: TaipyInputProps) => {
                 evt.preventDefault();
             }
         },
-        [actionKeys, updateVarName, onAction, id, dispatch, onChange, changeDelay, propagate, module]
+        [actionKeys, props.step, props.stepMultiplier, changeDelay, onAction, dispatch, id, module, updateVarName, onChange, propagate]
     );
 
     useEffect(() => {
@@ -106,12 +112,16 @@ const Input = (props: TaipyInputProps) => {
             <TextField
                 margin="dense"
                 hiddenLabel
-                value={value ?? ""}
+                value={value}
                 className={className}
                 type={type}
                 id={id}
+                inputProps={{
+                    step: props.step ? props.step : 1,
+                }}
                 label={props.label}
                 onChange={handleInput}
+                onClick={handleClick}
                 disabled={!active}
                 onKeyDown={handleAction}
                 multiline={multiline}
diff --git a/frontend/taipy-gui/src/components/Taipy/utils.ts b/frontend/taipy-gui/src/components/Taipy/utils.ts
index 605119e6ed..76e6e28633 100644
--- a/frontend/taipy-gui/src/components/Taipy/utils.ts
+++ b/frontend/taipy-gui/src/components/Taipy/utils.ts
@@ -48,6 +48,8 @@ export interface TaipyInputProps extends TaipyActiveProps, TaipyChangeProps, Tai
     type: string;
     value: string;
     defaultValue?: string;
+    step?: number;
+    stepMultiplier?: number;
     changeDelay?: number;
     onAction?: string;
     actionKeys?: string;
diff --git a/taipy/gui/_renderers/factory.py b/taipy/gui/_renderers/factory.py
index 092feaebcc..281092f703 100644
--- a/taipy/gui/_renderers/factory.py
+++ b/taipy/gui/_renderers/factory.py
@@ -386,6 +386,8 @@ class _Factory:
         .set_attributes(
             [
                 ("active", PropertyType.dynamic_boolean, True),
+                ("step", PropertyType.number),
+                ("step_multiplier", PropertyType.number),
                 ("hover_text", PropertyType.dynamic_string),
                 ("on_change", PropertyType.function),
                 ("on_action", PropertyType.function),

From a6c8464adf6e261cacd04837b3b10434e3471a65 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Sat, 22 Jun 2024 20:13:29 +0700
Subject: [PATCH 2/5] adding logic to handle when shift key is pressed

---
 .../taipy-gui/src/components/Taipy/Input.tsx  | 57 ++++++++++++++++++-
 taipy/gui/viselements.json                    | 12 ++++
 2 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/Input.tsx b/frontend/taipy-gui/src/components/Taipy/Input.tsx
index a022239694..4619631220 100644
--- a/frontend/taipy-gui/src/components/Taipy/Input.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Input.tsx
@@ -11,9 +11,11 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, {useState, useEffect, useCallback, useRef, KeyboardEvent} from "react";
+import React, {useState, useEffect, useCallback, useRef, KeyboardEvent, useMemo} from "react";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
+import {styled} from '@mui/material/styles';
+import IconButton from "@mui/material/IconButton";
 
 import {createSendActionNameAction, createSendUpdateAction} from "../../context/taipyReducers";
 import {TaipyInputProps} from "./utils";
@@ -21,6 +23,15 @@ import {useClassNames, useDispatch, useDynamicProperty, useModule} from "../../u
 
 const AUTHORIZED_KEYS = ["Enter", "Escape", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"];
 
+const StyledTextField = styled(TextField)({
+    '& input[type=number]::-webkit-outer-spin-button, & input[type=number]::-webkit-inner-spin-button': {
+        display: 'none',
+    },
+    '& input[type=number]': {
+        '-moz-appearance': 'textfield',
+    },
+});
+
 const getActionKeys = (keys?: string): string[] => {
     const ak = (
         keys
@@ -101,6 +112,29 @@ const Input = (props: TaipyInputProps) => {
         [actionKeys, props.step, props.stepMultiplier, changeDelay, onAction, dispatch, id, module, updateVarName, onChange, propagate]
     );
 
+    const roundBasedOnStep = useMemo(() => {
+        const stepString = (props.step || 1).toString();
+        const decimalPlaces = stepString.includes('.') ? stepString.split('.')[1].length : 0;
+        const multiplier = Math.pow(10, decimalPlaces);
+        return (value: number) => Math.round(value * multiplier) / multiplier;
+    }, [props.step]);
+
+    const handleUpStepperMouseDown = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+        if (event.shiftKey) {
+            setValue(prevValue => roundBasedOnStep(Number(prevValue) + (props.step || 1) * (props.stepMultiplier || 10)).toString());
+        } else {
+            setValue(prevValue => roundBasedOnStep(Number(prevValue) + (props.step || 1)).toString())
+        }
+    }, [props.step, props.stepMultiplier, roundBasedOnStep])
+
+    const handleDownStepperMouseDown = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+        if (event.shiftKey) {
+            setValue(prevValue => roundBasedOnStep(Number(prevValue) - (props.step || 1) * (props.stepMultiplier || 10)).toString());
+        } else {
+            setValue(prevValue => roundBasedOnStep(Number(prevValue) - (props.step || 1)).toString())
+        }
+    }, [props.step, props.stepMultiplier, roundBasedOnStep])
+
     useEffect(() => {
         if (props.value !== undefined) {
             setValue(props.value);
@@ -109,7 +143,7 @@ const Input = (props: TaipyInputProps) => {
 
     return (
         <Tooltip title={hover || ""}>
-            <TextField
+            <StyledTextField
                 margin="dense"
                 hiddenLabel
                 value={value}
@@ -119,9 +153,26 @@ const Input = (props: TaipyInputProps) => {
                 inputProps={{
                     step: props.step ? props.step : 1,
                 }}
+                InputProps={{
+                    endAdornment: (
+                        <>
+                            <IconButton
+                                size="small"
+                                onMouseDown={handleUpStepperMouseDown}
+                            >
+                                ▲
+                            </IconButton>
+                            <IconButton
+                                size="small"
+                                onMouseDown={handleDownStepperMouseDown}
+                            >
+                                ▼
+                            </IconButton>
+                        </>
+                    ),
+                }}
                 label={props.label}
                 onChange={handleInput}
-                onClick={handleClick}
                 disabled={!active}
                 onKeyDown={handleAction}
                 multiline={multiline}
diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
index 6052b0e2f6..f494c03ea9 100644
--- a/taipy/gui/viselements.json
+++ b/taipy/gui/viselements.json
@@ -133,6 +133,18 @@
                         "type": "str",
                         "default_value": "None",
                         "doc": "The label associated with the input."
+                    },
+                    {
+                        "name": "step",
+                        "type": "int|float",
+                        "default_value": "1",
+                        "doc": "The amount that the value changes on each increment or decrement."
+                    },
+                    {
+                        "name": "step_multiplier",
+                        "type": "int|float",
+                        "default_value": "10",
+                        "doc": "The amount that the value changes on each increment or decrement when the shift key is pressed."
                     }
                 ]
             }

From 3611ef751281c49977dcc48da4d2d4a48c81adff Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Sat, 22 Jun 2024 20:14:52 +0700
Subject: [PATCH 3/5] step & step_multiplier example

---
 doc/gui/examples/controls/number-step.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/gui/examples/controls/number-step.py b/doc/gui/examples/controls/number-step.py
index 28e359d589..0ddcd8e9e2 100644
--- a/doc/gui/examples/controls/number-step.py
+++ b/doc/gui/examples/controls/number-step.py
@@ -18,7 +18,7 @@
 value = 50
 
 page = """
-<|{value}|number|>
+<|{value}|number|step=1|step_multiplier=6|>
 """
 
 Gui(page).run()

From b85030ef51633af9dffacefc90aea80206a0fe41 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Thu, 27 Jun 2024 05:13:09 +0700
Subject: [PATCH 4/5] Isolating complex part + refactoring the viselements.json

---
 doc/gui/examples/controls/number-step.py      |  2 +-
 .../taipy-gui/src/components/Taipy/Input.tsx  | 42 +++++++++++--------
 .../taipy-gui/src/components/Taipy/utils.ts   |  2 +
 taipy/gui/_renderers/factory.py               |  4 +-
 taipy/gui/viselements.json                    |  8 ++--
 5 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/doc/gui/examples/controls/number-step.py b/doc/gui/examples/controls/number-step.py
index 0ddcd8e9e2..809c369ee9 100644
--- a/doc/gui/examples/controls/number-step.py
+++ b/doc/gui/examples/controls/number-step.py
@@ -18,7 +18,7 @@
 value = 50
 
 page = """
-<|{value}|number|step=1|step_multiplier=6|>
+<|{value}|number|step=2|>
 """
 
 Gui(page).run()
diff --git a/frontend/taipy-gui/src/components/Taipy/Input.tsx b/frontend/taipy-gui/src/components/Taipy/Input.tsx
index 4619631220..998ca0e706 100644
--- a/frontend/taipy-gui/src/components/Taipy/Input.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Input.tsx
@@ -66,6 +66,8 @@ const Input = (props: TaipyInputProps) => {
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
     const active = useDynamicProperty(props.active, props.defaultActive, true);
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
+    const step = useDynamicProperty(props.step, props.defaultStep, 1);
+    const stepMultiplier = useDynamicProperty(props.stepMultiplier, props.defaultStepMultiplier, 10);
 
     const handleInput = useCallback(
         (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -91,10 +93,10 @@ const Input = (props: TaipyInputProps) => {
     const handleAction = useCallback(
         (evt: KeyboardEvent<HTMLDivElement>) => {
             if (evt.shiftKey && evt.key === 'ArrowUp') {
-                setValue(((Number(evt.currentTarget.querySelector("input")?.value || 0) + (props.step || 1) * (props.stepMultiplier || 10) - (props.step || 1)).toString()));
+                setValue(((Number(evt.currentTarget.querySelector("input")?.value || 0) + (step || 1) * (stepMultiplier || 10) - (step || 1)).toString()));
             }
             if (evt.shiftKey && evt.key === 'ArrowDown') {
-                setValue(((Number(evt.currentTarget.querySelector("input")?.value || 0) - (props.step || 1) * (props.stepMultiplier || 10) + (props.step || 1)).toString()));
+                setValue(((Number(evt.currentTarget.querySelector("input")?.value || 0) - (step || 1) * (stepMultiplier || 10) + (step || 1)).toString()));
             }
             if (!evt.shiftKey && !evt.ctrlKey && !evt.altKey && actionKeys.includes(evt.key)) {
                 const val = evt.currentTarget.querySelector("input")?.value;
@@ -109,31 +111,35 @@ const Input = (props: TaipyInputProps) => {
                 evt.preventDefault();
             }
         },
-        [actionKeys, props.step, props.stepMultiplier, changeDelay, onAction, dispatch, id, module, updateVarName, onChange, propagate]
+        [actionKeys, step, stepMultiplier, changeDelay, onAction, dispatch, id, module, updateVarName, onChange, propagate]
     );
 
     const roundBasedOnStep = useMemo(() => {
-        const stepString = (props.step || 1).toString();
+        const stepString = (step || 1).toString();
         const decimalPlaces = stepString.includes('.') ? stepString.split('.')[1].length : 0;
         const multiplier = Math.pow(10, decimalPlaces);
         return (value: number) => Math.round(value * multiplier) / multiplier;
-    }, [props.step]);
+    }, [step]);
+
+    const calculateNewValue = useMemo(() => {
+        return (prevValue: string, step: number, stepMultiplier: number, shiftKey: boolean, increment: boolean) => {
+            const multiplier = shiftKey ? stepMultiplier : 1;
+            const change = step * multiplier * (increment ? 1 : -1);
+            return roundBasedOnStep(Number(prevValue) + change).toString();
+        };
+    }, [roundBasedOnStep]);
+
+    const handleStepperMouseDown = useCallback((event: React.MouseEvent<HTMLButtonElement>, increment: boolean) => {
+        setValue(prevValue => calculateNewValue(prevValue, step || 1, stepMultiplier || 10, event.shiftKey, increment));
+    }, [step, stepMultiplier, calculateNewValue]);
 
     const handleUpStepperMouseDown = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-        if (event.shiftKey) {
-            setValue(prevValue => roundBasedOnStep(Number(prevValue) + (props.step || 1) * (props.stepMultiplier || 10)).toString());
-        } else {
-            setValue(prevValue => roundBasedOnStep(Number(prevValue) + (props.step || 1)).toString())
-        }
-    }, [props.step, props.stepMultiplier, roundBasedOnStep])
+        handleStepperMouseDown(event, true);
+    }, [handleStepperMouseDown]);
 
     const handleDownStepperMouseDown = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-        if (event.shiftKey) {
-            setValue(prevValue => roundBasedOnStep(Number(prevValue) - (props.step || 1) * (props.stepMultiplier || 10)).toString());
-        } else {
-            setValue(prevValue => roundBasedOnStep(Number(prevValue) - (props.step || 1)).toString())
-        }
-    }, [props.step, props.stepMultiplier, roundBasedOnStep])
+        handleStepperMouseDown(event, false);
+    }, [handleStepperMouseDown]);
 
     useEffect(() => {
         if (props.value !== undefined) {
@@ -151,7 +157,7 @@ const Input = (props: TaipyInputProps) => {
                 type={type}
                 id={id}
                 inputProps={{
-                    step: props.step ? props.step : 1,
+                    step: step ? step : 1,
                 }}
                 InputProps={{
                     endAdornment: (
diff --git a/frontend/taipy-gui/src/components/Taipy/utils.ts b/frontend/taipy-gui/src/components/Taipy/utils.ts
index 76e6e28633..20641d67e1 100644
--- a/frontend/taipy-gui/src/components/Taipy/utils.ts
+++ b/frontend/taipy-gui/src/components/Taipy/utils.ts
@@ -49,7 +49,9 @@ export interface TaipyInputProps extends TaipyActiveProps, TaipyChangeProps, Tai
     value: string;
     defaultValue?: string;
     step?: number;
+    defaultStep?: number;
     stepMultiplier?: number;
+    defaultStepMultiplier?: number;
     changeDelay?: number;
     onAction?: string;
     actionKeys?: string;
diff --git a/taipy/gui/_renderers/factory.py b/taipy/gui/_renderers/factory.py
index 281092f703..f221613031 100644
--- a/taipy/gui/_renderers/factory.py
+++ b/taipy/gui/_renderers/factory.py
@@ -386,8 +386,8 @@ class _Factory:
         .set_attributes(
             [
                 ("active", PropertyType.dynamic_boolean, True),
-                ("step", PropertyType.number),
-                ("step_multiplier", PropertyType.number),
+                ("step", PropertyType.dynamic_number, 1),
+                ("step_multiplier", PropertyType.dynamic_number, 10),
                 ("hover_text", PropertyType.dynamic_string),
                 ("on_change", PropertyType.function),
                 ("on_action", PropertyType.function),
diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
index f494c03ea9..99f177e772 100644
--- a/taipy/gui/viselements.json
+++ b/taipy/gui/viselements.json
@@ -136,15 +136,15 @@
                     },
                     {
                         "name": "step",
-                        "type": "int|float",
+                        "type": "dynamic(int|float)",
                         "default_value": "1",
-                        "doc": "The amount that the value changes on each increment or decrement."
+                        "doc": "The amount by which the value is incremented or decremented when the user clicks one of the arrow buttons."
                     },
                     {
                         "name": "step_multiplier",
-                        "type": "int|float",
+                        "type": "dynamic(int|float)",
                         "default_value": "10",
-                        "doc": "The amount that the value changes on each increment or decrement when the shift key is pressed."
+                        "doc": "A factor that multiplies <i>step</i> when the user presses the Shift key while clicking one of the arrow buttons."
                     }
                 ]
             }

From 1d6239f47303a974189017767d4b24a43db7ddf4 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Sat, 29 Jun 2024 17:44:06 +0700
Subject: [PATCH 5/5] change to MUI icons

---
 frontend/taipy-gui/src/components/Taipy/Input.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/Input.tsx b/frontend/taipy-gui/src/components/Taipy/Input.tsx
index 998ca0e706..fc8b60d1be 100644
--- a/frontend/taipy-gui/src/components/Taipy/Input.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Input.tsx
@@ -16,6 +16,8 @@ import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import {styled} from '@mui/material/styles';
 import IconButton from "@mui/material/IconButton";
+import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 
 import {createSendActionNameAction, createSendUpdateAction} from "../../context/taipyReducers";
 import {TaipyInputProps} from "./utils";
@@ -28,7 +30,7 @@ const StyledTextField = styled(TextField)({
         display: 'none',
     },
     '& input[type=number]': {
-        '-moz-appearance': 'textfield',
+        'MozAppearance': 'textfield',
     },
 });
 
@@ -152,7 +154,7 @@ const Input = (props: TaipyInputProps) => {
             <StyledTextField
                 margin="dense"
                 hiddenLabel
-                value={value}
+                value={value ?? ""}
                 className={className}
                 type={type}
                 id={id}
@@ -166,13 +168,13 @@ const Input = (props: TaipyInputProps) => {
                                 size="small"
                                 onMouseDown={handleUpStepperMouseDown}
                             >
-                                ▲
+                                <ArrowDropUpIcon />
                             </IconButton>
                             <IconButton
                                 size="small"
                                 onMouseDown={handleDownStepperMouseDown}
                             >
-                                ▼
+                                <ArrowDropDownIcon />
                             </IconButton>
                         </>
                     ),