@skymp/skymp-ui-components
Version:
Library of UI components, styles and resources of Skymp
105 lines (104 loc) • 3.72 kB
TypeScript
/// <reference types="react" />
import { CreateDragMoveArgs } from "../useMovable";
import { Direction } from "../useResizable";
export { Direction, CreateDragMoveArgs };
export interface UseWindowProps {
/**
* initial width component property
*/
width: number;
/**
* initial height component property
*/
height: number;
/**
* initial top component property
*/
top: number;
/**
* initial left component property
*/
left: number;
/**
* toggle of movable component state
*/
isMovable?: boolean;
/**
* toggle of resizable component state
*/
isResizable?: boolean;
/**
* max width component property
*/
maxWidth?: number;
/**
* max height component property
*/
maxHeight?: number;
/**
* min width component property
*/
minWidth?: number;
/**
* min height component property
*/
minHeight?: number;
}
/**
* @description hook makes a component is window
*/
export declare const useWindow: ({ isMovable, isResizable, minWidth, minHeight, ...props }: UseWindowProps) => {
readonly createDragMove: ({ isMouseEvents, isMovable, isAxisX, isAxisY }: CreateDragMoveArgs) => {
onMouseDown: (event: import("react").MouseEvent<HTMLDivElement, MouseEvent> | import("react").DragEvent<Element>) => void;
onMouseMove: (event: MouseEvent | import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void;
onMouseUp: () => void;
draggable?: undefined;
onDrag?: undefined;
onDragStart?: undefined;
onDragEnd?: undefined;
} | {
draggable: boolean;
onDrag: (event: MouseEvent | import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void;
onDragStart: (event: import("react").DragEvent<Element>) => void;
onDragEnd: () => void;
onMouseDown?: undefined;
onMouseMove?: undefined;
onMouseUp?: undefined;
};
readonly hasMoveStart: boolean;
readonly hasMove: boolean;
readonly hasMoveEnd: boolean;
readonly createDragResize: ({ direction, isMouseEvents, isResizable }: {
direction: Direction;
isMouseEvents: boolean;
isResizable: boolean;
}) => {
onMouseDown: (event: import("react").MouseEvent<HTMLDivElement, MouseEvent> | import("react").DragEvent<Element>) => void;
onMouseMove: (event: MouseEvent | import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void;
onMouseUp: () => void;
draggable?: undefined;
onDrag?: undefined;
onDragStart?: undefined;
onDragEnd?: undefined;
} | {
draggable: boolean;
onDrag: (event: MouseEvent | import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void;
onDragStart: (event: import("react").DragEvent<Element>) => void;
onDragEnd: () => void;
onMouseDown?: undefined;
onMouseMove?: undefined;
onMouseUp?: undefined;
};
readonly hasResizeStart: boolean;
readonly hasResize: boolean;
readonly hasResizeEnd: boolean;
readonly width: number;
readonly height: number;
readonly top: number;
readonly left: number;
readonly setWidth: import("react").Dispatch<import("react").SetStateAction<number>>;
readonly setHeight: import("react").Dispatch<import("react").SetStateAction<number>>;
readonly setTop: import("react").Dispatch<import("react").SetStateAction<number>>;
readonly setLeft: import("react").Dispatch<import("react").SetStateAction<number>>;
};
export default useWindow;