Update props and defaults for Dash 3.0 (#1077)

* Remove defaultProps

* Remove duplicated props

* Fix issue in Modal propTypes

Author: tcbegley

src/components/accordion/Accordion.js

@@ -14,13 +14,13 @@ const Accordion = props => {
   let {
     children,
     active_item,
-    always_open,
-    start_collapsed,
     loading_state,
     key,
     setProps,
     class_name,
     className,
+    always_open = false,
+    start_collapsed = false,
     ...otherProps
   } = props;
   children = parseChildrenToArray(children);
@@ -87,11 +87,9 @@ const Accordion = props => {
   );
 };
 
-Accordion.defaultProps = {
+Accordion.dashPersistence = {
   persisted_props: ['active_item'],
-  persistence_type: 'local',
-  start_collapsed: false,
-  always_open: false
+  persistence_type: 'local'
 };
 
 Accordion.propTypes = {

src/components/accordion/AccordionItem.js

@@ -35,11 +35,7 @@ const AccordionItem = ({
         (loading_state && loading_state.is_loading) || undefined
       }
     >
-      <RBAccordion.Header
-        onClick={() => {
-          toggle(itemID);
-        }}
-      >
+      <RBAccordion.Header onClick={() => toggle(itemID)}>
         {title}
       </RBAccordion.Header>
       <RBAccordion.Body>{children}</RBAccordion.Body>

src/components/alert/Alert.js

@@ -10,22 +10,20 @@ import {bootstrapColors} from '../../private/BootstrapColors';
  * Control the visibility using callbacks with the `is_open` prop, or set it to
  * auto-dismiss with the `duration` prop.
  */
-const Alert = props => {
-  const {
-    children,
-    dismissable,
-    duration,
-    is_open,
-    loading_state,
-    setProps,
-    color,
-    style,
-    class_name,
-    className,
-    fade,
-    ...otherProps
-  } = props;
-
+const Alert = ({
+  children,
+  dismissable,
+  loading_state,
+  setProps,
+  style,
+  class_name,
+  className,
+  fade,
+  color = 'success',
+  is_open = true,
+  duration = null,
+  ...otherProps
+}) => {
   const timeout = useRef(null);
 
   useEffect(() => {
@@ -69,10 +67,7 @@ const Alert = props => {
   );
 };
 
-Alert.defaultProps = {
-  color: 'success',
-  is_open: true,
-  duration: null,
+Alert.dashPersistence = {
   persisted_props: ['is_open'],
   persistence_type: 'local'
 };

src/components/badge/Badge.js

@@ -14,18 +14,20 @@ const Badge = props => {
     href,
     loading_state,
     setProps,
-    color,
     style,
     className,
     class_name,
     text_color,
+    color = 'secondary',
+    n_clicks = 0,
+    n_clicks_timestamp = -1,
     ...otherProps
   } = props;
 
   const incrementClicks = () => {
     if (setProps) {
       setProps({
-        n_clicks: props.n_clicks + 1,
+        n_clicks: n_clicks + 1,
         n_clicks_timestamp: Date.now()
       });
     }
@@ -42,7 +44,7 @@ const Badge = props => {
       text={text_color}
       className={class_name || className}
       style={!isBootstrapColor ? {backgroundColor: color, ...style} : style}
-      {...omit(['setProps', 'n_clicks', 'n_clicks_timestamp'], otherProps)}
+      {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
       }
@@ -52,12 +54,6 @@ const Badge = props => {
   );
 };
 
-Badge.defaultProps = {
-  color: 'secondary',
-  n_clicks: 0,
-  n_clicks_timestamp: -1
-};
-
 Badge.propTypes = {
   /**
    * The ID of this component, used to identify dash components

src/components/button/Button.js

@@ -73,7 +73,7 @@ const Button = props => {
   );
 };
 
-Button.defaultProps = {
+Button.dashPersistence = {
   n_clicks: 0,
   n_clicks_timestamp: -1
 };

src/components/card/CardLink.js

@@ -1,27 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {omit} from 'ramda';
 import RBCard from 'react-bootstrap/Card';
 import Link from '../../private/Link';
 
 /**
  * Use card link to add consistently styled links to your cards. Links can be
  * used like buttons, external links, or internal Dash style links.
  */
-const CardLink = props => {
-  const {
-    children,
-    loading_state,
-    disabled,
-    className,
-    class_name,
-    ...otherProps
-  } = props;
-
+const CardLink = ({
+  children,
+  loading_state,
+  disabled,
+  className,
+  class_name,
+  n_clicks = 0,
+  setProps,
+  ...otherProps
+}) => {
   const incrementClicks = () => {
-    if (!disabled && props.setProps) {
-      props.setProps({
-        n_clicks: props.n_clicks + 1,
+    if (!disabled && setProps) {
+      setProps({
+        n_clicks: n_clicks + 1,
         n_clicks_timestamp: Date.now()
       });
     }
@@ -36,18 +35,13 @@ const CardLink = props => {
       preOnClick={incrementClicks}
       disabled={disabled}
       className={class_name || className}
-      {...omit(['setProps', 'n_clicks', 'n_clicks_timestamp'], otherProps)}
+      {...otherProps}
     >
       {children}
     </RBCard.Link>
   );
 };
 
-CardLink.defaultProps = {
-  n_clicks: 0,
-  n_clicks_timestamp: -1
-};
-
 CardLink.propTypes = {
   /**
    * The ID of this component, used to identify dash components

src/components/carousel/Carousel.js

@@ -13,13 +13,15 @@ import Link from '../../private/Link';
 const Carousel = props => {
   const {
     items,
-    active_index,
     style,
     class_name,
     className,
     loading_state,
     setProps,
     interval,
+    active_index = 0,
+    controls = true,
+    indicators = true,
     ...otherProps
   } = props;
 
@@ -81,10 +83,7 @@ const Carousel = props => {
   );
 };
 
-Carousel.defaultProps = {
-  active_index: 0,
-  controls: true,
-  indicators: true,
+Carousel.dashPersistence = {
   persisted_props: ['active_index'],
   persistence_type: 'local'
 };

src/components/collapse/Collapse.js

@@ -8,36 +8,39 @@ import RBCollapse from 'react-bootstrap/Collapse';
  * children is controlled by the `is_open` prop which can be targetted by
  * callbacks.
  */
-const Collapse = React.forwardRef((props, ref) => {
-  const {
-    children,
-    is_open,
-    navbar,
-    loading_state,
-    className,
-    class_name,
-    tag,
-    ...otherProps
-  } = props;
-
-  return (
-    <RBCollapse
-      in={is_open}
-      as={tag}
-      className={class_name || className}
-      {...omit(['setProps'], otherProps)}
-      data-dash-is-loading={
-        (loading_state && loading_state.is_loading) || undefined
-      }
-    >
-      <div ref={ref} className={navbar && 'navbar-collapse'}>
-        {children}
-      </div>
-    </RBCollapse>
-  );
-});
-
-Collapse.defaultProps = {dimension: 'height'};
+const Collapse = React.forwardRef(
+  (
+    {
+      children,
+      is_open,
+      navbar,
+      loading_state,
+      className,
+      class_name,
+      tag,
+      dimension = 'height',
+      ...otherProps
+    },
+    ref
+  ) => {
+    return (
+      <RBCollapse
+        in={is_open}
+        as={tag}
+        className={class_name || className}
+        dimension={dimension}
+        {...omit(['setProps'], otherProps)}
+        data-dash-is-loading={
+          (loading_state && loading_state.is_loading) || undefined
+        }
+      >
+        <div ref={ref} className={navbar && 'navbar-collapse'}>
+          {children}
+        </div>
+      </RBCollapse>
+    );
+  }
+);
 
 Collapse.propTypes = {
   /**

src/components/dropdownmenu/DropdownMenu.js

@@ -14,31 +14,29 @@ import DropdownToggle from '../../private/DropdownToggle';
  * DropdownMenu creates an overlay useful for grouping together links and other
  * content to organise navigation or other interactive elements.
  */
-const DropdownMenu = props => {
-  const {
-    children,
-    nav,
-    label,
-    disabled,
-    caret,
-    in_navbar,
-    addon_type,
-    size,
-    right,
-    align_end,
-    menu_variant,
-    direction,
-    loading_state,
-    color,
-    group,
-    toggle_style,
-    toggleClassName,
-    toggle_class_name,
-    className,
-    class_name,
-    ...otherProps
-  } = props;
-
+const DropdownMenu = ({
+  children,
+  nav,
+  label,
+  in_navbar,
+  addon_type,
+  size,
+  right,
+  align_end,
+  direction,
+  loading_state,
+  color,
+  group,
+  toggle_style,
+  toggleClassName,
+  toggle_class_name,
+  className,
+  class_name,
+  caret = true,
+  disabled = false,
+  menu_variant = 'light',
+  ...otherProps
+}) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const isBootstrapColor = bootstrapColors.has(color) || color === 'link';
   const toggle = () => {
@@ -105,12 +103,6 @@ const DropdownMenu = props => {
   );
 };
 
-DropdownMenu.defaultProps = {
-  caret: true,
-  disabled: false,
-  menu_variant: 'light'
-};
-
 DropdownMenu.propTypes = {
   /**
    * The ID of this component, used to identify dash components