diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx index 70549a5e1d..14e065250a 100644 --- a/web/app/components/plugins/plugin-page/index.tsx +++ b/web/app/components/plugins/plugin-page/index.tsx @@ -36,23 +36,24 @@ const PluginPage = ({ const { setShowPluginSettingModal } = useModalContext() as any const [currentFile, setCurrentFile] = useState(null) const containerRef = usePluginPageContext(v => v.containerRef) - - const { dragging, fileUploader, fileChangeHandle, removeFile } = useUploader({ - onFileChange: setCurrentFile, - containerRef, - }) - const options = useMemo(() => { return [ { value: 'plugins', text: t('common.menus.plugins') }, { value: 'discover', text: 'Explore Marketplace' }, ] }, [t]) - const [activeTab, setActiveTab] = useTabSearchParams({ defaultTab: options[0].value, }) + const uploaderProps = useUploader({ + onFileChange: setCurrentFile, + containerRef, + enabled: activeTab === 'plugins', + }) + + const { dragging, fileUploader, fileChangeHandle, removeFile } = uploaderProps + return (
Drop plugin package here to install
{currentFile && ( - + {})} /> )} + {})} + /> )} { activeTab === 'discover' && marketplace } - ) } diff --git a/web/app/components/plugins/plugin-page/use-uploader.ts b/web/app/components/plugins/plugin-page/use-uploader.ts index d49fe012b7..fb3974c448 100644 --- a/web/app/components/plugins/plugin-page/use-uploader.ts +++ b/web/app/components/plugins/plugin-page/use-uploader.ts @@ -3,9 +3,10 @@ import { useEffect, useRef, useState } from 'react' type UploaderHookProps = { onFileChange: (file: File | null) => void containerRef: React.RefObject + enabled?: boolean } -export const useUploader = ({ onFileChange, containerRef }: UploaderHookProps) => { +export const useUploader = ({ onFileChange, containerRef, enabled = true }: UploaderHookProps) => { const [dragging, setDragging] = useState(false) const fileUploader = useRef(null) @@ -39,19 +40,26 @@ export const useUploader = ({ onFileChange, containerRef }: UploaderHookProps) = onFileChange(files[0]) } - const fileChangeHandle = (e: React.ChangeEvent) => { - const file = e.target.files?.[0] || null - onFileChange(file) - } + const fileChangeHandle = enabled + ? (e: React.ChangeEvent) => { + const file = e.target.files?.[0] || null + onFileChange(file) + } + : null - const removeFile = () => { - if (fileUploader.current) - fileUploader.current.value = '' + const removeFile = enabled + ? () => { + if (fileUploader.current) + fileUploader.current.value = '' - onFileChange(null) - } + onFileChange(null) + } + : null useEffect(() => { + if (!enabled) + return + const current = containerRef.current if (current) { current.addEventListener('dragenter', handleDragEnter) @@ -67,10 +75,10 @@ export const useUploader = ({ onFileChange, containerRef }: UploaderHookProps) = current.removeEventListener('drop', handleDrop) } } - }, [containerRef]) + }, [containerRef, enabled]) return { - dragging, + dragging: enabled ? dragging : false, fileUploader, fileChangeHandle, removeFile,