1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import classNames from 'classnames';
|
4 | import { Transition } from 'react-transition-group';
|
5 | import { mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType } from './utils';
|
6 |
|
7 | const propTypes = {
|
8 | ...Transition.propTypes,
|
9 | children: PropTypes.oneOfType([
|
10 | PropTypes.arrayOf(PropTypes.node),
|
11 | PropTypes.node
|
12 | ]),
|
13 | tag: tagPropType,
|
14 | baseClass: PropTypes.string,
|
15 | baseClassActive: PropTypes.string,
|
16 | className: PropTypes.string,
|
17 | cssModule: PropTypes.object,
|
18 | innerRef: PropTypes.oneOfType([
|
19 | PropTypes.object,
|
20 | PropTypes.string,
|
21 | PropTypes.func,
|
22 | ]),
|
23 | };
|
24 |
|
25 | const defaultProps = {
|
26 | ...Transition.defaultProps,
|
27 | tag: 'div',
|
28 | baseClass: 'fade',
|
29 | baseClassActive: 'show',
|
30 | timeout: TransitionTimeouts.Fade,
|
31 | appear: true,
|
32 | enter: true,
|
33 | exit: true,
|
34 | in: true,
|
35 | };
|
36 |
|
37 | function Fade(props) {
|
38 | const {
|
39 | tag: Tag,
|
40 | baseClass,
|
41 | baseClassActive,
|
42 | className,
|
43 | cssModule,
|
44 | children,
|
45 | innerRef,
|
46 | ...otherProps
|
47 | } = props;
|
48 |
|
49 | const transitionProps = pick(otherProps, TransitionPropTypeKeys);
|
50 | const childProps = omit(otherProps, TransitionPropTypeKeys);
|
51 |
|
52 | return (
|
53 | <Transition {...transitionProps}>
|
54 | {(status) => {
|
55 | const isActive = status === 'entered';
|
56 | const classes = mapToCssModules(classNames(
|
57 | className,
|
58 | baseClass,
|
59 | isActive && baseClassActive
|
60 | ), cssModule);
|
61 | return (
|
62 | <Tag className={classes} {...childProps} ref={innerRef}>
|
63 | {children}
|
64 | </Tag>
|
65 | );
|
66 | }}
|
67 | </Transition>
|
68 | );
|
69 | }
|
70 |
|
71 | Fade.propTypes = propTypes;
|
72 | Fade.defaultProps = defaultProps;
|
73 |
|
74 | export default Fade;
|