@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
83 lines (82 loc) • 3.57 kB
TypeScript
import { MultiSelectTreeViewProps } from '@mui/x-tree-view';
import { ReactNode } from 'react';
import { IAssemblyTreeItem } from './AssemblyTreeItem/AssemblyTreeItem.component';
import { IAssemblyTreeItemLabel } from './AssemblyTreeItem/AssemblyTreeItemLabel.component';
export type IAssemblyTreeSection = {
sectionLabel?: ReactNode;
sectionData: ReadonlyArray<IAssemblyTreeItem>;
};
export type IAssemblyTree = Omit<MultiSelectTreeViewProps, 'multiSelect' | 'defaultSelectedItems' | 'onSelectedItemsChange' | 'selectedItems'> & {
/**
* Set the style of the tree background
* @default solid
*/
background?: 'solid' | 'translucent' | 'transparent';
/**
* Array of tree nodes to render.
*
* ```
* export type IAssemblyTreeItem = Omit<TreeItemProps, 'children'> & {
* children?: IAssemblyTreeItem[];
* actions?: React.ComponentType<{ itemId: string }>;
* };
* export type IAssemblyTreeSection = {
* sectionLabel?: ReactNode;
* sectionData: IAssemblyTreeItem[];
* }
* ```
*/
data: ReadonlyArray<IAssemblyTreeSection>;
/**
* Component to render for the actions. We will supply the itemId of the TreeItem
* which triggered the action so you can tailor your actions per item. You should
* make use of the AssemblyTreeItemActions component for best results. Actions can
* be overridden at the individual item level as well.
*/
actions?: IAssemblyTreeItemLabel['actions'];
/**
* List of itemId values to select by default (for uncontrolled version).
*/
defaultSelectedItems?: string[];
/**
* List of itemId values that are selected (for controlled version).
*/
selectedItems?: string[];
/**
* Callback function triggered when a node is selected. This callback returns all
* currently selected nodes, not just the node that was most recently selected / deselected. When
* autoSelectChildNodes is true, all nested children (recursively) will also be included in this array.
*/
onSelectedItemsChange?: (event: React.SyntheticEvent<Element, Event>, itemIds: string[]) => void;
/**
* Callback function triggered when a node label is changed.
*/
onNodeChanged?: (itemId: string, label: string) => void;
/**
* If enabled, node labels will be editable by double-clicking (Enter key will close and trigger onNodeChanged callback, Escape key will close and discard changes).
* @default false
*/
editable?: boolean;
/**
* Component to render in the header of the TreeView card, such as a search bar
*/
Header?: JSX.Element;
/**
* Determines the behavior when selecting nodes. 'standard' mode starts a new selection with each click of a node item. 'toggle' will
* allow you to add and remove elements to the current selection by clicking on them (clicking a selected element will remove it from the selection,
* clicking an unselected item will add it to the current selection).
* @default 'standard'
*/
selectMode?: 'toggle' | 'standard';
/**
* If true, all nested children (recursively) will be added to the selection array when a parent is added.
* @default true
*/
autoSelectChildNodes?: boolean;
/**
* If true, all nested children (recursively) will be removed from the selection array when a parent is removed.
* @default true
*/
autoDeselectChildNodes?: boolean;
};
export declare const AssemblyTree: React.FC<IAssemblyTree>;