forked from reactstrap/reactstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Fade.js
81 lines (74 loc) · 2.54 KB
/
Fade.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Transition from 'react-transition-group/Transition';
import { mapToCssModules, omit, pick, TransitionPropTypeKeys, TransitionTimeouts } from './utils';
const propTypes = {
...Transition.propTypes,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]),
tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
baseClass: PropTypes.string,
baseClassActive: PropTypes.string,
className: PropTypes.string,
cssModule: PropTypes.object,
innerRef: PropTypes.object,
};
const defaultProps = {
...Transition.defaultProps,
tag: 'div',
baseClass: 'fade',
baseClassActive: 'show',
timeout: TransitionTimeouts.Fade,
appear: true,
enter: true,
exit: true,
in: true,
};
function Fade(props) {
const {
tag: Tag,
baseClass,
baseClassActive,
className,
cssModule,
children,
innerRef,
...otherProps
} = props;
// In NODE_ENV=production the Transition.propTypes are wrapped which results in an
// empty object "{}". This is the result of the `react-transition-group` babel
// configuration settings. Therefore, to ensure that production builds work without
// error, we can either explicitly define keys or use the Transition.defaultProps.
// Using the Transition.defaultProps excludes any required props. Thus, the best
// solution is to explicitly define required props in our utilities and reference these.
// This also gives us more flexibility in the future to remove the prop-types
// dependency in distribution builds (Similar to how `react-transition-group` does).
// Note: Without omitting the `react-transition-group` props, the resulting child
// Tag component would inherit the Transition properties as attributes for the HTML
// element which results in errors/warnings for non-valid attributes.
const transitionProps = pick(otherProps, TransitionPropTypeKeys);
const childProps = omit(otherProps, TransitionPropTypeKeys);
return (
<Transition {...transitionProps}>
{(status) => {
const isActive = status === 'entered';
const classes = mapToCssModules(classNames(
className,
baseClass,
isActive && baseClassActive
), cssModule);
return (
<Tag className={classes} {...childProps} ref={innerRef}>
{children}
</Tag>
);
}}
</Transition>
);
}
Fade.propTypes = propTypes;
Fade.defaultProps = defaultProps;
export default Fade;