From 4a62406de9a01cdb599b1918b0186c9dbd048d83 Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Tue, 7 Jan 2025 13:41:26 +0100
Subject: [PATCH] refactor select to use dropdown

---
 src/components/dropdown/index.tsx | 83 +++++++++++--------------------
 src/components/select/index.tsx   | 69 ++++++++++---------------
 2 files changed, 55 insertions(+), 97 deletions(-)

diff --git a/src/components/dropdown/index.tsx b/src/components/dropdown/index.tsx
index e19821c..4179a03 100644
--- a/src/components/dropdown/index.tsx
+++ b/src/components/dropdown/index.tsx
@@ -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> {
-    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;
+export interface DropdownApi {
+    show(): void;
+    hide(): void;
 }
 
-export function Dropdown<T, K extends string>(props: DropdownProps<T, K>) {
+interface DropdownProps {
+    api?: (api: DropdownApi) => any,
+    id: string;
+    class?: string;
+    open?: boolean;
+    showCaret?: boolean;
+    text: JSX.Element;
+    children: JSX.Element;
+}
+
+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>;
 }
\ No newline at end of file
diff --git a/src/components/select/index.tsx b/src/components/select/index.tsx
index 4bca60c..d22b4fa 100644
--- a/src/components/select/index.tsx
+++ b/src/components/select/index.tsx
@@ -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,50 +31,36 @@ 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']();
-    });
+    const text = <Show when={key()}>{
+        key => {
+            const value = createMemo(() => props.values[key()]);
 
-    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>
 
-                    return <>{props.children(key(), value())}</>;
+    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)} />
+            </header>
+        </Show>
+
+        <main>
+            <For each={values()}>{
+                ([k, v]) => {
+                    const selected = createMemo(() => key() === k);
+
+                    return <span class={`${css.option} ${selected() ? css.selected : ''}`} onpointerdown={() => {
+                        setKey(() => k);
+                        dropdown()?.hide();
+                    }}>{props.children(k, v)}</span>;
                 }
-            }</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')}>
-            <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>
-        </dialog>
-    </section>;
+            }</For>
+        </main>
+    </Dropdown>
 }
\ No newline at end of file