diff --git a/src/custom-components/ReorderableList.tsx b/src/custom-components/ReorderableList.tsx index 9a74d52..d5a910b 100644 --- a/src/custom-components/ReorderableList.tsx +++ b/src/custom-components/ReorderableList.tsx @@ -95,7 +95,7 @@ export function ReorderableList(props: ReorderableListProp const toSave: { [key: string]: T } = {}; Object.values(refs).map((val: ReorderableEntry) => { toSave[val.key] = val.data; - }) + }); onUpdate(toSave); if (down) { @@ -108,163 +108,154 @@ export function ReorderableList(props: ReorderableListProp return ( -
- {/* @ts-ignore */} - { focusIdx.current = props.index; }} ref={wrapperFocusable} style={{ width: "100%" }}> - { - switch (e.detail.button) { - case GamepadButton.DIR_DOWN: { - - if (reorderEnabled.current && props.entry.data.position === dataAsList.length) { - e.preventDefault(); - e.stopImmediatePropagation(); - } - - if (reorderEnabled.current && props.entry.data.position != dataAsList.length) reorder(true); - - if (props.entry.data.position != dataAsList.length) { - focusIdx.current++; - forceUpdate(); - } - break; + {/* @ts-ignore */} + { focusIdx.current = props.index; }} ref={wrapperFocusable} style={{ width: "100%" }}> + { + switch (e.detail.button) { + case GamepadButton.DIR_DOWN: { + if (reorderEnabled.current && props.entry.data.position === dataAsList.length) { + e.preventDefault(); + e.stopImmediatePropagation(); } - case GamepadButton.DIR_UP: { - if (reorderEnabled.current && props.entry.data.position === 1) { - e.preventDefault(); - e.stopImmediatePropagation(); - } - if (reorderEnabled.current && props.entry.data.position != 1) reorder(false); + if (reorderEnabled.current && props.entry.data.position != dataAsList.length) reorder(true); - if (props.entry.data.position != 1) { - focusIdx.current--; - forceUpdate(); - } - break; + if (props.entry.data.position != dataAsList.length) { + focusIdx.current++; + forceUpdate(); } - case GamepadButton.DIR_LEFT: { - lastEvent = true; - if (focusedSide.current) { - focusedSide.current = false; + break; + } + case GamepadButton.DIR_UP: { + if (reorderEnabled.current && props.entry.data.position === 1) { + e.preventDefault(); + e.stopImmediatePropagation(); + } + + if (reorderEnabled.current && props.entry.data.position != 1) reorder(false); + + if (props.entry.data.position != 1) { + focusIdx.current--; + forceUpdate(); + } + break; + } + case GamepadButton.DIR_LEFT: { + lastEvent = true; + if (focusedSide.current) { + focusedSide.current = false; + } + reorderEnabled.current = false; + } + case GamepadButton.DIR_RIGHT: { + if (!lastEvent) { + if (!focusedSide.current) { + focusedSide.current = true; } reorderEnabled.current = false; - } - case GamepadButton.DIR_RIGHT: { - if (!lastEvent) { - if (!focusedSide.current) { - focusedSide.current = true; - } - reorderEnabled.current = false; - } else { - lastEvent = false; - } + } else { + lastEvent = false; } } - return false; - }} - onMouseMove={(e: React.MouseEvent) => { - // once user has moved height of an entry, swap - if (reorderEnabled.current) { - const dy = e.clientY - mouseOrigin.current.y; - if (Math.abs(dy) >= ELEM_HEIGHT) { - reorder(dy > 0); - mouseOrigin.current = { - "x": e.clientX, - "y": e.clientY, - } - } - } - }} - onTouchMove={(e: React.TouchEvent) => { - if (reorderEnabled.current) { - const dy = e.touches[0].clientY - touchOrigin.current.y; - if (Math.abs(dy) >= ELEM_HEIGHT) { - reorder(dy > 0); - touchOrigin.current = { - "x": e.touches[0].clientX, - "y": e.touches[0].clientY, - } - } - } - }} - > - { - switch (e.detail.button) { - case GamepadButton.OK: { - enableReorder(); - } - } - }} - onButtonUp={(e: GamepadEvent) => { - switch (e.detail.button) { - case GamepadButton.OK: { - disabledReorder(); - } - } - }} - onMouseDown={(e: MouseEvent) => { + } + return false; + }} + onMouseMove={(e: React.MouseEvent) => { + // once user has moved height of an entry, swap + if (reorderEnabled.current) { + const dy = e.clientY - mouseOrigin.current.y; + if (Math.abs(dy) >= ELEM_HEIGHT) { + reorder(dy > 0); mouseOrigin.current = { "x": e.clientX, "y": e.clientY, } - enableReorder(); - }} - onTouchStart={(e: TouchEvent) => { + } + } + }} + onTouchMove={(e: React.TouchEvent) => { + if (reorderEnabled.current) { + const dy = e.touches[0].clientY - touchOrigin.current.y; + if (Math.abs(dy) >= ELEM_HEIGHT) { + reorder(dy > 0); touchOrigin.current = { "x": e.touches[0].clientX, "y": e.touches[0].clientY, } - enableReorder(); - }} - > - - - { props.action(e, props.entry); }} - ref={optionsBtn} - > - - - - -
+ } + } + }} + > + { + switch (e.detail.button) { + case GamepadButton.OK: { + enableReorder(); + } + } + }} + onButtonUp={(e: GamepadEvent) => { + switch (e.detail.button) { + case GamepadButton.OK: { + disabledReorder(); + } + } + }} + onMouseDown={(e: MouseEvent) => { + mouseOrigin.current = { + "x": e.clientX, + "y": e.clientY, + } + enableReorder(); + }} + onTouchStart={(e: TouchEvent) => { + touchOrigin.current = { + "x": e.touches[0].clientX, + "y": e.touches[0].clientY, + } + enableReorder(); + }} + > + + + { props.action(e, props.entry); }} + ref={optionsBtn} + > + + + +
); } return ( - -
{ mouseOrigin.current = { "x": -1,