how to maintain complete information when managing state

[brayan-jordan]

in the selectedItems variable used in setState only the "id" of the object is stored, would it be possible to keep the complete object stored?

import {
  checkboxesFeature,
  hotkeysCoreFeature,
  selectionFeature,
  syncDataLoaderFeature,
  type TreeState,
} from '@headless-tree/core'
import { useTree } from '@headless-tree/react'
import type React from 'react'
import type { ITreeViewItem } from '@/types/ITreeViewItem'
import { Checkbox } from '../shadcn/Checkbox'
import { Tree, TreeItem, TreeItemLabel } from '../shadcn/Tree'

const indent = 20

interface TreeDataWrapperProps {
  data: ITreeViewItem[]
  selectedItems: Partial<TreeState<ITreeViewItem>>
  setSelectedItems: React.Dispatch<
    React.SetStateAction<Partial<TreeState<ITreeViewItem>>>
  >
}

export function TreeDataWrapper({
  data,
  selectedItems,
  setSelectedItems,
}: TreeDataWrapperProps) {
  const itemsMap = new Map<string, ITreeViewItem>()

  if (data) {
    const buildMap = (nodes: ITreeViewItem[]) => {
      nodes.forEach((node) => {
        itemsMap.set(node.id, node)
        if (node.children?.length) buildMap(node.children)
      })
    }
    buildMap(data)
  }

  const root = data.find((node) => node.parentId === null)

  const tree = useTree<ITreeViewItem>({
    initialState: {
      expandedItems: root ? [root.id] : [],
    },
    state: selectedItems,
    setState: setSelectedItems,
    rootItemId: root?.id ?? '',
    getItemName: (item) => item.getItemData().code,
    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,
    dataLoader: {
      getItem: (itemId) => itemsMap.get(itemId)!,
      getChildren: (itemId) =>
        itemsMap.get(itemId)?.children?.map((c) => c.id) ?? [],
    },
    features: [
      syncDataLoaderFeature,
      selectionFeature,
      checkboxesFeature,
      hotkeysCoreFeature,
    ],
  })

  if (!root) {
    return <p>Nenhum item encontrado.</p>
  }

  return (
    <div className="flex h-full flex-col gap-2 *:first:grow">
      <Tree tree={tree}>
        {tree.getItems().map((item) => {
          const depth = item.getItemMeta().level

          return (
            <div
              key={item.getId()}
              className="flex items-center gap-1.5 not-last:pb-0.5"
              style={{ paddingLeft: depth * indent }}
            >
              <Checkbox
                checked={
                  {
                    checked: true,
                    unchecked: false,
                    indeterminate: 'indeterminate' as const,
                  }[item.getCheckedState()]
                }
                onCheckedChange={(checked) => {
                  const checkboxProps = item.getCheckboxProps()
                  checkboxProps.onChange?.({ target: { checked } })
                }}
              />
              <TreeItem item={item} className="flex-1 not-last:pb-0">
                <TreeItemLabel />
              </TreeItem>
            </div>
          )
        })}
      </Tree>
    </div>
  )
}

[lukasbach]

Hi! You can always resolve your data payload using the tree instance, with tree.getItemInstance(itemId).getItemData(), so the easiest way is to just maintain the selected items as IDs and retrieve the data when you need it.

You can also use custom state.selectedItems and setSelectedItems properties to map the IDs to your own structure of data, like so:

const [selectedItems, setSelectedItems] = useState<DemoItem[]>([]);

const tree = useTree<DemoItem>({
  state: {
    selectedItems: selectedItems.map((i) => i.id),
  },
  setSelectedItems: (items) => {
    if (typeof items === "function") {
      setSelectedItems((prev) => {
        const newItems = items(prev.map((i) => i.id));
        return newItems.map((i) => tree.getItemInstance(i).getItemData());
      });
    } else {
      setSelectedItems(
        items.map((i) => tree.getItemInstance(i).getItemData()),
      );
    }
  },
  // ...
});