update all spinners to be functional component, and add option to pass className and style props to all

JoshK2 · JoshK2 · commit 7620cc8c1902 · 2019-09-12T09:48:10.000+03:00
diff --git a/.bitmap b/.bitmap
@@ -217,5 +217,5 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "version": "14.2.6-dev.2"
+    "version": "14.3.0"
 }
diff --git a/README.md b/README.md
@@ -27,20 +27,20 @@ Each component accepts a `color` prop, and few accepts also `size` prop.
 The default `color` prop is `#7f58af`.  
 Component that accepts `size` prop have a default size in pixel.
 
-| Spinner          | Color: string | Size: number  |
-| ---------------- | ------------  | ------------- |
-| Circle Spinner   | `#7f58af`     | `64px`        |
-| Default Spinner  | `#7f58af`     | -             |
-| DualRing Spinner | `#7f58af`     | -             |
-| Ellipsis Spinner | `#7f58af`     | -             |
-| Facebook Spinner | `#7f58af`     | -             |
-| Grid Spinner     | `#7f58af`     | -             |
-| Heart Spinner    | `#7f58af`     | -             |
-| Hourglass Spinner| `#7f58af`     | -             |
-| Ring Spinner     | `#7f58af`     | `80px`        |
-| Ripple Spinner   | `#7f58af`     | -             |
-| Roller Spinner   | `#7f58af`     | -             |
-| Spinner Spinner  | `#7f58af`     | -             |
+| Spinner          | color: string | size: number  | className: string | style: object |
+| ---------------- | ------------  | ------------- | ----------------- | ------------- |
+| Circle Spinner   | `#7f58af`     | `64px`        | `""`              | `{}`          |
+| Default Spinner  | `#7f58af`     | -             | `""`              | `{}`          |
+| DualRing Spinner | `#7f58af`     | -             | `""`              | `{}`          |
+| Ellipsis Spinner | `#7f58af`     | -             | `""`              | `{}`          |
+| Facebook Spinner | `#7f58af`     | -             | `""`              | `{}`          |
+| Grid Spinner     | `#7f58af`     | -             | `""`              | `{}`          |
+| Heart Spinner    | `#7f58af`     | -             | `""`              | `{}`          |
+| Hourglass Spinner| `#7f58af`     | -             | `""`              | `{}`          |
+| Ring Spinner     | `#7f58af`     | `80px`        | `""`              | `{}`          |
+| Ripple Spinner   | `#7f58af`     | -             | `""`              | `{}`          |
+| Roller Spinner   | `#7f58af`     | -             | `""`              | `{}`          |
+| Spinner Spinner  | `#7f58af`     | -             | `""`              | `{}`          |
 
 
 ## 📦 Installation
diff --git a/src/components/Circle/index.js b/src/components/Circle/index.js
@@ -1,22 +1,27 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import './style.css'
 
-export default class Circle extends Component {
-    render() {
-        const { color, size } = this.props
-        return <div className="lds-circle" style={{ background: color, width: size, height: size }}></div>
-    }
+export default function Circle({ color, size, className, style }) {
+    return (
+        <div className={`lds-circle ${className}`} style={{ background: color, width: size, height: size, ...style }} />
+    )
 }
 
 Circle.propTypes = {
     /** hex color */
     color: PropTypes.string,
     /** size in pixel */
     size: PropTypes.number,
+    /** class name  */
+    className: PropTypes.string,
+    /** style object */
+    style: PropTypes.object,
 }
 
 Circle.defaultProps = {
     color: '#7f58af',
     size: 64,
+    className: '',
+    style: {},
 }
diff --git a/src/components/Default/index.js b/src/components/Default/index.js
@@ -2,17 +2,27 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import './style.css'
 
-export default function Default({ color }) {
+export default function Default({ color, className, style }) {
     const circles = [...Array(12)].map((_, index) => <div key={index} style={{ background: `${color}` }} />)
 
-    return <div className="lds-default">{circles}</div>
+    return (
+        <div className={`lds-default ${className}`} style={{ ...style }}>
+            {circles}
+        </div>
+    )
 }
 
 Default.propTypes = {
     /** hex color */
     color: PropTypes.string,
+    /** class name  */
+    className: PropTypes.string,
+    /** style object */
+    style: PropTypes.object,
 }
 
 Default.defaultProps = {
     color: '#7f58af',
+    className: '',
+    style: {},
 }
diff --git a/src/components/DualRing/index.js b/src/components/DualRing/index.js
@@ -1,22 +1,26 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import './style.css'
 
-export default class DualRing extends Component {
-    render() {
-        return (
-            <div className="lds-dual-ring">
-                <div className="lds-dual-ring-after" style={{ borderColor: `${this.props.color} transparent` }}></div>
-            </div>
-        )
-    }
+export default function DualRing({ color, className, style }) {
+    return (
+        <div className={`lds-dual-ring ${className}`} style={{ ...style }}>
+            <div className="lds-dual-ring-after" style={{ borderColor: `${color} transparent` }}></div>
+        </div>
+    )
 }
 
 DualRing.propTypes = {
     /** hex color */
     color: PropTypes.string,
+    /** class name  */
+    className: PropTypes.string,
+    /** style object */
+    style: PropTypes.object,
 }
 
 DualRing.defaultProps = {
     color: '#7f58af',
+    className: '',
+    style: {},
 }
diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js
@@ -1,26 +1,28 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import './style.css'
 
-export default class Ellipsis extends Component {
-    Circles = () => {
-        let div = []
-        for (let index = 0; index < 4; index++) {
-            div.push(<div key={index} style={{ background: `${this.props.color}` }}></div>)
-        }
-        return div
-    }
+export default function Ellipsis({ color, className, style }) {
+    const circles = [...Array(4)].map((_, index) => <div key={index} style={{ background: `${color}` }} />)
 
-    render() {
-        return <div className="lds-ellipsis">{this.Circles()}</div>
-    }
+    return (
+        <div className={`lds-ellipsis ${className}`} style={{ ...style }}>
+            {circles}
+        </div>
+    )
 }
 
 Ellipsis.propTypes = {
     /** hex color */
     color: PropTypes.string,
+    /** class name  */
+    className: PropTypes.string,
+    /** style object */
+    style: PropTypes.object,
 }
 
 Ellipsis.defaultProps = {
     color: '#7f58af',
+    className: '',
+    style: {},
 }
diff --git a/src/components/Facebook/index.js b/src/components/Facebook/index.js
@@ -1,22 +1,28 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import './style.css'
 
-export default class Facebook extends Component {
-    getCircles = () => {
-        return [...Array(3)].map((val, index) => <div key={index} style={{ background: `${this.props.color}` }}></div>)
-    }
+export default function Facebook({ color, className, style }) {
+    const circles = [...Array(3)].map((_, index) => <div key={index} style={{ background: `${color}` }}></div>)
 
-    render() {
-        return <div className="lds-facebook">{this.getCircles()}</div>
-    }
+    return (
+        <div className={`lds-facebook ${className}`} style={{ ...style }}>
+            {circles}
+        </div>
+    )
 }
 
 Facebook.propTypes = {
     /** hex color */
     color: PropTypes.string,
+    /** class name  */
+    className: PropTypes.string,
+    /** style object */
+    style: PropTypes.object,
 }
 
 Facebook.defaultProps = {
     color: '#7f58af',
+    className: '',
+    style: {},
 }
diff --git a/src/components/Grid/index.js b/src/components/Grid/index.js
@@ -2,17 +2,27 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import './style.css'
 
-export default function Grid({ color }) {
+export default function Grid({ color, className, style }) {
     const circles = [...Array(9)].map((_, index) => <div key={index} style={{ background: `${color}` }} />)
 
-    return <div className="lds-grid">{circles}</div>
+    return (
+        <div className={`lds-grid ${className}`} style={{ ...style }}>
+            {circles}
+        </div>
+    )
 }
 
 Grid.propTypes = {
     /** hex color */
     color: PropTypes.string,
+    /** class name  */
+    className: PropTypes.string,
+    /** style object */
+    style: PropTypes.object,
 }
 
 Grid.defaultProps = {
     color: '#7f58af',
+    className: '',
+    style: {},
 }
diff --git a/src/components/Heart/index.js b/src/components/Heart/index.js
@@ -1,25 +1,29 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import './style.css'
 
-export default class Heart extends Component {
-    render() {
-        return (
-            <div className="lds-heart">
-                <div style={{ background: this.props.color }}>
-                    <div className="div-before" style={{ background: this.props.color }}></div>
-                    <div className="div-after" style={{ background: this.props.color }}></div>
-                </div>
+export default function Heart({ color, className, style }) {
+    return (
+        <div className={`lds-heart ${className}`} style={{ ...style }}>
+            <div style={{ background: color }}>
+                <div className="div-before" style={{ background: color }}></div>
+                <div className="div-after" style={{ background: color }}></div>
             </div>
-        )
-    }
+        </div>
+    )
 }
 
 Heart.propTypes = {
     /** hex color */
     color: PropTypes.string,
+    /** class name  */
+    className: PropTypes.string,
+    /** style object */
+    style: PropTypes.object,
 }
 
 Heart.defaultProps = {
     color: '#7f58af',
+    className: '',
+    style: {},
 }
diff --git a/src/components/Hourglass/index.js b/src/components/Hourglass/index.js
@@ -1,22 +1,26 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import './style.css'
 
-export default class Hourglass extends Component {
-    render() {
-        return (
-            <div className="lds-hourglass">
-                <div className="lds-hourglass-after" style={{ background: this.props.color }}></div>
-            </div>
-        )
-    }
+export default function Hourglass({ color, className, style }) {
+    return (
+        <div className={`lds-hourglass ${className}`} style={{ ...style }}>
+            <div className="lds-hourglass-after" style={{ background: color }}></div>
+        </div>
+    )
 }
 
 Hourglass.propTypes = {
     /** hex color */
     color: PropTypes.string,
+    /** class name  */
+    className: PropTypes.string,
+    /** style object */
+    style: PropTypes.object,
 }
 
 Hourglass.defaultProps = {
     color: '#7f58af',
+    className: '',
+    style: {},
 }
diff --git a/src/components/Ring/index.js b/src/components/Ring/index.js
diff --git a/src/components/Ripple/index.js b/src/components/Ripple/index.js
diff --git a/src/components/Roller/index.js b/src/components/Roller/index.js
diff --git a/src/components/Spinner/index.js b/src/components/Spinner/index.js
diff --git a/src/index.js b/src/index.js

Original file line number	Diff line number	Diff line change
`@@ -217,5 +217,5 @@`
`217`	`217`	`"origin": "AUTHORED",`
`218`	`218`	`"exported": true`
`219`	`219`	`},`
`220`		`- "version": "14.2.6-dev.2"`
	`220`	`+ "version": "14.3.0"`
`221`	`221`	`}`