diff --git a/gui_dev/package.json b/gui_dev/package.json index bc63014a..e1cb7f00 100644 --- a/gui_dev/package.json +++ b/gui_dev/package.json @@ -38,7 +38,7 @@ "eslint-plugin-jsdoc": "^50.5.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-compiler": "latest", - "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.14", "prettier": "^3.3.3", "vite": "^5.4.11" diff --git a/gui_dev/src/components/FileBrowser/FileBrowser.jsx b/gui_dev/src/components/FileBrowser/FileBrowser.jsx index 8e12e11f..278a4f4d 100644 --- a/gui_dev/src/components/FileBrowser/FileBrowser.jsx +++ b/gui_dev/src/components/FileBrowser/FileBrowser.jsx @@ -2,6 +2,7 @@ import { useReducer, useEffect } from "react"; import { getBackendURL } from "@/utils/getBackendURL"; import { Box, + Button, Paper, Typography, TextField, @@ -15,6 +16,7 @@ import { TableSortLabel, Modal, Select, + Stack, FormControl, InputLabel, Snackbar, @@ -90,8 +92,10 @@ const columns = [ export const FileBrowser = ({ isModal = false, directory = null, + onlyDirectories = false, + allowedExtensions = ALLOWED_EXTENSIONS, onClose, - onFileSelect, + onSelect, }) => { const [state, dispatch] = useReducer(reducer, initialState); @@ -142,11 +146,16 @@ export const FileBrowser = ({ const fetchFiles = async (path) => { try { - const files = await fileManager.getFiles({ + let files = await fileManager.getFiles({ path, - allowedExtensions: ALLOWED_EXTENSIONS.join(","), + allowedExtensions: allowedExtensions.join(","), showHidden: state.showHiddenFiles, }); + + if (onlyDirectories) { + files = files.filter((file) => file.is_directory); + } + dispatch({ type: "SET_FILES", payload: files.map((file) => ({ @@ -165,13 +174,13 @@ export const FileBrowser = ({ } }; - const handleFileClick = (file) => { + const handleRowClick = (file) => { if (file.is_directory) { dispatch({ type: "SET_CURRENT_PATH", payload: file.path }); } else if ( ALLOWED_EXTENSIONS.some((ext) => file.name.toLowerCase().endsWith(ext)) ) { - onFileSelect(file); + onSelect(file); } }; @@ -273,9 +282,9 @@ export const FileBrowser = ({ }; const FileBrowserContent = ( - - - + + + {state.drives.length > 1 && ( Drive @@ -334,7 +343,7 @@ export const FileBrowser = ({ {" "} - + handleFileClick(file)} + onClick={() => handleRowClick(file)} sx={{ cursor: "pointer" }} > {columns.map((column) => ( @@ -400,13 +407,25 @@ export const FileBrowser = ({ + + + {onlyDirectories && ( + + )} + + dispatch({ type: "SET_ERROR", payload: "" })} message={state.error} /> - + ); return isModal ? ( diff --git a/gui_dev/src/components/FileBrowser/QuickAccess.jsx b/gui_dev/src/components/FileBrowser/QuickAccess.jsx index a412ed53..84b70064 100644 --- a/gui_dev/src/components/FileBrowser/QuickAccess.jsx +++ b/gui_dev/src/components/FileBrowser/QuickAccess.jsx @@ -58,7 +58,6 @@ export const QuickAccessSidebar = ({ onItemClick }) => { flexGrow: 1, display: "flex", flexDirection: "column", - maxHeight: 400, overflowX: "hidden", overflowY: "auto", scrollbarWidth: "thin", diff --git a/gui_dev/src/pages/SourceSelection/FileSelector.jsx b/gui_dev/src/pages/SourceSelection/FileSelector.jsx index 5c63a201..7f165597 100644 --- a/gui_dev/src/pages/SourceSelection/FileSelector.jsx +++ b/gui_dev/src/pages/SourceSelection/FileSelector.jsx @@ -23,15 +23,12 @@ export const FileSelector = () => { const [isSelecting, setIsSelecting] = useState(false); const [showFileBrowser, setShowFileBrowser] = useState(false); + const [showFolderBrowser, setShowFolderBrowser] = useState(false); useEffect(() => { setSourceType("lsl"); }, []); - const handleSelectFile = () => { - setShowFileBrowser(true); - }; - const handleFileSelect = (file) => { setIsSelecting(true); @@ -50,11 +47,17 @@ export const FileSelector = () => { } }; + const handleFolderSelect = (folder) => { + setShowFolderBrowser(false); + }; + return ( + {streamSetupMessage && ( { isModal={true} directory={fileBrowserDirRef.current} onClose={() => setShowFileBrowser(false)} - onFileSelect={handleFileSelect} + onSelect={handleFileSelect} + /> + )} + {showFolderBrowser && ( + setShowFolderBrowser(false)} + onSelect={handleFolderSelect} + onlyDirectories={true} /> )}