diff --git a/types/react-rnd/index.d.ts b/types/react-rnd/index.d.ts index 31d477ca5e..ff5ac2078e 100644 --- a/types/react-rnd/index.d.ts +++ b/types/react-rnd/index.d.ts @@ -4,117 +4,118 @@ // fsubal // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 -import React = require('react'); +import * as React from "react"; type CSSProperties = React.CSSProperties; -declare namespace Rnd { - type Direction = - | 'bottom' - | 'bottomLeft' - | 'bottomRight' - | 'left' - | 'right' - | 'top' - | 'topLeft' - | 'topRight'; +export type Direction = + | "bottom" + | "bottomLeft" + | "bottomRight" + | "left" + | "right" + | "top" + | "topLeft" + | "topRight"; - interface Enable { - bottom?: boolean; - bottomLeft?: boolean; - bottomRight?: boolean; - left?: boolean; - right?: boolean; - top?: boolean; - topLeft?: boolean; - topRight?: boolean; - } - - interface HandleClasses { - bottom?: string; - bottomLeft?: string; - bottomRight?: string; - left?: string; - right?: string; - top?: string; - topLeft?: string; - topRight?: string; - } - - interface HandleStyles { - bottom?: CSSProperties; - bottomLeft?: CSSProperties; - bottomRight?: CSSProperties; - left?: CSSProperties; - right?: CSSProperties; - top?: CSSProperties; - topLeft?: CSSProperties; - topRight?: CSSProperties; - } - - interface Position { - x: number; - y: number; - } - - interface Size { - width: number; - height: number; - } - - interface DraggableData { - node: HTMLElement; - x: number; - y: number; - deltaX: number; - deltaY: number; - lastX: number; - lastY: number; - } - - type DraggableEventHandler = (e: MouseEvent | TouchEvent, data: DraggableData) => void|false; - - type ResizeHandler = ( - e: MouseEvent|TouchEvent, - direction: Direction, - ref: HTMLDivElement, - delta: Size, - position: Position - ) => void; - - interface Options { - default: { - x?: number; - y?: number; - width?: number|string; - height?: number|string; - }; - className: string; - style: any; - width: number|string; - height: number|string; - minWidth: number|string; - minHeight: number|string; - maxWidth: number|string; - maxHeight: number|string; - z: number; - resizeHandleClasses: HandleClasses; - resizeHandleStyles: HandleStyles; - - lockAspectRatio: boolean; - enableResizing?: Enable; - disableDragging?: boolean; - - onResizeStart: () => void; - onResize: () => void; - onResizeStop: ResizeHandler; - - onDragStart: DraggableEventHandler; - onDrag: DraggableEventHandler; - onDragStop: DraggableEventHandler; - } +export interface Enable { + bottom?: boolean; + bottomLeft?: boolean; + bottomRight?: boolean; + left?: boolean; + right?: boolean; + top?: boolean; + topLeft?: boolean; + topRight?: boolean; } -declare class Rnd extends React.Component> {} +export interface HandleClasses { + bottom?: string; + bottomLeft?: string; + bottomRight?: string; + left?: string; + right?: string; + top?: string; + topLeft?: string; + topRight?: string; +} -export = Rnd; +export interface HandleStyles { + bottom?: CSSProperties; + bottomLeft?: CSSProperties; + bottomRight?: CSSProperties; + left?: CSSProperties; + right?: CSSProperties; + top?: CSSProperties; + topLeft?: CSSProperties; + topRight?: CSSProperties; +} + +export interface Position { + x: number; + y: number; +} + +export interface Size { + width: number; + height: number; +} + +export interface DraggableData { + node: HTMLElement; + x: number; + y: number; + deltaX: number; + deltaY: number; + lastX: number; + lastY: number; +} + +export type DraggableEventHandler = ( + e: MouseEvent | TouchEvent, + data: DraggableData +) => void | false; + +export type ResizeHandler = ( + e: MouseEvent | TouchEvent, + direction: Direction, + ref: HTMLDivElement, + delta: Size, + position: Position +) => void; + +export interface Options { + default: { + x?: number; + y?: number; + width?: number | string; + height?: number | string; + }; + className: string; + style: any; + width: number | string; + height: number | string; + minWidth: number | string; + minHeight: number | string; + maxWidth: number | string; + maxHeight: number | string; + z: number; + resizeHandleClasses: HandleClasses; + resizeHandleStyles: HandleStyles; + + lockAspectRatio: boolean; + enableResizing?: Enable; + disableDragging?: boolean; + + onResizeStart: () => void; + onResize: () => void; + onResizeStop: ResizeHandler; + + onDragStart: DraggableEventHandler; + onDrag: DraggableEventHandler; + onDragStop: DraggableEventHandler; +} + +declare class Rnd extends React.Component> {} + +export default Rnd; diff --git a/types/react-rnd/react-rnd-tests.tsx b/types/react-rnd/react-rnd-tests.tsx index 9f1cbc593c..461a0d03ba 100644 --- a/types/react-rnd/react-rnd-tests.tsx +++ b/types/react-rnd/react-rnd-tests.tsx @@ -1,7 +1,7 @@ -import React = require('react'); -import Rnd = require('react-rnd'); +import * as React from 'react'; +import { default as Rnd, ResizeHandler } from "react-rnd"; -const onResize: Rnd.ResizeHandler = (e, direction, ref, delta, position) => { +const onResize: ResizeHandler = (e, direction, ref, delta, position) => { direction === 'right'; delta.width; delta.height;