"use client" import React, { createContext, forwardRef, useCallback, useContext, useEffect, useState, } from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" type TreeViewElement = { id: string name: string type?: "file" | "folder" isSelectable?: boolean children?: TreeViewElement[] } type TreeSortMode = | "default" | "none" | ((a: TreeViewElement, b: TreeViewElement) => number) type TreeContextProps = { selectedId: string | undefined expandedItems: string[] | undefined indicator: boolean handleExpand: (id: string) => void selectItem: (id: string) => void setExpandedItems?: React.Dispatch> openIcon?: React.ReactNode closeIcon?: React.ReactNode direction: "rtl" | "ltr" } const TreeContext = createContext(null) const useTree = () => { const context = useContext(TreeContext) if (!context) { throw new Error("useTree must be used within a TreeProvider") } return context } type Direction = "rtl" | "ltr" | undefined const isFolderElement = (element: TreeViewElement) => { if (element.type) { return element.type === "folder" } return Array.isArray(element.children) } const mergeExpandedItems = ( currentItems: string[] | undefined, nextItems: string[] ) => [...new Set([...(currentItems ?? []), ...nextItems])] const treeCollator = new Intl.Collator("en", { numeric: true, sensitivity: "base", }) const defaultTreeComparator = (a: TreeViewElement, b: TreeViewElement) => { const aIsFolder = isFolderElement(a) const bIsFolder = isFolderElement(b) if (aIsFolder !== bIsFolder) { return aIsFolder ? -1 : 1 } return treeCollator.compare(a.name, b.name) } const getTreeComparator = (sort: TreeSortMode) => { if (sort === "none") { return undefined } if (sort === "default") { return defaultTreeComparator } return sort } const sortTreeElements = ( elements: TreeViewElement[], sort: TreeSortMode ): TreeViewElement[] => { const comparator = getTreeComparator(sort) const nextElements = elements.map((element) => { if (!Array.isArray(element.children)) { return element } return { ...element, children: sortTreeElements(element.children, sort), } }) if (!comparator) { return nextElements } return [...nextElements].sort(comparator) } const renderTreeElements = ( elements: TreeViewElement[], sort: TreeSortMode ): React.ReactNode => sortTreeElements(elements, sort).map((element) => { if (isFolderElement(element)) { return ( {Array.isArray(element.children) ? renderTreeElements(element.children, sort) : null} ) } return ( {element.name} ) }) type TreeViewProps = { initialSelectedId?: string indicator?: boolean elements?: TreeViewElement[] initialExpandedItems?: string[] openIcon?: React.ReactNode closeIcon?: React.ReactNode sort?: TreeSortMode } & Omit< React.ComponentPropsWithoutRef, "defaultValue" | "onValueChange" | "type" | "value" > const Tree = forwardRef( ( { className, elements, initialSelectedId, initialExpandedItems, children, indicator = true, openIcon, closeIcon, sort = "default", dir, ...props }, ref ) => { const [selectedId, setSelectedId] = useState( initialSelectedId ) const [expandedItems, setExpandedItems] = useState( initialExpandedItems ) const selectItem = useCallback((id: string) => { setSelectedId(id) }, []) const handleExpand = useCallback((id: string) => { setExpandedItems((prev) => { if (prev?.includes(id)) { return prev.filter((item) => item !== id) } return [...(prev ?? []), id] }) }, []) const expandSpecificTargetedElements = useCallback( (elements?: TreeViewElement[], selectId?: string) => { if (!elements || !selectId) return const findParent = ( currentElement: TreeViewElement, currentPath: string[] = [] ) => { const isSelectable = currentElement.isSelectable ?? true const newPath = [...currentPath, currentElement.id] if (currentElement.id === selectId) { if (isSelectable) { setExpandedItems((prev) => mergeExpandedItems(prev, newPath)) } else { if (newPath.includes(currentElement.id)) { newPath.pop() setExpandedItems((prev) => mergeExpandedItems(prev, newPath)) } } return } if ( Array.isArray(currentElement.children) && currentElement.children.length > 0 ) { currentElement.children.forEach((child) => { findParent(child, newPath) }) } } elements.forEach((element) => { findParent(element) }) }, [] ) useEffect(() => { if (initialSelectedId) { expandSpecificTargetedElements(elements, initialSelectedId) } }, [initialSelectedId, elements, expandSpecificTargetedElements]) const direction = dir === "rtl" ? "rtl" : "ltr" const treeChildren = children ?? (elements ? renderTreeElements(elements, sort) : null) return (

{treeChildren}

) } ) Tree.displayName = "Tree" const TreeIndicator = forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { direction } = useTree() return (

) }) TreeIndicator.displayName = "TreeIndicator" type FolderProps = { expandedItems?: string[] element: string isSelectable?: boolean isSelect?: boolean } & React.ComponentPropsWithoutRef const Folder = forwardRef< HTMLDivElement, FolderProps & React.HTMLAttributes >( ( { className, element, value, isSelectable = true, isSelect, children, ...props }, ref ) => { const { direction, handleExpand, expandedItems, indicator, selectedId, selectItem, openIcon, closeIcon, } = useTree() const isSelected = isSelect ?? selectedId === value return ( { selectItem(value) handleExpand(value) }} > {expandedItems?.includes(value) ? (openIcon ?? ) : (closeIcon ?? )} {element} {element && indicator && ) } ) Folder.displayName = "Folder" const File = forwardRef< HTMLButtonElement, { value: string handleSelect?: (id: string) => void isSelectable?: boolean isSelect?: boolean fileIcon?: React.ReactNode } & React.ButtonHTMLAttributes >( ( { value, className, handleSelect, onClick, isSelectable = true, isSelect, fileIcon, children, ...props }, ref ) => { const { direction, selectedId, selectItem } = useTree() const isSelected = isSelect ?? selectedId === value return ( ) } ) File.displayName = "File" const CollapseButton = forwardRef< HTMLButtonElement, { elements: TreeViewElement[] expandAll?: boolean } & React.HTMLAttributes >(({ className, elements, expandAll = false, children, ...props }, ref) => { const { expandedItems, setExpandedItems } = useTree() const expendAllTree = useCallback((elements: TreeViewElement[]) => { const expandedElementIds: string[] = [] const expandTree = (element: TreeViewElement) => { const isSelectable = element.isSelectable ?? true if (isSelectable && element.children && element.children.length > 0) { expandedElementIds.push(element.id) for (const child of element.children) { expandTree(child) } } } for (const element of elements) { expandTree(element) } return [...new Set(expandedElementIds)] }, []) const closeAll = useCallback(() => { setExpandedItems?.([]) }, [setExpandedItems]) useEffect(() => { if (expandAll) { setExpandedItems?.(expendAllTree(elements)) } }, [expandAll, elements, expendAllTree, setExpandedItems]) return ( ) }) CollapseButton.displayName = "CollapseButton" export { CollapseButton, File, Folder, Tree, type TreeViewElement } export type { TreeSortMode }

File Tree

Instalação