mirror of
https://github.com/langgenius/dify.git
synced 2026-05-02 08:28:03 +08:00
fix(skill): add throttle to folder toggle and validate pinTab
- Use es-toolkit throttle with leading edge to prevent folder toggle flickering on double-click (3 toggles reduced to 1) - Add validation in pinTab to check if file exists in openTabIds
This commit is contained in:
@ -4,8 +4,9 @@ import type { NodeRendererProps } from 'react-arborist'
|
||||
import type { TreeNodeData } from '../type'
|
||||
import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
|
||||
import { RiFolderLine, RiFolderOpenLine, RiMoreFill } from '@remixicon/react'
|
||||
import { throttle } from 'es-toolkit/function'
|
||||
import * as React from 'react'
|
||||
import { useCallback, useState } from 'react'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
|
||||
import {
|
||||
@ -34,11 +35,16 @@ const TreeNode = ({ node, style, dragHandle }: NodeRendererProps<TreeNodeData>)
|
||||
|
||||
const fileIconType = !isFolder ? getFileIconType(node.data.name) : null
|
||||
|
||||
const throttledToggle = useMemo(
|
||||
() => throttle(() => node.toggle(), 300, { edges: ['leading'] }),
|
||||
[node],
|
||||
)
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
node.select()
|
||||
if (isFolder)
|
||||
node.toggle()
|
||||
throttledToggle()
|
||||
else
|
||||
storeApi.getState().openTab(node.data.id, { pinned: false })
|
||||
}
|
||||
@ -46,14 +52,14 @@ const TreeNode = ({ node, style, dragHandle }: NodeRendererProps<TreeNodeData>)
|
||||
const handleDoubleClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
if (isFolder)
|
||||
node.toggle()
|
||||
throttledToggle()
|
||||
else
|
||||
storeApi.getState().openTab(node.data.id, { pinned: true })
|
||||
}
|
||||
|
||||
const handleToggle = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
node.toggle()
|
||||
throttledToggle()
|
||||
}
|
||||
|
||||
const handleContextMenu = useCallback((e: React.MouseEvent) => {
|
||||
|
||||
@ -91,7 +91,9 @@ export const createTabSlice: StateCreator<TabSliceShape> = (set, get) => ({
|
||||
},
|
||||
|
||||
pinTab: (fileId: string) => {
|
||||
const { previewTabId } = get()
|
||||
const { previewTabId, openTabIds } = get()
|
||||
if (!openTabIds.includes(fileId))
|
||||
return
|
||||
if (previewTabId === fileId)
|
||||
set({ previewTabId: null })
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user