Merge pull request #26359 from xaviergonz/patch-7

[react-rnd] Fix for default export

types/react-rnd/index.d.ts

@@ -4,117 +4,118 @@
 //                 fsubal <https://github.com/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<Partial<Rnd.Options>> {}
+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<Partial<Options>> {}
+
+export default Rnd;

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;