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 | closeClassName: PropTypes.string,
|
11 | closeAriaLabel: PropTypes.string,
|
12 | cssModule: PropTypes.object,
|
13 | color: PropTypes.string,
|
14 | fade: PropTypes.bool,
|
15 | isOpen: PropTypes.bool,
|
16 | toggle: PropTypes.func,
|
17 | tag: tagPropType,
|
18 | transition: PropTypes.shape(Fade.propTypes),
|
19 | innerRef: PropTypes.oneOfType([
|
20 | PropTypes.object,
|
21 | PropTypes.string,
|
22 | PropTypes.func,
|
23 | ]),
|
24 | };
|
25 |
|
26 | const defaultProps = {
|
27 | color: 'success',
|
28 | isOpen: true,
|
29 | tag: 'div',
|
30 | closeAriaLabel: 'Close',
|
31 | fade: true,
|
32 | transition: {
|
33 | ...Fade.defaultProps,
|
34 | unmountOnExit: true,
|
35 | },
|
36 | };
|
37 |
|
38 | function Alert(props) {
|
39 | const {
|
40 | className,
|
41 | closeClassName,
|
42 | closeAriaLabel,
|
43 | cssModule,
|
44 | tag: Tag,
|
45 | color,
|
46 | isOpen,
|
47 | toggle,
|
48 | children,
|
49 | transition,
|
50 | fade,
|
51 | innerRef,
|
52 | ...attributes
|
53 | } = props;
|
54 |
|
55 | const classes = mapToCssModules(classNames(
|
56 | className,
|
57 | 'alert',
|
58 | `alert-${color}`,
|
59 | { 'alert-dismissible': toggle }
|
60 | ), cssModule);
|
61 |
|
62 | const closeClasses = mapToCssModules(classNames('close', closeClassName), cssModule);
|
63 |
|
64 | const alertTransition = {
|
65 | ...Fade.defaultProps,
|
66 | ...transition,
|
67 | baseClass: fade ? transition.baseClass : '',
|
68 | timeout: fade ? transition.timeout : 0,
|
69 | };
|
70 |
|
71 | return (
|
72 | <Fade {...attributes} {...alertTransition} tag={Tag} className={classes} in={isOpen} role="alert" innerRef={innerRef}>
|
73 | {toggle ?
|
74 | <button type="button" className={closeClasses} aria-label={closeAriaLabel} onClick={toggle}>
|
75 | <span aria-hidden="true">×</span>
|
76 | </button>
|
77 | : null}
|
78 | {children}
|
79 | </Fade>
|
80 | );
|
81 | }
|
82 |
|
83 | Alert.propTypes = propTypes;
|
84 | Alert.defaultProps = defaultProps;
|
85 |
|
86 | export default Alert;
|