Merge pull request #62 from aquaductape/dismiss-dropdowns

Dismiss dropdowns

Author: amoutonbrady

package.json

@@ -53,6 +53,7 @@
     "prettier": "^2.4.1",
     "register-service-worker": "^1.7.2",
     "rollup": "^2.58.0",
+    "solid-dismiss": "^1.0.11",
     "solid-js": "1.1.5"
   }
 }

playground/components/header.tsx

@@ -15,6 +15,7 @@ import { processImport, Tab } from '../../src';
 import { exportToCsb } from '../utils/exportToCsb';
 import { exportToJSON } from '../utils/exportToJson';
 import { ZoomDropdown } from './zoomDropdown';
+import Dismiss from 'solid-dismiss';
 
 export const Header: Component<{
   dark: boolean;
@@ -28,6 +29,7 @@ export const Header: Component<{
 }> = (props) => {
   const [copy, setCopy] = createSignal(false);
   const [showMenu, setShowMenu] = createSignal(false);
+  let menuBtnEl!: HTMLButtonElement;
 
   window.addEventListener('resize', closeMobileMenu);
   onCleanup(() => {
@@ -82,9 +84,13 @@ export const Header: Component<{
         <span class="inline-block -mb-1">Solid Playground</span>
       </h1>
       <div class="flex items-center space-x-2">
-        <div
-          classList={{ 'absolute top-[53px] right-[10px] w-[fit-content]': showMenu() }}
+        <Dismiss
           class="z-10"
+          classList={{ 'absolute top-[53px] right-[10px] w-[fit-content]': showMenu() }}
+          menuButton={() => menuBtnEl}
+          open={showMenu}
+          setOpen={setShowMenu}
+          show
         >
           <div
             class="md:items-center md:space-x-2 md:flex md:flex-row text-black dark:text-white"
@@ -175,7 +181,7 @@ export const Header: Component<{
             </button>
             <ZoomDropdown showMenu={showMenu()} />
           </div>
-        </div>
+        </Dismiss>
         <button
           type="button"
           id="menu-btn"
@@ -184,7 +190,7 @@ export const Header: Component<{
           }}
           class="z-40 px-3 py-2 focus:outline-none focus:ring-1 rounded text-white opacity-80 hover:opacity-100 visible relative md:hidden m-0 mr-[10px]"
           title="Mobile Menu Button"
-          onClick={() => setShowMenu(!showMenu())}
+          ref={menuBtnEl}
         >
           <Show when={showMenu()} fallback={<Icon path={menu} class="h-6 w-6" />}>
             <Icon path={xCircle} class="h-[22px] w-[22px]" /* adjusted to account for border */ />

playground/components/zoomDropdown.tsx

@@ -1,11 +1,11 @@
 import { Icon } from '@amoutonbrady/solid-heroicons';
 import { zoomIn } from '@amoutonbrady/solid-heroicons/outline';
-import { Component, createSignal, Show, createEffect } from 'solid-js';
-import useFocusOut from '../../src/hooks/useFocusOut';
+import Dismiss from 'solid-dismiss';
+import { Component, createSignal, createEffect } from 'solid-js';
 import useZoom from '../../src/hooks/useZoom';
 
 export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
-  const [[toggle, setToggle], { onFOBlur, onFOClick, onFOFocus }] = useFocusOut();
+  const [open, setOpen] = createSignal(false);
   const { zoomState, updateZoomScale, updateZoomSettings } = useZoom();
   const popupDuration = 1250;
   let containerEl!: HTMLDivElement;
@@ -21,10 +21,11 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
   };
 
   const onKeyDownContainer = (e: KeyboardEvent) => {
-    if (!toggle()) return;
+    if (!open()) return;
 
     if (e.key === 'Escape' && !stealFocus) {
       if (prevFocusedEl) {
+        setOpen(false);
         prevFocusedEl.focus();
         stealFocus = true;
       }
@@ -47,12 +48,12 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
       stealFocus = false;
     }
 
-    setToggle(true);
+    setOpen(true);
 
     window.clearTimeout(timeoutId!);
 
     timeoutId = setTimeout(() => {
-      setToggle(false);
+      setOpen(false);
 
       stealFocus = true;
       if (prevFocusedEl) {
@@ -62,7 +63,7 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
   });
 
   createEffect(() => {
-    if (!toggle()) {
+    if (!open()) {
       if (containerEl) {
         containerEl.removeEventListener('mousemove', onMouseMove);
       }
@@ -77,8 +78,6 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
   return (
     <div
       class="relative"
-      onFocusIn={onFOFocus}
-      onFocusOut={onFOBlur}
       onKeyDown={onKeyDownContainer}
       onClick={() => {
         window.clearTimeout(timeoutId!);
@@ -90,19 +89,18 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
         type="button"
         class="dark:text-white md:text-white flex flex-row space-x-2 items-center w-full md:px-3 px-2 py-2 focus:ring-1 rounded opacity-80 hover:opacity-100"
         classList={{
-          'bg-gray-900': toggle() && !props.showMenu,
-          'bg-gray-300 dark:text-black': toggle() && props.showMenu,
+          'bg-gray-900': open() && !props.showMenu,
+          'bg-gray-300 dark:text-black': open() && props.showMenu,
           'rounded-none	active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
             props.showMenu,
         }}
-        onClick={onFOClick}
         title="Scale editor to make text larger or smaller"
         ref={btnEl}
       >
         <Icon class="h-6" path={zoomIn} />
         <span class="text-xs md:sr-only">Scale Editor</span>
       </button>
-      <Show when={toggle()}>
+      <Dismiss menuButton={btnEl} open={open} setOpen={setOpen}>
         <div
           class="absolute top-full left-1/2 bg-white dark:bg-gray-700 text-brand-default border border-gray-900 rounded shadow  p-6 -translate-x-1/2 z-10"
           classList={{
@@ -156,7 +154,7 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
             </label>
           </div>
         </div>
-      </Show>
+      </Dismiss>
     </div>
   );
 };