ddidderr
ebeee2d90a
The library sort setting used `size` for largest-first sorting while the ascending option used `sizeAsc`. That made the pair asymmetric and left the current settings model carrying a legacy-looking key. Rename the current descending key to `sizeDesc` in the type, menu, and sort logic. Stored `size` values are normalized to `sizeDesc` on read, so existing users keep the same largest-first behavior while new writes use the explicit key. Test Plan: - deno task build - RUSTC_WRAPPER= CARGO_BUILD_RUSTC_WRAPPER= just build - git diff --check Refs: local review feedback
62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
||
|
||
import { Icon } from '../Icon';
|
||
import { GameSort } from '../../lib/types';
|
||
|
||
const OPTIONS: ReadonlyArray<{ key: GameSort; label: string }> = [
|
||
{ key: 'az', label: 'Name (A–Z)' },
|
||
{ key: 'sizeDesc', label: 'Size (largest)' },
|
||
{ key: 'sizeAsc', label: 'Size (smallest)' },
|
||
{ key: 'status', label: 'Status' },
|
||
];
|
||
|
||
interface Props {
|
||
value: GameSort;
|
||
onChange: (value: GameSort) => void;
|
||
}
|
||
|
||
export const SortMenu = ({ value, onChange }: Props) => {
|
||
const [open, setOpen] = useState(false);
|
||
const ref = useRef<HTMLDivElement | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
const onClick = (e: MouseEvent) => {
|
||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||
};
|
||
document.addEventListener('mousedown', onClick);
|
||
return () => document.removeEventListener('mousedown', onClick);
|
||
}, [open]);
|
||
|
||
const current = OPTIONS.find(o => o.key === value) ?? OPTIONS[0];
|
||
|
||
return (
|
||
<div className="sort" ref={ref}>
|
||
<button className="sort-btn" type="button" onClick={() => setOpen(o => !o)}>
|
||
<Icon.sort />
|
||
<span>Sort: <strong>{current.label}</strong></span>
|
||
<Icon.chevron />
|
||
</button>
|
||
{open && (
|
||
<div className="sort-menu">
|
||
{OPTIONS.map(o => (
|
||
<button
|
||
key={o.key}
|
||
type="button"
|
||
onClick={() => {
|
||
onChange(o.key);
|
||
setOpen(false);
|
||
}}
|
||
>
|
||
<span className="sort-check">
|
||
{o.key === value && <Icon.check />}
|
||
</span>
|
||
{o.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|