From 713bd7c326bf0e916f5b3fe48ab676e6a409f1c0 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Tue, 16 Sep 2025 11:52:07 +0800
Subject: [PATCH] refactor: Simplify drawer component logic by extracting
 shouldCloseDrawer function for better readability and maintainability

---
 .../detail/completed/common/drawer.tsx         | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/app/components/datasets/documents/detail/completed/common/drawer.tsx b/web/app/components/datasets/documents/detail/completed/common/drawer.tsx
index 59ac9d76f1..34170595db 100644
--- a/web/app/components/datasets/documents/detail/completed/common/drawer.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/drawer.tsx
@@ -36,11 +36,9 @@ const Drawer = ({
     onClose()
   }, { exactMatch: true, useCapture: true })
 
-  const onDownCapture = useCallback((e: PointerEvent) => {
-    if (!open || modal) return
+  const shouldCloseDrawer = useCallback((target: Node | null) => {
     const panelContent = panelContentRef.current
-    if (!panelContent) return
-    const target = e.target as Node | null
+    if (!panelContent) return false
     const chunks = document.querySelectorAll('.chunk-card')
     const childChunks = document.querySelectorAll('.child-chunk')
     const isClickOnChunk = Array.from(chunks).some((chunk) => {
@@ -51,9 +49,17 @@ const Drawer = ({
     })
     const reopenChunkDetail = (currSegment.showModal && isClickOnChildChunk)
       || (currChildChunk.showModal && isClickOnChunk && !isClickOnChildChunk)
-    if (target && !panelContent.contains(target) && (!needCheckChunks || reopenChunkDetail))
+    return target && !panelContent.contains(target) && (!needCheckChunks || reopenChunkDetail)
+  }, [currSegment, currChildChunk, needCheckChunks])
+
+  const onDownCapture = useCallback((e: PointerEvent) => {
+    if (!open || modal) return
+    const panelContent = panelContentRef.current
+    if (!panelContent) return
+    const target = e.target as Node | null
+    if (shouldCloseDrawer(target))
       queueMicrotask(onClose)
-  }, [currSegment, currChildChunk, needCheckChunks, onClose, open])
+  }, [shouldCloseDrawer, onClose, open, modal])
 
   useEffect(() => {
     window.addEventListener('pointerdown', onDownCapture, { capture: true })