jeans/arduino-ide
jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-07-24 11:46:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove state from stepper input and simplify (#1264)

Browse Source 
* remove state from stepper input and simplify

* get rid of lodash
This commit is contained in:
Dave Simpson 2022-07-29 17:44:58 +02:00 committed by GitHub
parent 40c93bc19a
commit 55927ac3dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
View File

@ -16,64 +16,30 @@ 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 clamp = (value: number, min: number, max: number): number => {
return Math.min(Math.max(value, min), max);
};
const onStepUp = (): void => {
const valueRoundedToScale = Math.ceil(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,
maxValue,
calculatedValue >= maxValue,
disableStepUp
);
valueRoundedToScale === value
? stepOperation(value, step)
: valueRoundedToScale;
const newValue = clamp(calculatedValue, minValue, maxValue);
setSettingsStateValue(newValue);
};
const onStepUp = (): void => {
onStep('ceil', (a: number, b: number) => a + b);
};
const onStepDown = (): void => {
const valueRoundedToScale = Math.floor(value / step) * step;
const calculatedValue =
valueRoundedToScale === value ? value - step : valueRoundedToScale;
const newValue = limitValueByCondition(
calculatedValue,
minValue,
calculatedValue <= minValue,
disableStepDown
);
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 disableStepDown = (): void => {
setStepDownDisabled(true);
onStep('floor', (a: number, b: number) => a - b);
};
const onUserInput = (event: React.ChangeEvent<HTMLInputElement>): void => {
@ -86,34 +52,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 +73,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;