50 lines
900 B
TypeScript
50 lines
900 B
TypeScript
|
import React from "react"
|
||
|
|
import { useState } from "react"
|
||
|
|
import { useOpenDirQuery } from "../generated/graphql"
|
||
|
|
import FileBrowserElement from "./FileBrowserElement"
|
||
|
|
|
||
|
|
function parentDir(path:string): string {
|
||
|
|
if(path.endsWith("/")){
|
||
|
|
path = path.substr(0,path.length - 1)
|
||
|
|
}
|
||
|
|
const paths = path.split("/")
|
||
|
|
paths.pop()
|
||
|
|
return paths.join("/")
|
||
|
|
}
|
||
|
|
|
||
|
|
const FileBrowser: React.FC = () => {
|
||
|
|
const [path,setPath] = useState("/")
|
||
|
|
|
||
|
|
const { data } = useOpenDirQuery({
|
||
|
|
variables:{
|
||
|
|
path
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div onClick={()=>{
|
||
|
|
setPath(parentDir(path))
|
||
|
|
}}>
|
||
|
|
..
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
{ data?.files.map(v => (<FileBrowserElement
|
||
|
|
key={v?.id}
|
||
|
|
file={v}
|
||
|
|
/>))}
|
||
|
|
|
||
|
|
{ data?.directorys.map(v => (<FileBrowserElement
|
||
|
|
key={v?.id}
|
||
|
|
dir={v}
|
||
|
|
onClick={(data)=>{
|
||
|
|
setPath(data.id)
|
||
|
|
}}
|
||
|
|
/>))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default FileBrowser
|