@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
86 lines (85 loc) • 3.03 kB
TypeScript
/**
*
* 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 IconButton } from '../icon-button';
import { type SkeletonProps } from '../skeleton';
export type TreeItem<T> = {
id: UniqueIdentifier;
canHaveSubItems: false;
isSortable?: boolean;
data: T;
isSelected?: boolean;
isSkeletonLoading?: boolean;
skeletonProps?: SkeletonProps;
} | {
id: UniqueIdentifier;
canHaveSubItems: true;
isCollapsed: boolean;
subItems: TreeItem<T>[];
isSortable?: boolean;
data: T;
isSelected?: boolean;
isSkeletonLoading?: boolean;
skeletonProps?: SkeletonProps;
};
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>> = {
item: FlattenedTreeItem<T>;
parent: FlattenedTreeItem<T> | null;
isGhost?: boolean;
isCollapsed?: boolean;
depth: number;
shouldDisableInteraction?: boolean;
shouldDisableSorting?: boolean;
isOver: boolean;
isOverParent: boolean;
isLastInParent: boolean;
isIndicator?: boolean;
indentationWidth: number;
onCollapse?(): void;
setActivatorNodeRef: (node: HTMLElement | null) => void;
setNodeRef: (node: HTMLLIElement) => void;
dragHandleProps?: Record<string, unknown>;
style?: React.CSSProperties;
trails: ('none' | 'straight' | 'straight-curved' | 'curved')[];
items: FlattenedTreeItem<T>[];
onItemsChanged: (newItems: FlattenedTreeItem<T>[], reason: ItemChangedReason<T>) => void;
tabIndex?: number;
onFocus?: () => void;
};
export type ItemChangedReason<T> = {
item: TreeItem<T>;
reason: 'collapsed' | 'expanded' | 'dropped' | 'selected' | 'other';
};