refactor file browser list

src/components/FileBrowser.tsx

@@ -11,10 +11,10 @@ import Breadcrum from "./Breadcrum"
 import CreateDirButton from "./CreateDirButton"
 import DragAndDrop from "./DragAndDrop"
 import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
-import FileBrowserElement from "./FileBrowserElement"
 import FileOpen from "./FileOpen"
 import FileUploadButton from "./FileUploadButton"
 import { ReactComponent as Spinner } from "./../assets/spinner.svg"
+import FileBrowserList from "./FileBrowserList"
 
 function uriToPath(pathname:string) {
 	// strip the "/f" from e.g. "/f/dir1/dir2"
@@ -65,24 +65,6 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 		refetchDir()
 	}
 
-	function openFileContextMenu(e: React.MouseEvent, id: string) {
-		e.preventDefault()
-		showFileContext(e,{
-			props:{
-				id
-			}
-		})
-	}
-
-	function openDirContextMenu(e: React.MouseEvent, id: string) {
-		e.preventDefault()
-		showDirContext(e,{
-			props:{
-				id
-			}
-		})
-	}
-
 	async function onContextSelect(action:Action, id: string) {
 		switch (action) {
 		case Action.FileDelete:
@@ -149,48 +131,38 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 
 				</div>
 				<div>
-					<table className="w-full">
+					<FileBrowserList 
-						<thead className="border-b-2 dark:border-gray-900">
+						directorys={data?.directorys || []}
-							<tr>
+						files={data?.files || []}
-								<th className="text-left">Name</th>
-								<th className="text-left">Last Modified</th>
-								<th className="text-left">Size</th>
-							</tr>
-						</thead>
-						<tbody className="divide-y dark:divide-gray-900">
-							{ data?.directorys.map(v => (<FileBrowserElement
-								key={v?.id}
-								dir={v}
-								onClick={(dir)=>{
-									props.history.push(pathToUri(dir.id))
-								}}
-								onContextMenu={(e)=>{
-									openDirContextMenu(e,v.id)
-								}}
-							/>))}
 
-							{ data?.files.map(v => (<FileBrowserElement 
+						onDirClick={(e,path)=>{
-								key={v?.id}
+							props.history.push(pathToUri(path))
-								file={v}
+						}}
-								onClick={(file)=>{
+
-									setOpenFileId(file.id)
+						onDirContext={(e,path)=>{
+							e.preventDefault()
+							showDirContext(e,{props:{id:path}})
+						}}
+
+						onFileClick={(e,id)=>{
+							setOpenFileId(id)
 							setShowFile(true)
 						}}
-								onContextMenu={(e)=>{
+
-									openFileContextMenu(e,v.id)
+						onFileContext={(e,id)=>{
+							e.preventDefault()
+							showFileContext(e,{props:{id}})
 						}}
-							/>))}
+					/>
-						</tbody>
-					</table>
 					{loading && 
 						<div className="flex justify-center mt-4">
 							<Spinner />
 						</div>
 					}
 				</div>
-				{<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
+				<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
 					setShowFile(false)
-				}} />}
+				}} />
 			</DragAndDrop>
 		</div>
 	)

src/components/FileBrowserElement.tsx

@@ -7,7 +7,7 @@ import FileElement from "./FileElement"
 interface Props {
     file?: File | null
     dir?: Directory | null
-    onClick?: (data: File | Directory) => void
+    onClick?: (event: React.MouseEvent ,data: File | Directory) => void
 	onContextMenu?: (e:React.MouseEvent) => void
 }
 
@@ -15,11 +15,11 @@ const FileBrowserElement: React.FC<Props> = (props) => {
 	return (
 		<tr 
 			className="hover:bg-gray-100 dark:hover:bg-gray-900 text-lg"
-			onClick={()=>{
+			onClick={(e)=>{
 				if(props.file){
-					props.onClick?.(props.file)
+					props.onClick?.(e,props.file)
 				}else if(props.dir){
-					props.onClick?.(props.dir)
+					props.onClick?.(e,props.dir)
 				}
 			}}
 

src/components/FileBrowserList.tsx

@@ -0,0 +1,51 @@
+import React from "react"
+import { Directory, File } from "../generated/graphql"
+import FileBrowserElement from "./FileBrowserElement"
+
+interface Props{
+    directorys: Directory[]
+    files: File[]
+    onFileContext?: (event: React.MouseEvent, id: string)=>void
+    onDirContext?: (event: React.MouseEvent, path: string)=>void
+    onFileClick?: (event: React.MouseEvent,id: string)=>void
+    onDirClick?: (event: React.MouseEvent,path: string)=>void
+}
+
+const FileBrowserList: React.FC<Props> = (props) => {
+	return <>
+		<table className="w-full">
+			<thead className="border-b-2 dark:border-gray-900">
+				<tr>
+					<th className="text-left">Name</th>
+					<th className="text-left">Last Modified</th>
+					<th className="text-left">Size</th>
+				</tr>
+			</thead>
+			<tbody className="divide-y dark:divide-gray-900">
+				{ props.directorys.map(v => (<FileBrowserElement
+					key={v?.id}
+					dir={v}
+					onClick={(e,dir)=>{
+						props.onDirClick?.(e,dir.id)
+					}}
+					onContextMenu={(e)=>{
+						props.onDirContext?.(e,v.id)
+					}}
+				/>))}
+								
+				{ props.files.map(v => (<FileBrowserElement 
+					key={v?.id}
+					file={v}
+					onClick={(e,file)=>{
+						props.onFileClick?.(e,file.id)
+					}}
+					onContextMenu={(e)=>{
+						props.onFileContext?.(e,v.id)
+					}}
+				/>))}
+			</tbody>
+		</table>
+	</>
+}
+
+export default FileBrowserList