Merge pull request #22533 from alaatm/master

Add type definitions for react-content-loader

types/react-content-loader/index.d.ts

@@ -0,0 +1,38 @@
+// Type definitions for react-content-loader 1.7
+// Project: https://github.com/danilowoz/react-content-loader
+// Definitions by: Alaa Masoud <https://github.com/alaatm>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+import * as React from 'react';
+
+export interface ContentLoaderProps {
+    style?: React.CSSProperties;
+    type?: 'facebook' | 'instagram' | 'list' | 'bullet-list' | 'code';
+    speed?: number;
+    width?: number;
+    height?: number;
+    primaryColor?: string;
+    secondaryColor?: string;
+    preserveAspectRatio?: 'none' | 'xMinYMin meet' | 'xMidYMin meet' | 'xMaxYMin meet' | 'xMinYMid meet' | 'xMidYMid meet' | 'xMaxYMid meet' |
+    'xMinYMax meet' | 'xMidYMax meet' | 'xMaxYMax meet' | 'xMinYMin slice' | 'xMidYMin slice' | 'xMaxYMin slice' | 'xMinYMid slice' |
+    'xMidYMid slice' | 'xMaxYMid slice' | 'xMinYMax slice' | 'xMidYMax slice' | 'xMaxYMax slice';
+    className?: string;
+}
+export default class ContentLoader extends React.Component<ContentLoaderProps> { }
+
+export interface CircleProps {
+    x: number;
+    y: number;
+    radius: number;
+}
+export class Circle extends React.Component<CircleProps> { }
+
+export interface RectProps {
+    x: number;
+    y: number;
+    radius: number;
+    width: number;
+    height: number;
+}
+export class Rect extends React.Component<RectProps> { }

types/react-content-loader/react-content-loader-tests.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import ContentLoader, { Circle, Rect } from 'react-content-loader';
+
+const CustomComponent = () => {
+    return (
+        <ContentLoader
+            style={{ borderBottom: '1px solid' }}
+            speed={1}
+            height={100}
+            width={100}
+            primaryColor="#333"
+            secondaryColor="#999"
+            preserveAspectRatio="xMinYMin meet"
+            className="my-class"
+        >
+            <Circle x={195} y={30} radius={30} />
+            <Rect x={50} y={80} height={10} radius={5} width={300} />
+            <Rect x={75} y={100} height={10} radius={5} width={250} />
+        </ContentLoader>
+    );
+};

types/react-content-loader/tsconfig.json

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

types/react-content-loader/tslint.json

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