@progress/kendo-react-common/hooks/useDraggable.d.ts

React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package

/**-----------------------------------------------------------------------------------------
* Copyright © 2023 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { NormalizedDragEvent } from '@progress/kendo-draggable-common';
import { AutoScrollOptions } from '../models';
/**
 * Represents the `ref` object of the `Draggable` component.
 */
export interface DraggableHandle {
    /**
     * The element which is being dragged.
     */
    element: HTMLElement | null;
}
/**
 * Represents the configuration object type of the `Draggable` component and `useDraggable` hook.
 */
export interface DraggableOptions {
    /**
     * Set the `hint` to override the element used for collision detection.
     *
     * For more information, refer to the [Drag Hint]({% slug drag-hint_drag-and-drop %}) article.
     */
    hint?: React.RefObject<HTMLElement | null | {
        element: HTMLElement | null;
    }> | null;
    /**
     * Set the `mouseOnly` property to `true` to stop the draggable from attaching `touch` event handlers.
     *
     * Defaults to `false`.
     */
    mouseOnly?: boolean;
    /**
     * Set the `autoScroll` property to `false` to disable automatic container scroll when close to the edge.
     * For more information, refer to the [Auto Scroll]({% slug auto-scroll_drag-and-drop %}) article.
     *
     * Defaults to `true`.
     */
    autoScroll?: boolean | AutoScrollOptions;
    /**
     * @hidden
     */
    scrollContainer?: React.RefObject<HTMLElement | null | {
        element: HTMLElement | null;
    }>;
}
/**
 * Represents the KendoReact `useDraggable` hook.
 * Use it to attach `drag` events to a native HTML DOM elements, or custom React Components.
 *
 * For more information, refer to the [KendoReact Draggable]({% slug draggable_drag-and-drop %}) article.
 *
 * @param ref - The `ref` of the HTML Element or React Component which will enable the `draggable` functionality.
 * @param callbacks - A collection of callbacks, called by the `useDraggable` hook when a specific action occurs.
 * @param options - Additional configuration of the `useDraggable` hook.
 */
export declare function useDraggable(ref: React.RefObject<HTMLElement | null | {
    element: HTMLElement | null;
}>, callbacks: {
    onPress?: (event: NormalizedDragEvent) => void;
    onRelease?: (event: NormalizedDragEvent) => void;
    onDragStart?: (event: NormalizedDragEvent) => void;
    onDrag?: (event: NormalizedDragEvent) => void;
    onDragEnd?: (event: NormalizedDragEvent) => void;
}, options?: DraggableOptions): void;