diff --git a/src/Animate.js b/src/Animate.js index 0a625ce..9d253d5 100644 --- a/src/Animate.js +++ b/src/Animate.js @@ -66,22 +66,22 @@ export default class Animate extends React.Component { this.keysToEnter = []; this.keysToLeave = []; + let children = toArrayChildren(getChildrenFromProps(this.props)); + const showProp = this.props.showProp; + if (showProp) { + children = children.filter((child) => { + return !!child.props[showProp]; + }); + } this.state = { - children: toArrayChildren(getChildrenFromProps(this.props)), + children, }; this.childrenRefs = {}; } componentDidMount() { - const showProp = this.props.showProp; - let children = this.state.children; - if (showProp) { - children = children.filter((child) => { - return !!child.props[showProp]; - }); - } - children.forEach((child) => { + this.state.children.forEach((child) => { if (child) { this.performAppear(child.key); } diff --git a/tests/single-common.spec.js b/tests/single-common.spec.js index 77d2356..14be1d1 100644 --- a/tests/single-common.spec.js +++ b/tests/single-common.spec.js @@ -133,5 +133,23 @@ export default function test(createClass, title) { }); }); }); + + describe('when showProp is false', () => { + let instance; + + before(() => { + const Component = createClass({}); + + instance = TestUtils.renderIntoDocument( + showProp child + ); + }); + + describe('when initial', () => { + it('will child not exist', () => { + expect(TestUtils.scryRenderedDOMComponentsWithTag(instance, 'sp')[0]).not.to.be.ok(); + }); + }); + }); }); } diff --git a/tests/single.spec.js b/tests/single.spec.js index ceb666e..60fad41 100644 --- a/tests/single.spec.js +++ b/tests/single.spec.js @@ -2,25 +2,39 @@ import Animate from '../index'; import React from 'react'; +import PropTypes from 'prop-types'; import './index.spec.css'; function createClass(options) { return class extends React.Component { + static propTypes = { + showProp: PropTypes.string, + children: PropTypes.any, + } + state = { transitionEnter: options.transitionEnter, transitionAppear: options.transitionAppear, } render() { + const extProps = {}; + if ('showProp' in this.props) { + extProps.showProp = this.props.showProp; + } + + const children = this.props.children ||
child element
; + return ( - {options.remove && !this.state.transitionEnter ? null :
child element
} + {options.remove && !this.state.transitionEnter ? null : children}
); }