[Transitions] Fix for wasted render cycle

mui · Feb 13, 2019 · 3887ae4 · 3887ae4
1 parent 62aac57
commit 3887ae4
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 25 deletions.
diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js
@@ -133,6 +133,7 @@ class Collapse extends React.Component {
       className,
       collapsedHeight,
       component: Component,
+      in: inProp,
       onEnter,
       onEntered,
       onEntering,
@@ -146,6 +147,7 @@ class Collapse extends React.Component {
 
     return (
       <Transition
+        in={inProp}
         onEnter={this.handleEnter}
         onEntered={this.handleEntered}
         onEntering={this.handleEntering}
@@ -157,12 +159,11 @@ class Collapse extends React.Component {
       >
         {(state, childProps) => (
           <Component
-            aria-hidden={state === 'exited' && collapsedHeight === '0px'}
             className={clsx(
               classes.container,
               {
                 [classes.entered]: state === 'entered',
-                [classes.hidden]: state === 'exited' && collapsedHeight === '0px',
+                [classes.hidden]: state === 'exited' && !inProp && collapsedHeight === '0px',
               },
               className,
             )}

diff --git a/packages/material-ui/src/Fade/Fade.js b/packages/material-ui/src/Fade/Fade.js
@@ -14,9 +14,6 @@ const styles = {
   entered: {
     opacity: 1,
   },
-  exited: {
-    visibility: 'hidden',
-  },
 };
 
 /**
@@ -55,15 +52,16 @@ class Fade extends React.Component {
   };
 
   render() {
-    const { children, onEnter, onExit, style, theme, ...other } = this.props;
+    const { children, in: inProp, onEnter, onExit, style, theme, ...other } = this.props;
 
     return (
-      <Transition appear onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
+      <Transition appear in={inProp} onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
         {(state, childProps) => {
+          const hidden = state === 'exited' && !inProp;
           return React.cloneElement(children, {
-            'aria-hidden': state === 'exited',
             style: {
               opacity: 0,
+              visibility: hidden ? 'hidden' : undefined,
               ...styles[state],
               ...style,
               ...children.props.style,

diff --git a/packages/material-ui/src/Grow/Grow.js b/packages/material-ui/src/Grow/Grow.js
@@ -20,9 +20,6 @@ const styles = {
     // Use translateZ to scrolling issue on Chrome.
     transform: `${getScale(1)} translateZ(0)`,
   },
-  exited: {
-    visibility: 'hidden',
-  },
 };
 
 /**
@@ -106,23 +103,25 @@ class Grow extends React.Component {
   };
 
   render() {
-    const { children, onEnter, onExit, style, theme, timeout, ...other } = this.props;
+    const { children, in: inProp, onEnter, onExit, style, theme, timeout, ...other } = this.props;
 
     return (
       <Transition
         appear
+        in={inProp}
         onEnter={this.handleEnter}
         onExit={this.handleExit}
         addEndListener={this.addEndListener}
         timeout={timeout === 'auto' ? null : timeout}
         {...other}
       >
         {(state, childProps) => {
+          const hidden = state === 'exited' && !inProp;
           return React.cloneElement(children, {
-            'aria-hidden': state === 'exited',
             style: {
               opacity: 0,
               transform: getScale(0.75),
+              visiblity: hidden ? 'hidden' : undefined,
               ...styles[state],
               ...style,
               ...children.props.style,

diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js
@@ -112,11 +112,6 @@ class Menu extends React.Component {
         classes={PopoverClasses}
         onEntering={this.handleEntering}
         anchorOrigin={theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN}
-        // MenuList handles focus
-        disableAutoFocus
-        // workaround for focus logic in Modal we need to revisit that logic otherwise
-        // we can't use tab to switch between menu items
-        disableEnforceFocus
         transformOrigin={theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN}
         PaperProps={{
           ...PaperProps,

diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
@@ -187,6 +187,7 @@ class Slide extends React.Component {
     const {
       children,
       direction,
+      in: inProp,
       onEnter,
       onEntering,
       onExit,
@@ -204,16 +205,18 @@ class Slide extends React.Component {
           onExit={this.handleExit}
           onExited={this.handleExited}
           appear
+          in={inProp}
           ref={ref => {
             this.transitionRef = ReactDOM.findDOMNode(ref);
           }}
           {...other}
         >
           {(state, childProps) => {
+            const hidden = state === 'exited' && !inProp;
+
             return React.cloneElement(children, {
-              'aria-hidden': state === 'exited',
               style: {
-                visibility: state === 'exited' ? 'hidden' : undefined,
+                visibility: hidden ? 'hidden' : undefined,
                 ...style,
                 ...children.props.style,
               },

diff --git a/packages/material-ui/src/Zoom/Zoom.js b/packages/material-ui/src/Zoom/Zoom.js
@@ -14,9 +14,6 @@ const styles = {
   entered: {
     transform: 'scale(1)',
   },
-  exited: {
-    visibility: 'hidden',
-  },
 };
 
 /**
@@ -54,15 +51,16 @@ class Zoom extends React.Component {
   };
 
   render() {
-    const { children, onEnter, onExit, style, theme, ...other } = this.props;
+    const { children, in: inProp, onEnter, onExit, style, theme, ...other } = this.props;
 
     return (
       <Transition appear onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
         {(state, childProps) => {
+          const hidden = state === 'exited' && !inProp;
           return React.cloneElement(children, {
-            'aria-hidden': state === 'exited',
             style: {
               transform: 'scale(0)',
+              visibility: hidden ? 'hidden' : undefined,
               ...styles[state],
               ...style,
               ...children.props.style,