File Tree

1"use client"
2 
3import React, {
4  createContext,
5  forwardRef,
6  useCallback,
7  useContext,
8  useEffect,
9  useState,
10} from "react"
11import * as AccordionPrimitive from "@radix-ui/react-accordion"
12import { FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react"
13 
14import { cn } from "@/lib/utils"
15import { Button } from "@/components/ui/button"
16import { ScrollArea } from "@/components/ui/scroll-area"
17 
18type TreeViewElement = {
19  id: string
20  name: string
21  type?: "file" | "folder"
22  isSelectable?: boolean
23  children?: TreeViewElement[]
24}
25 
26type TreeSortMode =
27  | "default"
28  | "none"
29  | ((a: TreeViewElement, b: TreeViewElement) => number)
30 
31type TreeContextProps = {
32  selectedId: string | undefined
33  expandedItems: string[] | undefined
34  indicator: boolean
35  handleExpand: (id: string) => void
36  selectItem: (id: string) => void
37  setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>
38  openIcon?: React.ReactNode
39  closeIcon?: React.ReactNode
40  direction: "rtl" | "ltr"
41}
42 
43const TreeContext = createContext<TreeContextProps | null>(null)
44 
45const useTree = () => {
46  const context = useContext(TreeContext)
47  if (!context) {
48    throw new Error("useTree must be used within a TreeProvider")
49  }
50  return context
51}
52 
53type Direction = "rtl" | "ltr" | undefined
54 
55const isFolderElement = (element: TreeViewElement) => {
56  if (element.type) {
57    return element.type === "folder"
58  }
59 
60  return Array.isArray(element.children)
61}
62 
63const mergeExpandedItems = (
64  currentItems: string[] | undefined,
65  nextItems: string[]
66) => [...new Set([...(currentItems ?? []), ...nextItems])]
67 
68const treeCollator = new Intl.Collator("en", {
69  numeric: true,
70  sensitivity: "base",
71})
72 
73const defaultTreeComparator = (a: TreeViewElement, b: TreeViewElement) => {
74  const aIsFolder = isFolderElement(a)
75  const bIsFolder = isFolderElement(b)
76 
77  if (aIsFolder !== bIsFolder) {
78    return aIsFolder ? -1 : 1
79  }
80 
81  return treeCollator.compare(a.name, b.name)
82}
83 
84const getTreeComparator = (sort: TreeSortMode) => {
85  if (sort === "none") {
86    return undefined
87  }
88 
89  if (sort === "default") {
90    return defaultTreeComparator
91  }
92 
93  return sort
94}
95 
96const sortTreeElements = (
97  elements: TreeViewElement[],
98  sort: TreeSortMode
99): TreeViewElement[] => {
100  const comparator = getTreeComparator(sort)
101 
102  const nextElements = elements.map((element) => {
103    if (!Array.isArray(element.children)) {
104      return element
105    }
106 
107    return {
108      ...element,
109// … truncated