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

Library of UI components, styles and resources of Skymp

import React, { DragEvent } from "react";
export declare enum Direction {
    Left = 0,
    Right = 1,
    Top = 2,
    Bottom = 3,
    TopLeft = 4,
    TopRight = 5,
    BottomLeft = 6,
    BottomRight = 7
}
export interface UseResizableProps {
    /**
     * initial width component property
     */
    width: number;
    /**
     * initial height component property
     */
    height: number;
    /**
     * initial top component property
     */
    top: number;
    /**
     * initial left component propety
     */
    left: number;
    /**
     * React.Dispatch function for set width state
     */
    setWidth: React.Dispatch<React.SetStateAction<number>>;
    /**
     * React.Dispatch function for set height state
     */
    setHeight: React.Dispatch<React.SetStateAction<number>>;
    /**
     * React.Dispatch function for set top state
     */
    setTop: React.Dispatch<React.SetStateAction<number>>;
    /**
     * React.Dispatch function for set left state
     */
    setLeft: React.Dispatch<React.SetStateAction<number>>;
    /**
     * max width to which you can stretch
     */
    maxWidth?: number;
    /**
     * max height to which you can stretch
     */
    maxHeight?: number;
    /**
     * min width to which you can stretch
     */
    minWidth?: number;
    /**
     * min height to which you can stretch
     */
    minHeight?: number;
    /**
     * toggle of resizable component state
     */
    isResizable: boolean;
}
/**
 * @description hook makes an component resizable. Value of props in PX.
 */
export declare const useResizable: ({ minWidth, minHeight, ...props }: UseResizableProps) => readonly [({ direction, isMouseEvents, isResizable }: {
    direction: Direction;
    isMouseEvents: boolean;
    isResizable: boolean;
}) => {
    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 useResizable;