@syncfusion/react-base
Version:
A common package of core React base, methods and class definitions
323 lines (322 loc) • 8.36 kB
TypeScript
import { ReactElement, RefObject } from 'react';
import { PositionCoordinates } from './drag-util';
/**
* Specifies the Direction in which drag movement happen.
*/
export type DragDirection = 'x' | 'y';
/**
* Specifies the position coordinates.
*/
export interface IPosition {
/**
* Specifies the left position of cursor in draggable.
*/
left?: number;
/**
* Specifies the top position of cursor in draggable.
*/
top?: number;
}
/**
* Hook to manage draggable Position.
*
* @private
* @param {Partial<IPosition>} props - Initial values for the position properties.
* @returns {IPosition} - The initialized draggable position properties.
*/
export declare function DraggablePosition(props?: IPosition): IPosition;
/**
* Interface to specify the drag data in the droppable.
*/
export interface DropInfo {
/**
* Specifies the current draggable element
*/
draggable?: HTMLElement;
/**
* Specifies the current helper element.
*/
helper?: HTMLElement;
/**
* Specifies the drag target element
*/
draggedElement?: HTMLElement;
}
export interface DropObject {
target?: HTMLElement;
instance?: DropOption;
}
/**
* Used to access values
*
* @private
*/
export interface DragPosition {
left?: string;
top?: string;
}
/**
* Droppable function to be invoked from draggable
*
* @private
*/
export interface DropOption {
/**
* Used to triggers over function while draggable element is over the droppable element.
*/
intOver?: Function;
/**
* Used to triggers out function while draggable element is out of the droppable element.
*/
intOut?: Function;
/**
* Used to triggers out function while draggable element is dropped on the droppable element.
*/
intDrop?: Function;
/**
* Specifies the information about the drag element.
*/
dragData?: DropInfo;
/**
* Specifies the status of the drag of drag stop calling.
*/
dragStopCalled?: boolean;
}
/**
* Drag Event arguments
*/
export interface DragEvent {
/**
* Specifies the actual event.
*/
event?: MouseEvent & TouchEvent;
/**
* Specifies the current drag element.
*/
element?: HTMLElement;
/**
* Specifies the current target element.
*/
target?: HTMLElement;
/**
* 'true' if the drag or drop action is to be prevented; otherwise false.
*/
cancel?: boolean;
}
/**
* Helper Event arguments
*/
export interface HelperEvent {
/**
* Specifies the actual event.
*/
sender?: MouseEvent & TouchEvent;
/**
* Specifies the current target element.
*/
element?: HTMLElement;
}
/**
* Draggable interface for public and protected properties and methods.
*/
export interface IDraggable {
/**
* Defines the distance between the cursor and the draggable element when dragging.
*/
cursorAt?: IPosition;
/**
* Determines if drag operations are performed on a duplicate element of the draggable element.
*
* @default false
*/
clone?: boolean;
/**
* Defines the parent element in which draggable element movement will be restricted.
*/
dragArea?: HTMLElement | string;
/**
* Defines the dragArea is scrollable or not.
*/
isDragScroll?: boolean;
/**
* Defines whether to replace drag element by currentStateTarget.
*
* @private
*/
isReplaceDragEle?: boolean;
/**
* Defines whether to add prevent select class to body or not.
*
* @private
*/
isPreventSelect?: boolean;
/**
* Specifies the callback function for drag event.
*
* @event drag
*/
drag?: (args: DragEvent) => void;
/**
* Specifies the callback function for dragStart event.
*
* @event dragStart
*/
dragStart?: (args: DragEvent) => void;
/**
* Specifies the callback function for dragStop event.
*
* @event dragStop
*/
dragStop?: (args: DragEvent) => void;
/**
* Defines the minimum distance draggable element to be moved to trigger the drag operation.
*
* @default 1
*/
distance?: number;
/**
* Defines the child element selector which will act as drag handle.
*/
handle?: string;
/**
* Defines the child element selector which will prevent dragging of element.
*/
abort?: string | string[];
/**
* Defines the callback function for customizing the cloned element.
*
* @event helper
*/
helper?: (args: HelperEvent) => HTMLElement | null;
/**
* Defines the scope value to group sets of draggable and droppable items.
* A draggable with the same scope value will be accepted by the droppable.
*
* @default 'default'
*/
scope?: string;
/**
* Specifies the dragTarget by which the clone element is positioned if not given current context element will be considered.
*
* @private
*/
dragTarget?: string;
/**
* Defines the axis to limit the draggable element drag path. The possible axis path values are
* * `x` - Allows drag movement in horizontal direction only.
* * `y` - Allows drag movement in vertical direction only.
*/
axis?: DragDirection;
/**
* Defines the function to change the position value.
*
* @private
*/
queryPositionInfo?: Function;
/**
* Defines whether the drag clone element will be split form the cursor pointer.
*
* @private
*/
enableTailMode?: boolean;
/**
* Defines whether to skip the previous drag movement comparison.
*
* @private
*/
skipDistanceCheck?: boolean;
/**
*
* @private
*/
preventDefault?: boolean;
/**
* Defines whether to enable autoscroll on drag movement of draggable element.
* enableAutoScroll
*
* @private
*/
enableAutoScroll?: boolean;
/**
* Gets the element of the draggable.
*
* @private
*/
element?: RefObject<HTMLElement>;
/**
* Defines whether to enable taphold on mobile devices.
* enableAutoScroll
*
* @private
*/
enableTapHold?: boolean;
/**
* Specifies the time delay for tap hold.
*
* @default 750
* @private
*/
tapHoldThreshold?: number;
/**
*
* @private
*/
enableScrollHandler?: boolean;
/**
* Destroys the draggable instance by removing event listeners and cleaning up resources.
*
* @private
*/
intDestroy?(): void;
/**
* Method to clean up and remove event handlers on the component destruction.
*
* @private
*/
destroy?(): void;
}
/**
* Draggable function provides support to enable draggable functionality in Dom Elements.
*
* @param {RefObject<HTMLElement>} element - The reference to the HTML element to be made draggable
* @param {IDraggable} [props] - Optional properties to configure the draggable behavior
* @returns {IDraggable} A Draggable object with draggable functionality
*/
export declare function useDraggable(element: RefObject<HTMLElement>, props?: IDraggable): IDraggable;
export declare namespace useDraggable {
var getDefaultPosition: () => PositionCoordinates;
}
/**
* DraggableComponent wraps elements to enable draggable functionality.
*/
export interface IDraggableProps extends IDraggable {
/**
* Specifies the children element that will be made draggable.
*/
children: ReactElement;
/**
* Specifies additional CSS class names to apply to the draggable element.
*/
className?: string;
/**
* Provides a reference to access the underlying draggable child element.
*/
dragRef?: RefObject<HTMLElement>;
}
/**
* DraggableComponent wraps elements to enable draggable functionality.
* It leverages the Draggable hook internally to manage drag behavior.
*
* @example
* ```tsx
* import { Draggable } from '@syncfusion/react-base';
*
* <Draggable>
* <div>Drag me</div>
* </Draggable>
* ```
*
* @param {IDraggableProps} props - The props for the DraggableComponent.
* @returns {Element} The rendered draggable component.
*/
export declare const Draggable: React.FC<IDraggableProps>;