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 | children: PropTypes.node,
|
8 | className: PropTypes.string,
|
9 | close: PropTypes.object,
|
10 | closeAriaLabel: PropTypes.string,
|
11 | cssModule: PropTypes.object,
|
12 | tag: tagPropType,
|
13 | toggle: PropTypes.func,
|
14 | wrapTag: tagPropType,
|
15 | };
|
16 |
|
17 | function OffcanvasHeader(props) {
|
18 | let closeButton;
|
19 | const {
|
20 | children,
|
21 | className,
|
22 | close,
|
23 | closeAriaLabel = 'Close',
|
24 | cssModule,
|
25 | tag: Tag = 'h5',
|
26 | toggle,
|
27 | wrapTag: WrapTag = 'div',
|
28 | ...attributes
|
29 | } = props;
|
30 |
|
31 | const classes = mapToCssModules(
|
32 | classNames(className, 'offcanvas-header'),
|
33 | cssModule,
|
34 | );
|
35 |
|
36 | if (!close && toggle) {
|
37 | closeButton = (
|
38 | <button
|
39 | type="button"
|
40 | onClick={toggle}
|
41 | className={mapToCssModules('btn-close', cssModule)}
|
42 | aria-label={closeAriaLabel}
|
43 | />
|
44 | );
|
45 | }
|
46 |
|
47 | return (
|
48 | <WrapTag {...attributes} className={classes}>
|
49 | <Tag className={mapToCssModules('offcanvas-title', cssModule)}>
|
50 | {children}
|
51 | </Tag>
|
52 | {close || closeButton}
|
53 | </WrapTag>
|
54 | );
|
55 | }
|
56 |
|
57 | OffcanvasHeader.propTypes = propTypes;
|
58 |
|
59 | export default OffcanvasHeader;
|