Color prop for Loading component - all spinners except GraphSpinner

valentijnnieman · valentijnnieman · commit ce88242e9ef2 · 2018-11-13T13:43:33.000-05:00
diff --git a/dash_core_components/Loading.py b/dash_core_components/Loading.py
@@ -14,6 +14,7 @@ class Loading(Component):
 - fullscreen (boolean; optional): Boolean that determines if the loading spinner will be displayed full-screen or not
 - debug (boolean; optional): Boolean that determines if the loading spinner will display the status.prop_name and component_name
 - className (string; optional): Additional CSS class for the root DOM node
+- color (string; optional): Primary colour used for the loading spinners
 - status (optional): Object that holds the status object coming from dash-renderer. status has the following type: dict containing keys 'is_loading', 'prop_name', 'component_name'.
 Those keys have the following types: 
   - is_loading (boolean; optional): Determines if the component is loading or not
@@ -22,13 +23,13 @@ class Loading(Component):
 
 Available events: """
     @_explicitize_args
-    def __init__(self, children=None, id=Component.UNDEFINED, type=Component.UNDEFINED, fullscreen=Component.UNDEFINED, debug=Component.UNDEFINED, className=Component.UNDEFINED, status=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['children', 'id', 'type', 'fullscreen', 'debug', 'className', 'status']
+    def __init__(self, children=None, id=Component.UNDEFINED, type=Component.UNDEFINED, fullscreen=Component.UNDEFINED, debug=Component.UNDEFINED, className=Component.UNDEFINED, color=Component.UNDEFINED, status=Component.UNDEFINED, **kwargs):
+        self._prop_names = ['children', 'id', 'type', 'fullscreen', 'debug', 'className', 'color', 'status']
         self._type = 'Loading'
         self._namespace = 'dash_core_components'
         self._valid_wildcard_attributes =            []
         self.available_events = []
-        self.available_properties = ['children', 'id', 'type', 'fullscreen', 'debug', 'className', 'status']
+        self.available_properties = ['children', 'id', 'type', 'fullscreen', 'debug', 'className', 'color', 'status']
         self.available_wildcard_properties =            []
 
         _explicit_args = kwargs.pop('_explicit_args')
diff --git a/dash_core_components/dash_core_components.dev.js b/dash_core_components/dash_core_components.dev.js
diff --git a/dash_core_components/dash_core_components.min.js b/dash_core_components/dash_core_components.min.js
diff --git a/dash_core_components/metadata.json b/dash_core_components/metadata.json
@@ -2142,6 +2142,17 @@
         "required": false,
         "description": "Additional CSS class for the root DOM node"
       },
+      "color": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "Primary colour used for the loading spinners",
+        "defaultValue": {
+          "value": "'#119DFF'",
+          "computed": false
+        }
+      },
       "status": {
         "type": {
           "name": "shape",
diff --git a/dash_core_components/package.json b/dash_core_components/package.json
@@ -34,6 +34,7 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "builder": "3.2.2",
+    "color": "^3.1.0",
     "copyfiles": "^2.0.0",
     "cross-env": "^5.2.0",
     "css-loader": "^0.28.11",
diff --git a/demo/LoadingDemo.react.js b/demo/LoadingDemo.react.js
@@ -4,18 +4,18 @@ import {Loading, Tabs, Tab} from '../src';
 
 const LoadingDemo = () => {
     const status = {
-        isLoading: true,
-        propName: 'layout',
-        componentName: 'Demo',
+        is_loading: true,
+        prop_name: 'layout',
+        component_name: 'Demo',
     };
     return (
         <Tabs>
-            <Tab value='tab-1' label='All Spinners (no fullscreen)'>
+            <Tab value='tab-1' label='All Spinners (custom colors, no fullscreen)'>
                 <div>
-                    <Loading status={status} type="default" />
-                    <Loading status={status} type="circle" />
-                    <Loading status={status} type="dot" />
-                    <Loading status={status} type="cube" />
+                    <Loading status={status} type="default" color="gold" />
+                    <Loading status={status} type="circle" color="cyan"/>
+                    <Loading status={status} type="dot" color="hotpink"/>
+                    <Loading status={status} type="cube" color="greenyellow"/>
                     <Loading status={status} type="graph" />
                 </div>
             </Tab>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "builder": "3.2.2",
+    "color": "^3.1.0",
     "copyfiles": "^2.0.0",
     "cross-env": "^5.2.0",
     "css-loader": "^0.28.11",
diff --git a/src/components/Loading/Loading.react.js b/src/components/Loading/Loading.react.js
@@ -11,19 +11,19 @@ import DotSpinner from './spinners/DotSpinner.jsx';
  */
 export default class Loading extends Component {
     render() {
-        const { status, fullscreen, debug } = this.props;
+        const { status, color, fullscreen, debug } = this.props;
         if (status && status.is_loading) {
             switch (this.props.type) {
                 case 'graph':
-                    return <GraphSpinner status={status} debug={debug} fullscreen={fullscreen}/>;
+                    return <GraphSpinner status={status} color={color} debug={debug} fullscreen={fullscreen}/>;
                 case 'cube':
-                    return <CubeSpinner status={status} debug={debug} fullscreen={fullscreen} />;
+                    return <CubeSpinner status={status} color={color} debug={debug} fullscreen={fullscreen} />;
                 case 'circle':
-                    return <CircleSpinner status={status} debug={debug} fullscreen={fullscreen} />;
+                    return <CircleSpinner status={status} color={color} debug={debug} fullscreen={fullscreen} />;
                 case 'dot':
-                    return <DotSpinner status={status} debug={debug} fullscreen={fullscreen} />;
+                    return <DotSpinner status={status} color={color} debug={debug} fullscreen={fullscreen} />;
                 default:
-                    return <DefaultSpinner status={status} debug={debug} fullscreen={fullscreen} />;
+                    return <DefaultSpinner status={status} color={color} debug={debug} fullscreen={fullscreen} />;
             }
         }
         return this.props.children || null;
@@ -32,6 +32,7 @@ export default class Loading extends Component {
 
 Loading.defaultProps = {
     type: 'default',
+    color: '#119DFF'
 };
 
 Loading.propTypes = {
@@ -62,6 +63,11 @@ Loading.propTypes = {
      */
     className: PropTypes.string,
 
+    /**
+     * Primary colour used for the loading spinners 
+     */
+    color: PropTypes.string,
+
     /**
      * Object that holds the status object coming from dash-renderer
      */
diff --git a/src/components/Loading/spinners/CircleSpinner.jsx b/src/components/Loading/spinners/CircleSpinner.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const CircleSpinner = ({status, fullscreen, debug}) => {
+const CircleSpinner = ({status, color, fullscreen, debug}) => {
     let debugTitle;
     if (debug) {
         debugTitle = (
@@ -64,7 +64,7 @@ const CircleSpinner = ({status, fullscreen, debug}) => {
                         margin: 0 auto;
                         width: 15%;
                         height: 15%;
-                        background-color: #119DFF;
+                        background-color: ${color};
                         border-radius: 100%;
                         -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
                                 animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
@@ -174,6 +174,7 @@ const CircleSpinner = ({status, fullscreen, debug}) => {
 
 CircleSpinner.propTypes = {
     status: PropTypes.object,
+    color: PropTypes.string,
     fullscreen: PropTypes.bool,
     debug: PropTypes.bool,
 };
diff --git a/src/components/Loading/spinners/CubeSpinner.jsx b/src/components/Loading/spinners/CubeSpinner.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import changeColor from 'color';
 
-const CubeSpinner = ({status, fullscreen, debug}) => {
+const CubeSpinner = ({status, color, fullscreen, debug}) => {
     let debugTitle;
     if (debug) {
         debugTitle = (
@@ -11,6 +12,7 @@ const CubeSpinner = ({status, fullscreen, debug}) => {
             </h3>
         );
     }
+    /* eslint-disable no-magic-numbers */
     return (
         <div className={fullscreen ? 'dash-spinner-container' : ''}>
             {debugTitle}
@@ -64,36 +66,36 @@ const CubeSpinner = ({status, fullscreen, debug}) => {
                       }
                       
                       .dash-cube-side--front {
-                        background-color: #119DFF;  
+                        background-color: ${color};  
                         animation: blowout-front 4s infinite;
                         transform: rotateY(0deg) translateZ(40px);
                       }
                       .dash-cube-side--back {
-                        background-color: #0D76BF;
+                        background-color: ${changeColor(color).darken(0.2)};
                         transform: rotateX(180deg) translateZ(40px);
                         animation: blowout-back 4s infinite;
                       }
                       
                       .dash-cube-side--left {
-                        background-color: #0D76BF;
+                        background-color: ${changeColor(color).darken(0.2)};
                         transform: rotateY(-90deg) translateZ(40px);
                         animation: blowout-left 4s infinite;
                       }
                       
                       .dash-cube-side--right {
-                        background-color: #506784;
+                        background-color: ${changeColor(color).darken(0.4)};
                         transform: rotateY(90deg) translateZ(40px);
                         animation: blowout-right 4s infinite;
                       }
                       
                       .dash-cube-side--top {
-                        background-color: #0D76BF;
+                        background-color: ${changeColor(color).darken(0.2)};
                         transform: rotateX(90deg) translateZ(40px);
                         animation: blowout-top 4s infinite;
                       }
                       
                       .dash-cube-side--bottom {
-                        background-color: #119DFF;
+                        background-color: ${changeColor(color).darken(0.4)};
                         transform: rotateX(-90deg) translateZ(40px);
                         animation: blowout-bottom 4s infinite;
                       }
@@ -184,6 +186,7 @@ const CubeSpinner = ({status, fullscreen, debug}) => {
 
 CubeSpinner.propTypes = {
     status: PropTypes.object,
+    color: PropTypes.string,
     fullscreen: PropTypes.bool,
     debug: PropTypes.bool,
 };
diff --git a/src/components/Loading/spinners/DefaultSpinner.jsx b/src/components/Loading/spinners/DefaultSpinner.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const DefaultSpinner = ({status, fullscreen, debug}) => {
+const DefaultSpinner = ({status, color, fullscreen, debug}) => {
     let debugTitle;
-    window.console.log('debug?', debug)
     if (debug) {
         debugTitle = (
             <h3 className="dash-loading-title">
@@ -48,7 +47,7 @@ const DefaultSpinner = ({status, fullscreen, debug}) => {
                     }
                     
                     .spinner-verts > div {
-                        background-color: #119DFF;
+                        background-color: ${color};
                         height: 100%;
                         width: 6px;
                         display: inline-block;
@@ -100,6 +99,7 @@ const DefaultSpinner = ({status, fullscreen, debug}) => {
 
 DefaultSpinner.propTypes = {
     status: PropTypes.object,
+    color: PropTypes.string,
     fullscreen: PropTypes.bool,
     debug: PropTypes.bool,
 };
diff --git a/src/components/Loading/spinners/DotSpinner.jsx b/src/components/Loading/spinners/DotSpinner.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const DotSpinner = ({status, fullscreen, debug}) => {
+const DotSpinner = ({status, color, fullscreen, debug}) => {
     let debugTitle;
     if (debug) {
         debugTitle = (
@@ -45,7 +45,7 @@ const DotSpinner = ({status, fullscreen, debug}) => {
                 .dash-dot-spinner > div {
                     width: 18px;
                     height: 18px;
-                    background-color: #119DFF;
+                    background-color: ${color};
                 
                     border-radius: 100%;
                     display: inline-block;
@@ -85,6 +85,7 @@ const DotSpinner = ({status, fullscreen, debug}) => {
 
 DotSpinner.propTypes = {
     status: PropTypes.object,
+    color: PropTypes.string,
     fullscreen: PropTypes.bool,
     debug: PropTypes.bool,
 };
