Added type definitions for react-easy-crop v1.13.0 (#36085)

* Added type definitions for react-easy-crop v1.13.0

* Removed disabled TSLint rules and made changes where necessary.

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

@@ -0,0 +1,58 @@
+// Type definitions for react-easy-crop 1.13
+// Project: https://github.com/ricardo-ch/react-easy-crop
+// Definitions by: Simon Donoghue <https://github.com/smdonoghue>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import { CSSProperties, Component } from "react";
+
+export interface Size {
+    width: number;
+    height: number;
+}
+
+export interface Location {
+    x: number;
+    y: number;
+}
+
+export interface Area {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+}
+
+export interface CropperProps {
+    image: string;
+    crop: Location;
+    zoom?: number;
+    aspect?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    cropShape?: "rect" | "round";
+    cropSize?: Size;
+    showGrid?: boolean;
+    zoomSpeed?: number;
+    crossOrigin?: string;
+    onCropChange: (location: Location) => void;
+    onZoomChange?: (zoom: number) => void;
+    onCropComplete?: (croppedArea: Area, croppedAreaPixels: Area) => void;
+    onImgError?: () => void;
+    style?: {
+        containerStyle: React.CSSProperties,
+        imageStyle: React.CSSProperties,
+        cropAreaStyle: React.CSSProperties
+    };
+    classes?: {
+        containerClassName: string,
+        imageClassName: string,
+        cropAreaClassName: string
+    };
+    restrictPosition?: boolean;
+    initialCroppedAreaPixels?: Area;
+}
+
+declare class Cropper extends Component<CropperProps> {}
+
+export default Cropper;

types/react-easy-crop/react-easy-crop-tests.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import Cropper, { Area, Location, Size } from 'react-easy-crop';
+
+interface State {
+  imageSrc: string;
+  crop: Location;
+  zoom: number;
+  aspect: number;
+  minZoom?: number;
+  maxZoom?: number;
+  cropShape?: 'rect' | 'round';
+  cropSize?: Size;
+  showGrid?: boolean;
+  zoomSpeed?: number;
+  crossOrigin?: string;
+  style?: {
+    containerStyle: React.CSSProperties,
+    imageStyle: React.CSSProperties,
+    cropAreaStyle: React.CSSProperties
+  };
+  classes?: {
+    containerClassName: string,
+    imageClassName: string,
+    cropAreaClassName: string
+  };
+  restrictPosition?: boolean;
+  initialCroppedAreaPixels?: Area;
+}
+
+class App extends React.Component<{}, State> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      imageSrc:
+        'https://img.huffingtonpost.com/asset/5ab4d4ac2000007d06eb2c56.jpeg?cache=sih0jwle4e&ops=1910_1000',
+      crop: { x: 0, y: 0 },
+      zoom: 1,
+      aspect: 4 / 3,
+      minZoom: 1,
+      maxZoom: 10,
+      cropShape: 'rect',
+      cropSize: { width: 200, height: 200 },
+      showGrid: false,
+      zoomSpeed: 1,
+      crossOrigin: 'cross-ori',
+      style: {
+        containerStyle:  {  },
+        imageStyle: {  },
+        cropAreaStyle: {  }
+      },
+      classes: {
+        containerClassName: 'container-simon',
+        imageClassName: 'image-simon',
+        cropAreaClassName: 'crop-area-simon'
+      },
+      restrictPosition: true,
+      initialCroppedAreaPixels: {
+          width: 100,
+          height: 100,
+          x: 10,
+          y: 10
+      }
+    };
+  }
+
+  onCropChange = (crop: Location) => {
+    console.log(`onCropChange: { x: ${crop.x}, y: ${crop.y} }`);
+    this.setState({ crop });
+  }
+
+  onCropComplete = (croppedArea: Area, croppedAreaPixels: Area) => {
+    console.log('onCropComplete:');
+    console.log(croppedArea, croppedAreaPixels);
+  }
+
+  onZoomChange = (zoom: number) => {
+    console.log(`onZoomChange: ${zoom}`);
+    this.setState({ zoom });
+  }
+
+  onImgError = () => {
+    console.log(`onImgError`);
+  }
+
+  render() {
+    return (
+      <div className="App">
+        <div className="crop-container">
+          <Cropper
+            image={this.state.imageSrc}
+            crop={this.state.crop}
+            zoom={this.state.zoom}
+            aspect={this.state.aspect}
+            minZoom={this.state.minZoom}
+            maxZoom={this.state.maxZoom}
+            cropShape={this.state.cropShape}
+            cropSize={this.state.cropSize}
+            showGrid={this.state.showGrid}
+            zoomSpeed={this.state.zoomSpeed}
+            crossOrigin={this.state.crossOrigin}
+            onCropChange={this.onCropChange}
+            onCropComplete={this.onCropComplete}
+            onZoomChange={this.onZoomChange}
+            onImgError={this.onImgError}
+            style={this.state.style}
+            classes={this.state.classes}
+            restrictPosition={this.state.restrictPosition}
+            initialCroppedAreaPixels={this.state.initialCroppedAreaPixels}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+const AppFactory = React.createFactory(App);
+
+ReactDOM.render(
+    AppFactory(),
+    document.getElementById('app')
+);

types/react-easy-crop/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react",
+        "strictFunctionTypes": true
+    },
+    "files": [
+        "index.d.ts",
+        "react-easy-crop-tests.tsx"
+    ]
+}

types/react-easy-crop/tslint.json

@@ -0,0 +1,3 @@
+{
+    "extends": "dtslint/dt.json"
+}