Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat: add global transition disable switch (#506)
  • Loading branch information
jquense committed May 30, 2019
1 parent dc9752c commit 4c5ba98
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 18 deletions.
12 changes: 6 additions & 6 deletions src/Transition.js
Expand Up @@ -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'

Expand Down Expand Up @@ -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)
})
Expand All @@ -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)
})
Expand Down Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions src/config.js
@@ -0,0 +1,3 @@
export default {
disabled: false,
}
9 changes: 5 additions & 4 deletions 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'
21 changes: 13 additions & 8 deletions 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 }
Expand All @@ -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>
)
Expand All @@ -45,4 +50,4 @@ storiesOf('Transition', module)
</div>
</Collapse>
</ToggleFixture>
));
))
3 changes: 3 additions & 0 deletions www/src/components/Layout.js
Expand Up @@ -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>
Expand Down
68 changes: 68 additions & 0 deletions 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
}
}
`;

0 comments on commit 4c5ba98

Please sign in to comment.