baseui/dnd-list/types.d.ts

A React Component library implementing the Base design language

import type * as React from 'react';
import type { Override } from '../helpers/overrides';
import type { STATE_CHANGE_TYPE } from './constants';
export type State = {
    items: Array<React.ReactNode>;
};
export type StateChangeType = (typeof STATE_CHANGE_TYPE)[keyof typeof STATE_CHANGE_TYPE];
export type StateReducer = (stateChangeType: StateChangeType, nextState: State, currentState: State) => State;
export type ListOverrides = {
    Root?: Override;
    List?: Override;
    Item?: Override;
    DragHandle?: Override;
    CloseHandle?: Override;
    Label?: Override;
};
export type ListProps = {
    /** Set if the list items should be removable */
    removable?: boolean;
    /** Set if the list items should be removable by dragging them far left or right */
    removableByMove?: boolean;
    /** Items (labels) to be rendered */
    items: Array<React.ReactNode>;
    /** Handler for when drag and drop is finished and order changed or item is deleted (newIndex would be -1 in that case) */
    onChange: (a: {
        oldIndex: number;
        newIndex: number;
    }) => unknown;
    overrides?: ListOverrides;
};
export type StatefulListProps = {
    /** Initial state populated into the component */
    initialState?: State;
    /** Reducer function to manipulate internal state updates. */
    stateReducer?: StateReducer;
    /** Set if the list items should be removable */
    removable?: boolean;
    /** Set if the list items should be removable by dragging them far left or right */
    removableByMove?: boolean;
    /** Handler for when drag and drop is finished and order changed or item is deleted (newIndex would be -1 in that case) */
    onChange?: (params: {
        newState: Array<React.ReactNode>;
        oldIndex: number;
        newIndex: number;
        targetRect: ClientRect;
    }) => unknown;
    overrides?: ListOverrides;
};
export type StatefulComponentContainerProps = Omit<StatefulListProps, 'children'> & {
    initialState?: State;
    children: (props: Omit<ListProps, 'children'>) => React.ReactNode;
};
export type SharedStylePropsArg = {
    $isDragged: boolean;
    $isSelected: boolean;
    $isFocusVisible: boolean;
    $isRemovable: boolean;
    $isRemovableByMove: boolean;
    $isOutOfBounds: boolean;
    $value: React.ReactNode;
    $index: number;
};