Merge pull request #32064 from chaaya/fix/update-definititions-to-latest-release

@types/react-image-crop: Updated props definitions to match the latest release

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

@@ -1,6 +1,7 @@
-// Type definitions for react-image-crop 3.0
+// Type definitions for react-image-crop 6.0
 // Project: https://github.com/DominicTobias/react-image-crop
 // Definitions by: Daniela Yassuda <https://github.com/danielasy>
+//                 Elias Chaaya <https://github.com/chaaya>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -35,14 +36,17 @@ declare namespace ReactCrop {
         keepSelection?: boolean;
         onChange: (crop: Crop, pixelCrop: PixelCrop) => void;
         onComplete?: (crop: Crop, pixelCrop: PixelCrop) => void;
-        onImageLoaded?: (target: HTMLImageElement) => void;
+        onImageLoaded?: (target: HTMLImageElement, pixelCrop: PixelCrop) => void;
         onDragStart?: () => void;
         onDragEnd?: () => void;
         disabled?: boolean;
-        crossorigin?: string;
+        crossorigin?: 'anonymous' | 'use-credentials';
         children?: ReactNode;
         style?: CSSProperties;
         imageStyle?: CSSProperties;
+        onImageError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+        className?: string;
+        locked?: boolean;
     }
 
     function getPixelCrop(image: HTMLImageElement, percentCrop: Crop): Crop;

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

@@ -85,6 +85,10 @@ class CompleteTest extends React.Component<{}, TestState> {
         });
     }
 
+    onImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {
+        console.warn('Error loading image');
+    }
+
     render() {
         return React.createElement(
             ReactCrop,
@@ -104,6 +108,9 @@ class CompleteTest extends React.Component<{}, TestState> {
                 onDragStart: () => console.log('Drag start'),
                 onDragEnd: () => console.log('Drag end'),
                 crossorigin: 'anonymous',
+                onImageError: this.onImageError,
+                className: 'my-cropper',
+                locked: false
             },
         );
     }

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

@@ -81,6 +81,10 @@ class CompleteTest extends React.Component<{}, TestState> {
         });
     }
 
+    onImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {
+        console.warn('Error loading image');
+    }
+
     render() {
         return (
             <ReactCrop
@@ -99,6 +103,9 @@ class CompleteTest extends React.Component<{}, TestState> {
                 onDragStart={() => console.log('Drag start')}
                 onDragEnd={() => console.log('Drag end')}
                 crossorigin="anonymous"
+                onImageError={this.onImageError}
+                className="my-cropper"
+                locked={false}
             />
         );
     }