feat: made requested changes and ran prettier

src/custom-components/ReorderableList.tsx

@@ -1,26 +1,35 @@
-import { Fragment, JSXElementConstructor, ReactElement, useEffect, useState } from "react";
-import { Field, FieldProps, Focusable, GamepadButton } from "../deck-components";
+import { CSSProperties, Fragment, JSXElementConstructor, ReactElement, useEffect, useState } from 'react';
 
+import { Field, FieldProps, Focusable, GamepadButton } from '../deck-components';
+
+/**
+ * A ReorderableList entry of type <T>.
+ */
 export type ReorderableEntry<T> = {
-  label: string,
-  data?:T,
-  position:number
-}
+  label: string;
+  data?: T;
+  position: number;
+};
 
+/**
+ * Properties for a ReorderableList component of type <T>.
+ */
 type ListProps<T> = {
-  entries: ReorderableEntry<T>[],
-  onSave: (entries: ReorderableEntry<T>[]) => void,
-  interactables?: JSXElementConstructor<{entry:ReorderableEntry<T>}>,
-  fieldProps?: FieldProps
-}
+  entries: ReorderableEntry<T>[];
+  onSave: (entries: ReorderableEntry<T>[]) => void;
+  interactables?: JSXElementConstructor<{ entry: ReorderableEntry<T> }>;
+  fieldProps?: FieldProps;
+};
 
 /**
  * A component for creating reorderable lists.
- * 
- * Implementation example can be found {@link https://github.com/Tormak9970/Component-Testing-Plugin/blob/main/src/testing-window/ReorderableListTest.tsx here}.
+ *
+ * See an example implementation {@linkplain https://github.com/Tormak9970/Component-Testing-Plugin/blob/main/src/testing-window/ReorderableListTest.tsx here}.
  */
 export function ReorderableList<T>(props: ListProps<T>) {
-  const [entryList, setEntryList] = useState<ReorderableEntry<T>[]>(props.entries.sort((a:ReorderableEntry<T>, b:ReorderableEntry<T>) => a.position - b.position));
+  const [entryList, setEntryList] = useState<ReorderableEntry<T>[]>(
+    props.entries.sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position),
+  );
   const [reorderEnabled, setReorderEnabled] = useState<boolean>(false);
 
   useEffect(() => {
@@ -31,52 +40,58 @@ export function ReorderableList<T>(props: ListProps<T>) {
     let newReorderValue = !reorderEnabled;
     setReorderEnabled(newReorderValue);
 
-    if (!newReorderValue){
+    if (!newReorderValue) {
       props.onSave(entryList);
     }
   }
 
   return (
     <Fragment>
-      <style>{`
-        .reorderable-list {
-          width: inherit;
-          height: inherit;
-
-          flex: 1 1 1px;
-          scroll-padding: 48px 0px;
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-start;
-          align-content: stretch;
-        }
-      `}</style>
-      <div className="reorderable-list">
+      <div
+        style={{
+          width: 'inherit',
+          height: 'inherit',
+          flex: '1 1 1px',
+          scrollPadding: '48px 0px',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-start',
+          alignContent: 'stretch',
+        }}
+      >
         <Focusable
           onSecondaryButton={toggleReorderEnabled}
-          onSecondaryActionDescription={reorderEnabled ? "Save Order" : "Reorder"}
-          onClick={toggleReorderEnabled}>
-          {
-            entryList.map((entry: ReorderableEntry<T>) => (
-              <ReorderableItem listData={entryList} entryData={entry} reorderEntryFunc={setEntryList} reorderEnabled={reorderEnabled} fieldProps={props.fieldProps}>
-                {props.interactables ? <props.interactables entry={entry} /> : null}
-              </ReorderableItem>
-            ))
-          }
+          onSecondaryActionDescription={reorderEnabled ? 'Save Order' : 'Reorder'}
+          onClick={toggleReorderEnabled}
+        >
+          {entryList.map((entry: ReorderableEntry<T>) => (
+            <ReorderableItem
+              listData={entryList}
+              entryData={entry}
+              reorderEntryFunc={setEntryList}
+              reorderEnabled={reorderEnabled}
+              fieldProps={props.fieldProps}
+            >
+              {props.interactables ? <props.interactables entry={entry} /> : null}
+            </ReorderableItem>
+          ))}
         </Focusable>
       </div>
     </Fragment>
   );
 }
 
+/**
+ * Properties for a ReorderableItem component of type <T>
+ */
 type ListEntryProps<T> = {
-  fieldProps?: FieldProps,
-  listData: ReorderableEntry<T>[],
-  entryData: ReorderableEntry<T>,
-  reorderEntryFunc: CallableFunction,
-  reorderEnabled: boolean,
-  children: ReactElement | null
-}
+  fieldProps?: FieldProps;
+  listData: ReorderableEntry<T>[];
+  entryData: ReorderableEntry<T>;
+  reorderEntryFunc: CallableFunction;
+  reorderEnabled: boolean;
+  children: ReactElement | null;
+};
 
 function ReorderableItem<T>(props: ListEntryProps<T>) {
   const listEntries = props.listData;
@@ -91,10 +106,10 @@ function ReorderableItem<T>(props: ListEntryProps<T>) {
 
     let targetPosition: number = -1;
     if (event.detail.button == GamepadButton.DIR_DOWN) {
-      targetPosition = currentIdxValue.position+1;
+      targetPosition = currentIdxValue.position + 1;
     } else if (event.detail.button == GamepadButton.DIR_UP) {
-      targetPosition = currentIdxValue.position-1;
-    } 
+      targetPosition = currentIdxValue.position - 1;
+    }
 
     if (targetPosition >= listEntries.length || targetPosition < 0) return;
 
@@ -106,22 +121,27 @@ function ReorderableItem<T>(props: ListEntryProps<T>) {
     currentIdxValue.position = otherToUpdate.position;
     otherToUpdate.position = currentPosition;
 
-    props.reorderEntryFunc([...listEntries].sort((a:ReorderableEntry<T>, b:ReorderableEntry<T>) => a.position - b.position));
+    props.reorderEntryFunc(
+      [...listEntries].sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position),
+    );
   }
 
-  const baseCssProps = {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "100%"
+  const baseCssProps: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
   };
 
-  return(
-    // @ts-ignore
-    <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}
-      </Focusable>
+  return (
+    <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}</Focusable>
     </Field>
   );
-}
+}