add react-avatar-editor definitions

This commit is contained in:
Diogo Correa
2018-03-08 19:29:22 -03:00
parent 738589f9aa
commit e4aa17e077
4 changed files with 124 additions and 0 deletions
+51
View File
@@ -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;
}
@@ -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();
+25
View File
@@ -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
}
}
+1
View File
@@ -0,0 +1 @@
{ "extends": "dtslint/dt.json" }