From 2214f476ec71e70d8ea747546ce354377ba825fa Mon Sep 17 00:00:00 2001
From: Aarron Lee <aclee91@gmail.com>
Date: Wed, 29 Nov 2023 21:54:10 -0500
Subject: [PATCH] convert gyro dropdowns to sliders (#15)

---
 src/components/controller/GyroRemapSlider.tsx | 60 +++++++++++++++++++
 src/components/controller/RemapButtons.tsx    |  4 +-
 .../controller/gyroRemapActionDropdown.tsx    | 46 --------------
 src/components/rgb/RgbModeSlider.tsx          |  2 +-
 4 files changed, 63 insertions(+), 49 deletions(-)
 create mode 100644 src/components/controller/GyroRemapSlider.tsx
 delete mode 100644 src/components/controller/gyroRemapActionDropdown.tsx

diff --git a/src/components/controller/GyroRemapSlider.tsx b/src/components/controller/GyroRemapSlider.tsx
new file mode 100644
index 0000000..15649a1
--- /dev/null
+++ b/src/components/controller/GyroRemapSlider.tsx
@@ -0,0 +1,60 @@
+import { FC } from 'react';
+import { NotchLabel, SliderField } from 'decky-frontend-lib';
+import { Gyro, GyroRemapActions } from '../../backend/constants';
+import { useGyroRemapAction } from '../../hooks/controller';
+
+type PropType = {
+  gyro: Gyro;
+};
+
+export enum GyroModes {
+  DISABLED = 0,
+  LEFT_JOYSTICK = 1,
+  RIGHT_JOYSTICK = 2
+}
+
+const MODES: NotchLabel[] = [
+  {
+    notchIndex: GyroModes.DISABLED,
+    label: 'Disabled',
+    value: GyroModes.DISABLED
+  },
+  {
+    notchIndex: GyroModes.LEFT_JOYSTICK,
+    label: 'L-Joystick',
+    value: GyroModes.LEFT_JOYSTICK
+  },
+  {
+    notchIndex: GyroModes.RIGHT_JOYSTICK,
+    label: 'R-Joystick',
+    value: GyroModes.RIGHT_JOYSTICK
+  }
+];
+
+const GyroRemapActionDropdown: FC<PropType> = ({ gyro }) => {
+  const { gyroRemapAction, setGyroRemapAction } = useGyroRemapAction(gyro);
+
+  const handleChange = (value: number) => {
+    // known bug: typescript has wrong type for reverse mappings
+    const newMode = GyroModes[value] as GyroRemapActions;
+    return setGyroRemapAction(newMode);
+  };
+
+  return (
+    <SliderField
+      label={gyro.split('_').join(' ')}
+      value={GyroModes[gyroRemapAction]}
+      min={0}
+      max={2}
+      step={1}
+      notchCount={3}
+      notchLabels={MODES}
+      notchTicksVisible
+      showValue={false}
+      bottomSeparator="none"
+      onChange={handleChange}
+    />
+  );
+};
+
+export default GyroRemapActionDropdown;
diff --git a/src/components/controller/RemapButtons.tsx b/src/components/controller/RemapButtons.tsx
index c4c1b9f..d751818 100644
--- a/src/components/controller/RemapButtons.tsx
+++ b/src/components/controller/RemapButtons.tsx
@@ -8,7 +8,7 @@ import {
   useTouchpadEnabled
 } from '../../hooks/controller';
 import { IconRow } from '../IconRow';
-import GyroRemapActionDropdown from './gyroRemapActionDropdown';
+import GyroRemapSlider from './GyroRemapSlider';
 
 const RemapButtons: FC = () => {
   const btns = Object.values(RemappableButtons);
@@ -47,7 +47,7 @@ const RemapButtons: FC = () => {
         );
       })}
       {gyros.map((gyro, idx) => {
-        return <GyroRemapActionDropdown gyro={gyro} key={idx} />;
+        return <GyroRemapSlider gyro={gyro} key={idx} />;
       })}
     </PanelSection>
   );
diff --git a/src/components/controller/gyroRemapActionDropdown.tsx b/src/components/controller/gyroRemapActionDropdown.tsx
deleted file mode 100644
index 088167e..0000000
--- a/src/components/controller/gyroRemapActionDropdown.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { FC } from 'react';
-import { DropdownItem } from 'decky-frontend-lib';
-import { Gyro, GyroRemapActions } from '../../backend/constants';
-import { useGyroRemapAction } from '../../hooks/controller';
-
-type PropType = {
-  gyro: Gyro;
-};
-
-const GyroRemapActionDropdown: FC<PropType> = ({ gyro }) => {
-  const { gyroRemapAction, setGyroRemapAction } = useGyroRemapAction(gyro);
-
-  const dropdownOptions = Object.values(GyroRemapActions).map((action) => {
-    return {
-      data: action,
-      label: `${action.split('_').join(' ')}`,
-      value: action
-    };
-  });
-
-  return (
-    <div>
-      <DropdownItem
-        label={gyro.split('_').join(' ')}
-        bottomSeparator="none"
-        rgOptions={dropdownOptions.map((o) => {
-          return {
-            data: o.data,
-            label: o.label,
-            value: o.value
-          };
-        })}
-        selectedOption={
-          dropdownOptions.find((o) => {
-            return o.data === gyroRemapAction;
-          })?.data || GyroRemapActions.DISABLED
-        }
-        onChange={(value: any) => {
-          setGyroRemapAction(value.data);
-        }}
-      />
-    </div>
-  );
-};
-
-export default GyroRemapActionDropdown;
diff --git a/src/components/rgb/RgbModeSlider.tsx b/src/components/rgb/RgbModeSlider.tsx
index ed4e304..8fec76e 100644
--- a/src/components/rgb/RgbModeSlider.tsx
+++ b/src/components/rgb/RgbModeSlider.tsx
@@ -26,7 +26,7 @@ const RgbModeSlider: FC<PropType> = ({ controller }) => {
     { notchIndex: 2, label: 'Pulse', value: 2 }
   ];
 
-  // reverse mapping from enum is str when it actually is num
+  // known bug: typescript has incorrect type for reverse mapping from enums
   const sliderValue = Mode[mode] as any;
 
   return (