feat: multiple files selected view (#1062)

2022-06-03 12:19:22 +05:30
parent 462199406c
commit 4caf958659
17 changed files with 399 additions and 298 deletions
--- a/app/assets/javascripts/Components/FileContextMenu/FileContextMenu.tsx
+++ b/app/assets/javascripts/Components/FileContextMenu/FileContextMenu.tsx
@@ -1,20 +1,19 @@
 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 { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
-import { PopoverFileItemAction } from '../AttachedFilesPopover/PopoverFileItemAction'
-import { PopoverTabs } from '../AttachedFilesPopover/PopoverTabs'
 import FileMenuOptions from './FileMenuOptions'

 type Props = {
-  viewControllerManager: ViewControllerManager
+  filesController: FilesController
+  selectionController: SelectedItemsController
 }

-const FileContextMenu: FunctionComponent<Props> = observer(({ viewControllerManager }) => {
-  const { selectedFiles, showFileContextMenu, setShowFileContextMenu, fileContextMenuLocation } =
-    viewControllerManager.filesController
+const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, selectionController }) => {
+  const { showFileContextMenu, setShowFileContextMenu, fileContextMenuLocation } = filesController

  const [contextMenuStyle, setContextMenuStyle] = useState<React.CSSProperties>({
    top: 0,
@@ -24,9 +23,7 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ viewControllerMana
  const [contextMenuMaxHeight, setContextMenuMaxHeight] = useState<number | 'auto'>('auto')
  const contextMenuRef = useRef<HTMLDivElement>(null)
  const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) => setShowFileContextMenu(open))
-  useCloseOnClickOutside(contextMenuRef, () => viewControllerManager.filesController.setShowFileContextMenu(false))
-
-  const selectedFile = selectedFiles[0]
+  useCloseOnClickOutside(contextMenuRef, () => filesController.setShowFileContextMenu(false))

  const reloadContextMenuLayout = useCallback(() => {
    const { clientHeight } = document.documentElement
@@ -86,17 +83,6 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ viewControllerMana
    }
  }, [reloadContextMenuLayout])

-  const handleFileAction = useCallback(
-    async (action: PopoverFileItemAction) => {
-      const { didHandleAction } = await viewControllerManager.filesController.handleFileAction(
-        action,
-        PopoverTabs.AllFiles,
-      )
-      return didHandleAction
-    },
-    [viewControllerManager.filesController],
-  )
-
  return (
    <div
      ref={contextMenuRef}
@@ -107,8 +93,8 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ viewControllerMana
      }}
    >
      <FileMenuOptions
-        file={selectedFile}
-        handleFileAction={handleFileAction}
+        filesController={filesController}
+        selectionController={selectionController}
        closeOnBlur={closeOnBlur}
        closeMenu={() => setShowFileContextMenu(false)}
        shouldShowRenameOption={false}
@@ -120,8 +106,9 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ viewControllerMana

 FileContextMenu.displayName = 'FileContextMenu'

-const FileContextMenuWrapper: FunctionComponent<Props> = ({ viewControllerManager }) => {
-  const { selectedFiles, showFileContextMenu } = viewControllerManager.filesController
+const FileContextMenuWrapper: FunctionComponent<Props> = ({ filesController, selectionController }) => {
+  const { showFileContextMenu } = filesController
+  const { selectedFiles } = selectionController

  const selectedFile = selectedFiles[0]

@@ -129,7 +116,7 @@ const FileContextMenuWrapper: FunctionComponent<Props> = ({ viewControllerManage
    return null
  }

-  return <FileContextMenu viewControllerManager={viewControllerManager} />
+  return <FileContextMenu filesController={filesController} selectionController={selectionController} />
 }

 export default observer(FileContextMenuWrapper)
--- a/app/assets/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
+++ b/app/assets/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
@@ -1,16 +1,17 @@
+import { FunctionComponent, useCallback, useMemo } from 'react'
+import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
-import { FileItem } from '@standardnotes/snjs'
-import { FunctionComponent } from 'react'
-import { PopoverFileItemAction, PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
 import Icon from '@/Components/Icon/Icon'
 import Switch from '@/Components/Switch/Switch'
+import { observer } from 'mobx-react-lite'
+import { FilesController } from '@/Controllers/FilesController'
+import { SelectedItemsController } from '@/Controllers/SelectedItemsController'

 type Props = {
  closeMenu: () => void
  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
-  file: FileItem
-  fileProtectionToggleCallback?: (isProtected: boolean) => void
-  handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
+  filesController: FilesController
+  selectionController: SelectedItemsController
  isFileAttachedToNote?: boolean
  renameToggleCallback?: (isRenamingFile: boolean) => void
  shouldShowRenameOption: boolean
@@ -20,72 +21,73 @@ type Props = {
 const FileMenuOptions: FunctionComponent<Props> = ({
  closeMenu,
  closeOnBlur,
-  file,
-  fileProtectionToggleCallback,
-  handleFileAction,
+  filesController,
+  selectionController,
  isFileAttachedToNote,
  renameToggleCallback,
  shouldShowRenameOption,
  shouldShowAttachOption,
 }) => {
+  const { selectedFiles } = selectionController
+  const { handleFileAction } = filesController
+
+  const hasProtectedFiles = useMemo(() => selectedFiles.some((file) => file.protected), [selectedFiles])
+
+  const onPreview = useCallback(() => {
+    void handleFileAction({
+      type: PopoverFileItemActionType.PreviewFile,
+      payload: {
+        file: selectedFiles[0],
+        otherFiles: selectedFiles.length > 1 ? selectedFiles : filesController.allFiles,
+      },
+    })
+    closeMenu()
+  }, [closeMenu, filesController.allFiles, handleFileAction, selectedFiles])
+
+  const onDetach = useCallback(() => {
+    const file = selectedFiles[0]
+    void handleFileAction({
+      type: PopoverFileItemActionType.DetachFileToNote,
+      payload: { file },
+    })
+    closeMenu()
+  }, [closeMenu, handleFileAction, selectedFiles])
+
+  const onAttach = useCallback(() => {
+    const file = selectedFiles[0]
+    void handleFileAction({
+      type: PopoverFileItemActionType.AttachFileToNote,
+      payload: { file },
+    })
+    closeMenu()
+  }, [closeMenu, handleFileAction, selectedFiles])
+
  return (
    <>
-      <button
-        onBlur={closeOnBlur}
-        className="sn-dropdown-item focus:bg-info-backdrop"
-        onClick={() => {
-          handleFileAction({
-            type: PopoverFileItemActionType.PreviewFile,
-            payload: file,
-          }).catch(console.error)
-          closeMenu()
-        }}
-      >
+      <button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onPreview}>
        <Icon type="file" className="mr-2 color-neutral" />
        Preview file
      </button>
-      {isFileAttachedToNote ? (
-        <button
-          onBlur={closeOnBlur}
-          className="sn-dropdown-item focus:bg-info-backdrop"
-          onClick={() => {
-            handleFileAction({
-              type: PopoverFileItemActionType.DetachFileToNote,
-              payload: file,
-            }).catch(console.error)
-            closeMenu()
-          }}
-        >
-          <Icon type="link-off" className="mr-2 color-neutral" />
-          Detach from note
-        </button>
-      ) : shouldShowAttachOption ? (
-        <button
-          onBlur={closeOnBlur}
-          className="sn-dropdown-item focus:bg-info-backdrop"
-          onClick={() => {
-            handleFileAction({
-              type: PopoverFileItemActionType.AttachFileToNote,
-              payload: file,
-            }).catch(console.error)
-            closeMenu()
-          }}
-        >
-          <Icon type="link" className="mr-2 color-neutral" />
-          Attach to note
-        </button>
-      ) : null}
+      {selectedFiles.length === 1 && (
+        <>
+          {isFileAttachedToNote ? (
+            <button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onDetach}>
+              <Icon type="link-off" className="mr-2 color-neutral" />
+              Detach from note
+            </button>
+          ) : shouldShowAttachOption ? (
+            <button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onAttach}>
+              <Icon type="link" className="mr-2 color-neutral" />
+              Attach to note
+            </button>
+          ) : null}
+        </>
+      )}
      <div className="min-h-1px my-1 bg-border"></div>
      <button
        className="sn-dropdown-item justify-between focus:bg-info-backdrop"
        onClick={() => {
-          handleFileAction({
-            type: PopoverFileItemActionType.ToggleFileProtection,
-            payload: file,
-            callback: (isProtected: boolean) => {
-              fileProtectionToggleCallback?.(isProtected)
-            },
-          }).catch(console.error)
+          void filesController.setProtectionForFiles(!hasProtectedFiles, selectionController.selectedFiles)
        }}
        onBlur={closeOnBlur}
      >
@@ -93,18 +95,18 @@ const FileMenuOptions: FunctionComponent<Props> = ({
          <Icon type="password" className="mr-2 color-neutral" />
          Password protection
        </span>
-        <Switch className="px-0 pointer-events-none" tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} checked={file.protected} />
+        <Switch
+          className="px-0 pointer-events-none"
+          tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+          checked={hasProtectedFiles}
+        />
      </button>
      <div className="min-h-1px my-1 bg-border"></div>
      <button
        onBlur={closeOnBlur}
        className="sn-dropdown-item focus:bg-info-backdrop"
        onClick={() => {
-          handleFileAction({
-            type: PopoverFileItemActionType.DownloadFile,
-            payload: file,
-          }).catch(console.error)
-          closeMenu()
+          void filesController.downloadFiles(selectionController.selectedFiles)
        }}
      >
        <Icon type="download" className="mr-2 color-neutral" />
@@ -126,11 +128,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
        onBlur={closeOnBlur}
        className="sn-dropdown-item focus:bg-info-backdrop"
        onClick={() => {
-          handleFileAction({
-            type: PopoverFileItemActionType.DeleteFile,
-            payload: file,
-          }).catch(console.error)
-          closeMenu()
+          void filesController.deleteFilesPermanently(selectionController.selectedFiles)
        }}
      >
        <Icon type="trash" className="mr-2 color-danger" />
@@ -140,4 +138,4 @@ const FileMenuOptions: FunctionComponent<Props> = ({
  )
 }

-export default FileMenuOptions
+export default observer(FileMenuOptions)
--- a/app/assets/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx
+++ b/app/assets/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx
@@ -0,0 +1,93 @@
+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'
+
+type Props = {
+  filesController: FilesController
+  selectionController: SelectedItemsController
+}
+
+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 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)
+    }
+  }, [])
+
+  return (
+    <Disclosure open={open} onChange={onDisclosureChange}>
+      <DisclosureButton
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            setOpen(false)
+          }
+        }}
+        onBlur={closeOnBlur}
+        ref={buttonRef}
+        className="sn-icon-button border-contrast"
+      >
+        <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="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
+        onBlur={closeOnBlur}
+        tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+      >
+        {open && (
+          <FileMenuOptions
+            filesController={filesController}
+            selectionController={selectionController}
+            closeOnBlur={closeOnBlur}
+            closeMenu={() => {
+              setOpen(false)
+            }}
+            shouldShowAttachOption={false}
+            shouldShowRenameOption={false}
+          />
+        )}
+      </DisclosurePanel>
+    </Disclosure>
+  )
+}
+
+export default observer(FilesOptionsPanel)