diff --git a/.babelrc b/.babelrc
index 9620bdf..cc4ee7a 100755
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,3 @@
{
- "presets": ["es2015", "stage-2", "react"]
-}
\ No newline at end of file
+ "presets": ["es2015", "stage-2", "react", "flow"]
+}
diff --git a/.flowconfig b/.flowconfig
new file mode 100644
index 0000000..363b337
--- /dev/null
+++ b/.flowconfig
@@ -0,0 +1,9 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
diff --git a/package-lock.json b/package-lock.json
index 7fb11eb..fe9f5c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "react-content-loader",
- "version": "1.4.0",
+ "version": "1.4.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -3456,6 +3456,12 @@
"integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
"dev": true
},
+ "flow-bin": {
+ "version": "0.57.3",
+ "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.57.3.tgz",
+ "integrity": "sha512-bbB7KLR1bLS0CvHSsKseOGFF6iI2N9ocL14EQv8Hng28ZksD0gNRzR2JopqA3WGrQYJukDU1W4ZuKoBaRuElFA==",
+ "dev": true
+ },
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
diff --git a/package.json b/package.json
index c952e14..6830038 100755
--- a/package.json
+++ b/package.json
@@ -1,8 +1,7 @@
{
"name": "react-content-loader",
"version": "1.4.1",
- "description":
- "This project is a collection the loader based on styles cards on Facebook, make with SVG and React.",
+ "description": "This project is a collection the loader based on styles cards on Facebook, make with SVG and React.",
"repository": {
"type": "git",
"url": "https://github.com/danilowoz/react-content-loader"
@@ -14,22 +13,28 @@
"url": "https://github.com/danilowoz/react-content-loader/issues"
},
"homepage": "https://github.com/danilowoz/react-content-loader",
- "keywords": ["react", "facebook-style", "loader", "loading", "content", "svg"],
+ "keywords": [
+ "react",
+ "facebook-style",
+ "loader",
+ "loading",
+ "content",
+ "svg"
+ ],
"options": {
"mocha": "--require scripts/mocha_runner ./tests/**/*.js ./tests/*.js"
},
"scripts": {
- "watch":
- "babel --plugins transform-es2015-modules-umd src --watch --ignore tests --out-dir ./dist",
- "prepublish":
- "babel --plugins transform-es2015-modules-umd src --ignore tests --out-dir ./dist",
+ "watch": "babel --plugins transform-es2015-modules-umd src --watch --ignore tests --out-dir ./dist",
+ "prepublish": "babel --plugins transform-es2015-modules-umd src --ignore tests --out-dir ./dist",
"lint": "eslint 'src/**/*.js'",
"prettier": "prettier --write 'src/**/*.{js,jsx,json,css}'",
"testonly": "mocha $npm_package_options_mocha",
"test": "npm run lint && npm run testonly",
"test-watch": "npm run testonly -- --watch --watch-extensions js",
"storybook": "start-storybook -p 6006",
- "build-storybook": "build-storybook"
+ "build-storybook": "build-storybook",
+ "flow": "flow"
},
"devDependencies": {
"@storybook/react": "^3.1.9",
@@ -39,6 +44,7 @@
"babel-plugin-transform-es2015-modules-umd": "^6.6.5",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
+ "babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"chai": "^3.5.0",
@@ -49,6 +55,7 @@
"eslint-plugin-babel": "^3.1.0",
"eslint-plugin-prettier": "^2.2.0",
"eslint-plugin-react": "^4.2.3",
+ "flow-bin": "^0.57.3",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"nodemon": "^1.9.1",
diff --git a/src/Wrap.js b/src/Wrap.js
index 08600bc..957735c 100644
--- a/src/Wrap.js
+++ b/src/Wrap.js
@@ -1,7 +1,14 @@
-import React from 'react'
+//@flow
+import * as React from 'react'
import uuid from 'uuid'
-const Wrap = props => {
+import type { Props as ContentLoaderProps } from './index';
+
+export type WrapProps = {
+ children?: React.ChildrenArray<*>
+} & ContentLoaderProps
+
+const Wrap = (props: WrapProps): React.Element<*> => {
let idClip = uuid.v1()
let idGradient = uuid.v1()
diff --git a/src/custom/Circle.js b/src/custom/Circle.js
index a2185f7..5dcf1ca 100644
--- a/src/custom/Circle.js
+++ b/src/custom/Circle.js
@@ -1,6 +1,13 @@
-import React from 'react'
+//@flow
+import * as React from 'react'
-const Circle = props => {
+type Props = {
+ x: number,
+ y: number,
+ radius: number,
+}
+
+const Circle = (props: Props): React.Element<*> => {
const { x = 0, y = 0, radius = 50 } = props
return
}
diff --git a/src/custom/Rect.js b/src/custom/Rect.js
index eda5fcf..eb53c75 100644
--- a/src/custom/Rect.js
+++ b/src/custom/Rect.js
@@ -1,6 +1,15 @@
-import React from 'react'
+//@flow
+import * as React from 'react'
-const Rect = props => {
+type Props = {
+ x: number,
+ y: number,
+ radius: number,
+ width: number,
+ height: number,
+}
+
+const Rect = (props: Props): React.Element<*> => {
const { x = 0, y = 0, radius = 0, width = 50, height = 50 } = props
return
}
diff --git a/src/index.js b/src/index.js
index f658c4b..14c5fa5 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,5 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+//@flow
+import * as React from 'react'
import Wrap from './Wrap'
// Stylized
@@ -11,8 +11,37 @@ import ListStyle from './stylized/ListStyle'
import Rect from './custom/Rect'
import Circle from './custom/Circle'
-class ContentLoader extends Component {
- constructor(props) {
+export type Props = {
+ style: {[key: string]: any},
+ type: string,
+ speed: number,
+ width: number,
+ height: number,
+ primaryColor: string,
+ secondaryColor: string,
+}
+
+type State = {
+ style: {[key: string]: any},
+ type: string,
+ speed: number,
+ width: number,
+ height: number,
+ primaryColor: string,
+ secondaryColor: string,
+}
+
+class ContentLoader extends React.Component {
+ static defaultProps = {
+ type: 'facebook',
+ speed: 2,
+ width: 400,
+ height: 130,
+ primaryColor: '#f0f0f0',
+ secondaryColor: '#e0e0e0',
+ }
+
+ constructor(props: Props) {
super(props)
this.state = {
@@ -35,43 +64,20 @@ class ContentLoader extends Component {
switch (this.state.type.toLowerCase()) {
case 'instagram':
return
- break
case 'code':
return
- break
case 'list':
return
- break
default:
case 'facebook':
return
- break
}
}
}
}
-ContentLoader.propTypes = {
- style: PropTypes.object,
- type: PropTypes.string,
- speed: PropTypes.number,
- width: PropTypes.number,
- height: PropTypes.number,
- primaryColor: PropTypes.string,
- secondaryColor: PropTypes.string,
-}
-
-ContentLoader.defaultProps = {
- type: 'facebook',
- speed: 2,
- width: 400,
- height: 130,
- primaryColor: '#f0f0f0',
- secondaryColor: '#e0e0e0',
-}
-
export default ContentLoader
export { Rect, Circle }
diff --git a/src/stylized/CodeStyle.js b/src/stylized/CodeStyle.js
index b9215f5..c334c3c 100644
--- a/src/stylized/CodeStyle.js
+++ b/src/stylized/CodeStyle.js
@@ -1,7 +1,9 @@
-import React from 'react'
+//@flow
+import * as React from 'react'
import Wrap from '../Wrap'
+import type { WrapProps } from '../Wrap';
-const CodeStyle = props => {
+const CodeStyle = (props: WrapProps): React.Element<*> => {
return (
diff --git a/src/stylized/FacebookStyle.js b/src/stylized/FacebookStyle.js
index 54ab47e..f39f37d 100644
--- a/src/stylized/FacebookStyle.js
+++ b/src/stylized/FacebookStyle.js
@@ -1,7 +1,9 @@
-import React from 'react'
+//@flow
+import * as React from 'react'
import Wrap from '../Wrap'
+import type { WrapProps } from '../Wrap';
-const FacebookStyle = props => {
+const FacebookStyle = (props: WrapProps): React.Element<*> => {
return (
diff --git a/src/stylized/InstagramStyle.js b/src/stylized/InstagramStyle.js
index ef270b3..4e40108 100644
--- a/src/stylized/InstagramStyle.js
+++ b/src/stylized/InstagramStyle.js
@@ -1,9 +1,11 @@
-import React from 'react'
+//@flow
+import * as React from 'react'
import Wrap from '../Wrap'
+import type { WrapProps } from '../Wrap';
-const InstagramStyle = props => {
+const InstagramStyle = (props: WrapProps): React.Element<*> => {
return (
-
+
diff --git a/src/stylized/ListStyle.js b/src/stylized/ListStyle.js
index 09c130e..ec3e0aa 100644
--- a/src/stylized/ListStyle.js
+++ b/src/stylized/ListStyle.js
@@ -1,7 +1,9 @@
-import React from 'react'
+//@flow
+import * as React from 'react'
import Wrap from '../Wrap'
+import type { WrapProps } from '../Wrap';
-const ListStyle = props => {
+const ListStyle = (props: WrapProps): React.Element<*> => {
return (