diff --git a/package-lock.json b/package-lock.json index 2779ff4..497c022 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4374,15 +4374,6 @@ } } }, - "string_decoder": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz", - "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=", - "dev": true, - "requires": { - "safe-buffer": "5.0.1" - } - }, "string-width": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", @@ -4394,6 +4385,15 @@ "strip-ansi": "3.0.1" } }, + "string_decoder": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz", + "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=", + "dev": true, + "requires": { + "safe-buffer": "5.0.1" + } + }, "stringstream": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", @@ -8505,15 +8505,6 @@ "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "dev": true }, - "string_decoder": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", - "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", - "dev": true, - "requires": { - "safe-buffer": "5.1.1" - } - }, "string-length": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz", @@ -8556,6 +8547,15 @@ "function-bind": "1.1.0" } }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + }, "stringify-object": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-2.4.0.tgz", diff --git a/package.json b/package.json index d0beeb9..59f766e 100755 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ }, "author": "Danilo Woznica", "license": "MIT", + "jsnext:main": "index", "bugs": { "url": "https://github.com/danilowoz/react-content-loader/issues" }, @@ -35,6 +36,7 @@ "build-storybook": "build-storybook" }, "devDependencies": { + "@storybook/react": "^3.1.9", "babel-cli": "^6.6.4", "babel-core": "^6.7.4", "babel-eslint": "^6.0.2", @@ -52,13 +54,13 @@ "jsdom": "^8.1.0", "mocha": "^2.4.5", "nodemon": "^1.9.1", + "prettier": "^1.6.1", "prop-types": "^15.5.10", "react": "^15.0.0", "react-addons-test-utils": "^15.0.0", "react-dom": "^15.0.0", "sinon": "^1.17.3", - "uuid": "^3.0.1", - "@storybook/react": "^3.1.9" + "uuid": "^3.0.1" }, "peerDependencies": { "react": "~0.14.8 || ^15.0.0", diff --git a/src/Wrap.js b/src/Wrap.js index 2d9cba6..08600bc 100644 --- a/src/Wrap.js +++ b/src/Wrap.js @@ -1,34 +1,58 @@ import React from 'react' -import uuid from 'uuid'; +import uuid from 'uuid' -const Wrap = (props) => { +const Wrap = props => { + let idClip = uuid.v1() + let idGradient = uuid.v1() - let idClip = uuid.v1() - let idGradient = uuid.v1() + return ( + + - return ( - - + + {props.children} - - - { props.children } - - - - - - - - - - - - - - - - ) + + + + + + + + + + + + + + ) } export default Wrap diff --git a/src/custom/Circle.js b/src/custom/Circle.js index 30d1fdb..a2185f7 100644 --- a/src/custom/Circle.js +++ b/src/custom/Circle.js @@ -1,8 +1,8 @@ -import React from 'react'; +import React from 'react' -const Circle = (props) => { - const { x = 0, y = 0, radius = 50 } = props - return +const Circle = props => { + const { x = 0, y = 0, radius = 50 } = props + return } -export default Circle \ No newline at end of file +export default Circle diff --git a/src/custom/Rect.js b/src/custom/Rect.js index cb7f719..eda5fcf 100644 --- a/src/custom/Rect.js +++ b/src/custom/Rect.js @@ -1,8 +1,8 @@ -import React from 'react'; +import React from 'react' -const Rect = (props) => { - const { x = 0, y = 0, radius = 0, width = 50, height = 50 } = props - return +const Rect = props => { + const { x = 0, y = 0, radius = 0, width = 50, height = 50 } = props + return } -export default Rect \ No newline at end of file +export default Rect diff --git a/src/index.js b/src/index.js index cd879c8..5f1cee6 100755 --- a/src/index.js +++ b/src/index.js @@ -12,79 +12,66 @@ import Rect from './custom/Rect' import Circle from './custom/Circle' class ContentLoader extends Component { + constructor(props) { + super(props) - constructor(props) { - super(props) + this.state = { + style: props.style, + type: props.type, + speed: props.speed, + width: props.width, + height: props.height, + primaryColor: props.primaryColor, + secondaryColor: props.secondaryColor, + } + } - this.state = { - style: props.style, - type: props.type, - speed: props.speed, - width: props.width, - height: props.height, - primaryColor: props.primaryColor, - secondaryColor: props.secondaryColor - } - } + render() { + if (this.props.children) { + return {this.props.children} + } - render() { + if (!this.props.children) { + switch (this.state.type.toLowerCase()) { + case 'instagram': + return + break - if (this.props.children) { + case 'code': + return + break - return ( - - { this.props.children } - - ) + case 'list': + return + break - } - - if (!this.props.children) { - - switch (this.state.type.toLowerCase()) { - - case 'instagram': - return - break - - case 'code': - return - break - - case 'list': - return - break - - default: - case 'facebook': - 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 + 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' + type: 'facebook', + speed: 2, + width: 400, + height: 130, + primaryColor: '#f0f0f0', + secondaryColor: '#e0e0e0', } export default ContentLoader -export { Rect, Circle } \ No newline at end of file +export { Rect, Circle } diff --git a/src/stylized/CodeStyle.js b/src/stylized/CodeStyle.js index 1d16720..ed44fa6 100644 --- a/src/stylized/CodeStyle.js +++ b/src/stylized/CodeStyle.js @@ -1,23 +1,23 @@ import React from 'react' import Wrap from '../Wrap' -const CodeStyle = (props) => { - return ( - - - - +const CodeStyle = props => + return ( + + + + - - + + - - - + + + - - - ) + + + ) } export default CodeStyle diff --git a/src/stylized/FacebookStyle.js b/src/stylized/FacebookStyle.js index 5a810aa..54ab47e 100644 --- a/src/stylized/FacebookStyle.js +++ b/src/stylized/FacebookStyle.js @@ -1,19 +1,19 @@ import React from 'react' import Wrap from '../Wrap' -const FacebookStyle = (props) => { - return ( - - +const FacebookStyle = props => { + return ( + + - - + + - - - - - ) + + + + + ) } export default FacebookStyle diff --git a/src/stylized/InstagramStyle.js b/src/stylized/InstagramStyle.js index 0b98b45..ef270b3 100644 --- a/src/stylized/InstagramStyle.js +++ b/src/stylized/InstagramStyle.js @@ -1,16 +1,16 @@ import React from 'react' import Wrap from '../Wrap' -const InstagramStyle = (props) => { - return ( - - +const InstagramStyle = props => { + return ( + + - - - - - ) + + + + + ) } export default InstagramStyle diff --git a/src/stylized/ListStyle.js b/src/stylized/ListStyle.js index 3264945..09c130e 100644 --- a/src/stylized/ListStyle.js +++ b/src/stylized/ListStyle.js @@ -1,17 +1,17 @@ import React from 'react' import Wrap from '../Wrap' -const ListStyle = (props) => { - return ( - - - - - - - - - ) +const ListStyle = props => { + return ( + + + + + + + + + ) } export default ListStyle