UNPKG

1.26 kBJavaScriptView Raw
1import React from 'react';
2import PropTypes from 'prop-types';
3import classNames from 'classnames';
4import { mapToCssModules, tagPropType } from './utils';
5
6const 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
17function 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
57OffcanvasHeader.propTypes = propTypes;
58
59export default OffcanvasHeader;