Use new loading API and show propsName and componentName for now

Author: valentijnnieman

dash_core_components/Loading.py

@@ -12,21 +12,21 @@ class Loading(Component):
 - id (string; optional)
 - loadingProp (string; optional): String that determines which prop to listen to when loading
 - className (string; optional): Additional CSS class for the root DOM node
-- loading (optional): Object that holds the loading prop, a bool that determines if the component is loading, and the actual
-prop that's causing the load as a String.. loading has the following type: dict containing keys 'loading', 'prop'.
+- status (optional): Object that holds the status object coming from dash-renderer. status has the following type: dict containing keys 'isLoading', 'propName', 'componentName'.
 Those keys have the following types: 
-  - loading (boolean; optional)
-  - prop (string; optional)
+  - isLoading (boolean; optional): Determines if the component is loading or not
+  - propName (string; optional): Holds which property is loading
+  - componentName (string; optional): Holds the name of the component that is loading
 
 Available events: """
     @_explicitize_args
-    def __init__(self, children=None, id=Component.UNDEFINED, loadingProp=Component.UNDEFINED, className=Component.UNDEFINED, loading=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['children', 'id', 'loadingProp', 'className', 'loading']
+    def __init__(self, children=None, id=Component.UNDEFINED, loadingProp=Component.UNDEFINED, className=Component.UNDEFINED, status=Component.UNDEFINED, **kwargs):
+        self._prop_names = ['children', 'id', 'loadingProp', 'className', 'status']
         self._type = 'Loading'
         self._namespace = 'dash_core_components'
         self._valid_wildcard_attributes =            []
         self.available_events = []
-        self.available_properties = ['children', 'id', 'loadingProp', 'className', 'loading']
+        self.available_properties = ['children', 'id', 'loadingProp', 'className', 'status']
         self.available_wildcard_properties =            []
 
         _explicit_args = kwargs.pop('_explicit_args')

dash_core_components/dash_core_components.dev.js

@@ -2059,22 +2059,29 @@
         "required": false,
         "description": "Additional CSS class for the root DOM node"
       },
-      "loading": {
+      "status": {
         "type": {
           "name": "shape",
           "value": {
-            "loading": {
+            "isLoading": {
               "name": "bool",
+              "description": "Determines if the component is loading or not",
               "required": false
             },
-            "prop": {
+            "propName": {
               "name": "string",
+              "description": "Holds which property is loading",
+              "required": false
+            },
+            "componentName": {
+              "name": "string",
+              "description": "Holds the name of the component that is loading",
               "required": false
             }
           }
         },
         "required": false,
-        "description": "Object that holds the loading prop, a bool that determines if the component is loading, and the actual\nprop that's causing the load as a String."
+        "description": "Object that holds the status object coming from dash-renderer"
       }
     }
   },

dash_core_components/dash_core_components.min.js

@@ -21,7 +21,7 @@
     "build:js": "webpack --mode production",
     "build:js-dev": "webpack --mode development",
     "build:py": "node ./extract-meta src/components > dash_core_components/metadata.json && cp package.json dash_core_components && npm run generate-python-classes",
-    "build:all": "npm run build:js && npm run build:py",
+    "build:all": "npm run build:js && npm run build:js-dev && npm run build:py",
     "build:all-dev": "npm run build:js-dev && npm run build:py",
     "build:watch": "watch 'npm run build:all' src"
   },

dash_core_components/metadata.json

@@ -21,7 +21,7 @@
     "build:js": "webpack --mode production",
     "build:js-dev": "webpack --mode development",
     "build:py": "node ./extract-meta src/components > dash_core_components/metadata.json && cp package.json dash_core_components && npm run generate-python-classes",
-    "build:all": "npm run build:js && npm run build:py",
+    "build:all": "npm run build:js && npm run build:js-dev && npm run build:py",
     "build:all-dev": "npm run build:js-dev && npm run build:py",
     "build:watch": "watch 'npm run build:all' src"
   },

dash_core_components/package.json

@@ -10,14 +10,12 @@ export default class Loading extends Component {
     }
 
     render() {
-        const {loading} = this.props.loading;
-
-        window.console.log('loading prop:', this.props.loading.prop);
-
-        if (loading) {
+        const status = this.props.status;
+        if (status && status.isLoading) {
             return (
                 <div>
                     <div className="spinner-verts">
+                        <h3 className='dash-loading-title'>Loading {status.componentName}'s {status.propName}</h3>
                         <div className="rect1" />
                         <div className="rect2" />
                         <div className="rect3" />
@@ -84,7 +82,7 @@ export default class Loading extends Component {
                 </div>
             );
         }
-        return this.props.children;
+        return this.props.children || null;
     }
 }
 
@@ -94,14 +92,14 @@ Loading.propTypes = {
     /**
      * Array that holds components to render
      */
-    children: React.PropTypes.oneOfType([
-        React.PropTypes.arrayOf(React.PropTypes.node),
-        React.PropTypes.node,
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node,
     ]),
 
     /**
-    * String that determines which prop to listen to when loading
-    */
+     * String that determines which prop to listen to when loading
+     */
     loadingProp: PropTypes.string,
 
     /**
@@ -110,8 +108,20 @@ Loading.propTypes = {
     className: PropTypes.string,
 
     /**
-     * Object that holds the loading prop, a bool that determines if the component is loading, and the actual
-     * prop that's causing the load as a String.
+     * Object that holds the status object coming from dash-renderer
     */
-    loading: PropTypes.shape({loading: PropTypes.bool, prop: PropTypes.string}),
+    status: PropTypes.shape({
+        /**
+         * Determines if the component is loading or not
+         */
+        isLoading: PropTypes.bool, 
+        /**
+         * Holds which property is loading
+         */
+        propName: PropTypes.string,
+        /**
+         * Holds the name of the component that is loading
+         */
+        componentName: PropTypes.string
+    }),
 };

package-lock.json

@@ -11,6 +11,7 @@ import Checklist from './components/Checklist.react';
 import SyntaxHighlighter from './components/SyntaxHighlighter.react';
 import Interval from './components/Interval.react';
 import Markdown from './components/Markdown.react';
+import Loading from './components/Loading.react';
 import Location from './components/Location.react';
 import Link from './components/Link.react';
 import Textarea from './components/Textarea.react';
@@ -36,6 +37,7 @@ export {
     Tab,
     Interval,
     Markdown,
+    Loading,
     Location,
     Link,
     Textarea,

package.json

@@ -0,0 +1,78 @@
+import Loading from '../../src/components/Loading.react.js';
+import React from 'react';
+import {render} from 'enzyme';
+
+test('Loading renders', () => {
+    const statusMock = {
+        isLoading: true,
+        propName: 'children',
+        componentName: 'div'
+    }
+    const loading = render(
+        <Loading status={statusMock}>
+            <div>Loading is done!</div>
+        </Loading>
+    );
+
+    expect(loading.html()).toBeDefined();
+});
+test('Loading renders without status', () => {
+    const loading = render(
+        <Loading>
+            <div>Loading is done!</div>
+        </Loading>
+    );
+
+    expect(loading.html()).toBeDefined();
+});
+test('Loading renders without status.isLoading', () => {
+    const statusMock = {
+        propName: 'children',
+        componentName: 'div'
+    }
+    const loading = render(
+        <Loading status={statusMock}>
+            <div>Loading is done!</div>
+        </Loading>
+    );
+
+    expect(loading.html()).toBeDefined();
+});
+test('Loading renders without status.propName', () => {
+    const statusMock = {
+        isLoading: true,
+        componentName: 'div'
+    }
+    const loading = render(
+        <Loading status={statusMock}>
+            <div>Loading is done!</div>
+        </Loading>
+    );
+
+    expect(loading.html()).toBeDefined();
+});
+test('Loading renders without status.componentName', () => {
+    const statusMock = {
+        isLoading: true,
+        propName: 'children'
+    }
+    const loading = render(
+        <Loading status={statusMock}>
+            <div>Loading is done!</div>
+        </Loading>
+    );
+
+    expect(loading.html()).toBeDefined();
+});
+test('Loading renders without children', () => {
+    const statusMock = {
+        isLoading: false,
+        propName: 'children',
+        componentName: 'div'
+    }
+    const loading = render(
+        <Loading status={statusMock} />
+    );
+
+    expect(loading.html()).toBeDefined();
+});