feat: support for non-interactable reordering

SteamDeckHomebrew · Feb 1, 2023 · dbd01b1 · dbd01b1
1 parent 47a6fdd
commit dbd01b1
Showing 1 changed file with 10 additions and 17 deletions.
diff --git a/src/custom-components/ReorderableList.tsx b/src/custom-components/ReorderableList.tsx
@@ -1,7 +1,5 @@
-import { Fragment, JSXElementConstructor, ReactElement, useState } from "react"
-import { FaEllipsisH } from "react-icons/fa"
-import { DialogButton, Field, Focusable, GamepadButton } from "../deck-components"
-import { IconType } from "react-icons"
+import { Fragment, JSXElementConstructor, ReactElement, useState } from "react";
+import { Field, FieldProps, Focusable, GamepadButton } from "../deck-components";
 
 export type ReorderableEntry<T> = {
   label: string,
@@ -11,10 +9,9 @@ export type ReorderableEntry<T> = {
 
 type ListProps<T> = {
   entries: ReorderableEntry<T>[],
-  onAction: (entryReference: ReorderableEntry<T>) => void,
   onSave: (entries: ReorderableEntry<T>[]) => void,
-  secondButton?: JSXElementConstructor<{entry:ReorderableEntry<T>}>,
-  primaryIcon?:IconType
+  interactables?: JSXElementConstructor<{entry:ReorderableEntry<T>}>,
+  fieldProps?: FieldProps
 }
 
 /**
@@ -63,8 +60,8 @@ export function ReorderableList<T>(props: ListProps<T>) {
           onClick={toggleReorderEnabled}>
           {
             entryList.map((entry: ReorderableEntry<T>) => (
-              <ReorderableItem listData={entryList} entryData={entry} reorderEntryFunc={setEntryList} reorderEnabled={reorderEnabled} onAction={props.onAction} primaryIcon={props.primaryIcon ? props.primaryIcon : FaEllipsisH}>
-                {props.secondButton ? <props.secondButton entry={entry} /> : null}
+              <ReorderableItem listData={entryList} entryData={entry} reorderEntryFunc={setEntryList} reorderEnabled={reorderEnabled} fieldProps={props.fieldProps}>
+                {props.interactables ? <props.interactables entry={entry} /> : null}
               </ReorderableItem>
             ))
           }
@@ -75,13 +72,12 @@ export function ReorderableList<T>(props: ListProps<T>) {
 }
 
 type ListEntryProps<T> = {
+  fieldProps?: FieldProps,
   listData: ReorderableEntry<T>[],
   entryData: ReorderableEntry<T>,
   reorderEntryFunc: CallableFunction,
   reorderEnabled: boolean,
-  onAction: (entryReference: ReorderableEntry<T>) => void,
-  children:ReactElement|null,
-  primaryIcon: IconType
+  children:ReactElement|null
 }
 
 function ReorderableItem<T>(props: ListEntryProps<T>) {
@@ -124,12 +120,9 @@ function ReorderableItem<T>(props: ListEntryProps<T>) {
 
   return(
     // @ts-ignore
-    <Field label={props.entryData.label} style={props.reorderEnabled ? {...baseCssProps, background: "#678BA670"} : {...baseCssProps}}>
-      <Focusable style={{ display: "flex", width: "100%", position: "relative" }} onButtonDown={onReorder}>
+    <Field label={props.entryData.label} style={props.reorderEnabled ? {...baseCssProps, background: "#678BA670"} : {...baseCssProps}} {...props.fieldProps} focusable={!props.children} onButtonDown={onReorder}>
+      <Focusable style={{ display: "flex", width: "100%", position: "relative" }}>
         {props.children}
-        <DialogButton style={{ height: "40px", minWidth: "40px", width: "40px", display: "flex", justifyContent: "center", alignItems: "center", padding: "10px" }} onClick={() => props.onAction(props.entryData)} onOKButton={() => props.onAction(props.entryData)}>
-          <props.primaryIcon />
-        </DialogButton>
       </Focusable>
     </Field>
   );