# All files / src/tree DefaultTreeItemRenderer.tsx

100% Statements 76/76
100% Branches 2/2
100% Functions 1/1
100% Lines 76/76

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    771x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
    526x
     import { type ReactElement } from "react";
    import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
    import { TreeItem } from "./TreeItem.js";
    import {
      type DefaultTreeItemNode,
      type TreeData,
      type TreeItemNode,
    } from "./types.js";

    /**
     * **Client Component**
     *
     * A reasonable default for rendering tree items that will extract all the
     * `ListItemChildrenProps` from the item and attempt to pass them into the
     * `TreeItem`.
     *
     * Look at the `Tree` component for an example of creating a custom
     * implementation.
     *
     * @remarks \@since 6.0.0
     */
    export function DefaultTreeItemRenderer<
      T extends TreeItemNode = DefaultTreeItemNode,
    >(props: RenderRecursiveItemsProps<T, TreeData<T>>): ReactElement {
      const { item: _item, parents, children: childItems } = props;
      const item = props.item as DefaultTreeItemNode;

      const {
        itemId,
        to,
        href,
        disabled,
        className,
        contentClassName,
        leftAddon,
        leftAddonType,
        leftAddonPosition,
        leftAddonClassName,
        leftAddonForceWrap,
        rightAddon,
        rightAddonType,
        rightAddonPosition,
        rightAddonClassName,
        rightAddonForceWrap,
        disableLeftAddonCenteredMedia,
        disableRightAddonCenteredMedia,
      } = item;
      const children = item.name ?? item.children;

      return (
        <TreeItem
          to={to}
          href={href}
          depth={parents.length}
          childItems={childItems}
          className={className}
          contentClassName={contentClassName}
          itemId={itemId}
          disabled={disabled}
          leftAddon={leftAddon}
          leftAddonType={leftAddonType}
          leftAddonPosition={leftAddonPosition}
          leftAddonClassName={leftAddonClassName}
          leftAddonForceWrap={leftAddonForceWrap}
          rightAddon={rightAddon}
          rightAddonType={rightAddonType}
          rightAddonPosition={rightAddonPosition}
          rightAddonClassName={rightAddonClassName}
          rightAddonForceWrap={rightAddonForceWrap}
          disableLeftAddonCenteredMedia={disableLeftAddonCenteredMedia}
          disableRightAddonCenteredMedia={disableRightAddonCenteredMedia}
        >
          {children}
        </TreeItem>
      );
    }