[react-cropper] fix ref prop typing (#34663)

types/react-cropper/index.d.ts

@@ -1,19 +1,18 @@
 // Type definitions for react-cropper 0.10
 // Project: https://github.com/roadmanfong/react-cropper, http://roadmanfong.github.io/react-cropper
 // Definitions by: Stepan Mikhaylyuk <https://github.com/stepancar>
+//                 Walter Barbagallo <https://github.com/bwlt>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
 import * as cropperjs from 'cropperjs';
 import * as React from 'react';
 
-import Data = cropperjs.Data;
-import ContainerData = cropperjs.ContainerData;
-import ImageData = cropperjs.ImageData;
-import CanvasData = cropperjs.CanvasData;
-import CropBoxData = cropperjs.CropBoxData;
-import CroppedCanvasOptions = cropperjs.CroppedCanvasOptions;
-type ReactCropperProps = cropperjs.CropperOptions & React.HTMLProps<HTMLImageElement>;
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export interface ReactCropperProps extends cropperjs.CropperOptions, Omit<React.HTMLProps<HTMLImageElement>, 'data' | 'ref'> {
+    ref: string | ((cropper: null | ReactCropper) => any);
+}
 
 interface ReactCropper extends cropperjs {} // tslint:disable-line no-empty-interface
 declare class ReactCropper extends React.Component<ReactCropperProps> {

types/react-cropper/react-cropper-tests.tsx

@@ -22,3 +22,18 @@ class Demo extends React.Component {
         );
     }
 }
+
+function testCropperRef() {
+    <Cropper
+        ref={(el: Cropper) => {
+            // $ExpectError el can be null
+            el.getCroppedCanvas();
+            if (el !== null) {
+                // el is a cropperjs element
+                el.getCroppedCanvas();
+                // el is also a React.Component instance
+                el.props;
+            }
+        }}
+    />;
+}