decky-frontend-lib/src/custom-components/ReorderableList.tsx

import { Fragment, JSXElementConstructor, ReactElement, ReactNode, useEffect, useState } from 'react';

import { Field, FieldProps, Focusable, GamepadButton } from '../components';

/**
 * A ReorderableList entry of type <T>.
 * @param label The name of this entry in the list.
 * @param data Optional data to connect to this entry.
 * @param position The position of this entry in the list.
 */
export type ReorderableEntry<T> = {
  label: ReactNode;
  data?: T;
  position: number;
};

/**
 * Properties for a ReorderableList component of type <T>.
 *
 * @param animate If the list should animate. @default true
 */
export type ReorderableListProps<T> = {
  entries: ReorderableEntry<T>[];
  onSave: (entries: ReorderableEntry<T>[]) => void;
  interactables?: JSXElementConstructor<{ entry: ReorderableEntry<T> }>;
  fieldProps?: FieldProps;
  animate?: boolean;
};

/**
 * A component for creating reorderable lists.
 *
 * 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: ReorderableListProps<T>) {
  if (props.animate === undefined) props.animate = true;
  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(() => {
    setEntryList([...props.entries].sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position));
  }, [props.entries]);

  function toggleReorderEnabled(): void {
    let newReorderValue = !reorderEnabled;
    setReorderEnabled(newReorderValue);

    if (!newReorderValue) {
      props.onSave(entryList);
    }
  }

  function saveOnBackout(e: Event) {
    const event = e as CustomEvent;
    if (event.detail.button == GamepadButton.CANCEL && reorderEnabled) {
      setReorderEnabled(!reorderEnabled);
      props.onSave(entryList);
    }
  }

  return (
    <Fragment>
      <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}
          onButtonDown={saveOnBackout}
        >
          {entryList.map((entry: ReorderableEntry<T>) => (
            <ReorderableItem
              animate={props.animate!}
              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>
 */
export type ReorderableListEntryProps<T> = {
  fieldProps?: FieldProps;
  listData: ReorderableEntry<T>[];
  entryData: ReorderableEntry<T>;
  reorderEntryFunc: CallableFunction;
  reorderEnabled: boolean;
  animate: boolean;
  children: ReactElement | null;
};

function ReorderableItem<T>(props: ReorderableListEntryProps<T>) {
  const [isSelected, _setIsSelected] = useState<boolean>(false);
  const [isSelectedLastFrame, setIsSelectedLastFrame] = useState<boolean>(false);
  const listEntries = props.listData;

  function onReorder(e: Event): void {
    if (!props.reorderEnabled) return;

    const event = e as CustomEvent;
    const currentIdx = listEntries.findIndex((entryData: ReorderableEntry<T>) => entryData === props.entryData);
    const currentIdxValue = listEntries[currentIdx];
    if (currentIdx < 0) return;

    let targetPosition: number = -1;
    if (event.detail.button == GamepadButton.DIR_DOWN) {
      targetPosition = currentIdxValue.position + 1;
    } else if (event.detail.button == GamepadButton.DIR_UP) {
      targetPosition = currentIdxValue.position - 1;
    }

    if (targetPosition >= listEntries.length || targetPosition < 0) return;

    let otherToUpdate = listEntries.find((entryData: ReorderableEntry<T>) => entryData.position === targetPosition);
    if (!otherToUpdate) return;

    let currentPosition = currentIdxValue.position;

    currentIdxValue.position = otherToUpdate.position;
    otherToUpdate.position = currentPosition;

    props.reorderEntryFunc(
      [...listEntries].sort((a: ReorderableEntry<T>, b: ReorderableEntry<T>) => a.position - b.position),
    );
  }

  async function setIsSelected(val: boolean) {
    _setIsSelected(val);
    // Wait 3 frames, then set. I have no idea why, but if you dont wait long enough it doesn't work.
    for (let i = 0; i < 3; i++) await new Promise((res) => requestAnimationFrame(res));
    setIsSelectedLastFrame(val);
  }

  return (
    <div
      style={
        props.animate
          ? {
              transition:
                isSelected || isSelectedLastFrame
                  ? ''
                  : 'transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1)', // easeOutQuart https://easings.net/#easeOutQuart
              transform: !props.reorderEnabled || isSelected ? 'scale(1)' : 'scale(0.9)',
              opacity: !props.reorderEnabled || isSelected ? 1 : 0.7,
            }
          : {}
      }
    >
      <Field
        label={props.entryData.label}
        {...props.fieldProps}
        focusable={!props.children}
        onButtonDown={onReorder}
        onGamepadBlur={() => setIsSelected(false)}
        onGamepadFocus={() => setIsSelected(true)}
      >
        <Focusable style={{ display: 'flex', width: '100%', position: 'relative' }}>{props.children}</Focusable>
      </Field>
    </div>
  );
}