mylingo3d/lib/editor/FileBrowser/index.js

Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor

import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { useMemo } from "preact/hooks";
import register from "preact-custom-element";
import { get, set, traverse } from "@lincode/utils";
import CloseIcon from "./icons/CloseIcon";
import { useFileBrowserDir, useFiles } from "../states";
import FileButton from "./FileButton";
import FileTreeItem from "./FileTreeItem";
import pathMap from "./pathMap";
import { setFileBrowser } from "../../states/useFileBrowser";
import TitleBar from "../component/TitleBar";
import TitleBarButton from "../component/TitleBarButton";
import { setFileSelected } from "../../states/useFileSelected";
const FileBrowser = () => {
    const [files] = useFiles();
    const [fileBrowserDir, setFileBrowserDir] = useFileBrowserDir();
    const [fileStructure, firstFolderName] = useMemo(() => {
        const fileStructure = {};
        let firstFolderName = "";
        if (files) {
            for (const file of files)
                set(fileStructure, file.webkitRelativePath.split("/"), file);
            firstFolderName = Object.keys(fileStructure)[0];
            traverse(fileStructure, (key, child, parent) => {
                let path = "";
                if (pathMap.has(parent))
                    path = pathMap.get(parent) + "/" + key;
                typeof child === "object" && pathMap.set(child, path);
            });
        }
        setFileBrowserDir(firstFolderName);
        return [fileStructure, firstFolderName];
    }, [files]);
    const filteredFiles = useMemo(() => {
        const currentFolder = get(fileStructure, fileBrowserDir.split("/"));
        const filteredFiles = currentFolder &&
            Object.values(currentFolder).filter((item) => item instanceof File && item.name[0] !== ".");
        return filteredFiles;
    }, [fileStructure, fileBrowserDir]);
    return (_jsxs("div", { className: "lingo3d-ui lingo3d-bg", style: {
            height: 200,
            width: "100%",
            display: "grid",
            gridTemplateColumns: "200px 1fr",
            gridTemplateRows: "24px 1fr",
            gridColumnGap: "0px",
            gridRowGap: "0px"
        }, children: [_jsx("div", { style: {
                    gridArea: "1 / 1 / 2 / 3",
                    background: "rgba(0, 0, 0, 0.1)",
                    display: "flex"
                }, children: _jsx(TitleBar, { title: "file browser", gap: 4, children: _jsx(TitleBarButton, { onClick: () => setFileBrowser(false), children: _jsx(CloseIcon, {}) }) }) }), _jsx("div", { style: { gridArea: "2 / 1 / 3 / 2", overflow: "scroll" }, children: _jsx(FileTreeItem, { fileStructure: fileStructure, firstFolderName: firstFolderName }) }), _jsx("div", { style: { gridArea: "2 / 2 / 3 / 3" }, children: _jsx("div", { style: {
                        width: "100%",
                        height: "100%",
                        overflow: "scroll",
                        display: "flex",
                        flexWrap: "wrap",
                        position: "absolute"
                    }, onMouseDown: () => setFileSelected(undefined), children: filteredFiles?.map((file) => (_jsx(FileButton, { file: file }))) }) })] }));
};
export default FileBrowser;
register(FileBrowser, "lingo3d-filebrowser");
//# sourceMappingURL=index.js.map