Loading component changes (#1080)

* Remove loading_state in favour of Dash context

* Add target_components prop to Spinner and Placeholder

* Fix tests

Author: tcbegley

src/components/accordion/Accordion.js

@@ -5,6 +5,7 @@ import RBAccordion from 'react-bootstrap/Accordion';
 
 import {parseChildrenToArray, resolveChildProps} from '../../private/util';
 import {AccordionContext} from '../../private/AccordionContext';
+import {getLoadingState} from '../../private/util';
 
 /**
  * A self contained Accordion component. Build up the children using the
@@ -14,7 +15,6 @@ const Accordion = props => {
   let {
     children,
     active_item,
-    loading_state,
     key,
     setProps,
     class_name,
@@ -70,9 +70,7 @@ const Accordion = props => {
   return (
     <RBAccordion
       key={key}
-      data-dash-is-loading={
-        (loading_state && loading_state.is_loading) || undefined
-      }
+      data-dash-is-loading={getLoadingState() || undefined}
       activeKey={active_item}
       defaultActiveKey={start_collapsed ? null : active_item}
       alwaysOpen={always_open}
@@ -157,24 +155,6 @@ Accordion.propTypes = {
    */
   start_collapsed: PropTypes.bool,
 
-  /**
-   * Object that holds the loading state object coming from dash-renderer
-   */
-  loading_state: PropTypes.shape({
-    /**
-     * Determines if the component is loading or not
-     */
-    is_loading: PropTypes.bool,
-    /**
-     * Holds which property is loading
-     */
-    prop_name: PropTypes.string,
-    /**
-     * Holds the name of the component that is loading
-     */
-    component_name: PropTypes.string
-  }),
-
   /**
    * Used to allow user interactions in this component to be persisted when
    * the component - or the page - is refreshed. If `persisted` is truthy and

src/components/accordion/AccordionItem.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import RBAccordion from 'react-bootstrap/Accordion';
 
-import {stringifyId} from '../../private/util';
+import {getLoadingState, stringifyId} from '../../private/util';
 import {AccordionContext} from '../../private/AccordionContext';
 
 /**
@@ -12,7 +12,6 @@ import {AccordionContext} from '../../private/AccordionContext';
 const AccordionItem = ({
   title,
   item_id,
-  loading_state,
   class_name,
   className,
   id,
@@ -31,9 +30,7 @@ const AccordionItem = ({
         ['setProps', 'persistence', 'persistence_type', 'persisted_props'],
         otherProps
       )}
-      data-dash-is-loading={
-        (loading_state && loading_state.is_loading) || undefined
-      }
+      data-dash-is-loading={getLoadingState() || undefined}
     >
       <RBAccordion.Header onClick={() => toggle(itemID)}>
         {title}
@@ -84,25 +81,7 @@ AccordionItem.propTypes = {
    * will be set to "item-i" where i is (zero indexed) position of item in list
    * items pased to Accordion component.
    */
-  item_id: PropTypes.string,
-
-  /**
-   * Object that holds the loading state object coming from dash-renderer
-   */
-  loading_state: PropTypes.shape({
-    /**
-     * Determines if the component is loading or not
-     */
-    is_loading: PropTypes.bool,
-    /**
-     * Holds which property is loading
-     */
-    prop_name: PropTypes.string,
-    /**
-     * Holds the name of the component that is loading
-     */
-    component_name: PropTypes.string
-  })
+  item_id: PropTypes.string
 };
 
 export default AccordionItem;

src/components/alert/Alert.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import RBAlert from 'react-bootstrap/Alert';
 import {bootstrapColors} from '../../private/BootstrapColors';
+import {getLoadingState} from '../../private/util';
 
 /**
  * Alert allows you to create contextual feedback messages on user actions.
@@ -13,7 +14,6 @@ import {bootstrapColors} from '../../private/BootstrapColors';
 const Alert = ({
   children,
   dismissable,
-  loading_state,
   setProps,
   style,
   class_name,
@@ -58,9 +58,7 @@ const Alert = ({
         ['persistence', 'persisted_props', 'persistence_type', 'setProps'],
         otherProps
       )}
-      data-dash-is-loading={
-        (loading_state && loading_state.is_loading) || undefined
-      }
+      data-dash-is-loading={getLoadingState() || undefined}
     >
       {children}
     </RBAlert>
@@ -138,24 +136,6 @@ Alert.propTypes = {
    */
   duration: PropTypes.number,
 
-  /**
-   * Object that holds the loading state object coming from dash-renderer
-   */
-  loading_state: PropTypes.shape({
-    /**
-     * Determines if the component is loading or not
-     */
-    is_loading: PropTypes.bool,
-    /**
-     * Holds which property is loading
-     */
-    prop_name: PropTypes.string,
-    /**
-     * Holds the name of the component that is loading
-     */
-    component_name: PropTypes.string
-  }),
-
   /**
    * Used to allow user interactions in this component to be persisted when
    * the component - or the page - is refreshed. If `persisted` is truthy and

src/components/badge/Badge.js

@@ -4,6 +4,7 @@ import {omit} from 'ramda';
 import RBBadge from 'react-bootstrap/Badge';
 import Link from '../../private/Link';
 import {bootstrapColors} from '../../private/BootstrapColors';
+import {getLoadingState} from '../../private/util';
 
 /**
  * Badges can be used to add counts or labels to other components.
@@ -12,7 +13,6 @@ const Badge = props => {
   const {
     children,
     href,
-    loading_state,
     setProps,
     style,
     className,
@@ -41,9 +41,7 @@ const Badge = props => {
       className={class_name || className}
       style={!isBootstrapColor ? {backgroundColor: color, ...style} : style}
       {...omit(['setProps'], otherProps)}
-      data-dash-is-loading={
-        (loading_state && loading_state.is_loading) || undefined
-      }
+      data-dash-is-loading={getLoadingState() || undefined}
     >
       {children}
     </RBBadge>
@@ -118,24 +116,6 @@ Badge.propTypes = {
    */
   tag: PropTypes.string,
 
-  /**
-   * Object that holds the loading state object coming from dash-renderer
-   */
-  loading_state: PropTypes.shape({
-    /**
-     * Determines if the component is loading or not
-     */
-    is_loading: PropTypes.bool,
-    /**
-     * Holds which property is loading
-     */
-    prop_name: PropTypes.string,
-    /**
-     * Holds the name of the component that is loading
-     */
-    component_name: PropTypes.string
-  }),
-
   /**
    * If true, the browser will treat this as an external link,
    * forcing a page refresh at the new location. If false,

src/components/breadcrumb/Breadcrumb.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import RBBreadcrumb from 'react-bootstrap/Breadcrumb';
 
 import Link from '../../private/Link';
+import {getLoadingState} from '../../private/util';
 
 /**
  * Use breadcrumbs to create a navigation breadcrumb in your app.
  */
 const Breadcrumb = ({
   items,
   tag,
-  loading_state,
   class_name,
   className,
   item_class_name,
@@ -20,9 +20,7 @@ const Breadcrumb = ({
 }) => (
   <RBBreadcrumb
     as={tag}
-    data-dash-is-loading={
-      (loading_state && loading_state.is_loading) || undefined
-    }
+    data-dash-is-loading={getLoadingState() || undefined}
     className={class_name || className}
     {...otherProps}
   >
@@ -130,25 +128,7 @@ Breadcrumb.propTypes = {
   /**
    * HTML tag to use for the outer breadcrumb component. Default: "nav".
    */
-  tag: PropTypes.object,
-
-  /**
-   * Object that holds the loading state object coming from dash-renderer
-   */
-  loading_state: PropTypes.shape({
-    /**
-     * Determines if the component is loading or not
-     */
-    is_loading: PropTypes.bool,
-    /**
-     * Holds which property is loading
-     */
-    prop_name: PropTypes.string,
-    /**
-     * Holds the name of the component that is loading
-     */
-    component_name: PropTypes.string
-  })
+  tag: PropTypes.object
 };
 
 export default Breadcrumb;

src/components/button/Button.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import RBButton from 'react-bootstrap/Button';
 import Link from '../../private/Link';
+import {getLoadingState} from '../../private/util';
 
 /**
  * A component for creating Bootstrap buttons with different style options. The
@@ -15,7 +16,6 @@ const Button = ({
   children,
   disabled,
   href,
-  loading_state,
   setProps,
   target,
   type,
@@ -58,9 +58,7 @@ const Button = ({
       className={class_name || className}
       rel={useLink ? rel : undefined}
       {...otherProps}
-      data-dash-is-loading={
-        (loading_state && loading_state.is_loading) || undefined
-      }
+      data-dash-is-loading={getLoadingState() || undefined}
     >
       {children}
     </RBButton>
@@ -157,24 +155,6 @@ Button.propTypes = {
    */
   outline: PropTypes.bool,
 
-  /**
-   * Object that holds the loading state object coming from dash-renderer
-   */
-  loading_state: PropTypes.shape({
-    /**
-     * Determines if the component is loading or not
-     */
-    is_loading: PropTypes.bool,
-    /**
-     * Holds which property is loading
-     */
-    prop_name: PropTypes.string,
-    /**
-     * Holds the name of the component that is loading
-     */
-    component_name: PropTypes.string
-  }),
-
   /**
    * Target attribute to pass on to link if using Button as an external link.
    */

src/components/buttongroup/ButtonGroup.js

@@ -2,20 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import RBButtonGroup from 'react-bootstrap/ButtonGroup';
+import {getLoadingState} from '../../private/util';
 
 /**
  * A component for creating groups of buttons. Can be used with `Button` or
  * `DropdownMenu`.
  */
 const ButtonGroup = props => {
-  const {children, loading_state, class_name, className, ...otherProps} = props;
+  const {children, class_name, className, ...otherProps} = props;
   return (
     <RBButtonGroup
       className={class_name || className}
       {...omit(['setProps'], otherProps)}
-      data-dash-is-loading={
-        (loading_state && loading_state.is_loading) || undefined
-      }
+      data-dash-is-loading={getLoadingState() || undefined}
     >
       {children}
     </RBButtonGroup>
@@ -67,25 +66,7 @@ ButtonGroup.propTypes = {
   /**
    * Size of button group, options: 'sm', 'md', 'lg'.
    */
-  size: PropTypes.string,
-
-  /**
-   * Object that holds the loading state object coming from dash-renderer
-   */
-  loading_state: PropTypes.shape({
-    /**
-     * Determines if the component is loading or not
-     */
-    is_loading: PropTypes.bool,
-    /**
-     * Holds which property is loading
-     */
-    prop_name: PropTypes.string,
-    /**
-     * Holds the name of the component that is loading
-     */
-    component_name: PropTypes.string
-  })
+  size: PropTypes.string
 };
 
 export default ButtonGroup;