z-react-ui
Version:
z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。
72 lines (71 loc) • 1.92 kB
TypeScript
import { FC, CSSProperties, ReactNode } from 'react';
import { DropResult, ResponderProvided } from 'react-beautiful-dnd';
export interface DataSource {
id?: number | string;
disabled?: boolean;
[props: string]: any;
}
export interface DragListProps {
/**
* @description 拖拽区域类名
* @default
*/
dropClassName?: string;
/**
* @description 拖拽区域样式
* @default
*/
dropStyle?: CSSProperties;
/**
* @description 拖拽区域样式根据isDraggingOver设置样式
* @default isDraggingOver拖拽时为true，其他时刻为false
*/
setDropStyleFn?: (isDraggingOver?: boolean) => CSSProperties;
/**
* @description 拖拽对象类名
* @default
*/
drapClassName?: string;
/**
* @description 拖拽对象样式
* @default
*/
drapStyle?: CSSProperties;
/**
* @description 拖拽对象样式根据isDragging设置样式
* @default
*/
setDrapStyleFn?: (isDragging?: boolean, draggableStyle?: CSSProperties) => CSSProperties;
/**
* @description 拖拽结束事件
* @default
*/
onDragEnd?: (result: DropResult, provided: ResponderProvided) => void;
/**
* @description 数据源
* @default []
*/
dataSource: DataSource[];
/**
* @description 渲染单条数据，且数据源对象中，必须要有唯一id属性
* @default
*/
renderItem: (item?: DataSource, index?: number) => ReactNode;
/**
* @description 拖拽方向
* @default 'vertical'
*/
direction?: 'horizontal' | 'vertical';
/**
* @description 拖拽区域唯一id
* @default
*/
droppableId?: string;
/**
* @description 确保每个拖拽对象id共用前缀
* @default
*/
draggableId?: string;
}
declare const DragList: FC<DragListProps>;
export default DragList;