Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @react-md/tree

Index

Type aliases

ConfigurableTreeItemProps

ConfigurableTreeItemProps: Omit<TreeItemProps, "id" | "depth" | "itemIndex" | "listSize" | "selected" | "expanded" | "focused" | "renderChildItems"> & { children?: ReactNode }

ExpandedIds

ExpandedIds: readonly TreeItemId[]

GetItemProps

GetItemProps<T>: (item: T & TreeItemStates) => ConfigurableTreeItemProps | undefined

A function to get additional props to pass to each tree item. It will be provided the current item and the "states" of the item merged together.

Note: It is generally recommended to use the itemRenderer instead for additional functionality as you will have more control. This prop is more for applying custom styles or display data on the item.

Type parameters

Type declaration

ProvidedTreeProps

ProvidedTreeProps: Pick<TreeProps, "linkComponent" | "id"> & Required<Pick<TreeProps, "rootId" | "multiSelect" | "labelKey" | "valueKey" | "getItemLabel" | "getItemValue" | "getItemProps" | "expanderLeft" | "expanderIcon">>

SelectedIds

SelectedIds: readonly TreeItemId[]

TreeData

TreeData<T>: Record<TreeItemId, T>

This type represents the data that can be handled by the Tree component. This is really just a Map of itemId -> item for quick lookups for the logic within the tree.

Type parameters

TreeItemId

TreeItemId: string

TreeItemRenderer

TreeItemRenderer<T>: (providedProps: ProvidedTreeItemProps, item: T & { visibleIndex: number }, treeProps: ProvidedTreeProps) => ReactElement | null

A render function that allows you to add additional functionality to or custom components within the tree.

Type parameters

Type declaration

TreeItemSorter

TreeItemSorter<T>: (items: T[]) => T[]

A function to call that will sort the items within the tree for each unique parentId. If you have a tree like:

a
├── a1
b
├── b1
├── b2
│   └── b2.1
c
├── c1
├── c2
└── c3

This function will be called with:

  • [a1]
  • [b2.1]
  • [b1, b2]
  • [c1, c2, c3]
  • [a, b, c]

Type parameters

Type declaration

    • (items: T[]): T[]
    • Parameters

      • items: T[]

      Returns T[]

Variables

Const Tree

Tree: ForwardRefExoticComponent<TreeProps<any> & RefAttributes<ListElement>> = ...

Creates an accessible tree widget that allows you to show hierarchical data in a list presentation view. This component requires the selection and expansion state to be provided/controlled but you can use the useTreeItemSelection and useTreeItemExpansion hooks for a great starting point for this functionality.

Const TreeGroup

TreeGroup: ForwardRefExoticComponent<Pick<TreeGroupProps, "horizontal" | "className" | "children" | "id" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "timeout" | "appear" | "enter" | "exit" | "dense" | "temporary" | "ordered" | "collapsed" | "minHeight" | "minPaddingTop" | "minPaddingBottom"> & RefAttributes<ListElement>> = ...

The TreeGroup component is used to render a tree item's nested items whenever the expanded prop is true. It uses the Collapse component behind the scenes to animate in-and-out of view and will fully unrender when the expanded prop is false.

Const TreeItem

TreeItem: ForwardRefExoticComponent<TreeItemProps & RefAttributes<HTMLLIElement> & TreeItemWithContentComponentProps & RefAttributes<HTMLLIElement>> = ...

This component renders an item within a tree with optional child items. This should almost always be used from the itemRenderer prop from the Tree component as it provides a lot of the required a11y props for you.

Functions

defaultTreeItemRenderer

  • A "reasonable" default implementation for rendering a tree item that extracts the most used ListItem props and passes them down to the TreeItem.

    This is actually exported from this package so it can be used along with a custom renderer for all items that have isCustom enabled.

    const itemRenderer: TreeItemRenderer<MyTreeItem> = (
      itemProps,
      item,
      treeProps
    ) => {
      const { key } = itemProps;
      const { isCustom } = item;
      if (isCustom) {
        return <MyFancyNonTreeItem item={item} key={key} />
      }
    
      return defaultTreeItemRenderer(itemProps, item, treeProps);
    }
    

    Parameters

    • itemProps: ProvidedTreeItemProps

      The providied tree item props that should be passed down for keyboard functionality, accessibility, and a key for the item.

    • item: BaseTreeItem & { visibleIndex: number }

      The item itself. This is used to extract any of the common ListItemChildren props.

    • treeProps: ProvidedTreeProps

      The props for the Tree this item is being rendered in. This is really used so the expanderLeft, expanderIcon, labelKey, getItemLabel, and getItemProps can be used to render the TreeItem itself.

    Returns ReactElement

    a TreeItem or a custom ReactElement

getChildItems

  • getChildItems<T>(data: TreeData<T> | readonly T[], parentId: TreeItemId | null, recursive?: boolean): readonly T[]
  • Gets all the child items for a specific parent item id. If the recursive argument is enabled, all children of the items will also be returned instead of only the top level items.

    Type parameters

    Parameters

    • data: TreeData<T> | readonly T[]

      Either the flattened tree data or a list of all the tree data to iterate over

    • parentId: TreeItemId | null

      The parent id to get children of

    • recursive: boolean = false

      Boolean if the children's children should also be returned

    Returns readonly T[]

    a list of all the items for a specific parent item id. Note: if the recursive param is enabled, the list will be ordered so that the children of a item will appear before the next item at the same level. So you either need to sort by parentId or something else if you want a specific order.

getItemsFrom

  • This will get all the items from the provided itemId up to the root of the tree that can be used for drag and drop behavior or building a breadcrumb list.

    Type parameters

    Parameters

    • data: TreeData<T>

      The flattened tree data to navigate.

    • itemId: TreeItemId | null

      The item id to start the search at.

    Returns readonly T[]

    an ordered list of the current item followed by all the direct parents of that item.

useTreeItemExpansion

  • A hook that implements the base functionality for expanding different tree items.

    Parameters

    • defaultExpandedIds: ExpandedIds | (() => ExpandedIds)

      Either a list of tree item ids to be expanded by default or a function that will return the list of tree item ids to be expanded by default

    Returns TreeItemExpansion

    An object containing props that can be passed to the Tree component to handle the expansion state within the tree.

useTreeItemSelection

  • A hook that implements the base functionality for selecting different tree items.

    Parameters

    • defaultSelectedIds: SelectedIds | (() => SelectedIds)

      The default list of tree item ids that should be expanded by default

    • multiSelect: boolean = false

      Boolean if the tree can have multiple items selected or not.

    Returns Required<TreeItemSelection>

    an object containing props that can be passed to the Tree component to handle the selection state within the tree

Generated using TypeDoc