niklas/s3browser-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

use Table for FileBrowserList

Browse Source
This commit is contained in:
Djeeberjr 2021-10-01 23:44:12 +02:00
parent a287df5e0c
commit fcb34aeacc
4 changed files with 57 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/DirectoryElement.tsx
View File

@ -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

43
src/components/FileBrowserElement.tsx
View File

@ -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

111
src/components/FileBrowserList.tsx
View File

@ -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) => {
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.toString()}
dir={v}
onClick={(e,dir)=>{
props.onDirClick?.(e,dir.id)
}}
onContextMenu={(e)=>{
props.onDirContext?.(e,v.id)
}}
const FileBrowserList: React.FC<Props> = ({
files,directorys,onDirClick,onDirContext,onFileClick,onFileContext,onRenameDone,editId,editEnable
}) => {
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,"")}
/>))}
{ 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>
</>
return <Table data={tableData} />
}
export default FileBrowserList

38
src/components/FileElement.tsx
View File

@ -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