Started implementing menu component

src/components/menu.tsx

@@ -0,0 +1,71 @@
+/* @refresh reload */
+import type { TitleProps } from "../types/interfaces";
+import { type Component, createEffect, createSignal, JSX, Show } from "solid-js";
+import { Button } from "./button";
+
+interface MenuProps extends TitleProps {
+    button?: JSX.Element,
+    buttonClassName?: string,
+    itemsClassName?: string,
+}
+
+const MyMenu: Component<MenuProps> = (
+    {
+        title,
+        button,
+        children,
+        id,
+        className,
+        buttonClassName,
+        itemsClassName,
+    }) => {
+
+    const [isOpen, setIsOpen] = createSignal(false);
+
+    function closeMenu(): void {
+        setIsOpen(false);
+    }
+
+    function toggleMenu(): void {
+        setIsOpen(!isOpen());
+    }
+
+    createEffect(() => {
+
+        function click(e: MouseEvent): void {
+            if (e.target instanceof HTMLElement) {
+                if (e.target.closest(`#${ id }`) === null) {
+                    closeMenu();
+                }
+            }
+        }
+
+        if (isOpen()) {
+            document.addEventListener("click", click);
+        }
+        else {
+            document.removeEventListener("click", click);
+        }
+    });
+
+    return ( // TODO transition
+        <div class={ `${ className }` } id={ id }>
+
+            <Button title={ title ?? undefined }
+                    onClick={ toggleMenu }
+                    className={ `flex-row-center ${ buttonClassName }` }>
+                { button }
+            </Button>
+
+            <Show when={isOpen()} keyed>
+                <div
+                    class={ `absolute bg-default-bg border border-gray-500 rounded-b-xl mt-1 w-max z-50 ${ itemsClassName }` }>
+                    <div class={ "mx-1" }>{ children }</div>
+                </div>
+            </Show>
+
+        </div>
+    );
+}
+
+export default MyMenu;

src/truth-table.tsx

@@ -5,16 +5,18 @@ import { Icon } from "solid-heroicons";
 import TruthTable from "./components/truth-table";
 import { InfoBox, MyDisclosure, MyDisclosureContainer } from "./components/output";
 import { diffChars } from "diff";
-// import MyMenu from "./components/menu";
+import MyMenu from "./components/menu";
 import { type BookType, utils, write, writeFile } from "xlsx"
 import type { FetchResult } from "./types/interfaces";
-import { type Component, createSignal, JSX, onMount, Show } from "solid-js";
+import { type Component, createEffect, createSignal, JSX, onMount, Show } from "solid-js";
 import { For, render } from "solid-js/web";
 import Row from "./components/row";
-import { arrowDownTray, magnifyingGlass, xMark } from "solid-heroicons/solid";
+import { arrowDownTray, check, eye, eyeSlash, funnel, magnifyingGlass, xMark } from "solid-heroicons/solid";
 import { Button, MySwitch } from "./components/button";
 import MyDialog from "./components/dialog";
 
+type Option = { name: string, value: string };
+
 // TODO move some code to new components
 const TruthTablePage: Component = () => {
 
@@ -34,13 +36,13 @@ const TruthTablePage: Component = () => {
      */
     const [typing, setTyping] = createSignal(false);
 
-    const hideOptions = [
+    const hideOptions: Option[] = [
         { name: "Show all result", value: "NONE" },
         { name: "Hide true results", value: "TRUE" },
         { name: "Hide false results", value: "FALSE" },
     ];
 
-    const sortOptions = [
+    const sortOptions: Option[] = [
         { name: "Sort by default", value: "DEFAULT" },
         { name: "Sort by true first", value: "TRUE_FIRST" },
         { name: "Sort by false first", value: "FALSE_FIRST" },
@@ -208,44 +210,47 @@ const TruthTablePage: Component = () => {
                                   name={ "Turn on/off simplify expressions" } className={ "mx-1" } />
 
                         <div class={ "h-min relative" }>
-                            {/*<MyMenu title={ "Filter results" }*/ }
+                            <MyMenu title={ "Filter results" } id={ "filter-results" }
-                            {/*        // button={*/ }
+                                    button={
-                            {/*        //     hideValues().value === "none" ?*/ }
+                                        <Show when={ hideValues().value !== "NONE" } children={
-                            {/*        //         <Eye className={ "mx-1" } /> :*/ }
+                                            <Icon path={ eyeSlash }
-                            {/*        //         <EyeOff className={ `mx-1 ${ hideValues().value === "TRUE" ?*/ }
+                                                  class={ `mx-1 h-6 w-6 ${ hideValues().value === "TRUE" ?
-                            {/*        //             "text-green-500" : "text-red-500" }` } />*/ }
+                                                      "text-green-500" : "text-red-500" }` } />
-                            {/*        // }*/ }
+                                        } fallback={
-                            {/*        children={*/ }
+                                            <Icon path={ eye } class={ "mx-1 h-6 w-6" } />
-                            {/*            <For each={ hideOptions }>*/ }
+                                        } keyed />
-                            {/*                { (option) => (*/ }
+                                    }
-                            {/*                    <SingleMenuItem onClick={ () => setHideValues(option) }*/ }
+                                    children={
-                            {/*                                    option={ option }*/ }
+                                        <For each={ hideOptions }>
-                            {/*                                    currentValue={ hideValues } />)*/ }
+                                            { (option) => (
-                            {/*                }*/ }
+                                                <SingleMenuItem onClick={ () => setHideValues(option) }
-                            {/*            </For>*/ }
+                                                                option={ option }
-                            {/*        } itemsClassName={ "right-0" }*/ }
+                                                                currentValue={ hideValues() } />
-                            {/*/>*/ }
+                                            ) }
+                                        </For>
+                                    } itemsClassName={ "right-0" }
+                            />
                         </div>
 
                         <div class={ "h-min relative" }>
-                            {/*<MyMenu title={ t("sort") + " " + t("results") }*/ }
+                            <MyMenu title={ "Sort results" } id={ "sort-results" }
-                            {/*        button={ <Filter*/ }
+                                    button={ <Icon path={ funnel }
-                            {/*            className={ sortValues().value === "trueFirst" ?*/ }
+                                                   class={ `h-6 w-6 ${ sortValues().value === "TRUE_FIRST" ? "text-green-500" :
-                            {/*                "text-green-500" : sortValues().value === "falseFirst" ? "text-red-500" : "" } /> }*/ }
+                                                       sortValues().value === "FALSE_FIRST" && "text-red-500" }` } /> }
-                            {/*        children={*/ }
+                                    children={
-                            {/*            <For each={ sortOptions }>*/ }
+                                        <For each={ sortOptions }>
-                            {/*                { option => (*/ }
+                                            { (option) => (
-                            {/*                    <SingleMenuItem option={ option } currentValue={ sortValues }*/ }
+                                                <SingleMenuItem option={ option } currentValue={ sortValues() }
-                            {/*                                    onClick={ () => setSortValues(option) } />)*/ }
+                                                                onClick={ () => setSortValues(option) } />
-                            {/*                }*/ }
+                                            ) }
-                            {/*            </For>*/ }
+                                        </For>
-                            {/*        }*/ }
+                                    }
-                            {/*        itemsClassName={ "right-0" }*/ }
+                                    itemsClassName={ "right-0" }
-                            {/*/>*/ }
+                            />
                         </div>
 
-                        {
+                        <Show when={ fetchResult()?.expression } keyed>
-                            fetchResult()?.expression &&
+
                             <MyDialog title={ "Download" }
                                       description={ "Export current table (.xlsx)" }
                                       button={ <>
@@ -262,7 +267,8 @@ const TruthTablePage: Component = () => {
                                 <Input className={ "border-rounded h-10 px-2" } id={ filenameId }
                                        placeholder={ "Truth Table" } />
                             </MyDialog>
-                        }
+
+                        </Show>
 
                     </Row>
                     {
@@ -339,22 +345,20 @@ const TruthTablePage: Component = () => {
 export default TruthTablePage;
 
 interface SingleMenuItem {
-    option: any,
+    option: Option,
-    currentValue?: any,
+    currentValue?: Option,
     onClick: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>,
 }
 
+// TODO not rerendering when currentValue changes
 const SingleMenuItem: Component<SingleMenuItem> = ({ option, currentValue, onClick }) => {
-    return (<></>
+    return (
-        // <Menu.Item>
+        <div class={ `hover:underline cursor-pointer last:mb-1 flex-row-center` }
-        //     <div
+             onClick={ onClick }>
-        //         class={ `hover:underline cursor-pointer last:mb-1 flex-row-center` }
+            <Icon path={ check }
-        //         onClick={ onClick }>
+                  class={ `h-6 w-6 text-white ${ currentValue.value !== option.value && "text-transparent" }` } />
-        //         <Check
+            { option.name }
-        //             className={ `${ currentValue.value !== option.value && "text-transparent" }` } />
+        </div>
-        //         { option.name }
-        //     </div>
-        // </Menu.Item>
     );
 }