refactor: slightly more accessible and consistent number input (#415)

CSCI-SHU-410-SE-Project · Feb 12, 2025 · f21c874 · f21c874
1 parent 7e2ba34
commit f21c874
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 86 deletions.
diff --git a/src/manager/App.tsx b/src/manager/App.tsx
@@ -19,7 +19,6 @@ const tabs = [
 
 const App = () => {
   const theme = useAppSettingsStore((state) => state.theme);
-  console.log("Rerendered!");
 
   useExitAppListener();
   useInitialRescan();

diff --git a/src/manager/components/IntegerInput.tsx b/src/manager/components/IntegerInput.tsx
@@ -0,0 +1,113 @@
+import { Box, BoxProps, Reset } from "@radix-ui/themes";
+import { ChangeEvent, KeyboardEvent, useCallback } from "react";
+
+type IntegerInputProps = BoxProps & {
+  value: number;
+  onValueChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  readOnly?: boolean;
+};
+
+// Snap value to the nearest step within the min and max range
+function snap(value: number, min: number, max: number, step: number) {
+  return Math.min(
+    max,
+    Math.max(min, min + Math.round((value - min) / step) * step),
+  );
+}
+
+const IntegerInput = ({
+  value,
+  onValueChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  disabled = false,
+  readOnly = false,
+  ...boxProps
+}: IntegerInputProps) => {
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const targetValue = Number(event.target.value);
+      if (!Number.isInteger(targetValue)) return;
+      onValueChange(snap(targetValue, min, max, step));
+    },
+    [onValueChange, min, max, step],
+  );
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    let nextValue = value;
+
+    switch (event.key) {
+      case "ArrowUp":
+        event.preventDefault();
+        if (event.shiftKey) nextValue += 10 * step;
+        else nextValue += step;
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        if (event.shiftKey) nextValue -= 10 * step;
+        else nextValue -= step;
+        break;
+      case "PageUp":
+        event.preventDefault();
+        nextValue += 10 * step;
+        break;
+      case "PageDown":
+        event.preventDefault();
+        nextValue -= 10 * step;
+        break;
+      case "Home":
+        if (!Number.isFinite(min)) return;
+        event.preventDefault();
+        nextValue = min;
+        break;
+      case "End":
+        if (!Number.isFinite(max)) return;
+        event.preventDefault();
+        nextValue = max;
+        break;
+      default:
+        return;
+    }
+
+    onValueChange(snap(nextValue, min, max, step));
+  };
+
+  return (
+    <Box
+      pl="2"
+      css={{
+        backgroundColor: "var(--gray-5)",
+        borderRadius: "var(--radius-2)",
+        lineHeight: "1.6",
+      }}
+      {...boxProps}
+      asChild
+    >
+      <Reset>
+        <input
+          type="number"
+          value={value}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          readOnly={readOnly}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          aria-valuenow={value}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-disabled={disabled}
+          aria-readonly={readOnly}
+        />
+      </Reset>
+    </Box>
+  );
+};
+
+export default IntegerInput;
diff --git a/src/manager/components/Widgets/NumberInput.tsx b/src/manager/components/Widgets/NumberInput.tsx
diff --git a/src/manager/components/Widgets/Settings.tsx b/src/manager/components/Widgets/Settings.tsx
@@ -1,40 +1,60 @@
 import { Flex, Table } from "@radix-ui/themes";
-import { FaTimes } from "react-icons/fa";
+import { LiaTimesSolid } from "react-icons/lia";
 import { updateWidgetSettings, useWidgetsStore } from "../../hooks";
 import { memo, useCallback } from "react";
-import NumberInput from "./NumberInput";
+import IntegerInput from "../IntegerInput";
 
 const X = ({ id }: SettingsProps) => {
   const x = useWidgetsStore((state) => state.widgets[id].settings.x);
-  const onChange = useCallback(
+  const onValueChange = useCallback(
     (value: number) => updateWidgetSettings(id, { x: value }, true),
     [id],
   );
 
-  return <NumberInput value={x} min={0} width="50px" onChange={onChange} />;
+  return (
+    <IntegerInput
+      value={x}
+      min={0}
+      onValueChange={onValueChange}
+      width="60px"
+    />
+  );
 };
 
 const Y = ({ id }: SettingsProps) => {
   const y = useWidgetsStore((state) => state.widgets[id].settings.y);
-  const onChange = useCallback(
+  const onValueChange = useCallback(
     (value: number) => updateWidgetSettings(id, { y: value }, true),
     [id],
   );
 
-  return <NumberInput value={y} min={0} width="50px" onChange={onChange} />;
+  return (
+    <IntegerInput
+      value={y}
+      min={0}
+      onValueChange={onValueChange}
+      width="60px"
+    />
+  );
 };
 
 const Opacity = ({ id }: SettingsProps) => {
   const opacity = useWidgetsStore(
     (state) => state.widgets[id].settings.opacity,
   );
-  const onChange = useCallback(
+  const onValueChange = useCallback(
     (value: number) => updateWidgetSettings(id, { opacity: value }, true),
     [id],
   );
 
   return (
-    <NumberInput value={opacity} min={0} width="50px" onChange={onChange} />
+    <IntegerInput
+      value={opacity}
+      min={0}
+      max={100}
+      onValueChange={onValueChange}
+      width="60px"
+    />
   );
 };
 
@@ -67,7 +87,7 @@ const Settings = memo(({ id }: SettingsProps) => {
           <Table.Cell>
             <Flex gap="1" align="center">
               <X id={id} />
-              <FaTimes size={12} color="var(--gray-11)" />
+              <LiaTimesSolid size={12} color="var(--gray-11)" />
               <Y id={id} />
             </Flex>
           </Table.Cell>

diff --git a/...ager/components/Widgets/WidgetTrigger.tsx → src/manager/components/Widgets/Trigger.tsx b/...ager/components/Widgets/WidgetTrigger.tsx → src/manager/components/Widgets/Trigger.tsx
@@ -3,12 +3,12 @@ import { WidgetConfigType } from "../../../types";
 import { useWidgetsStore } from "../../hooks";
 import { memo } from "react";
 
-interface WidgetTriggerProps {
+interface TriggerProps {
   id: string;
   value: string;
 }
 
-const WidgetTrigger = memo(({ id, value }: WidgetTriggerProps) => {
+const Trigger = memo(({ id, value }: TriggerProps) => {
   const config = useWidgetsStore((state) => state.widgets[id].config);
 
   return (
@@ -47,4 +47,4 @@ const WidgetTrigger = memo(({ id, value }: WidgetTriggerProps) => {
   );
 });
 
-export default WidgetTrigger;
+export default Trigger;
diff --git a/src/manager/components/Widgets/index.tsx b/src/manager/components/Widgets/index.tsx
@@ -1,8 +1,8 @@
 import { Flex, ScrollArea, Separator, Tabs } from "@radix-ui/themes";
-import WidgetTrigger from "./WidgetTrigger";
 import { useWidgetsStore } from "../../hooks";
 import { memo } from "react";
 import { useShallow } from "zustand/shallow";
+import Trigger from "./Trigger";
 import GlobalActions from "./GlobalActions";
 import Config from "./Config";
 import Settings from "./Settings";
@@ -21,7 +21,7 @@ const WidgetsTab = memo(() => {
             <ScrollArea scrollbars="vertical" asChild>
               <Flex direction="column">
                 {ids.map((id, index) => (
-                  <WidgetTrigger key={id} id={id} value={`tab${index}`} />
+                  <Trigger key={id} id={id} value={`tab${index}`} />
                 ))}
               </Flex>
             </ScrollArea>