use Table for FileBrowserList

src/components/DirectoryElement.tsx

@@ -1,23 +0,0 @@
-import React from "react"
-import { Directory } from "../generated/graphql"
-import { MdFolderOpen } from "react-icons/md"
-
-interface Props {
-    dir: Directory
-}
-
-const DirectoryElement: React.FC<Props> = (props) => {
-	return (
-		<>
-			<td>
-				<MdFolderOpen className="inline"/> {props.dir.name}
-			</td>
-			<td>
-			</td>
-			<td>	
-			</td>
-		</>
-	)
-}
-
-export default DirectoryElement

src/components/FileBrowserElement.tsx

@@ -1,43 +0,0 @@
-import React from "react"
-import { Directory, File } from "../generated/graphql"
-import DirectoryComponent from "./DirectoryElement"
-import FileElement from "./FileElement"
-
-interface Props {
-    file?: File
-    dir?: Directory
-    onClick?: (event: React.MouseEvent ,data: File | Directory) => void
-	onContextMenu?: (e:React.MouseEvent) => void
-	edit: boolean
-	onRename?: (newName: string)=>void
-	onCancleRename?: ()=>void
-}
-
-const FileBrowserElement: React.FC<Props> = (props) => {
-	return (
-		<tr 
-			className="hover:bg-gray-100 dark:hover:bg-gray-900 text-lg"
-			onClick={(e)=>{
-				if(props.file){
-					props.onClick?.(e,props.file)
-				}else if(props.dir){
-					props.onClick?.(e,props.dir)
-				}
-			}}
-
-			onContextMenu={(e)=>props.onContextMenu?.(e)}
-			
-		>
-			{(props.file) ? <FileElement
-				edit={props.edit}
-				file={props.file}
-				onCancleRename={props.onCancleRename}
-				onRename={props.onRename}
-			/>:(props.dir)?<DirectoryComponent
-				dir={props.dir} 
-			/>:<></>}
-		</tr>
-	)
-}
-
-export default FileBrowserElement

src/components/FileBrowserList.tsx

@@ -1,7 +1,12 @@
 import React from "react"
+import { FaRegFileAlt } from "react-icons/fa"
+import { MdFolderOpen } from "react-icons/md"
+import dateFormat from "../functions/dateFomat"
+import sizeToReadable from "../functions/sizeToReadable"
 import { Directory, File } from "../generated/graphql"
 import ObjID from "../types/ObjID"
-import FileBrowserElement from "./FileBrowserElement"
+import Renameable from "./Renameable"
+import Table, { Data, Row } from "./Table"
 
 interface Props{
     directorys: Directory[]
@@ -17,65 +22,59 @@ interface Props{
 	onRenameDone?: (id: ObjID, changed: boolean, newName: string)=>void
 }
 
-const FileBrowserList: React.FC<Props> = (props) => {
+const FileBrowserList: React.FC<Props> = ({
-	return <>
+	files,directorys,onDirClick,onDirContext,onFileClick,onFileContext,onRenameDone,editId,editEnable
-		<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.toString()}
-					dir={v}
-					onClick={(e,dir)=>{
-						props.onDirClick?.(e,dir.id)
-					}}
-					onContextMenu={(e)=>{
-						props.onDirContext?.(e,v.id)
-					}}
 
-					edit={props.editEnable && (v.id === props.editId)}
+	const tableData: Data = {
+		headers: [
+			{name: "Name"},
+			{name: "Last Modified"},
+			{name: "Size"}
+		],
+		body:[
+			...directorys.map((e):Row<Directory>=>{return {
+				cells:[
+					{
+						name:e.name || "",
+						component: <div>
+							<MdFolderOpen className="inline" />
+							<Renameable
+								text={e.name || ""}
+								edit={editEnable && (e.id === editId)}
+								onRename={(newName)=>{e.name != newName?onRenameDone?.(e.id,true,newName):onRenameDone?.(e.id,false,newName)}}
+								onCancleRename={()=>onRenameDone?.(e.id,false,"")}
+							/>
+						</div>
+					}],
+				data: e,
+				onClick: ((e,data)=>onDirClick?.(e,data.id)),
+				onContextMenu: ((e,data)=>onDirContext?.(e,data.id))
+			}}),
+			...files.map((e):Row<File>=>{return {
+				cells:[
+					{
+						name:e.name || "",
+						component: <div>
+							<FaRegFileAlt className="inline" />
+							<Renameable
+								text={e.name || ""}
+								edit={editEnable && (e.id === editId)}
+								onRename={(newName)=>{e.name != newName?onRenameDone?.(e.id,true,newName):onRenameDone?.(e.id,false,newName)}}
+								onCancleRename={()=>onRenameDone?.(e.id,false,"")}
+							/>
+						</div>
+					},
+					{name:dateFormat(e.lastModified)},{name:sizeToReadable(e.size)}],
+				data: e,
+				onClick: ((e,data)=>onFileClick?.(e,data.id)),
+				onContextMenu: ((e,data)=>onFileContext?.(e,data.id))
+			}}),
+		],
 		
-					onRename={(newName)=>{
+	}
-						if (v.name != newName){
-							props.onRenameDone?.(v.id,true,newName)
-						}else{
-							props.onRenameDone?.(v.id,false,newName)
-						}
-					}}
 
-					onCancleRename={()=>props.onRenameDone?.(v.id,false,"")}
+	return <Table data={tableData} />
-				/>))}
-								
-				{ props.files.map(v => (<FileBrowserElement 
-					key={v.id.toString()}
-					file={v}
-					onClick={(e,file)=>{
-						props.onFileClick?.(e,file.id)
-					}}
-					onContextMenu={(e)=>{
-						props.onFileContext?.(e,v.id)
-					}}
-
-					edit={props.editEnable && (v.id === props.editId)}
-
-					onRename={(newName)=>{
-						if (v.name != newName){
-							props.onRenameDone?.(v.id,true,newName)
-						}else{
-							props.onRenameDone?.(v.id,false,newName)
-						}
-					}}
-
-					onCancleRename={()=>props.onRenameDone?.(v.id,false,"")}
-				/>))}
-			</tbody>
-		</table>
-	</>
 }
 
 export default FileBrowserList

src/components/FileElement.tsx

@@ -1,38 +0,0 @@
-import React from "react"
-import { File } from "../generated/graphql"
-import sizeToReadable from "../functions/sizeToReadable"
-import dateFormat from "../functions/dateFomat"
-import { FaRegFileAlt } from "react-icons/fa"
-import Renameable from "./Renameable"
-
-interface Props {
-    file: File,
-	edit: boolean
-	onRename?: (newName: string)=>void
-	onCancleRename?: ()=>void
-}
-
-const FileElement: React.FC<Props> = (props) => {
-	return (
-		<>
-			<td>
-				<FaRegFileAlt className="inline" />
-				<Renameable
-					text={props.file.name || ""}
-					edit={props.edit}
-					onCancleRename={props.onCancleRename}
-					onRename={props.onRename} 
-				/>
-			</td>
-			<td>
-				{dateFormat(props.file.lastModified)}
-			</td>
-			<td>
-				{sizeToReadable(props.file.size)}
-			</td>
-
-		</>
-	)
-}
-
-export default FileElement