lucid-ui
Version:
A UI component library from AppNexus.
111 lines (110 loc) • 3.5 kB
TypeScript
import React from 'react';
import * as reducers from './DraggableList.reducers';
import { StandardProps, Overwrite } from '../../util/component-types';
export interface IDraggableListItemProps extends StandardProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
}
interface IDraggableListPropsRaw extends StandardProps {
/** Render a drag handle on list items */
hasDragHandle?: boolean;
/** Index of the item the drag was started on */
dragIndex?: number;
/** Index of the item the dragged item is hovered over */
dragOverIndex?: number;
/** Called when the user starts to drag an item.
Signature: \`(dragIndex, { event, props }) => {}\` */
onDragStart?: (dragIndex: number, { event, props }: {
event: React.DragEvent;
props: IDraggableListProps;
}) => void;
/** Called when the user stops to dragging an item.
Signature: \`({ event, props }) => {}\` */
onDragEnd?: ({ event, props, }: {
event: React.DragEvent;
props: IDraggableListProps;
}) => void;
/** Called when the user drags an item over another item.
Signature: \`(dragOverIndex, { event, props }) => {}\` */
onDragOver?: (dragOverIndex: number, { event, props }: {
event: React.DragEvent;
props: IDraggableListProps;
}) => void;
/** Called when the user drops an item in the list
Signature: \`({oldIndex, newIndex}, { event, props }) => {}\` */
onDrop?: ({ oldIndex, newIndex }: {
newIndex?: number;
oldIndex?: number;
}, { event, props }: {
event: React.DragEvent;
props: IDraggableListProps;
}) => void;
/** Props for DraggableList.Item */
Item?: React.ReactNode & {
props: IDraggableListItemProps;
};
}
export interface IDraggableListProps extends Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, IDraggableListPropsRaw> {
}
declare const DraggableList: {
(props: IDraggableListProps): JSX.Element;
Item: {
(_props: IDraggableListItemProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
propTypes: {
children: any;
};
};
displayName: string;
peek: {
description: string;
categories: string[];
};
propTypes: {
className: any;
style: any;
hasDragHandle: any;
dragIndex: any;
dragOverIndex: any;
onDragStart: any;
onDragEnd: any;
onDragOver: any;
onDrop: any;
Item: any;
};
};
declare const _default: {
(props: IDraggableListProps): JSX.Element;
Item: {
(_props: IDraggableListItemProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
propTypes: {
children: any;
};
};
displayName: string;
peek: {
description: string;
categories: string[];
};
propTypes: {
className: any;
style: any;
hasDragHandle: any;
dragIndex: any;
dragOverIndex: any;
onDragStart: any;
onDragEnd: any;
onDragOver: any;
onDrop: any;
Item: any;
};
} & import("../../util/state-management").IHybridComponent<IDraggableListProps, reducers.IDraggableListState>;
export default _default;
export { DraggableList as DraggableListDumb };