Spaces:
Runtime error
Runtime error
File size: 5,482 Bytes
070c931 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | import { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode } from "react";
import { createPortal } from "react-dom";
export type DropdownOption<T extends string> = {
value: T;
label: string;
hint?: string;
badge?: ReactNode;
/** A thin rule above this option, to set it apart from the ones before it. */
divider?: boolean;
/** Section heading: shown above the first option of each run of options with the same group. */
group?: string;
};
/** A themed select: a button showing the choice, and a list that opens under it. Arrow keys, Enter and Escape work
* as in a native select. `onChange` may decline a choice (e.g. a premium option on a free plan) by not applying it. */
export function Dropdown<T extends string>({
value,
options,
onChange,
label,
}: {
value: T;
options: DropdownOption<T>[];
onChange: (value: T) => void;
label: string;
}) {
const [open, setOpen] = useState(false);
const [active, setActive] = useState(0);
const [place, setPlace] = useState<CSSProperties>({});
const root = useRef<HTMLDivElement>(null);
const list = useRef<HTMLUListElement>(null);
const listId = useId();
const current = options.find((o) => o.value === value) ?? options[0];
useEffect(() => {
if (!open) return;
const close = (e: MouseEvent) => {
const t = e.target as Node;
if (!root.current?.contains(t) && !list.current?.contains(t)) setOpen(false);
};
document.addEventListener("mousedown", close);
return () => document.removeEventListener("mousedown", close);
}, [open]);
// The list lives in <body> (cards create their own stacking layers and would cover it), fixed under the button,
// or above it when the window has no room below.
useLayoutEffect(() => {
if (!open) return;
const measure = () => {
const r = root.current?.getBoundingClientRect();
if (!r) return;
const up = window.innerHeight - r.bottom < 240 && r.top > window.innerHeight - r.bottom;
setPlace({ left: r.left, width: r.width, ...(up ? { bottom: window.innerHeight - r.top + 6 } : { top: r.bottom + 6 }) });
};
measure();
window.addEventListener("scroll", measure, true);
window.addEventListener("resize", measure);
return () => {
window.removeEventListener("scroll", measure, true);
window.removeEventListener("resize", measure);
};
}, [open]);
useEffect(() => {
if (open) list.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
}, [open, active]);
const show = () => {
setActive(Math.max(options.findIndex((o) => o.value === value), 0));
setOpen(true);
};
const choose = (o: DropdownOption<T>) => {
setOpen(false);
onChange(o.value);
};
const onKey = (e: KeyboardEvent) => {
if (!open) {
if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
e.preventDefault();
show();
}
return;
}
if (e.key === "Escape") setOpen(false);
else if (e.key === "ArrowDown") setActive((i) => Math.min(i + 1, options.length - 1));
else if (e.key === "ArrowUp") setActive((i) => Math.max(i - 1, 0));
else if (e.key === "Enter" || e.key === " ") choose(options[active]);
else if (e.key === "Tab") setOpen(false);
else return;
e.preventDefault();
};
return (
<div className={`dropdown${open ? " open" : ""}`} ref={root}>
<button type="button" className="dropdown-btn" aria-haspopup="listbox" aria-expanded={open} aria-controls={listId}
aria-label={`${label}: ${current.label}`} onClick={() => (open ? setOpen(false) : show())} onKeyDown={onKey}>
<span className="dropdown-value">
<strong>{current.label}</strong>
{current.hint && <span className="muted">{current.hint}</span>}
</span>
<svg className="dropdown-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
strokeWidth="2" aria-hidden="true">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
{open && createPortal(
<ul className="dropdown-list" role="listbox" id={listId} aria-label={label} ref={list} style={place}>
{options.map((o, i) => [
o.group && o.group !== options[i - 1]?.group && (
<li key={`group-${o.group}`} role="presentation" className={`dropdown-group${i > 0 ? " divider" : ""}`}>
{o.group}
</li>
),
<li key={o.value} role="option" aria-selected={o.value === value} data-index={i}
className={`dropdown-option${i === active ? " active" : ""}${o.value === value ? " on" : ""}${o.divider ? " divider" : ""}`}
onMouseEnter={() => setActive(i)} onMouseDown={(e) => e.preventDefault()} onClick={() => choose(o)}>
<span className="dropdown-value">
<strong>{o.label}</strong>
{o.hint && <span className="muted">{o.hint}</span>}
</span>
{o.badge}
{o.value === value && (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"
aria-hidden="true" className="dropdown-check">
<path d="m5 12 5 5 9-10" />
</svg>
)}
</li>,
])}
</ul>,
document.body,
)}
</div>
);
}
|