@syncfusion/react-base/src/droppable.d.ts

A common package of core React base, methods and class definitions

import { RefObject } from 'react';
import { DropInfo } from './draggable';
/**
 * Droppable arguments in drop callback.
 *
 * @private
 */
export interface DropData {
    /**
     * Specifies that current element can be dropped.
     */
    canDrop?: boolean;
    /**
     * Specifies target to drop.
     */
    target?: HTMLElement;
}
export interface DropEvents {
    dropTarget?: HTMLElement;
}
/**
 * Interface for drop event args
 */
export interface DropEventArgs {
    /**
     * Specifies the original mouse or touch event arguments.
     */
    event?: MouseEvent & TouchEvent;
    /**
     * Specifies the target element.
     */
    target?: HTMLElement;
    /**
     *  Specifies the dropped element.
     */
    droppedElement?: HTMLElement;
    /**
     * Specifies the dragData.
     */
    dragData?: DropInfo;
}
/**
 * Main interface for public properties in Droppable.
 */
export interface IDroppableProps {
    /**
     * Defines the selector for draggable element to be accepted by the droppable.
     */
    accept?: string;
    /**
     * Defines the scope value to group sets of draggable and droppable items.
     * A draggable with the same scope value will only be accepted by the droppable.
     */
    scope?: string;
    /**
     * Specifies the callback function, which will be triggered while drag element is dropped in droppable.
     *
     * @event drop
     */
    drop?: (args: DropEventArgs) => void;
    /**
     * Specifies the callback function, which will be triggered while drag element is moved over droppable element.
     *
     * @event over
     */
    over?: Function;
    /**
     * Specifies the callback function, which will be triggered while drag element is moved out of droppable element.
     *
     * @event out
     */
    out?: Function;
}
/**
 * Main interface for protected methods in Droppable.
 */
export interface IDroppable extends IDroppableProps {
    /**
     * Data associated with the current drag operation.
     *
     * @private
     */
    dragData?: {
        [key: string]: DropInfo;
    };
    /**
     * Method for handling interactions when dragged item is over the droppable area.
     *
     * @private
     * @param event - Mouse or touch event arguments.
     * @param element - The target element over which the drag is happening.
     */
    intOver?: (event: MouseEvent & TouchEvent, element?: Element) => void;
    /**
     * Method for handling interactions when dragged item is out of the droppable area.
     *
     * @private
     * @param event - Mouse or touch event arguments.
     * @param element - The target element from which the drag is moving out.
     */
    intOut?: (event: MouseEvent & TouchEvent, element?: Element) => void;
    /**
     * Method to clean up and remove event handlers on the component destruction.
     *
     * @private
     */
    intDrop?: (event: MouseEvent & TouchEvent, element?: Element) => void;
}
/**
 * Creates a droppable instance with the specified element and properties.
 *
 * @private
 * @param {RefObject<HTMLElement>} [element] - Reference to the HTML element to make droppable.
 * @param {IDroppable} [props] - Configuration properties for the droppable instance.
 * @returns {IDroppable} The configured droppable instance.
 */
export declare function useDroppable(element?: RefObject<HTMLElement>, props?: IDroppable): IDroppable;