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

refactor select to use dropdown

Browse source
This commit is contained in:
Chris Kruining 2025-01-07 13:41:26 +01:00
parent 6d69566e1a
commit 4a62406de9
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
2 changed files with 55 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,56 +1,46 @@
import { createMemo, createSignal, For, JSX, Setter, createEffect, Show } from "solid-js";
import { createMemo, createSignal, For, JSX, Setter, createEffect, Show, ParentProps, children } from "solid-js";
import { FaSolidAngleDown } from "solid-icons/fa";
import css from './index.module.css';
interface DropdownProps<T, K extends string> {
export interface DropdownApi {
show(): void;
hide(): void;
}
interface DropdownProps {
api?: (api: DropdownApi) => any,
id: string;
class?: string;
value?: K;
setValue?: Setter<K | undefined>;
values: Record<K, T>;
open?: boolean;
showCaret?: boolean;
children: (key: K, value: T) => JSX.Element;
filter?: (query: string, key: K, value: T) => boolean;
text: JSX.Element;
children: JSX.Element;
}
export function Dropdown<T, K extends string>(props: DropdownProps<T, K>) {
export function Dropdown(props: DropdownProps) {
const [dialog, setDialog] = createSignal<HTMLDialogElement>();
const [key, setKey] = createSignal<K | undefined>(props.value);
const [open, setOpen] = createSignal<boolean>(props.open ?? false);
const [query, setQuery] = createSignal<string>('');
const values = createMemo(() => {
let entries = Object.entries<T>(props.values) as [K, T][];
const filter = props.filter;
const q = query();
if (filter) {
entries = entries.filter(([k, v]) => filter(q, k, v));
}
return entries;
});
const showCaret = createMemo(() => props.showCaret ?? true);
createEffect(() => {
props.setValue?.(() => key());
});
createEffect(() => {
dialog()?.[open() ? 'showPopover' : 'hidePopover']();
});
createEffect(() => {
props.api?.({
show() {
dialog()?.showPopover();
},
hide() {
dialog()?.hidePopover();
},
});
});
return <section class={`${css.box} ${props.class}`}>
<button id={`${props.id}_button`} popoverTarget={`${props.id}_dialog`} class={css.button}>
<Show when={key()}>{
key => {
const value = createMemo(() => props.values[key()]);
return <>{props.children(key(), value())}</>;
}
}</Show>
{props.text}
<Show when={showCaret()}>
<FaSolidAngleDown class={css.caret} />
@ -58,24 +48,7 @@ export function Dropdown<T, K extends string>(props: DropdownProps<T, K>) {
</button>
<dialog ref={setDialog} id={`${props.id}_dialog`} anchor={`${props.id}_button`} popover class={css.dialog} onToggle={e => setOpen(e.newState === 'open')}>
<Show when={props.filter !== undefined}>
<header>
<input value={query()} onInput={e => setQuery(e.target.value)} />
</header>
</Show>
<main>
<For each={values()}>{
([k, v]) => {
const selected = createMemo(() => key() === k);
return <span class={`${css.option} ${selected() ? css.selected : ''}`} onpointerdown={() => {
setKey(() => k);
dialog()?.hidePopover();
}}>{props.children(k, v)}</span>;
}
}</For>
</main>
{props.children}
</dialog>
</section>;
}

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

@ -1,5 +1,5 @@
import { createMemo, createSignal, For, JSX, Setter, createEffect, Show } from "solid-js";
import { FaSolidAngleDown } from "solid-icons/fa";
import { Dropdown, DropdownApi } from "../dropdown";
import css from './index.module.css';
interface SelectProps<T, K extends string> {
@ -15,9 +15,8 @@ interface SelectProps<T, K extends string> {
}
export function Select<T, K extends string>(props: SelectProps<T, K>) {
const [dialog, setDialog] = createSignal<HTMLDialogElement>();
const [dropdown, setDropdown] = createSignal<DropdownApi>();
const [key, setKey] = createSignal<K>(props.value);
const [open, setOpen] = createSignal<boolean>(props.open ?? false);
const [query, setQuery] = createSignal<string>('');
const values = createMemo(() => {
@ -32,19 +31,11 @@ export function Select<T, K extends string>(props: SelectProps<T, K>) {
return entries;
});
const showCaret = createMemo(() => props.showCaret ?? true);
createEffect(() => {
props.setValue?.(() => key());
});
createEffect(() => {
dialog()?.[open() ? 'showPopover' : 'hidePopover']();
});
return <section class={`${css.box} ${props.class}`}>
<button id={`${props.id}_button`} popoverTarget={`${props.id}_dialog`} class={css.button}>
<Show when={key()}>{
const text = <Show when={key()}>{
key => {
const value = createMemo(() => props.values[key()]);
@ -52,12 +43,7 @@ export function Select<T, K extends string>(props: SelectProps<T, K>) {
}
}</Show>
<Show when={showCaret()}>
<FaSolidAngleDown class={css.caret} />
</Show>
</button>
<dialog ref={setDialog} id={`${props.id}_dialog`} anchor={`${props.id}_button`} popover class={css.dialog} onToggle={e => setOpen(e.newState === 'open')}>
return <Dropdown api={setDropdown} id={props.id} class={`${css.box} ${props.class}`} showCaret={props.showCaret} open={props.open} text={text}>
<Show when={props.filter !== undefined}>
<header>
<input value={query()} onInput={e => setQuery(e.target.value)} />
@ -71,11 +57,10 @@ export function Select<T, K extends string>(props: SelectProps<T, K>) {
return <span class={`${css.option} ${selected() ? css.selected : ''}`} onpointerdown={() => {
setKey(() => k);
dialog()?.hidePopover();
dropdown()?.hide();
}}>{props.children(k, v)}</span>;
}
}</For>
</main>
</dialog>
</section>;
</Dropdown>
}