chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

refactor menu to use dropdown component

Browse source
This commit is contained in:
Chris Kruining 2025-01-07 14:04:02 +01:00
parent 096d4c2651
commit 9d943c1182
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
4 changed files with 25 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/dropdown/index.tsx
View file

@ -21,8 +21,6 @@ export function Dropdown(props: DropdownProps) {
const [dialog, setDialog] = createSignal<HTMLDialogElement>();
const [open, setOpen] = createSignal<boolean>(props.open ?? false);
const showCaret = createMemo(() => props.showCaret ?? true);
createEffect(() => {
dialog()?.[open() ? 'showPopover' : 'hidePopover']();
});
@ -42,7 +40,7 @@ export function Dropdown(props: DropdownProps) {
<button id={`${props.id}_button`} popoverTarget={`${props.id}_dialog`} class={css.button}>
{props.text}
<Show when={showCaret()}>
<Show when={props.showCaret}>
<FaSolidAngleDown class={css.caret} />
</Show>
</button>

3
src/components/select/index.tsx
View file

@ -19,6 +19,7 @@ export function Select<T, K extends string>(props: SelectProps<T, K>) {
const [key, setKey] = createSignal<K>(props.value);
const [query, setQuery] = createSignal<string>('');
const showCaret = createMemo(() => props.showCaret ?? true);
const values = createMemo(() => {
let entries = Object.entries<T>(props.values) as [K, T][];
const filter = props.filter;
@ -43,7 +44,7 @@ export function Select<T, K extends string>(props: SelectProps<T, K>) {
}
}</Show>
return <Dropdown api={setDropdown} id={props.id} class={`${css.box} ${props.class}`} showCaret={props.showCaret} open={props.open} text={text}>
return <Dropdown api={setDropdown} id={props.id} class={`${css.box} ${props.class}`} showCaret={showCaret()} open={props.open} text={text}>
<Show when={props.filter !== undefined}>
<header>
<input value={query()} onInput={e => setQuery(e.target.value)} />