updated @types/react-image-crop to match the newest version of react-image-crop (#34796)

* updated types to match the newest version of react-image-crop

updated tests

added missing semicolon

reverted minimum ts version

* Made crop optional, and renamed resolveCropAndTriggerChange to resolveCrop

types/react-image-crop/index.d.ts

@@ -1,7 +1,8 @@
-// Type definitions for react-image-crop 6.0
+// Type definitions for react-image-crop 7.0
 // Project: https://github.com/DominicTobias/react-image-crop
 // Definitions by: Daniela Yassuda <https://github.com/danielasy>
 //                 Elias Chaaya <https://github.com/chaaya>
+//                 Søren Englund <https://github.com/englund0110>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -12,19 +13,12 @@ export as namespace ReactCrop;
 declare namespace ReactCrop {
     interface Crop {
         aspect?: number;
-        x: number;
-        y: number;
+        x?: number;
+        y?: number;
         width?: number;
         height?: number;
     }
 
-    interface PixelCrop {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    }
-
     interface ReactCropProps {
         src: string;
         crop?: Crop;
@@ -34,9 +28,9 @@ declare namespace ReactCrop {
         maxWidth?: number;
         maxHeight?: number;
         keepSelection?: boolean;
-        onChange: (crop: Crop, pixelCrop: PixelCrop) => void;
-        onComplete?: (crop: Crop, pixelCrop: PixelCrop) => void;
-        onImageLoaded?: (target: HTMLImageElement, pixelCrop: PixelCrop) => void;
+        onChange: (crop: Crop) => void;
+        onComplete?: (crop: Crop) => void;
+        onImageLoaded?: (target: HTMLImageElement) => void;
         onDragStart?: () => void;
         onDragEnd?: () => void;
         disabled?: boolean;
@@ -50,9 +44,8 @@ declare namespace ReactCrop {
         renderSelectionAddon?: (state: any) => ReactNode;
     }
 
-    function getPixelCrop(image: HTMLImageElement, percentCrop: Crop): Crop;
-    function makeAspectCrop(crop: Crop, imageAspect: number): Crop;
-    function containCrop(previousCrop: Crop, crop: Crop, imageAspect: number): Crop;
+    function makeAspectCrop(crop: Crop, image: HTMLImageElement): Crop;
+    function containCrop(previousCrop: Crop, crop: Crop, image: HTMLImageElement): Crop;
 }
 
 declare class ReactCrop extends Component<ReactCrop.ReactCropProps> {
@@ -67,6 +60,7 @@ declare class ReactCrop extends Component<ReactCrop.ReactCropProps> {
         width: number,
         height: number,
     };
+    resolveCrop: (crop: ReactCrop.Crop, image: HTMLImageElement) => ReactCrop.Crop;
     dragCrop: () => ReactCrop.Crop;
     resizeCrop: () => ReactCrop.Crop;
     straightenYPath: (clientX: number) => number;

types/react-image-crop/test/react-image-crop-global-tests.ts

@@ -45,7 +45,7 @@ class AspectRatioTest extends React.Component<{}, TestState> {
                     aspect: 16 / 9,
                     width: 50,
                 },
-                image.width / image.height,
+                image,
             ),
         });
     }
@@ -80,7 +80,7 @@ class CompleteTest extends React.Component<{}, TestState> {
                     aspect: 16 / 9,
                     width: 20,
                 },
-                image.width / image.height,
+                image,
             ),
         });
     }

types/react-image-crop/test/react-image-crop-module-tests.tsx

@@ -42,7 +42,7 @@ class AspectRatioTest extends React.Component<{}, TestState> {
                     aspect: 16 / 9,
                     width: 50,
                 },
-                image.width / image.height,
+                image,
             ),
         });
     }
@@ -76,7 +76,7 @@ class CompleteTest extends React.Component<{}, TestState> {
                     aspect: 16 / 9,
                     width: 20,
                 },
-                image.width / image.height,
+                image,
             ),
         });
     }