From eb78f36a8d7bc41ba9c48843e2fe8971722c70fb Mon Sep 17 00:00:00 2001
From: David Simpson <45690499+davegarthsimpson@users.noreply.github.com>
Date: Thu, 28 Jul 2022 17:44:05 +0200
Subject: [PATCH 1/2] remove state from stepper input and simplify

---
 .../dialogs/settings/settings-step-input.tsx  | 95 ++++---------------
 1 file changed, 19 insertions(+), 76 deletions(-)

diff --git a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
index 458266fa9..78bdc149b 100644
--- a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
@@ -1,5 +1,6 @@
 import * as React from '@theia/core/shared/react';
 import classnames from 'classnames';
+import _ = require('lodash');
 
 interface SettingsStepInputProps {
   value: number;
@@ -16,64 +17,26 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
   const { value, setSettingsStateValue, step, maxValue, minValue, classNames } =
     props;
 
-  const [stepUpDisabled, setStepUpDisabled] = React.useState(false);
-  const [stepDownDisabled, setStepDownDisabled] = React.useState(false);
-
-  const onStepUp = (): void => {
-    const valueRoundedToScale = Math.ceil(value / step) * step;
-    const calculatedValue =
-      valueRoundedToScale === value ? value + step : valueRoundedToScale;
-    const newValue = limitValueByCondition(
-      calculatedValue,
-      maxValue,
-      calculatedValue >= maxValue,
-      disableStepUp
-    );
-
-    setSettingsStateValue(newValue);
-  };
-
-  const onStepDown = (): void => {
-    const valueRoundedToScale = Math.floor(value / step) * step;
+  const onStep = (
+    roundingOperation: 'ceil' | 'floor',
+    stepOperation: (a: number, b: number) => number
+  ): void => {
+    const valueRoundedToScale = Math[roundingOperation](value / step) * step;
     const calculatedValue =
-      valueRoundedToScale === value ? value - step : valueRoundedToScale;
-    const newValue = limitValueByCondition(
-      calculatedValue,
-      minValue,
-      calculatedValue <= minValue,
-      disableStepDown
-    );
+      valueRoundedToScale === value
+        ? stepOperation(value, step)
+        : valueRoundedToScale;
+    const newValue = _.clamp(calculatedValue, minValue, maxValue);
 
     setSettingsStateValue(newValue);
   };
 
-  const limitValueByCondition = (
-    calculatedValue: number,
-    limitedValue: number,
-    condition: boolean,
-    onConditionTrue: () => void,
-    onConditionFalse = enableButtons
-  ): number => {
-    if (condition) {
-      onConditionTrue();
-      return limitedValue;
-    } else {
-      onConditionFalse();
-      return calculatedValue;
-    }
-  };
-
-  const enableButtons = (): void => {
-    setStepUpDisabled(false);
-    setStepDownDisabled(false);
-  };
-
-  const disableStepUp = (): void => {
-    setStepUpDisabled(true);
+  const onStepUp = (): void => {
+    onStep('ceil', _.add);
   };
 
-  const disableStepDown = (): void => {
-    setStepDownDisabled(true);
+  const onStepDown = (): void => {
+    onStep('floor', _.subtract);
   };
 
   const onUserInput = (event: React.ChangeEvent<HTMLInputElement>): void => {
@@ -86,34 +49,14 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
     const number = Number(eventValue);
 
     if (!isNaN(number) && number !== value) {
-      let newValue;
-      if (number > value) {
-        newValue = limitValueByCondition(
-          number,
-          maxValue,
-          number >= maxValue,
-          disableStepUp
-        );
-      } else {
-        newValue = limitValueByCondition(
-          number,
-          minValue,
-          number <= minValue,
-          disableStepDown
-        );
-      }
+      const newValue = _.clamp(number, minValue, maxValue);
 
       setSettingsStateValue(newValue);
     }
   };
 
-  // the component does not unmount when we close the settings dialog
-  // in theia which necessitates the below useEffect
-  React.useEffect(() => {
-    if (value > minValue && value < maxValue) {
-      enableButtons();
-    }
-  }, [value, minValue, maxValue]);
+  const upDisabled = value >= maxValue;
+  const downDisabled = value <= minValue;
 
   return (
     <div className="settings-step-input-container">
@@ -127,14 +70,14 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
       <div className="settings-step-input-buttons-container">
         <button
           className="settings-step-input-button settings-step-input-up-button"
-          disabled={stepUpDisabled}
+          disabled={upDisabled}
           onClick={onStepUp}
         >
           &#9662;
         </button>
         <button
           className="settings-step-input-button"
-          disabled={stepDownDisabled}
+          disabled={downDisabled}
           onClick={onStepDown}
         >
           &#9662;

From 5216fafe48e39571a109dcb113187007da6a66b5 Mon Sep 17 00:00:00 2001
From: David Simpson <45690499+davegarthsimpson@users.noreply.github.com>
Date: Fri, 29 Jul 2022 09:51:55 +0200
Subject: [PATCH 2/2] get rid of lodash

---
 .../dialogs/settings/settings-step-input.tsx        | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
index 78bdc149b..8f2fd3a3c 100644
--- a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
@@ -1,6 +1,5 @@
 import * as React from '@theia/core/shared/react';
 import classnames from 'classnames';
-import _ = require('lodash');
 
 interface SettingsStepInputProps {
   value: number;
@@ -17,6 +16,10 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
   const { value, setSettingsStateValue, step, maxValue, minValue, classNames } =
     props;
 
+  const clamp = (value: number, min: number, max: number): number => {
+    return Math.min(Math.max(value, min), max);
+  };
+
   const onStep = (
     roundingOperation: 'ceil' | 'floor',
     stepOperation: (a: number, b: number) => number
@@ -26,17 +29,17 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
       valueRoundedToScale === value
         ? stepOperation(value, step)
         : valueRoundedToScale;
-    const newValue = _.clamp(calculatedValue, minValue, maxValue);
+    const newValue = clamp(calculatedValue, minValue, maxValue);
 
     setSettingsStateValue(newValue);
   };
 
   const onStepUp = (): void => {
-    onStep('ceil', _.add);
+    onStep('ceil', (a: number, b: number) => a + b);
   };
 
   const onStepDown = (): void => {
-    onStep('floor', _.subtract);
+    onStep('floor', (a: number, b: number) => a - b);
   };
 
   const onUserInput = (event: React.ChangeEvent<HTMLInputElement>): void => {
@@ -49,7 +52,7 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
     const number = Number(eventValue);
 
     if (!isNaN(number) && number !== value) {
-      const newValue = _.clamp(number, minValue, maxValue);
+      const newValue = clamp(number, minValue, maxValue);
 
       setSettingsStateValue(newValue);
     }