72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
|
import type {
|
||
|
|
Directory,
|
||
|
|
PlaygroundExplorerLang,
|
||
|
|
SetState,
|
||
|
|
} from "@utils/playground";
|
||
|
|
import DirElement from "./DirElement";
|
||
|
|
import FileElement from "./FileElement";
|
||
|
|
|
||
|
|
export default function FileView({
|
||
|
|
lang,
|
||
|
|
root,
|
||
|
|
selectedFileName,
|
||
|
|
setSelectedFileName,
|
||
|
|
deleteFile,
|
||
|
|
renameFile,
|
||
|
|
className,
|
||
|
|
}: {
|
||
|
|
lang: PlaygroundExplorerLang;
|
||
|
|
root: Directory;
|
||
|
|
selectedFileName: string;
|
||
|
|
setSelectedFileName: SetState<string>;
|
||
|
|
deleteFile: (name: string) => void;
|
||
|
|
renameFile: (oldName: string, newName: string) => void;
|
||
|
|
className?: string;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className={className}>
|
||
|
|
<h3>{lang.title}</h3>
|
||
|
|
<div className="entries">
|
||
|
|
{Object.entries(root.dirs ?? {}).map(([name, dir]) => {
|
||
|
|
return (
|
||
|
|
<DirElement
|
||
|
|
key={name}
|
||
|
|
name={name}
|
||
|
|
fullPath={name}
|
||
|
|
dir={dir}
|
||
|
|
selectedFileName={selectedFileName}
|
||
|
|
lang={lang}
|
||
|
|
setSelectedFileName={setSelectedFileName}
|
||
|
|
deleteFile={deleteFile}
|
||
|
|
renameFile={renameFile}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
{Object.entries(root.files ?? {}).map(([name, _]) => {
|
||
|
|
const isSelected = selectedFileName == name;
|
||
|
|
return (
|
||
|
|
<span key={name}>
|
||
|
|
<FileElement
|
||
|
|
name={name}
|
||
|
|
fullPath={name}
|
||
|
|
isSelected={isSelected}
|
||
|
|
lang={lang}
|
||
|
|
onClick={
|
||
|
|
isSelected
|
||
|
|
? () => {}
|
||
|
|
: () => setSelectedFileName(name)
|
||
|
|
}
|
||
|
|
onDelete={() => deleteFile(name)}
|
||
|
|
renameFile={renameFile}
|
||
|
|
/>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|