TreeViewDemo() — supabase Function Reference

Source Code

apps/design-system/registry/default/example/tree-view-edit.tsx lines 61–144

export default function TreeViewDemo() {
  const [treeData, setDataTreeState] = useState(data)

  function handleRenameSelect(id: number) {
    // find id in treeData and set it to edit mode
    let updatedTreeData = { ...treeData }
    const findNode = (node: any) => {
      if (node.id === id) {
        node.metadata = { isEditing: true }
      }
      if (node.children) {
        node.children.forEach(findNode)
      }
    }
    console.log(updatedTreeData)
    updatedTreeData.children.forEach(findNode)
    setDataTreeState(updatedTreeData)
  }

  return (
    <TreeView
      data={flattenTree(data)}
      className="w-[420px] border bg py-2"
      aria-label="directory tree"
      nodeRenderer={({ element, isBranch, isExpanded, getNodeProps, level, isSelected }) => {
        return (
          <ContextMenu_Shadcn_ modal={false}>
            <ContextMenuTrigger_Shadcn_ asChild>
              <TreeViewItem
                isExpanded={isExpanded}
                isBranch={isBranch}
                isSelected={isSelected}
                level={level}
                xPadding={16}
                name={element.name}
                isEditing={element.metadata?.isEditing === true}
                onEditSubmit={(value) => {
                  console.log('value', value)
                  let updatedTreeData = { ...treeData }
                  const findNode = (node: any) => {
                    if (node.id === element.id) {
                      node.name = value
                      node.metadata = { isEditing: false }
                    }
                    if (node.children) {
                      node.children.forEach(findNode)
                    }
                  }
                  updatedTreeData.children.forEach(findNode)
                  setDataTreeState(updatedTreeData)
                }}
                {...getNodeProps()}
              />
            </ContextMenuTrigger_Shadcn_>
            <ContextMenuContent_Shadcn_
              onCloseAutoFocus={(e) => {
                // stop focus propagation
                // so input in TreeViewItem gets focus
                e.stopPropagation()
              }}
            >
              <ContextMenuItem_Shadcn_
                onSelect={() => {
                  handleRenameSelect(element.id as number)
                }}
                onFocusCapture={(e) => {
                  // stop focus propagation
                  // so input in TreeViewItem gets focus
                  e.stopPropagation()
                }}
              >
                Rename
              </ContextMenuItem_Shadcn_>
              <ContextMenuItem_Shadcn_ disabled>Open in new tab</ContextMenuItem_Shadcn_>
              <ContextMenuItem_Shadcn_ disabled>Share with team</ContextMenuItem_Shadcn_>
              <ContextMenuSeparator_Shadcn_ />
              <ContextMenuItem_Shadcn_ disabled>Delete</ContextMenuItem_Shadcn_>
            </ContextMenuContent_Shadcn_>
          </ContextMenu_Shadcn_>
        )
      }}
    />
  )
}