1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import classNames from 'classnames';
|
4 | import { mapToCssModules, tagPropType } from './utils';
|
5 |
|
6 | const propTypes = {
|
7 | tag: tagPropType,
|
8 | wrapTag: tagPropType,
|
9 | toggle: PropTypes.func,
|
10 | className: PropTypes.string,
|
11 | cssModule: PropTypes.object,
|
12 | children: PropTypes.node,
|
13 | closeAriaLabel: PropTypes.string,
|
14 | charCode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
15 | close: PropTypes.object,
|
16 | };
|
17 |
|
18 | const defaultProps = {
|
19 | tag: 'h5',
|
20 | wrapTag: 'div',
|
21 | closeAriaLabel: 'Close',
|
22 | charCode: 215,
|
23 | };
|
24 |
|
25 | const ModalHeader = (props) => {
|
26 | let closeButton;
|
27 | const {
|
28 | className,
|
29 | cssModule,
|
30 | children,
|
31 | toggle,
|
32 | tag: Tag,
|
33 | wrapTag: WrapTag,
|
34 | closeAriaLabel,
|
35 | charCode,
|
36 | close,
|
37 | ...attributes } = props;
|
38 |
|
39 | const classes = mapToCssModules(classNames(
|
40 | className,
|
41 | 'modal-header'
|
42 | ), cssModule);
|
43 |
|
44 | if (!close && toggle) {
|
45 | const closeIcon = typeof charCode === 'number' ? String.fromCharCode(charCode) : charCode;
|
46 | closeButton = (
|
47 | <button type="button" onClick={toggle} className={mapToCssModules('close', cssModule)} aria-label={closeAriaLabel}>
|
48 | <span aria-hidden="true">{closeIcon}</span>
|
49 | </button>
|
50 | );
|
51 | }
|
52 |
|
53 | return (
|
54 | <WrapTag {...attributes} className={classes}>
|
55 | <Tag className={mapToCssModules('modal-title', cssModule)}>
|
56 | {children}
|
57 | </Tag>
|
58 | {close || closeButton}
|
59 | </WrapTag>
|
60 | );
|
61 | };
|
62 |
|
63 | ModalHeader.propTypes = propTypes;
|
64 | ModalHeader.defaultProps = defaultProps;
|
65 |
|
66 | export default ModalHeader;
|