import { QuartzComponentConstructor, QuartzComponentProps } from "./types" import explorerStyle from "./styles/explorer.scss" // @ts-ignore import script from "./scripts/explorer.inline" import { ExplorerNode, FileNode, Options } from "./ExplorerNode" // Options interface defined in `ExplorerNode` to avoid circular dependency const defaultOptions = (): Options => ({ title: "Explorer", folderClickBehavior: "collapse", folderDefaultState: "collapsed", useSavedState: true, // Sort order: folders first, then files. Sort folders and files alphabetically sortFn: (a, b) => { if ((!a.file && !b.file) || (a.file && b.file)) { return a.name.localeCompare(b.name) } if (a.file && !b.file) { return 1 } else { return -1 } }, }) export default ((userOpts?: Partial) => { function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) { // Parse config const opts: Options = { ...defaultOptions(), ...userOpts } // Construct tree from allFiles const fileTree = new FileNode("") allFiles.forEach((file) => fileTree.add(file, 1)) // Sort tree (folders first, then files (alphabetic)) fileTree.sort(opts.sortFn!) // If provided, apply filter function to fileTree if (opts.filterFn) { fileTree.filter(opts.filterFn) } // Get all folders of tree. Initialize with collapsed state const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed") // Stringify to pass json tree as data attribute ([data-tree]) const jsonTree = JSON.stringify(folders) return (
) } Explorer.css = explorerStyle Explorer.afterDOMLoaded = script return Explorer }) satisfies QuartzComponentConstructor