@decky/ui 4.11.6 → 4.12.0

package/dist/custom-components/ReorderableList.d.ts

@@ -13,6 +13,7 @@ export type ReorderableListProps<T> = {
     }>;
     fieldProps?: FieldProps;
     animate?: boolean;
+    disableReordering?: boolean;
 };
 export declare function ReorderableList<T>(props: ReorderableListProps<T>): import("react/jsx-runtime").JSX.Element;
 export type ReorderableListEntryProps<T> = {

package/dist/custom-components/ReorderableList.js

@@ -9,7 +9,15 @@ export function ReorderableList(props) {
     useEffect(() => {
         setEntryList([...props.entries].sort((a, b) => a.position - b.position));
     }, [props.entries]);
+    useEffect(() => {
+        if (props.disableReordering && reorderEnabled) {
+            setReorderEnabled(false);
+            props.onSave(entryList);
+        }
+    }, [props.disableReordering, reorderEnabled, entryList]);
     function toggleReorderEnabled() {
+        if (props.disableReordering)
+            return;
         let newReorderValue = !reorderEnabled;
         setReorderEnabled(newReorderValue);
         if (!newReorderValue) {
@@ -32,7 +40,7 @@ export function ReorderableList(props) {
                 flexDirection: 'column',
                 justifyContent: 'flex-start',
                 alignContent: 'stretch',
-            }, children: _jsx(Focusable, { onSecondaryButton: toggleReorderEnabled, onSecondaryActionDescription: reorderEnabled ? 'Save Order' : 'Reorder', onClick: toggleReorderEnabled, onButtonDown: saveOnBackout, children: entryList.map((entry) => (_jsx(ReorderableItem, { animate: props.animate, listData: entryList, entryData: entry, reorderEntryFunc: setEntryList, reorderEnabled: reorderEnabled, fieldProps: props.fieldProps, children: props.interactables ? _jsx(props.interactables, { entry: entry }) : null }))) }) }) }));
+            }, children: _jsx(Focusable, { onSecondaryButton: props.disableReordering ? undefined : toggleReorderEnabled, onSecondaryActionDescription: props.disableReordering ? undefined : reorderEnabled ? 'Save Order' : 'Reorder', onClick: props.disableReordering ? undefined : toggleReorderEnabled, onButtonDown: saveOnBackout, children: entryList.map((entry) => (_jsx(ReorderableItem, { animate: props.animate, listData: entryList, entryData: entry, reorderEntryFunc: setEntryList, reorderEnabled: reorderEnabled, fieldProps: props.fieldProps, children: props.interactables ? _jsx(props.interactables, { entry: entry }) : null }))) }) }) }));
 }
 function ReorderableItem(props) {
     const [isSelected, _setIsSelected] = useState(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "4.11.6",
+  "version": "4.12.0",
   "description": "A library for interacting with the Steam frontend in Decky plugins and elsewhere.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/custom-components/ReorderableList.tsx

@@ -18,6 +18,7 @@ export type ReorderableEntry<T> = {
  * Properties for a ReorderableList component of type <T>.
  *
  * @param animate If the list should animate. @default true
+ * @param disableReordering If true, prevents entering reordering mode and hides reorder instructions. @default false
  */
 export type ReorderableListProps<T> = {
   entries: ReorderableEntry<T>[];
@@ -25,6 +26,7 @@ export type ReorderableListProps<T> = {
   interactables?: JSXElementConstructor<{ entry: ReorderableEntry<T> }>;
   fieldProps?: FieldProps;
   animate?: boolean;
+  disableReordering?: boolean;
 };
 
 /**
@@ -43,7 +45,16 @@ export function ReorderableList<T>(props: ReorderableListProps<T>) {
     setEntryList([...props.entries].sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position));
   }, [props.entries]);
 
+  useEffect(() => {
+    if (props.disableReordering && reorderEnabled) {
+      setReorderEnabled(false);
+      props.onSave(entryList);
+    }
+  }, [props.disableReordering, reorderEnabled, entryList]);
+
   function toggleReorderEnabled(): void {
+    if (props.disableReordering) return;
+
     let newReorderValue = !reorderEnabled;
     setReorderEnabled(newReorderValue);
 
@@ -75,9 +86,9 @@ export function ReorderableList<T>(props: ReorderableListProps<T>) {
         }}
       >
         <Focusable
-          onSecondaryButton={toggleReorderEnabled}
-          onSecondaryActionDescription={reorderEnabled ? 'Save Order' : 'Reorder'}
-          onClick={toggleReorderEnabled}
+          onSecondaryButton={props.disableReordering ? undefined : toggleReorderEnabled}
+          onSecondaryActionDescription={props.disableReordering ? undefined : reorderEnabled ? 'Save Order' : 'Reorder'}
+          onClick={props.disableReordering ? undefined : toggleReorderEnabled}
           onButtonDown={saveOnBackout}
         >
           {entryList.map((entry: ReorderableEntry<T>) => (