From 9563063d765f1c927711c86a6a7ab9fe90a2bcc2 Mon Sep 17 00:00:00 2001
From: Aarron Lee <aclee91@gmail.com>
Date: Thu, 4 Jan 2024 15:23:27 -0500
Subject: [PATCH] add int slider

---
 src/components/HhdComponent.tsx | 24 ++++++++++++++++
 src/components/HhdIntSlider.tsx | 50 +++++++++++++++++++++++++++++++++
 src/index.tsx                   |  2 --
 src/redux-modules/hhdSlice.tsx  |  2 ++
 4 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 src/components/HhdIntSlider.tsx

diff --git a/src/components/HhdComponent.tsx b/src/components/HhdComponent.tsx
index ab12cd4..c59aeb0 100644
--- a/src/components/HhdComponent.tsx
+++ b/src/components/HhdComponent.tsx
@@ -6,6 +6,7 @@ import { get } from "lodash";
 import HhdDropdown from "./HhdDropdown";
 import HhdModesDropdown from "./HhdModesDropdown";
 import { useUpdateHhdStatePending } from "../hooks/controller";
+import HhdIntSlider from "./HhdIntSlider";
 // import { getLogInfo } from "../backend/utils";
 
 interface HhdComponentType extends SettingsType {
@@ -29,6 +30,8 @@ const HhdComponent: VFC<HhdComponentType> = ({
   statePath,
   children,
   options,
+  min,
+  max,
   renderChild,
   modes,
   depth = 0,
@@ -124,6 +127,27 @@ const HhdComponent: VFC<HhdComponentType> = ({
     );
   }
 
+  if (type === "int" && min !== undefined && max && min < max) {
+    // int slider component
+    const value = get(state, `${statePath}`, defaultValue);
+
+    const handleSliderChange = (value: any) => {
+      return updateState(`${statePath}`, value);
+    };
+
+    return (
+      <HhdIntSlider
+        value={value}
+        defaultValue={defaultValue}
+        min={min}
+        max={max}
+        title={title}
+        handleSliderChange={handleSliderChange}
+        disabled={updating}
+      />
+    );
+  }
+
   if (type === "multiple" && options) {
     // dropdown component
     const onChange = ({ value }: { value: number }) => {
diff --git a/src/components/HhdIntSlider.tsx b/src/components/HhdIntSlider.tsx
new file mode 100644
index 0000000..1ae3a8f
--- /dev/null
+++ b/src/components/HhdIntSlider.tsx
@@ -0,0 +1,50 @@
+import { FC } from "react";
+import { SliderField } from "decky-frontend-lib";
+
+type PropType = {
+  value: number;
+  defaultValue: number;
+  title: string;
+  hint?: string;
+  min: number;
+  max: number;
+  handleSliderChange?: any;
+  disabled: boolean;
+};
+
+const HhdIntSlider: FC<PropType> = ({
+  value,
+  defaultValue,
+  title,
+  hint,
+  min,
+  max,
+  handleSliderChange,
+  disabled,
+  ...otherProps
+}) => {
+
+
+  const onChange = (value: number) => {
+    return handleSliderChange(value);
+  };
+
+  return (
+    <>
+      <SliderField
+        label={title}
+        value={value || defaultValue}
+        disabled={disabled}
+        min={min}
+        max={max}
+        step={1}
+        showValue
+        bottomSeparator={"none"}
+        onChange={onChange}
+        {...otherProps}
+      />
+    </>
+  );
+};
+
+export default HhdIntSlider;
diff --git a/src/index.tsx b/src/index.tsx
index cb0f88b..3c13198 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,7 +2,6 @@ import {
   definePlugin,
   ServerAPI,
   staticClasses,
-  SteamSpinner,
 } from "decky-frontend-lib";
 import { useEffect, VFC } from "react";
 import { FaGamepad } from "react-icons/fa";
@@ -23,7 +22,6 @@ import {
   fetchHhdSettingsState,
 } from "./redux-modules/hhdAsyncThunks";
 import HhdState from "./components/HhdState";
-// import AdvancedOptions from "./components/AdvancedOptions";
 
 const Content: VFC<{ serverAPI: ServerAPI }> = ({ serverAPI }) => {
   const { displayName } = useSelector(selectCurrentGameInfo);
diff --git a/src/redux-modules/hhdSlice.tsx b/src/redux-modules/hhdSlice.tsx
index 9cafdf7..fe70874 100644
--- a/src/redux-modules/hhdSlice.tsx
+++ b/src/redux-modules/hhdSlice.tsx
@@ -21,6 +21,8 @@ export type SettingsType = {
   hint?: string;
   options?: any;
   modes?: any;
+  min?: number;
+  max?: number;
   children?: { [childName: string]: SettingsType };
 };