@neo4j-ndl/react/lib/types/tree-view/tree-view-types.d.ts

React implementation of Neo4j Design System

/**
 *
 *  Copyright (c) "Neo4j"
 *  Neo4j Sweden AB [http://neo4j.com]
 *
 *  This file is part of Neo4j.
 *
 *  Neo4j is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
import { type UniqueIdentifier } from '@dnd-kit/core';
import { type RefAttributes } from 'react';
import { type CommonProps } from '../_common/types';
import { type IconButton } from '../icon-button';
import { type Skeleton } from '../skeleton';
export type TreeItem<T> = {
    id: UniqueIdentifier;
    canHaveSubItems: false;
    isSortable?: boolean;
    data: T;
    isSelected?: boolean;
    isSkeletonLoading?: boolean;
    skeletonProps?: React.ComponentProps<typeof Skeleton>;
} | {
    id: UniqueIdentifier;
    canHaveSubItems: true;
    isCollapsed: boolean;
    subItems: TreeItem<T>[];
    isSortable?: boolean;
    data: T;
    isSelected?: boolean;
    isSkeletonLoading?: boolean;
    skeletonProps?: React.ComponentProps<typeof Skeleton>;
};
export type TextItemData = {
    text: string;
    onTextClick?: () => void;
    actions: {
        icon: React.ReactNode;
        buttonProps: Omit<React.ComponentPropsWithoutRef<typeof IconButton>, 'children' | 'as'>;
    }[];
};
export type DefaultTreeItem = TreeItem<TextItemData>;
export type FlattenedTreeItem<T> = TreeItem<T> & {
    depth: number;
    parentId: UniqueIdentifier | null;
};
export type TreeItemComponent<T extends Record<string, unknown>, TElement extends HTMLElement> = React.FC<React.PropsWithChildren<TreeItemComponentProps<T> & RefAttributes<TElement>>>;
export type TreeItemComponentProps<T extends Record<string, unknown>> = Omit<CommonProps<'div', {
    /** The tree item data */
    item: FlattenedTreeItem<T>;
    /** Parent item of this item */
    parent: FlattenedTreeItem<T> | null;
    /** If the item is should be rendered as a placeholder (for example, while dragging) */
    isGhost?: boolean;
    /** If the item is collapsed */
    isCollapsed?: boolean;
    /** Depth of the item in the tree */
    depth: number;
    /** While dragging it makes sense to disable some interaction for all other items. */
    shouldDisableInteraction?: boolean;
    /** True if sorting is disabled for this item. */
    shouldDisableSorting?: boolean;
    /** True if dragged item is over this Node. */
    isOver: boolean;
    /** True if dragged item is over the parent of this Node. */
    isOverParent: boolean;
    /** True if this item is the last in the parent list */
    isLastInParent: boolean;
    /** True if the item should be rendered as a indicator (for example, while dragging) */
    isIndicator?: boolean;
    /** Width of the indentation */
    indentationWidth: number;
    /** Function to call when the item is collapsed/expanded */
    onCollapse?(): void;
    /** Function to set the ref of the element that should activate sorting */
    setActivatorNodeRef: (node: HTMLElement | null) => void;
    /** Function to set the ref of the element that should be sorted (the wrapper element of the item) */
    setNodeRef: (node: HTMLLIElement) => void;
    /** Props for the drag handle */
    dragHandleProps?: Record<string, unknown>;
    /** A list of trails to render before the item */
    trails: ('none' | 'straight' | 'straight-curved' | 'curved')[];
    /** Function to call when the item has changed */
    onItemsChanged: (newItems: FlattenedTreeItem<T>[], reason: ItemChangedReason<T>) => void;
    /** All items in the tree */
    items: FlattenedTreeItem<T>[];
    tabIndex?: number;
    /** Function to call when the item receives focus */
    onFocus?: () => void;
}>, 'htmlAttributes'>;
export type ItemChangedReason<T> = {
    /** The item that was changed */
    item: TreeItem<T>;
    /** The reason for the change */
    reason: 'collapsed' | 'expanded' | 'dropped' | 'selected' | 'other';
};
//# sourceMappingURL=tree-view-types.d.ts.map