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

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

import { ReactElement, 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 DropEvent {
    /**
     * 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;
}
/**
 * Interface for over event args
 */
export interface OverEvent {
    /**
     * Specifies the original mouse or touch event arguments.
     */
    event?: MouseEvent & TouchEvent;
    /**
     * Specifies the target element.
     */
    target?: HTMLElement;
    /**
     * Specifies the dragData.
     */
    dragData?: DropInfo;
}
/**
 * Interface for over event args
 */
export interface OutEvent {
    /**
     * Specifies the original mouse or touch event arguments.
     */
    event?: MouseEvent & TouchEvent;
    /**
     * Specifies the target element.
     */
    target?: HTMLElement;
}
/**
 * Main interface for public properties in Droppable.
 */
export interface DroppableProps {
    /**
     * 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: DropEvent) => void;
    /**
     * Specifies the callback function, which will be triggered while drag element is moved over droppable element.
     *
     * @event over
     */
    over?: (args: OverEvent) => void;
    /**
     * Specifies the callback function, which will be triggered while drag element is moved out of droppable element.
     *
     * @event out
     */
    out?: (args: OutEvent) => void;
}
/**
 * Main interface for protected methods in Droppable.
 */
export interface IDroppable extends DroppableProps {
    /**
     * 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;
/**
 * DroppableComponent wraps elements to enable droppable functionality.
 */
export interface IDroppableProps extends IDroppable {
    /**
     * Specifies the children element that will be made droppable.
     */
    children: ReactElement;
    /**
     * Specifies additional CSS class names to apply to the droppable element.
     */
    className?: string;
    /**
     * Provides a reference to access the underlying droppable child element.
     */
    dropRef?: RefObject<HTMLElement | null>;
}
/**
 * DroppableComponent wraps elements to enable droppable functionality.
 * It leverages the Droppable hook internally to manage drop behavior.
 *
 * @example
 * ```tsx
 * import { Droppable } from '@syncfusion/react-base';
 *
 * <Droppable>
 *   <div>Drop here</div>
 * </Droppable>
 * ```
 *
 * @param {DroppableProps} props - The props for the DroppableComponent.
 * @returns {Element} The rendered droppable component.
 */
export declare const Droppable: React.FC<IDroppableProps>;