From 88b9d48ff852e8c5d58fee6f6fae7bce7408a006 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 29 Dec 2022 00:21:38 +0800
Subject: [PATCH] feat: toggle folder recursively via context menu

---
 .../FileExplorer/hooks/useNodeRenderers.tsx   | 40 ++++++++++++++++---
 src/components/FileExplorer/index.tsx         |  2 +-
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/components/FileExplorer/hooks/useNodeRenderers.tsx b/src/components/FileExplorer/hooks/useNodeRenderers.tsx
index d138343..58552e4 100644
--- a/src/components/FileExplorer/hooks/useNodeRenderers.tsx
+++ b/src/components/FileExplorer/hooks/useNodeRenderers.tsx
@@ -17,6 +17,7 @@ import { Icon } from '../../Icon'
 import { SearchMode } from '../../searchModes'
 import { DiffStatText } from '../DiffStatText'
 import { DiffStatGraph } from './../DiffStatGraph'
+import { VisibleNodesGeneratorMethods } from './useVisibleNodesGeneratorMethods'
 
 export type NodeRenderer = (node: TreeNode) => React.ReactNode
 
@@ -49,14 +50,20 @@ export function useRenderFileStatus() {
   )
 }
 
-function renderNodeContextMenu(node: TreeNode) {
-  return <NodeContextMenu node={node} />
+function renderNodeContextMenu(node: TreeNode, methods: VisibleNodesGeneratorMethods) {
+  return <NodeContextMenu node={node} visibleNodesGeneratorMethods={methods} />
 }
-export function useRenderMoreActions() {
-  return renderNodeContextMenu
+export function useRenderMoreActions(methods: VisibleNodesGeneratorMethods) {
+  return (node: TreeNode) => renderNodeContextMenu(node, methods)
 }
 
-function NodeContextMenu({ node }: { node: TreeNode }) {
+function NodeContextMenu({
+  node,
+  visibleNodesGeneratorMethods: { toggleExpansion },
+}: {
+  node: TreeNode
+  visibleNodesGeneratorMethods: VisibleNodesGeneratorMethods
+}) {
   const [isOpen, setIsOpen] = React.useState(false)
   const [copied, setCopied] = React.useState<string | null>(null)
   const [copyState, copyToClipboard] = useCopyToClipboard()
@@ -154,6 +161,24 @@ function NodeContextMenu({ node }: { node: TreeNode }) {
         Go to directory
       </ActionList.LinkItem>
     ),
+    toggleFolderRecursively:
+      node.type === 'tree' &&
+      (() => {
+        const trigger = (e: React.SyntheticEvent) => {
+          cancelEvent(e)
+          toggleExpansion(node, { recursive: true })
+          setIsOpen(false)
+        }
+        return (
+          <ActionList.LinkItem
+            {...getTriggerProps(trigger)}
+            href={node.url}
+            rel="noopener noreferrer"
+          >
+            Toggle folder recursively
+          </ActionList.LinkItem>
+        )
+      })(),
   }
 
   return (
@@ -180,10 +205,13 @@ function NodeContextMenu({ node }: { node: TreeNode }) {
         {actionElements.copyLink}
         {actionElements.copyRelativePath}
 
-        {(actionElements.openRawContent || actionElements.goToDirectory) && <ActionList.Divider />}
+        {(actionElements.openRawContent ||
+          actionElements.goToDirectory ||
+          actionElements.toggleFolderRecursively) && <ActionList.Divider />}
 
         {actionElements.openRawContent}
         {actionElements.goToDirectory}
+        {actionElements.toggleFolderRecursively}
       </ActionList>
     </AnchoredOverlay>
   )
diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index 977ac90..6700901 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -165,7 +165,7 @@ function LoadedFileExplorer({
     useRenderGoToButton(searched, goTo),
     useRenderFindInFolderButton(onSearch),
     useRenderFileCommentAmounts(),
-    useRenderMoreActions(),
+    useRenderMoreActions(methods),
     useRenderFileStatus(),
   ])
   const renderLabelText = useRenderLabelText(searchKey)