128 lines
No EOL
4 KiB
JavaScript
128 lines
No EOL
4 KiB
JavaScript
import { useState } from "react";
|
|
import { useVirtualRoot } from "../../../hooks/virtual-drive/VirtualRootContext.js";
|
|
import styles from "./FileExplorer.module.css";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faArrowUp, faCaretLeft, faCaretRight, faCog, faDesktop, faFile, faFileLines, faFolder, faHouse, faImage, faSearch } from "@fortawesome/free-solid-svg-icons";
|
|
// eslint-disable-next-line no-unused-vars
|
|
import { VirtualFile } from "../../../features/virtual-drive/virtual-file.js";
|
|
import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext.js";
|
|
|
|
/**
|
|
* @param {Object} props
|
|
* @param {VirtualFile} props.file
|
|
*/
|
|
function FilePreview({ file }) {
|
|
let preview = null;
|
|
|
|
switch (file.extension) {
|
|
case "png":
|
|
preview = <FontAwesomeIcon icon={faImage}/>
|
|
break;
|
|
case "txt":
|
|
preview = <FontAwesomeIcon icon={faFileLines}/>
|
|
break;
|
|
default:
|
|
preview = <FontAwesomeIcon icon={faFile}/>
|
|
break;
|
|
}
|
|
|
|
return preview;
|
|
}
|
|
|
|
export function FileExplorer({ startPath }) {
|
|
const virtualRoot = useVirtualRoot();
|
|
const [currentDirectory, setCurrentDirectory] = useState(virtualRoot.navigate(startPath ?? "~"));
|
|
const [path, setPath] = useState(currentDirectory.path);
|
|
const windowsManager = useWindowsManager();
|
|
|
|
const changeDirectory = (path, absolute = false) => {
|
|
const directory = absolute ? virtualRoot.navigate(path) : currentDirectory.navigate(path);
|
|
|
|
console.log(directory);
|
|
|
|
if (directory) {
|
|
setCurrentDirectory(directory);
|
|
setPath(directory.path);
|
|
}
|
|
}
|
|
|
|
const onPathChange = (event) => {
|
|
return setPath(event.target.value);
|
|
};
|
|
|
|
const onKeyDown = (event) => {
|
|
const value = event.target.value;
|
|
|
|
if (event.key === "Enter") {
|
|
setCurrentDirectory(virtualRoot.navigate(value));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.Container}>
|
|
<div className={styles.Header}>
|
|
<button title="Back" className={styles["Icon-button"]}>
|
|
<FontAwesomeIcon icon={faCaretLeft}/>
|
|
</button>
|
|
<button title="Forward" className={styles["Icon-button"]}>
|
|
<FontAwesomeIcon icon={faCaretRight}/>
|
|
</button>
|
|
<button title="Up" className={styles["Icon-button"]} onClick={() => { changeDirectory(".."); }}>
|
|
<FontAwesomeIcon icon={faArrowUp}/>
|
|
</button>
|
|
<input
|
|
value={path}
|
|
type="text"
|
|
className={styles["Path-input"]}
|
|
onChange={onPathChange}
|
|
onKeyDown={onKeyDown}
|
|
/>
|
|
<button title="Search" className={styles["Icon-button"]}>
|
|
<FontAwesomeIcon icon={faSearch}/>
|
|
</button>
|
|
<button title="Settings" className={styles["Icon-button"]}>
|
|
<FontAwesomeIcon icon={faCog}/>
|
|
</button>
|
|
</div>
|
|
<div className={styles.Body}>
|
|
<div className={styles.Sidebar}>
|
|
<button title="Home" className={styles["Nav-button"]} onClick={() => { changeDirectory("~"); }}>
|
|
<FontAwesomeIcon icon={faHouse}/>
|
|
Home
|
|
</button>
|
|
<button title="Desktop" className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Desktop"); }}>
|
|
<FontAwesomeIcon icon={faDesktop}/>
|
|
Desktop
|
|
</button>
|
|
<button title="Documents" className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Documents"); }}>
|
|
<FontAwesomeIcon icon={faFileLines}/>
|
|
Documents
|
|
</button>
|
|
<button title="Images" className={styles["Nav-button"]} onClick={() => { changeDirectory("~/Images"); }}>
|
|
<FontAwesomeIcon icon={faImage}/>
|
|
Images
|
|
</button>
|
|
</div>
|
|
<div className={styles.Main}>
|
|
{currentDirectory.files.map((file, index) =>
|
|
<button key={index} title={file.id} className={styles["File-button"]} onClick={(event) => {
|
|
event.preventDefault();
|
|
windowsManager.openFile(file);
|
|
}}>
|
|
<FilePreview file={file}/>
|
|
<p>{file.id}</p>
|
|
</button>
|
|
)}
|
|
{currentDirectory.subFolders.map(({ name }, index) =>
|
|
<button key={index} title={name} className={styles["Folder-button"]} onClick={() => {
|
|
changeDirectory(name);
|
|
}}>
|
|
<FontAwesomeIcon icon={faFolder}/>
|
|
<p>{name}</p>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |