lark-cms/dist/packages/components/YhwDraggableGrid/draggable-grid.rn.d.ts

Multi terminal CMS component library

import React from "react";
import type { StyleProp, PanResponderGestureState, ViewStyle } from "react-native";
export interface IOnLayoutEvent {
    nativeEvent: {
        layout: {
            x: number;
            y: number;
            width: number;
            height: number;
        };
    };
}
interface IBaseItemType {
    /**
     * 唯一标识符
     */
    key: string | number;
    /**
     * 显示内容
     */
    value?: any;
    /**
     * 禁止当前项拖拽
     */
    disabledDrag?: boolean;
    /**
     * 禁止当前项重新排序
     */
    disabledReSorted?: boolean;
}
export interface IDraggableGridProps<DataType extends IBaseItemType> {
    /**
     * 列数，可以根据屏幕宽度动态计算（子项的间距样式，通过此来解决）
     */
    numColumns: number;
    /**
     * 数据集合
     */
    data: DataType[];
    /**
     * 渲染子项
     * @param item 当前项数据
     * @param order 当前项的索引
     */
    renderItem: (item: DataType, order: number) => React.ReactElement<any>;
    /**
     * 组件的样式
     */
    style?: ViewStyle;
    /**
     * 子项的高度（默认和宽度相等）
     */
    itemHeight?: number;
    /**
     * 拖拽开始时，子项的动画样式
     */
    dragStartAnimation?: StyleProp<any>;
    /**
     * 点击子项的事件
     * @param item 子项的内容对象
     * @returns
     */
    onItemPress?: (item: DataType) => void;
    /**
     * 拖拽子项时的事件
     */
    onDragItemActive?: (item: DataType) => void;
    /**
     * 开始拖拽子项时的事件
     */
    onDragStart?: (item: DataType) => void;
    /**
     * 正在拖拽子项时的事件
     */
    onDragging?: (gestureState: PanResponderGestureState) => void;
    /**
     * 释放子项时（拖拽结束）的事件
     */
    onDragRelease?: (newSortedData: DataType[]) => void;
    /**
     * 重置排序时（取消拖拽）的事件
     */
    onResetSort?: (newSortedData: DataType[]) => void;
    /**
     * 延迟长按时间（默认300毫秒）
     * @default 300
     */
    delayLongPress?: number;
}
/**
 * 【组件】拖拽排序
 * @description: 支持拖拽排序的网格布局组件，支持禁用拖拽和禁用排序功能
 * 注意：当组件嵌入到 ScrollView 中时，ScrollView 需要设置属性
 *       scrollEnabled={ !isDragging }，否则会出现拖拽冲突的问题
 */
export declare const YhwDraggableGridRN: <DataType extends IBaseItemType>(props: IDraggableGridProps<DataType>) => React.JSX.Element;
export {};