feat: responsive popovers & menus (#1323)

2022-07-21 02:20:14 +05:30
parent baf7fb0019
commit 2573407851
44 changed files with 1308 additions and 1415 deletions
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileContextMenu.tsx
@@ -1,10 +1,8 @@
-import { MAX_MENU_SIZE_MULTIPLIER, MENU_MARGIN_FROM_APP_BORDER } from '@/Constants/Constants'
 import { FilesController } from '@/Controllers/FilesController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useRef } from 'react'
+import Popover from '../Popover/Popover'
 import FileMenuOptions from './FileMenuOptions'

 type Props = {
@@ -15,92 +13,27 @@ type Props = {
 const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, selectionController }) => {
  const { showFileContextMenu, setShowFileContextMenu, fileContextMenuLocation } = filesController

-  const [contextMenuStyle, setContextMenuStyle] = useState<React.CSSProperties>({
-    top: 0,
-    left: 0,
-    visibility: 'hidden',
-  })
-  const [contextMenuMaxHeight, setContextMenuMaxHeight] = useState<number | 'auto'>('auto')
  const contextMenuRef = useRef<HTMLDivElement>(null)
-  const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) => setShowFileContextMenu(open))
-  useCloseOnClickOutside(contextMenuRef, () => filesController.setShowFileContextMenu(false))
-
-  const reloadContextMenuLayout = useCallback(() => {
-    const { clientHeight } = document.documentElement
-    const defaultFontSize = window.getComputedStyle(document.documentElement).fontSize
-    const maxContextMenuHeight = parseFloat(defaultFontSize) * MAX_MENU_SIZE_MULTIPLIER
-    const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
-    const footerHeightInPx = footerElementRect?.height
-
-    let openUpBottom = true
-
-    if (footerHeightInPx) {
-      const bottomSpace = clientHeight - footerHeightInPx - fileContextMenuLocation.y
-      const upSpace = fileContextMenuLocation.y
-
-      if (maxContextMenuHeight > bottomSpace) {
-        if (upSpace > maxContextMenuHeight) {
-          openUpBottom = false
-          setContextMenuMaxHeight('auto')
-        } else {
-          if (upSpace > bottomSpace) {
-            setContextMenuMaxHeight(upSpace - MENU_MARGIN_FROM_APP_BORDER)
-            openUpBottom = false
-          } else {
-            setContextMenuMaxHeight(bottomSpace - MENU_MARGIN_FROM_APP_BORDER)
-          }
-        }
-      } else {
-        setContextMenuMaxHeight('auto')
-      }
-    }
-
-    if (openUpBottom) {
-      setContextMenuStyle({
-        top: fileContextMenuLocation.y,
-        left: fileContextMenuLocation.x,
-        visibility: 'visible',
-      })
-    } else {
-      setContextMenuStyle({
-        bottom: clientHeight - fileContextMenuLocation.y,
-        left: fileContextMenuLocation.x,
-        visibility: 'visible',
-      })
-    }
-  }, [fileContextMenuLocation.x, fileContextMenuLocation.y])
-
-  useEffect(() => {
-    if (showFileContextMenu) {
-      reloadContextMenuLayout()
-    }
-  }, [reloadContextMenuLayout, showFileContextMenu])
-
-  useEffect(() => {
-    window.addEventListener('resize', reloadContextMenuLayout)
-    return () => {
-      window.removeEventListener('resize', reloadContextMenuLayout)
-    }
-  }, [reloadContextMenuLayout])

  return (
-    <div
-      ref={contextMenuRef}
-      className="max-h-120 fixed z-dropdown-menu flex min-w-60 max-w-xs flex-col overflow-y-auto rounded bg-default py-2 shadow-main"
-      style={{
-        ...contextMenuStyle,
-        maxHeight: contextMenuMaxHeight,
-      }}
+    <Popover
+      open={showFileContextMenu}
+      anchorPoint={fileContextMenuLocation}
+      togglePopover={() => setShowFileContextMenu(!showFileContextMenu)}
+      side="right"
+      align="start"
+      className="py-2"
    >
-      <FileMenuOptions
-        filesController={filesController}
-        selectionController={selectionController}
-        closeOnBlur={closeOnBlur}
-        closeMenu={() => setShowFileContextMenu(false)}
-        shouldShowRenameOption={false}
-        shouldShowAttachOption={false}
-      />
-    </div>
+      <div ref={contextMenuRef}>
+        <FileMenuOptions
+          filesController={filesController}
+          selectionController={selectionController}
+          closeMenu={() => setShowFileContextMenu(false)}
+          shouldShowRenameOption={false}
+          shouldShowAttachOption={false}
+        />
+      </div>
+    </Popover>
  )
 })

--- a/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
@@ -11,7 +11,6 @@ import { formatSizeToReadableString } from '@standardnotes/filepicker'

 type Props = {
  closeMenu: () => void
-  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
  filesController: FilesController
  selectionController: SelectedItemsController
  isFileAttachedToNote?: boolean
@@ -22,7 +21,6 @@ type Props = {

 const FileMenuOptions: FunctionComponent<Props> = ({
  closeMenu,
-  closeOnBlur,
  filesController,
  selectionController,
  isFileAttachedToNote,
@@ -73,7 +71,6 @@ const FileMenuOptions: FunctionComponent<Props> = ({
  return (
    <>
      <button
-        onBlur={closeOnBlur}
        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
        onClick={onPreview}
      >
@@ -84,7 +81,6 @@ const FileMenuOptions: FunctionComponent<Props> = ({
        <>
          {isFileAttachedToNote ? (
            <button
-              onBlur={closeOnBlur}
              className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
              onClick={onDetach}
            >
@@ -93,7 +89,6 @@ const FileMenuOptions: FunctionComponent<Props> = ({
            </button>
          ) : shouldShowAttachOption ? (
            <button
-              onBlur={closeOnBlur}
              className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
              onClick={onAttach}
            >
@@ -109,7 +104,6 @@ const FileMenuOptions: FunctionComponent<Props> = ({
        onClick={() => {
          void filesController.setProtectionForFiles(!hasProtectedFiles, selectionController.selectedFiles)
        }}
-        onBlur={closeOnBlur}
      >
        <span className="flex items-center">
          <Icon type="password" className="mr-2 text-neutral" />
@@ -123,7 +117,6 @@ const FileMenuOptions: FunctionComponent<Props> = ({
      </button>
      <HorizontalSeparator classes="my-1" />
      <button
-        onBlur={closeOnBlur}
        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
        onClick={() => {
          void filesController.downloadFiles(selectionController.selectedFiles)
@@ -134,7 +127,6 @@ const FileMenuOptions: FunctionComponent<Props> = ({
      </button>
      {shouldShowRenameOption && (
        <button
-          onBlur={closeOnBlur}
          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
          onClick={() => {
            renameToggleCallback?.(true)
@@ -145,7 +137,6 @@ const FileMenuOptions: FunctionComponent<Props> = ({
        </button>
      )}
      <button
-        onBlur={closeOnBlur}
        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
        onClick={() => {
          void filesController.deleteFilesPermanently(selectionController.selectedFiles)
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx
@@ -1,13 +1,10 @@
 import Icon from '@/Components/Icon/Icon'
-import VisuallyHidden from '@reach/visually-hidden'
-import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { useCallback, useRef, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import FileMenuOptions from './FileMenuOptions'
 import { FilesController } from '@/Controllers/FilesController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
+import Popover from '../Popover/Popover'

 type Props = {
  filesController: FilesController
@@ -15,80 +12,34 @@ type Props = {
 }

 const FilesOptionsPanel = ({ filesController, selectionController }: Props) => {
-  const [open, setOpen] = useState(false)
-  const [position, setPosition] = useState({
-    top: 0,
-    right: 0,
-  })
-  const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto')
+  const [isOpen, setIsOpen] = useState(false)
  const buttonRef = useRef<HTMLButtonElement>(null)
-  const panelRef = useRef<HTMLDivElement>(null)
-  const [closeOnBlur] = useCloseOnBlur(panelRef, setOpen)

-  const onDisclosureChange = useCallback(async () => {
-    const rect = buttonRef.current?.getBoundingClientRect()
-    if (rect) {
-      const { clientHeight } = document.documentElement
-      const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
-      const footerHeightInPx = footerElementRect?.height
-      if (footerHeightInPx) {
-        setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - 2)
-      }
-      setPosition({
-        top: rect.bottom,
-        right: document.body.clientWidth - rect.right,
-      })
-      setOpen((open) => !open)
-    }
-  }, [])
+  const toggleMenu = useCallback(() => setIsOpen((isOpen) => !isOpen), [])

  return (
-    <Disclosure open={open} onChange={onDisclosureChange}>
-      <DisclosureButton
-        onKeyDown={(event) => {
-          if (event.key === 'Escape') {
-            setOpen(false)
-          }
-        }}
-        onBlur={closeOnBlur}
-        ref={buttonRef}
+    <>
+      <button
        className="bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast"
+        title="File options menu"
+        aria-label="File options menu"
+        onClick={toggleMenu}
+        ref={buttonRef}
      >
-        <VisuallyHidden>Actions</VisuallyHidden>
-        <Icon type="more" className="block" />
-      </DisclosureButton>
-      <DisclosurePanel
-        onKeyDown={(event) => {
-          if (event.key === 'Escape') {
-            setOpen(false)
-            buttonRef.current?.focus()
-          }
-        }}
-        ref={panelRef}
-        style={{
-          ...position,
-          maxHeight,
-        }}
-        className={`${
-          open ? 'flex' : 'hidden'
-        } max-h-120 slide-down-animation fixed min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default py-2 shadow-main transition-transform duration-150`}
-        onBlur={closeOnBlur}
-        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-      >
-        {open && (
-          <FileMenuOptions
-            filesController={filesController}
-            selectionController={selectionController}
-            closeOnBlur={closeOnBlur}
-            closeMenu={() => {
-              setOpen(false)
-            }}
-            shouldShowAttachOption={false}
-            shouldShowRenameOption={false}
-          />
-        )}
-      </DisclosurePanel>
-    </Disclosure>
+        <Icon type="more" />
+      </button>
+      <Popover togglePopover={toggleMenu} anchorElement={buttonRef.current} open={isOpen} className="py-2">
+        <FileMenuOptions
+          filesController={filesController}
+          selectionController={selectionController}
+          closeMenu={() => {
+            setIsOpen(false)
+          }}
+          shouldShowAttachOption={false}
+          shouldShowRenameOption={false}
+        />
+      </Popover>
+    </>
  )
 }