@skymp/skymp-ui-components/dist/hooks/useMovable/index.d.ts

Library of UI components, styles and resources of Skymp

import { DragEvent } from "react";
export interface UseMovableProps {
    /**
     * initial left component property
     */
    left: number;
    /**
     * initial top component property
     */
    top: number;
    /**
     * React.Dispatch function for set left state
     */
    setLeft: React.Dispatch<React.SetStateAction<number>>;
    /**
     * React.Dispatch function for set top state
     */
    setTop: React.Dispatch<React.SetStateAction<number>>;
    /**
     * toggle of movable component state
     */
    isMovable: boolean;
}
export interface CreateDragMoveArgs {
    isMouseEvents?: boolean;
    isMovable?: boolean;
    isAxisX?: boolean;
    isAxisY?: boolean;
}
/**
 * @description hook makes an component moveable and/or draggable
 */
export declare const useMovable: (props: UseMovableProps) => readonly [({ isMouseEvents, isMovable, isAxisX, isAxisY }: CreateDragMoveArgs) => {
    onMouseDown: (event: React.MouseEvent<HTMLDivElement, MouseEvent> | DragEvent<Element>) => void;
    onMouseMove: (event: React.MouseEvent<HTMLDivElement, MouseEvent> | MouseEvent) => void;
    onMouseUp: () => void;
    draggable?: undefined;
    onDrag?: undefined;
    onDragStart?: undefined;
    onDragEnd?: undefined;
} | {
    draggable: boolean;
    onDrag: (event: React.MouseEvent<HTMLDivElement, MouseEvent> | MouseEvent) => void;
    onDragStart: (event: DragEvent<Element>) => void;
    onDragEnd: () => void;
    onMouseDown?: undefined;
    onMouseMove?: undefined;
    onMouseUp?: undefined;
}, boolean, boolean, boolean];
export default useMovable;