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

Ben Schlegel

2023-09-16 c7d3474ba8cb49ab0f1978216d80b08ec2c8e5d7

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

 quartz/components/Explorer.tsx

@@ -11,6 +11,17 @@
  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 @@
    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")

 quartz/components/ExplorerNode.tsx

@@ -7,6 +7,7 @@
  folderDefaultState: "collapsed" | "open"
  folderClickBehavior: "collapse" | "link"
  useSavedState: boolean
  sortFn: (a: FileNode, b: FileNode) => number
}

type DataWrapper = {
@@ -90,19 +91,13 @@
  }

  // 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))
  }
}