Merge pull request #537 from facultyai/fade-patch

Restore fade animation

Author: tcbegley

src/components/Fade.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import {Fade as RSFade} from 'reactstrap';
@@ -17,12 +17,18 @@ const Fade = props => {
     style,
     ...otherProps
   } = props;
+
+  // set visibility to hidden after transition has completed to hide tooltips
+  const [hidden, setHidden] = useState(!is_in);
+
   return (
     <RSFade
       baseClass={base_class}
       baseClassActive={base_class_active}
       in={is_in}
-      style={is_in ? style : {visibility: 'hidden', ...style}}
+      style={hidden ? {visibility: 'hidden', ...style} : style}
+      onEnter={() => setHidden(false)}
+      onExited={() => setHidden(true)}
       {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined

src/components/__tests__/Fade.test.js

@@ -24,8 +24,22 @@ describe('Fade', () => {
     fade.rerender(<Fade is_in />);
     jest.runAllTimers();
 
-    expect(fade.container.querySelector('div.fade.show')).not.toBe(
-      null
-    );
+    expect(fade.container.querySelector('div.fade.show')).not.toBe(null);
+  });
+
+  test('sets visibility hidden when is_in is false and not transitioning', () => {
+    const fade = render(<Fade is_in={false} timeout={1000} />);
+
+    expect(fade.container.firstChild).toHaveStyle('visibility:hidden');
+
+    fade.rerender(<Fade is_in timeout={1000} />);
+    expect(fade.container.firstChild).not.toHaveStyle('visibility:hidden');
+    jest.runAllTimers();
+    expect(fade.container.firstChild).not.toHaveStyle('visibility:hidden');
+
+    fade.rerender(<Fade is_in={false} timout={1000} />);
+    expect(fade.container.firstChild).not.toHaveStyle('visibility:hidden');
+    jest.runAllTimers();
+    expect(fade.container.firstChild).toHaveStyle('visibility:hidden');
   });
 });