lingo3d/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, Fragment as _Fragment } from "preact/jsx-runtime";
import { useMemo } from "preact/hooks";
import { get } from "@lincode/utils";
import FileButton from "./FileButton";
import FileTreeItem from "./FileTreeItem";
import useInitCSS from "../hooks/useInitCSS";
import { APPBAR_HEIGHT, PANELS_HEIGHT } from "../../globals";
import { setFileSelected } from "../../states/useFileSelected";
import useSyncState from "../hooks/useSyncState";
import { getFileBrowserDir } from "../../states/useFileBrowserDir";
import useInitEditor from "../hooks/useInitEditor";
import FileBrowserContextMenu from "./FileBrowserContextMenu";
import { getFileStructure } from "../../states/useFileStructure";
const FileBrowser = () => {
    useInitCSS();
    useInitEditor();
    const fileBrowserDir = useSyncState(getFileBrowserDir);
    const fileStructure = useSyncState(getFileStructure);
    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(_Fragment, { children: [_jsxs("div", { className: "lingo3d-ui lingo3d-bg lingo3d-panels", style: {
                    height: PANELS_HEIGHT - APPBAR_HEIGHT,
                    width: "100%",
                    display: "flex"
                }, children: [_jsx("div", { style: { overflow: "scroll", width: 200 }, children: _jsx(FileTreeItem, { fileStructure: fileStructure }) }), _jsx("div", { style: { flexGrow: 1 }, children: _jsx("div", { className: "lingo3d-absfull", style: {
                                overflow: "scroll",
                                display: "flex",
                                flexWrap: "wrap"
                            }, onMouseDown: () => setFileSelected(undefined), children: filteredFiles?.map((file) => (_jsx(FileButton, { file: file }, file.name))) }) })] }), _jsx(FileBrowserContextMenu, {})] }));
};
export default FileBrowser;
//# sourceMappingURL=index.js.map