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
Name | Type | Default Value | Required | Description |
---|---|---|---|---|
viewState | TreeViewState<C> | Yes | ||
keyboardBindings | KeyboardBindings | No | ||
liveDescriptors | LiveDescriptors | No | ||
getItemTitle | (item: TreeItem<T>) => string | Yes | ||
renderItem | (props: { item: TreeItem<T>; depth: number; children: any; title: React.ReactNode; arrow: React.ReactNode; context: TreeItemRenderContext<C>; info: TreeInformation; }) => any | No | ||
renderItemTitle | (props: { title: string; item: TreeItem<T>; context: TreeItemRenderContext<C>; info: TreeInformation; }) => any | No | ||
renderItemArrow | (props: { item: TreeItem<T>; context: TreeItemRenderContext<C>; info: TreeInformation; }) => any | No | ||
renderRenameInput | (props: { item: TreeItem<T>; inputProps: InputHTMLAttributes<HTMLInputElement>; inputRef: Ref<HTMLInputElement>; submitButtonProps: HTMLProps<...>; submitButtonRef: Ref<...>; formProps: FormHTMLAttributes<...>; }) => any | No | ||
renderItemsContainer | (props: { children: React.ReactNode; containerProps: HTMLProps<any>; info: TreeInformation; depth: number; parentId: TreeItemIndex; }) => any | No | ||
renderTreeContainer | (props: { children: React.ReactNode; containerProps: HTMLProps<any>; info: TreeInformation; }) => any | No | ||
renderDragBetweenLine | (props: { draggingPosition: DraggingPosition; lineProps: HTMLProps<any>; }) => any | No | ||
renderSearchInput | (props: { inputProps: HTMLProps<HTMLInputElement>; }) => any | No | ||
renderLiveDescriptorContainer | (props: { children: React.ReactNode; tree: TreeConfiguration; }) => any | No | ||
renderDepthOffset | number | No | ||
defaultInteractionMode | InteractionMode | InteractionManager<never> | No | ||
canDragAndDrop | boolean | No | ||
canDropOnFolder | boolean | No | ||
canDropOnNonFolder | boolean | No | ||
canReorderItems | boolean | No | ||
canDrag | (items: TreeItem<T>[]) => boolean | No | ||
canDropAt | (items: TreeItem<T>[], target: DraggingPosition) => boolean | No | ||
canInvokePrimaryActionOnItemContainer | boolean | No | ||
canSearch | boolean | No | ||
canSearchByStartingTyping | boolean | No | ||
canRename | boolean | No | ||
autoFocus | boolean | No | ||
doesSearchMatchItem | (search: string, item: TreeItem<T>, itemTitle: string) => boolean | No | ||
showLiveDescription | boolean | No | ||
shouldRenderChildren | (item: TreeItem<T>, context: TreeItemRenderContext<never>) => boolean | No | ||
canDropBelowOpenFolders | boolean | No | See 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. | |
disableArrowKeys | boolean | No | ||
onStartRenamingItem | (item: TreeItem<T>, treeId: string) => void | No | ||
onRenameItem | (item: TreeItem<T>, name: string, treeId: string) => void | No | ||
onAbortRenamingItem | (item: TreeItem<T>, treeId: string) => void | No | ||
onCollapseItem | (item: TreeItem<T>, treeId: string) => void | No | ||
onExpandItem | (item: TreeItem<T>, treeId: string) => void | No | ||
onSelectItems | (items: TreeItemIndex[], treeId: string) => void | No | ||
onFocusItem | (item: TreeItem<T>, treeId: string, setDomFocus?: boolean) => void | No | ||
onDrop | (items: TreeItem<T>[], target: DraggingPosition) => void | No | ||
onPrimaryAction | (items: TreeItem<T>, treeId: string) => void | No | ||
onRegisterTree | (tree: TreeConfiguration) => void | No | ||
onUnregisterTree | (tree: TreeConfiguration) => void | No | ||
onMissingItems | (itemIds: TreeItemIndex[]) => void | No | ||
onMissingChildren | (itemIds: TreeItemIndex[]) => void | No | ||
items | Record<TreeItemIndex, TreeItem<T>> | Yes | ||
ref | Ref<TreeEnvironmentRef<T, C>> | No |