1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import classNames from 'classnames';
|
4 | import { mapToCssModules, tagPropType } from './utils';
|
5 | import Fade from './Fade';
|
6 |
|
7 | const propTypes = {
|
8 | children: PropTypes.node,
|
9 | className: PropTypes.string,
|
10 | cssModule: PropTypes.object,
|
11 | fade: PropTypes.bool,
|
12 | isOpen: PropTypes.bool,
|
13 | tag: tagPropType,
|
14 | transition: PropTypes.shape(Fade.propTypes),
|
15 | innerRef: PropTypes.oneOfType([
|
16 | PropTypes.object,
|
17 | PropTypes.string,
|
18 | PropTypes.func,
|
19 | ]),
|
20 | };
|
21 |
|
22 | const defaultProps = {
|
23 | isOpen: true,
|
24 | tag: 'div',
|
25 | fade: true,
|
26 | transition: {
|
27 | ...Fade.defaultProps,
|
28 | unmountOnExit: true,
|
29 | },
|
30 | };
|
31 |
|
32 | function Toast(props) {
|
33 | const {
|
34 | className,
|
35 | cssModule,
|
36 | tag: Tag,
|
37 | isOpen,
|
38 | children,
|
39 | transition,
|
40 | fade,
|
41 | innerRef,
|
42 | ...attributes
|
43 | } = props;
|
44 |
|
45 | const classes = mapToCssModules(classNames(className, 'toast'), cssModule);
|
46 |
|
47 | const toastTransition = {
|
48 | ...Fade.defaultProps,
|
49 | ...transition,
|
50 | baseClass: fade ? transition.baseClass : '',
|
51 | timeout: fade ? transition.timeout : 0,
|
52 | };
|
53 |
|
54 | return (
|
55 | <Fade {...attributes} {...toastTransition} tag={Tag} className={classes} in={isOpen} role="alert" innerRef={innerRef}>
|
56 | {children}
|
57 | </Fade>
|
58 | );
|
59 | }
|
60 |
|
61 | Toast.propTypes = propTypes;
|
62 | Toast.defaultProps = defaultProps;
|
63 |
|
64 | export default Toast;
|