| | |
|---|
| | | import { ExplorerNode, FileNode, Options } from "./ExplorerNode" |
|---|
| | | |
|---|
| | | // Options interface defined in `ExplorerNode` to avoid circular dependency |
|---|
| | | const defaultOptions = (): Options => ({ |
|---|
| | | const defaultOptions = { |
|---|
| | | title: "Explorer", |
|---|
| | | folderClickBehavior: "collapse", |
|---|
| | | folderDefaultState: "collapsed", |
|---|
| | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | order: ["filter", "map", "sort"], |
|---|
| | | }) |
|---|
| | | } satisfies Options |
|---|
| | | |
|---|
| | | export default ((userOpts?: Partial<Options>) => { |
|---|
| | | function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) { |
|---|
| | | // Parse config |
|---|
| | | const opts: Options = { ...defaultOptions(), ...userOpts } |
|---|
| | | const opts: Options = { ...defaultOptions, ...userOpts } |
|---|
| | | |
|---|
| | | // Construct tree from allFiles |
|---|
| | | const fileTree = new FileNode("") |
|---|
| | |
|---|
| | | data-savestate={opts.useSavedState} |
|---|
| | | data-tree={jsonTree} |
|---|
| | | > |
|---|
| | | <h3>{opts.title}</h3> |
|---|
| | | <h1>{opts.title}</h1> |
|---|
| | | <svg |
|---|
| | | xmlns="http://www.w3.org/2000/svg" |
|---|
| | | width="14" |
|---|
| | |
|---|
| | | </svg> |
|---|
| | | </button> |
|---|
| | | <div id="explorer-content"> |
|---|
| | | <ul class="overflow"> |
|---|
| | | <ul class="overflow" id="explorer-ul"> |
|---|
| | | <ExplorerNode node={fileTree} opts={opts} fileData={fileData} /> |
|---|
| | | <li id="explorer-end" /> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
