wgu/decky-frontend-lib
Template
1
0
Fork 0
mirror of https://github.com/SteamDeckHomebrew/decky-frontend-lib.git synced 2026-05-20 18:10:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: support for non-interactable reordering

Browse Source
This commit is contained in:
Tormak
2023-02-01 17:24:17 -06:00
parent 47a6fddc89
commit dbd01b11ca
1 changed files with 10 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/custom-components/ReorderableList.tsx
View File

@@ -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>
);