Skip to content

Instantly share code, notes, and snippets.

@faceyspacey
Last active December 9, 2016 14:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save faceyspacey/6201e4dac1bc0a9f7afaf5024d1f8caf to your computer and use it in GitHub Desktop.
Save faceyspacey/6201e4dac1bc0a9f7afaf5024d1f8caf to your computer and use it in GitHub Desktop.
import React from 'react';
import isEqual from 'lodash/isEqual';
function RouteTransitionGroup() {
let {children, location} = this.props;
let {type, payload, pathname} = location;
children = React.Children.toArray(children)
.filter(child => isChildMatch(child, location));
return (
<ReactTransitionGroup {...props}>
{children.map(child => (
<AnimatedViewTransitionGroupChild
key={child.props.pathname+child.props.type+child.payload.toString()}
onlyEnter={onlyEnter}
transitionName={transitionName}
timeout={timeout}
enterTimeout={enterTimeout}
leaveTimeout={leaveTimeout}
appearTimeout={appearTimeout}
enterDelay={enterDelay}
leaveDelay={leaveDelay}
appearDelay={appearDelay}
onAppear={onAppear}
onEnter={onEnter}
onLeft={onLeft}
{...child.props}
>
{child}
</AnimatedViewTransitionGroupChild>
))}
</ReactTransitionGroup>
);
}
function isChildMatch(child, location) {
let {type, payload, pathname} = location;
let {type: matchType, payload: matchPayload, pathname: matchPathname} = child;
let isMatch = child.type === 'Route' ? false : true;
if(!isMatch) {
if(typeof matchPathname !== 'undefined') {
if(matchPathname === pathname) {
isMatch = true;
}
}
else if(typeof matchType !== 'undefined') {
if(matchType === type) {
if(typeof matchPayload !== 'undefined') {
if(isEqual(matchPathname, payload)) {
isMatch = true;
}
else {
isMatch = false;
}
}
else {
isMatch = true;
}
}
}
else if(typeof matchPayload !== 'undefined' && isEqual(matchPathname, payload)) {
isMatch = true;
}
}
if(isMatch) {
if(child.children) {
child = React.cloneElement(child);
child.children = React.Children.toArray(child.children)
.filter(child => isChildMatch(child, location));
}
}
return isMatch;
}
//(new RegExp('/:celebSlug/purchase')).test(pathname)
//RegExp('\/info\/.*\/dog') instanceof RegExp
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment