51 lines
965 B
TypeScript
51 lines
965 B
TypeScript
import React from "react"
|
|
import { useState } from "react"
|
|
import { useOpenDirQuery } from "../generated/graphql"
|
|
import Breadcrum from "./Breadcrum"
|
|
import FileBrowserElement from "./FileBrowserElement"
|
|
|
|
const FileBrowser: React.FC = () => {
|
|
const [path,setPath] = useState("/")
|
|
|
|
const { data } = useOpenDirQuery({
|
|
variables:{
|
|
path
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div>
|
|
<Breadcrum path={path} onDirClick={(newPath)=>{
|
|
setPath(newPath)
|
|
}}/>
|
|
<div>
|
|
<table className="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Size</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
{ data?.directorys.map(v => (<FileBrowserElement
|
|
key={v?.id}
|
|
dir={v}
|
|
onClick={(data)=>{
|
|
setPath(data.id)
|
|
}}
|
|
/>))}
|
|
|
|
{ data?.files.map(v => (<FileBrowserElement
|
|
key={v?.id}
|
|
file={v}
|
|
/>))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FileBrowser
|