refactor: modularity

thenick775 · Dec 25, 2024 · 805177f · 805177f
1 parent b3521bd
commit 805177f
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 43 deletions.
diff --git a/gbajs3/src/components/modals/save-states.tsx b/gbajs3/src/components/modals/save-states.tsx
@@ -187,7 +187,7 @@ export const SaveStatesModal = () => {
             showSuccess={isSubmitSuccessful}
             size="small"
             type="submit"
-            sx={{ maxHeight: '40px' }}
+            sx={{ maxHeight: '40px', minWidth: 'fit-content' }}
           />
         </StyledForm>
 

diff --git a/gbajs3/src/components/shared/number-input.tsx b/gbajs3/src/components/shared/number-input.tsx
@@ -36,21 +36,47 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       else if (externalRef) externalRef.current = element;
     };
 
-    const setValue = (currentValue: number, adjustment: number): string => {
-      const newValue = currentValue + adjustment;
-      return clampValue(newValue);
-    };
-
-    const clampValue = (value: number): string => {
+    const clamp = (value: number): string => {
       if (min !== undefined && value < Number(min)) return min.toString();
       if (max !== undefined && value > Number(max)) return max.toString();
       return value.toString();
     };
 
+    const dispatchEvent = (value: string) => {
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      )?.set;
+      setter?.call(internalRef.current, value);
+      internalRef.current?.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+
+    const increment = (e: MouseEvent<HTMLButtonElement>) => {
+      preventDefault(e);
+
+      if (!internalRef.current) return;
+
+      const currentValue = internalRef.current.valueAsNumber;
+      const newValue = clamp(currentValue + step);
+
+      dispatchEvent(newValue);
+    };
+
+    const decrement = (e: MouseEvent<HTMLButtonElement>) => {
+      preventDefault(e);
+
+      if (!internalRef.current) return;
+
+      const currentValue = internalRef.current.valueAsNumber;
+      const newValue = clamp(currentValue - step);
+
+      dispatchEvent(newValue);
+    };
+
     const enforceRange = () => {
       if (internalRef.current) {
         const currentValue = Number(internalRef.current.valueAsNumber || 0);
-        internalRef.current.value = clampValue(currentValue);
+        internalRef.current.value = clamp(currentValue);
         internalRef.current.dispatchEvent(
           new Event('input', { bubbles: true })
         );
@@ -68,53 +94,32 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           input: {
             sx: { paddingRight: '8px' },
             endAdornment: (
-              <InputAdornment position="end">
+              <InputAdornment
+                position="end"
+                sx={{
+                  position: 'absolute',
+                  paddingRight: '8px',
+                  right: '0px',
+                  height: '100%',
+                  maxHeight: '100%'
+                }}
+              >
                 <Stack spacing={0.1}>
                   <IconButton
                     aria-label="Increment"
                     disabled={disabled}
-                    onClick={(e) => {
-                      preventDefault(e);
-                      if (internalRef.current) {
-                        const setter = Object.getOwnPropertyDescriptor(
-                          window.HTMLInputElement.prototype,
-                          'value'
-                        )?.set;
-                        setter?.call(
-                          internalRef.current,
-                          setValue(internalRef.current.valueAsNumber, step)
-                        );
-                        internalRef.current.dispatchEvent(
-                          new Event('input', { bubbles: true })
-                        );
-                      }
-                    }}
+                    onClick={increment}
                     {...commonAdornmentButtonProps}
                   >
-                    <BiSolidUpArrow fontSize={size} />
+                    <BiSolidUpArrow fontSize={16} />
                   </IconButton>
                   <IconButton
                     aria-label="Decrement"
                     disabled={disabled}
-                    onClick={(e) => {
-                      preventDefault(e);
-                      if (internalRef.current) {
-                        const setter = Object.getOwnPropertyDescriptor(
-                          window.HTMLInputElement.prototype,
-                          'value'
-                        )?.set;
-                        setter?.call(
-                          internalRef.current,
-                          setValue(internalRef.current.valueAsNumber, -step)
-                        );
-                        internalRef.current.dispatchEvent(
-                          new Event('input', { bubbles: true })
-                        );
-                      }
-                    }}
+                    onClick={decrement}
                     {...commonAdornmentButtonProps}
                   >
-                    <BiSolidDownArrow fontSize={size} />
+                    <BiSolidDownArrow fontSize={16} />
                   </IconButton>
                 </Stack>
               </InputAdornment>