Merge pull request #199 from moonlight-mod/notnite/number-input

moonlight-mod · Jan 23, 2025 · 97cb73f · 97cb73f
2 parents ae94d45 + 55f40b5
commit 97cb73f
Showing 1 changed file with 27 additions and 14 deletions.
diff --git a/packages/core-extensions/src/moonbase/webpackModules/ui/extensions/settings.tsx b/packages/core-extensions/src/moonbase/webpackModules/ui/extensions/settings.tsx
@@ -26,7 +26,8 @@ import {
   Button,
   useVariableSelect,
   multiSelect,
-  Select as DiscordSelect
+  Select as DiscordSelect,
+  NumberInputStepper
 } from "@moonlight-mod/wp/discord/components/common/index";
 import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
 import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
@@ -101,22 +102,34 @@ function Number({ ext, name, setting, disabled }: SettingsProps) {
   const { value, displayName, description } = useConfigEntry<number>(ext.uniqueId, name);
 
   const castedSetting = setting as NumberSettingType;
-  const min = castedSetting.min ?? 0;
-  const max = castedSetting.max ?? 100;
+  const min = castedSetting.min;
+  const max = castedSetting.max;
+
+  const onChange = (value: number) => {
+    const rounded = min == null || max == null ? Math.round(value) : Math.max(min, Math.min(max, Math.round(value)));
+    MoonbaseSettingsStore.setExtensionConfig(ext.id, name, rounded);
+  };
 
   return (
     <FormItem className={Margins.marginTop20} title={displayName}>
-      {description && <FormText>{markdownify(description)}</FormText>}
-      <Slider
-        initialValue={value ?? 0}
-        disabled={disabled}
-        minValue={castedSetting.min ?? 0}
-        maxValue={castedSetting.max ?? 100}
-        onValueChange={(value: number) => {
-          const rounded = Math.max(min, Math.min(max, Math.round(value)));
-          MoonbaseSettingsStore.setExtensionConfig(ext.id, name, rounded);
-        }}
-      />
+      {min == null || max == null ? (
+        <Flex justify={Flex.Justify.BETWEEN} direction={Flex.Direction.HORIZONTAL}>
+          {description && <FormText>{markdownify(description)}</FormText>}
+          <NumberInputStepper value={value ?? 0} onChange={onChange} />
+        </Flex>
+      ) : (
+        <>
+          {description && <FormText>{markdownify(description)}</FormText>}
+          <Slider
+            initialValue={value ?? 0}
+            disabled={disabled}
+            minValue={min}
+            maxValue={max}
+            onValueChange={onChange}
+            onValueRender={(value: number) => `${Math.round(value)}`}
+          />
+        </>
+      )}
     </FormItem>
   );
 }