Merge pull request DefinitelyTyped#24138 from diogocorrea/react-avata…

…r-editor add types for react-avatar-editor
blayzen-w · Mar 8, 2018 · 094a825 · 094a825
2 parents 7c30c3e + e4aa17e
commit 094a825
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 0 deletions.
diff --git a/types/react-avatar-editor/index.d.ts b/types/react-avatar-editor/index.d.ts
@@ -0,0 +1,51 @@
+// Type definitions for react-avatar-editor 10.3
+// Project: https://github.com/mosch/react-avatar-editor
+// Definitions by: Diogo Corrêa <https://github.com/diogocorrea>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.6
+
+import * as React from "react";
+
+export interface ImageState {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+    resource: ImageData;
+}
+
+export interface CroppedRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export interface AvatarEditorProps {
+    image: string | File;
+    width?: number;
+    height?: number;
+    border?: number | number[];
+    borderRadius?: number;
+    color?: number[];
+    style?: object;
+    scale?: number;
+    position?: object;
+    rotate?: number;
+    crossOrigin?: string;
+    disableDrop?: boolean;
+    onDropFile?(event: DragEvent): void;
+    onLoadFailure?(event: Event): void;
+    onLoadSuccess?(imgInfo: ImageState): void;
+    onImageReady?(event: Event): void;
+    onMouseUp?(): void;
+    onMouseMove?(event: Event): void;
+    onImageChange?(): void;
+    onPositionChange?(): void;
+}
+
+export default class AvatarEditor extends React.Component<AvatarEditorProps, any> {
+    static getImage(): HTMLCanvasElement;
+    static getImageScaledToCanvas(): HTMLCanvasElement;
+    static getCroppingRect(): CroppedRect;
+}
diff --git a/types/react-avatar-editor/react-avatar-editor-tests.tsx b/types/react-avatar-editor/react-avatar-editor-tests.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+import AvatarEditor, { ImageState, CroppedRect } from "react-avatar-editor";
+
+const file: File = new File(["str"], "image.jpg");
+const image: ImageData = new ImageData(1, 2);
+const imageState: ImageState = {
+    height: 1,
+    width: 1,
+    x: 1,
+    y: 1,
+    resource: image
+};
+
+class AvatarEditorTest extends React.Component {
+    render() {
+        return (
+            <div>
+                <AvatarEditor image="" />
+                <AvatarEditor image={file} />
+                <AvatarEditor image="" width={1} />
+                <AvatarEditor image="" height={1} />
+                <AvatarEditor image="" border={1} />
+                <AvatarEditor image="" border={[1, 2]} />
+                <AvatarEditor image="" borderRadius={1} />
+                <AvatarEditor image="" color={[1]} />
+                <AvatarEditor image="" style={{}} />
+                <AvatarEditor image="" scale={1} />
+                <AvatarEditor image="" position={{}} />
+                <AvatarEditor image="" rotate={1} />
+                <AvatarEditor image="" crossOrigin="" />
+                <AvatarEditor image="" disableDrop={true} />
+                <AvatarEditor image="" onDropFile={event => {}} />
+                <AvatarEditor image="" onLoadFailure={event => {}} />
+                <AvatarEditor image="" onLoadSuccess={imageState => {}} />
+                <AvatarEditor image="" onImageReady={event => {}} />
+                <AvatarEditor image="" onMouseUp={() => {}} />
+                <AvatarEditor image="" onMouseMove={event => {}} />
+                <AvatarEditor image="" onImageChange={() => {}} />
+                <AvatarEditor image="" onPositionChange={() => {}} />
+            </div>
+        );
+    }
+}
+
+const getImage: HTMLCanvasElement = AvatarEditor.getImage();
+const getImageScaledToCanvas: HTMLCanvasElement = AvatarEditor.getImageScaledToCanvas();
+const getCroppingRect: CroppedRect = AvatarEditor.getCroppingRect();
diff --git a/types/react-avatar-editor/tsconfig.json b/types/react-avatar-editor/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "files": [
+        "index.d.ts",
+        "react-avatar-editor-tests.tsx"
+    ],
+    "compilerOptions": {
+        "jsx": "react",
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    }
+}
diff --git a/types/react-avatar-editor/tslint.json b/types/react-avatar-editor/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }