/
ModalHeader.js
60 lines (52 loc) · 1.27 KB
/
ModalHeader.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
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules, tagPropType } from './utils';
const propTypes = {
tag: tagPropType,
wrapTag: tagPropType,
toggle: PropTypes.func,
className: PropTypes.string,
cssModule: PropTypes.object,
children: PropTypes.node,
closeAriaLabel: PropTypes.string,
close: PropTypes.object,
};
const defaultProps = {
tag: 'h5',
wrapTag: 'div',
closeAriaLabel: 'Close',
};
const ModalHeader = (props) => {
let closeButton;
const {
className,
cssModule,
children,
toggle,
tag: Tag,
wrapTag: WrapTag,
closeAriaLabel,
close,
...attributes } = props;
const classes = mapToCssModules(classNames(
className,
'modal-header'
), cssModule);
if (!close && toggle) {
closeButton = (
<button type="button" onClick={toggle} className={mapToCssModules('btn-close', cssModule)} aria-label={closeAriaLabel} />
);
}
return (
<WrapTag {...attributes} className={classes}>
<Tag className={mapToCssModules('modal-title', cssModule)}>
{children}
</Tag>
{close || closeButton}
</WrapTag>
);
};
ModalHeader.propTypes = propTypes;
ModalHeader.defaultProps = defaultProps;
export default ModalHeader;