feat: add global transition disable switch (#506)

Author: jquense

src/Transition.js

@@ -2,6 +2,7 @@ import * as PropTypes from 'prop-types'
 import React from 'react'
 import ReactDOM from 'react-dom'
 
+import config from './config'
 import { timeoutsShape } from './utils/PropTypes'
 import TransitionGroupContext from './TransitionGroupContext'
 
@@ -223,15 +224,13 @@ class Transition extends React.Component {
 
   performEnter(node, mounting) {
     const { enter } = this.props
-    const appearing = this.context
-      ? this.context.isMounting
-      : mounting
+    const appearing = this.context ? this.context.isMounting : mounting
 
     const timeouts = this.getTimeouts()
     const enterTimeout = appearing ? timeouts.appear : timeouts.enter
     // no enter animation skip right to ENTERED
     // if we are mounting and running this it means appear _must_ be set
-    if (!mounting && !enter) {
+    if ((!mounting && !enter) || config.disabled) {
       this.safeSetState({ status: ENTERED }, () => {
         this.props.onEntered(node)
       })
@@ -256,7 +255,7 @@ class Transition extends React.Component {
     const timeouts = this.getTimeouts()
 
     // no exit animation skip right to EXITED
-    if (!exit) {
+    if (!exit || config.disabled) {
       this.safeSetState({ status: EXITED }, () => {
         this.props.onExited(node)
       })
@@ -312,7 +311,8 @@ class Transition extends React.Component {
   onTransitionEnd(node, timeout, handler) {
     this.setNextCallback(handler)
 
-    const doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener
+    const doesNotHaveTimeoutOrListener =
+      timeout == null && !this.props.addEndListener
     if (!node || doesNotHaveTimeoutOrListener) {
       setTimeout(this.nextCallback, 0)
       return

src/config.js

@@ -0,0 +1,3 @@
+export default {
+  disabled: false,
+}

src/index.js

@@ -1,4 +1,5 @@
-export { default as CSSTransition } from './CSSTransition';
-export { default as ReplaceTransition } from './ReplaceTransition';
-export { default as TransitionGroup } from './TransitionGroup';
-export { default as Transition } from './Transition';
+export { default as CSSTransition } from './CSSTransition'
+export { default as ReplaceTransition } from './ReplaceTransition'
+export { default as TransitionGroup } from './TransitionGroup'
+export { default as Transition } from './Transition'
+export { default as config } from './config'

stories/Transition.js

@@ -1,9 +1,12 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
+import React from 'react'
+import { storiesOf } from '@storybook/react'
 
 import { Fade, Collapse } from './transitions/Bootstrap'
-import StoryFixture from './StoryFixture';
+import StoryFixture from './StoryFixture'
 
+import { config } from '../src/index'
+
+config.disabled = true
 
 class ToggleFixture extends React.Component {
   state = { show: this.props.defaultIn }
@@ -12,15 +15,17 @@ class ToggleFixture extends React.Component {
       <StoryFixture description={this.props.description}>
         <div style={{ marginBottom: 10 }}>
           <button
-            onClick={() => this.setState(({ show }) => ({
-              show: !show
-            }))}
+            onClick={() =>
+              this.setState(({ show }) => ({
+                show: !show,
+              }))
+            }
           >
             Toggle
           </button>
         </div>
         {React.cloneElement(this.props.children, {
-          in: this.state.show
+          in: this.state.show,
         })}
       </StoryFixture>
     )
@@ -45,4 +50,4 @@ storiesOf('Transition', module)
         </div>
       </Collapse>
     </ToggleFixture>
-  ));
+  ))

www/src/components/Layout.js

@@ -50,6 +50,9 @@ const Layout = ({ data, children }) => (
           <Nav.Link as={Link} to="/with-react-router" activeClassName="active">
             With React Router
           </Nav.Link>
+          <Nav.Link as={Link} to="/testing" activeClassName="active">
+            Testing
+          </Nav.Link>
         </Nav>
       </Navbar.Collapse>
     </Navbar>

www/src/pages/testing.js

@@ -0,0 +1,68 @@
+import { graphql } from 'gatsby';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import Layout from '../components/Layout';
+import Example from '../components/Example';
+
+const propTypes = {
+  location: PropTypes.object.isRequired,
+  data: PropTypes.shape({
+    site: PropTypes.shape({
+      siteMetadata: PropTypes.shape({
+        componentPages: PropTypes.arrayOf(
+          PropTypes.shape({
+            path: PropTypes.string.isRequired,
+            displayName: PropTypes.string.isRequired,
+          })
+        ).isRequired,
+      }).isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+const Testing = ({ data, location }) => (
+  <Layout data={data} location={location}>
+    <Container>
+      <h1>Testing Components with Transitions</h1>
+      <p>
+        In some situations, like visual snapshot testing, it's helpful to
+        disable transitions so they don't complicate the test, or introduce
+        abitrary waits. To make this easier <code>react-transition-group</code>{' '}
+        exposes a way to globally toggle transitions. When set,{' '}
+        <strong>all</strong> transitions, when toggled, will immediately switch
+        to their entered or exited states as appropriate.
+      </p>
+      <pre className="language-js">
+        <code>
+          {`
+import { config } from 'react-transition-group
+
+config.disabled = true
+              `.trim()}
+        </code>
+      </pre>
+      <blockquote>
+        <p>
+          <b>Note</b>: This <strong>does not</strong> automatically disable
+          animations. It only disabled waits in <code>Transition</code>. You may
+          also have to disable animation as appropriate for the library.
+          example:{' '}
+          <a href="http://velocityjs.org/#mock">Mocking in Velocity.js</a>
+        </p>
+      </blockquote>
+    </Container>
+  </Layout>
+);
+
+Testing.propTypes = propTypes;
+
+export default Testing;
+
+export const pageQuery = graphql`
+  query TestingQuery {
+    site {
+      ...Layout_site
+    }
+  }
+`;