Skip to main content

ControlledTreeEnvironment

info

More details on using the ControlledTreeEnvironment component are provided in the Guide on Controlled Environments.

Import

import { ControlledTreeEnvironment } from "react-complex-tree";

Props

NameTypeDefault ValueRequiredDescription
viewStateTreeViewState<C>Yes
keyboardBindingsKeyboardBindingsNo
liveDescriptorsLiveDescriptorsNo
getItemTitle(item: TreeItem<T>) => stringYes
renderItem(props: { item: TreeItem<T>; depth: number; children: any; title: React.ReactNode; arrow: React.ReactNode; context: TreeItemRenderContext<C>; info: TreeInformation; }) => anyNo
renderItemTitle(props: { title: string; item: TreeItem<T>; context: TreeItemRenderContext<C>; info: TreeInformation; }) => anyNo
renderItemArrow(props: { item: TreeItem<T>; context: TreeItemRenderContext<C>; info: TreeInformation; }) => anyNo
renderRenameInput(props: { item: TreeItem<T>; inputProps: InputHTMLAttributes<HTMLInputElement>; inputRef: Ref<HTMLInputElement>; submitButtonProps: HTMLProps<...>; submitButtonRef: Ref<...>; formProps: FormHTMLAttributes<...>; }) => anyNo
renderItemsContainer(props: { children: React.ReactNode; containerProps: HTMLProps<any>; info: TreeInformation; depth: number; parentId: TreeItemIndex; }) => anyNo
renderTreeContainer(props: { children: React.ReactNode; containerProps: HTMLProps<any>; info: TreeInformation; }) => anyNo
renderDragBetweenLine(props: { draggingPosition: DraggingPosition; lineProps: HTMLProps<any>; }) => anyNo
renderSearchInput(props: { inputProps: HTMLProps<HTMLInputElement>; }) => anyNo
renderLiveDescriptorContainer(props: { children: React.ReactNode; tree: TreeConfiguration; }) => anyNo
renderDepthOffsetnumberNo
defaultInteractionModeInteractionMode | InteractionManager<never>No
canDragAndDropbooleanNo
canDropOnFolderbooleanNo
canDropOnNonFolderbooleanNo
canReorderItemsbooleanNo
canDrag(items: TreeItem<T>[]) => booleanNo
canDropAt(items: TreeItem<T>[], target: DraggingPosition) => booleanNo
canInvokePrimaryActionOnItemContainerbooleanNo
canSearchbooleanNo
canSearchByStartingTypingbooleanNo
canRenamebooleanNo
autoFocusbooleanNo
doesSearchMatchItem(search: string, item: TreeItem<T>, itemTitle: string) => booleanNo
showLiveDescriptionbooleanNo
shouldRenderChildren(item: TreeItem<T>, context: TreeItemRenderContext<never>) => booleanNo
canDropBelowOpenFoldersbooleanNoSee Issue #148 or the sample at https://rct.lukasbach.com/storybook/?path=/story/core-basic-examples--single-tree?path=/story/core-drag-and-drop-configurability--can-drop-below-open-folders for details. If enabled, dropping at the bottom of an open folder will drop the items in the parent folder below the hovered item instead of inside the folder at the top.
disableArrowKeysbooleanNo
onStartRenamingItem(item: TreeItem<T>, treeId: string) => voidNo
onRenameItem(item: TreeItem<T>, name: string, treeId: string) => voidNo
onAbortRenamingItem(item: TreeItem<T>, treeId: string) => voidNo
onCollapseItem(item: TreeItem<T>, treeId: string) => voidNo
onExpandItem(item: TreeItem<T>, treeId: string) => voidNo
onSelectItems(items: TreeItemIndex[], treeId: string) => voidNo
onFocusItem(item: TreeItem<T>, treeId: string, setDomFocus?: boolean) => voidNo
onDrop(items: TreeItem<T>[], target: DraggingPosition) => voidNo
onPrimaryAction(items: TreeItem<T>, treeId: string) => voidNo
onRegisterTree(tree: TreeConfiguration) => voidNo
onUnregisterTree(tree: TreeConfiguration) => voidNo
onMissingItems(itemIds: TreeItemIndex[]) => voidNo
onMissingChildren(itemIds: TreeItemIndex[]) => voidNo
itemsRecord<TreeItemIndex, TreeItem<T>>Yes
refRef<TreeEnvironmentRef<T, C>>No