feat(explorer): add config to support custom sort fn

This commit is contained in:
Ben Schlegel 2023-09-16 12:40:19 +02:00
parent a0a98bcf4f
commit 5d9d681152
2 changed files with 20 additions and 14 deletions

View File

@ -11,6 +11,17 @@ const defaultOptions = (): Options => ({
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<Options>) => {
function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
@ -22,7 +33,7 @@ export default ((userOpts?: Partial<Options>) => {
allFiles.forEach((file) => fileTree.add(file, 1))
// Sort tree (folders first, then files (alphabetic))
fileTree.sort()
fileTree.sort(opts.sortFn!)
// Get all folders of tree. Initialize with collapsed state
const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")

View File

@ -7,6 +7,7 @@ export interface Options {
folderDefaultState: "collapsed" | "open"
folderClickBehavior: "collapse" | "link"
useSavedState: boolean
sortFn: (a: FileNode, b: FileNode) => number
}
type DataWrapper = {
@ -90,19 +91,13 @@ export class FileNode {
}
// Sort order: folders first, then files. Sort folders and files alphabetically
sort() {
this.children = this.children.sort((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
}
})
this.children.forEach((e) => e.sort())
/**
* Sorts tree according to sort/compare function
* @param sortFn compare function used for `.sort()`, also used recursively for children
*/
sort(sortFn: (a: FileNode, b: FileNode) => number) {
this.children = this.children.sort(sortFn)
this.children.forEach((e) => e.sort(sortFn))
}
}