Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added alternative to findDOMNode #514

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/ReplaceTransition.js
Expand Up @@ -24,11 +24,11 @@ class ReplaceTransition extends React.Component {
handleExited = (...args) => this.handleLifecycle('onExited', 1, args)

handleLifecycle(handler, idx, originalArgs) {
const { children } = this.props;
const { children, transitionNode } = this.props;
const child = React.Children.toArray(children)[idx];

if (child.props[handler]) child.props[handler](...originalArgs)
if (this.props[handler]) this.props[handler](findDOMNode(this))
if (this.props[handler]) this.props[handler](transitionNode || findDOMNode(this))
}

render() {
Expand All @@ -45,6 +45,7 @@ class ReplaceTransition extends React.Component {
delete props.onExit;
delete props.onExiting;
delete props.onExited;
delete props.transitionNode;

return (
<TransitionGroup {...props}>
Expand Down Expand Up @@ -76,6 +77,7 @@ ReplaceTransition.propTypes = {

return null;
},
transitionNode: PropTypes.instanceOf(Element),
};

export default ReplaceTransition;
12 changes: 11 additions & 1 deletion src/Transition.js
Expand Up @@ -210,7 +210,7 @@ class Transition extends React.Component {
if (nextStatus !== null) {
// nextStatus will always be ENTERING or EXITING.
this.cancelNextCallback()
const node = ReactDOM.findDOMNode(this)
const node = this.props.transitionNode || ReactDOM.findDOMNode(this)

if (nextStatus === ENTERING) {
this.performEnter(node, mounting)
Expand Down Expand Up @@ -349,6 +349,7 @@ class Transition extends React.Component {
delete childProps.onExit
delete childProps.onExiting
delete childProps.onExited
delete childProps.transitionNode

if (typeof children === 'function') {
// allows for nested Transitions
Expand Down Expand Up @@ -517,6 +518,13 @@ Transition.propTypes = {
* @type Function(node: HtmlElement) -> void
*/
onExited: PropTypes.func,

/**
* The DOM node that is passed to the transition callbacks.
*
* @type HtmlElement
*/
transitionNode: PropTypes.instanceOf(Element),
}

// Name the function so it is clearer in the documentation
Expand All @@ -537,6 +545,8 @@ Transition.defaultProps = {
onExit: noop,
onExiting: noop,
onExited: noop,

transitionNode: null,
}

Transition.UNMOUNTED = 0
Expand Down
26 changes: 26 additions & 0 deletions test/Transition-test.js
Expand Up @@ -469,4 +469,30 @@ describe('Transition', () => {
wrapper.setState({ in: false })
})
})

describe('transition node', () => {
it('delegates to findDOMNode when a transntionNode is not provided', () => {
const findDOMNodeSpy = jest.spyOn(ReactDOM, 'findDOMNode');
mount(
<Transition in appear timeout={0}>
<div />
</Transition>
)

expect(findDOMNodeSpy).toHaveBeenCalledTimes(1);
findDOMNodeSpy.mockRestore();
})

it('uses transitionNode when provided', () => {
const onEnterSpy = jest.fn();
const transitionNode = document.createElement('span');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But that is not the element that is transitioning. It should be the child of Transition which is a div in this case.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should use ref

mount(
<Transition in appear timeout={0} onEnter={onEnterSpy} transitionNode={transitionNode}>
<div />
</Transition>
)

expect(onEnterSpy).toHaveBeenCalledWith(transitionNode, true);
})
})
})