[ExpansionPanel] Replace controlled/uncontrolled logic with useContro…

…lled
mui · Jan 6, 2020 · dfe7f36 · dfe7f36
1 parent 7dc69a0
commit dfe7f36
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 24 deletions.
diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -7,6 +7,7 @@ import Collapse from '../Collapse';
 import Paper from '../Paper';
 import withStyles from '../styles/withStyles';
 import ExpansionPanelContext from './ExpansionPanelContext';
+import useControlled from '../utils/useControlled';
 
 export const styles = theme => {
   const transition = {
@@ -94,28 +95,11 @@ const ExpansionPanel = React.forwardRef(function ExpansionPanel(props, ref) {
     ...other
   } = props;
 
-  const { current: isControlled } = React.useRef(expandedProp != null);
-  const [expandedState, setExpandedState] = React.useState(defaultExpanded);
-  const expanded = isControlled ? expandedProp : expandedState;
-
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-      if (isControlled !== (expandedProp != null)) {
-        console.error(
-          [
-            `Material-UI: A component is changing ${
-              isControlled ? 'a ' : 'an un'
-            }controlled ExpansionPanel to be ${isControlled ? 'un' : ''}controlled.`,
-            'Elements should not switch from uncontrolled to controlled (or vice versa).',
-            'Decide between using a controlled or uncontrolled ExpansionPanel ' +
-              'element for the lifetime of the component.',
-            'More info: https://fb.me/react-controlled-components',
-          ].join('\n'),
-        );
-      }
-    }, [expandedProp, isControlled]);
-  }
+  const { value: expanded, setValue: setExpandedState, isControlled } = useControlled({
+    controlled: expandedProp,
+    default: defaultExpanded,
+    name: 'ExpansionPanel',
+  });
 
   const handleChange = React.useCallback(
     event => {
@@ -127,7 +111,7 @@ const ExpansionPanel = React.forwardRef(function ExpansionPanel(props, ref) {
         onChange(event, !expanded);
       }
     },
-    [expanded, isControlled, onChange],
+    [expanded, isControlled, onChange, setExpandedState],
   );
 
   const [summary, ...children] = React.Children.toArray(childrenProp);

diff --git a/packages/material-ui/src/utils/useControlled.js b/packages/material-ui/src/utils/useControlled.js
@@ -5,7 +5,7 @@ const useControlled = ({ controlled, default: defaultProp, name }) => {
   const { current: isControlled } = React.useRef(controlled !== undefined);
   const { current: defaultValue } = React.useRef(defaultProp);
   const [valueState, setValue] = React.useState(() => {
-    return !isControlled ? defaultValue || null : null;
+    return !isControlled && defaultValue !== undefined ? defaultValue : null;
   });
   const value = isControlled ? controlled : valueState;