38 lines
963 B
JavaScript
38 lines
963 B
JavaScript
import React, { Children } from 'react';
|
|
import { TransitionGroup } from 'react-transition-group';
|
|
import PropTypes from 'prop-types';
|
|
import AnimateGroupChild from './AnimateGroupChild';
|
|
|
|
function AnimateGroup(props) {
|
|
const { component, children, appear, enter, leave } = props;
|
|
|
|
return (
|
|
<TransitionGroup component={component}>
|
|
{Children.map(children, (child, index) => (
|
|
<AnimateGroupChild
|
|
appearOptions={appear}
|
|
enterOptions={enter}
|
|
leaveOptions={leave}
|
|
key={`child-${index}`} // eslint-disable-line
|
|
>
|
|
{child}
|
|
</AnimateGroupChild>
|
|
))}
|
|
</TransitionGroup>
|
|
);
|
|
}
|
|
|
|
AnimateGroup.propTypes = {
|
|
appear: PropTypes.object,
|
|
enter: PropTypes.object,
|
|
leave: PropTypes.object,
|
|
children: PropTypes.oneOfType([PropTypes.array, PropTypes.element]),
|
|
component: PropTypes.any,
|
|
};
|
|
|
|
AnimateGroup.defaultProps = {
|
|
component: 'span',
|
|
};
|
|
|
|
export default AnimateGroup;
|