Share adapter

plausible · Feb 3, 2025 · 8fdeb07 · 8fdeb07
1 parent cec6f02
commit 8fdeb07
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 57 deletions.
diff --git a/assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx b/assets/js/dashboard/nav-menu/query-periods/comparison-period-menu.tsx
@@ -1,6 +1,6 @@
 /** @format */
 
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import { clearedComparisonSearch } from '../../query'
 import classNames from 'classnames'
 import { useQueryContext } from '../../query-context'
@@ -26,36 +26,24 @@ import {
   DateMenuChevron,
   PopoverMenuProps,
   linkClassName,
-  MenuSeparator
+  MenuSeparator,
+  useDropdownWithCalendar,
+  DropdownWithCalendarState,
+  DropdownState,
+  calendarPositionClassName
 } from './shared-menu-items'
 import { DateRangeCalendar } from './date-range-calendar'
 import { formatISO, nowForSite } from '../../util/date'
 
 export const ComparisonPeriodMenuItems = ({
-  dropdownIsOpen,
-  closeDropdown
-}: PopoverMenuProps) => {
+  panelRef,
+  dropdownState,
+  closeDropdown,
+  toggleDropdown
+}: Omit<DropdownWithCalendarState, 'buttonRef'>) => {
   const site = useSiteContext()
   const navigate = useAppNavigate()
   const { query } = useQueryContext()
-  const [calendarIsOpen, setCalendarIsOpen] = useState(false)
-  const closeCalendar = useCallback(() => setCalendarIsOpen(false), [])
-  const openCalendar = useCallback(() => setCalendarIsOpen(true), [])
-
-  useEffect(() => {
-    if (!dropdownIsOpen) {
-      closeCalendar()
-    }
-    return closeCalendar
-  }, [dropdownIsOpen, closeCalendar])
-
-  const panelRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (calendarIsOpen && panelRef.current?.focus) {
-      panelRef.current.focus()
-    }
-  }, [calendarIsOpen])
 
   if (!isComparisonEnabled(query.comparison)) {
     return null
@@ -67,18 +55,20 @@ export const ComparisonPeriodMenuItems = ({
       className={classNames(
         'mt-2',
         popover.transition.classNames.fullwidth,
-        calendarIsOpen ? 'md:left-auto' : 'md:left-auto md:w-56'
+        dropdownState === DropdownState.CALENDAR
+          ? 'md:left-auto'
+          : 'md:left-auto md:w-56'
       )}
     >
       <Popover.Panel
         ref={panelRef}
         className={
-          calendarIsOpen
-            ? '*:!top-auto *:!right-0 *:!absolute'
+          dropdownState === DropdownState.CALENDAR
+            ? calendarPositionClassName
             : popover.panel.classNames.roundedSheet
         }
       >
-        {calendarIsOpen && (
+        {dropdownState === DropdownState.CALENDAR && (
           <DateRangeCalendar
             id="calendar"
             onCloseWithSelection={(selection) => {
@@ -96,7 +86,7 @@ export const ComparisonPeriodMenuItems = ({
             }
           />
         )}
-        {!calendarIsOpen && (
+        {dropdownState === DropdownState.MENU && (
           <>
             {[
               ComparisonMode.off,
@@ -122,7 +112,7 @@ export const ComparisonPeriodMenuItems = ({
               className={linkClassName}
               search={(s) => s}
               onClick={() => {
-                openCalendar()
+                toggleDropdown('calendar')
               }}
             >
               {COMPARISON_MODES[ComparisonMode.custom]}
@@ -163,10 +153,13 @@ export const ComparisonPeriodMenuItems = ({
   )
 }
 
-export const ComparisonPeriodMenuButton = () => {
+export const ComparisonPeriodMenu = (props: PopoverMenuProps) => {
   const site = useSiteContext()
   const { query } = useQueryContext()
-  const buttonRef = useRef<HTMLButtonElement>(null)
+  const { buttonRef, ...rest } = useDropdownWithCalendar({
+    ...props,
+    query
+  })
 
   return (
     <>
@@ -177,6 +170,7 @@ export const ComparisonPeriodMenuButton = () => {
         </span>
         <DateMenuChevron />
       </Popover.Button>
+      <ComparisonPeriodMenuItems {...rest} />
     </>
   )
 }
diff --git a/assets/js/dashboard/nav-menu/query-periods/query-period-menu.tsx b/assets/js/dashboard/nav-menu/query-periods/query-period-menu.tsx
@@ -37,7 +37,8 @@ import {
   MenuSeparator,
   useDropdownWithCalendar,
   DropdownWithCalendarState,
-  DropdownState
+  DropdownState,
+  calendarPositionClassName
 } from './shared-menu-items'
 import { DateRangeCalendar } from './date-range-calendar'
 import { formatISO, nowForSite } from '../../util/date'
@@ -88,11 +89,10 @@ export const QueryPeriodMenu = (props: PopoverMenuProps) => {
   const site = useSiteContext()
   const { query } = useQueryContext()
 
-  const { buttonRef, closeDropdown, toggleDropdown, dropdownState } =
-    useDropdownWithCalendar({
-      ...props,
-      query
-    })
+  const { buttonRef, ...rest } = useDropdownWithCalendar({
+    ...props,
+    query
+  })
 
   return (
     <>
@@ -103,16 +103,13 @@ export const QueryPeriodMenu = (props: PopoverMenuProps) => {
         </span>
         <DateMenuChevron />
       </Popover.Button>
-      <QueryPeriodMenuInner
-        closeDropdown={closeDropdown}
-        toggleDropdown={toggleDropdown}
-        dropdownState={dropdownState}
-      />
+      <QueryPeriodMenuInner {...rest} />
     </>
   )
 }
 
 const QueryPeriodMenuInner = ({
+  panelRef,
   dropdownState,
   closeDropdown,
   toggleDropdown
@@ -156,9 +153,10 @@ const QueryPeriodMenuInner = ({
         )}
       >
         <Popover.Panel
+          ref={panelRef}
           className={
             dropdownState === DropdownState.CALENDAR
-              ? '*:!top-auto *:!right-0 *:!absolute'
+              ? calendarPositionClassName
               : popover.panel.classNames.roundedSheet
           }
           data-testid="datemenu"

diff --git a/assets/js/dashboard/nav-menu/query-periods/query-periods-picker.tsx b/assets/js/dashboard/nav-menu/query-periods/query-periods-picker.tsx
@@ -6,10 +6,7 @@ import { useQueryContext } from '../../query-context'
 import { isComparisonEnabled } from '../../query-time-periods'
 import { MovePeriodArrows } from './move-period-arrows'
 import { QueryPeriodMenu } from './query-period-menu'
-import {
-  ComparisonPeriodMenuButton,
-  ComparisonPeriodMenuItems
-} from './comparison-period-menu'
+import { ComparisonPeriodMenu } from './comparison-period-menu'
 import { Popover } from '@headlessui/react'
 
 export function QueryPeriodsPicker({ className }: { className?: string }) {
@@ -31,13 +28,10 @@ export function QueryPeriodsPicker({ className }: { className?: string }) {
           </div>
           <Popover className="min-w-36 md:relative lg:w-48">
             {({ close, open }) => (
-              <>
-                <ComparisonPeriodMenuButton />
-                <ComparisonPeriodMenuItems
-                  dropdownIsOpen={open}
-                  closeDropdown={close}
-                />
-              </>
+              <ComparisonPeriodMenu
+                dropdownIsOpen={open}
+                closeDropdown={close}
+              />
             )}
           </Popover>
         </>

diff --git a/assets/js/dashboard/nav-menu/query-periods/shared-menu-items.tsx b/assets/js/dashboard/nav-menu/query-periods/shared-menu-items.tsx
@@ -25,6 +25,8 @@ export const datemenuButtonClassName = classNames(
   'justify-between px-2 w-full'
 )
 
+export const calendarPositionClassName = '*:!top-auto *:!right-0 *:!absolute'
+
 export const DateMenuChevron = () => (
   <ChevronDownIcon className="hidden lg:inline-block h-4 w-4 md:h-5 md:w-5 ml-1 md:ml-2 text-gray-500" />
 )
@@ -49,6 +51,7 @@ export interface DropdownWithCalendarState {
   toggleDropdown: (mode: 'menu' | 'calendar') => void
   dropdownState: DropdownState
   buttonRef: RefObject<HTMLButtonElement>
+  panelRef: RefObject<HTMLDivElement>
 }
 
 export const useDropdownWithCalendar = ({
@@ -57,6 +60,7 @@ export const useDropdownWithCalendar = ({
   dropdownIsOpen
 }: PopoverMenuProps & { query: DashboardQuery }): DropdownWithCalendarState => {
   const buttonRef = useRef<HTMLButtonElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
   const [currentMode, setCurrentMode] = useState<'menu' | 'calendar'>('menu')
 
   // closes dropdown when query changes
@@ -84,13 +88,29 @@ export const useDropdownWithCalendar = ({
         setCurrentMode('menu')
       } else {
         setCurrentMode(mode)
-        if (mode === 'calendar' && !dropdownIsOpen) {
-          buttonRef.current?.click()
+        if (
+          mode === 'calendar' &&
+          !dropdownIsOpen &&
+          typeof buttonRef.current?.click === 'function'
+        ) {
+          buttonRef.current.click()
+        }
+        if (
+          mode === 'calendar' &&
+          typeof panelRef.current?.focus === 'function'
+        ) {
+          panelRef.current.focus()
         }
       }
     },
     [closeDropdown, currentMode, dropdownIsOpen]
   )
 
-  return { buttonRef, dropdownState: state, closeDropdown, toggleDropdown }
+  return {
+    panelRef,
+    buttonRef,
+    dropdownState: state,
+    closeDropdown,
+    toggleDropdown
+  }
 }