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 | icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
9 | wrapTag: tagPropType,
|
10 | toggle: PropTypes.func,
|
11 | className: PropTypes.string,
|
12 | cssModule: PropTypes.object,
|
13 | children: PropTypes.node,
|
14 | closeAriaLabel: PropTypes.string,
|
15 | charCode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
16 | close: PropTypes.object,
|
17 | };
|
18 |
|
19 | const defaultProps = {
|
20 | tag: 'strong',
|
21 | wrapTag: 'div',
|
22 | tagClassName: 'mr-auto',
|
23 | closeAriaLabel: 'Close',
|
24 | charCode: 215,
|
25 | };
|
26 |
|
27 | const ToastHeader = (props) => {
|
28 | let closeButton;
|
29 | let icon;
|
30 | const {
|
31 | className,
|
32 | cssModule,
|
33 | children,
|
34 | toggle,
|
35 | tag: Tag,
|
36 | wrapTag: WrapTag,
|
37 | closeAriaLabel,
|
38 | charCode,
|
39 | close,
|
40 | tagClassName,
|
41 | icon: iconProp,
|
42 | ...attributes } = props;
|
43 |
|
44 | const classes = mapToCssModules(classNames(
|
45 | className,
|
46 | 'toast-header'
|
47 | ), cssModule);
|
48 |
|
49 | if (!close && toggle) {
|
50 | const closeIcon = typeof charCode === 'number' ? String.fromCharCode(charCode) : charCode;
|
51 | closeButton = (
|
52 | <button type="button" onClick={toggle} className={mapToCssModules('close', cssModule)} aria-label={closeAriaLabel}>
|
53 | <span aria-hidden="true">{closeIcon}</span>
|
54 | </button>
|
55 | );
|
56 | }
|
57 |
|
58 | if (typeof iconProp === "string") {
|
59 | icon = (
|
60 | <svg
|
61 | className={mapToCssModules(`rounded text-${iconProp}`)}
|
62 | width="20"
|
63 | height="20"
|
64 | xmlns="http://www.w3.org/2000/svg"
|
65 | preserveAspectRatio="xMidYMid slice"
|
66 | focusable="false"
|
67 | role="img"
|
68 | >
|
69 | <rect fill="currentColor" width="100%" height="100%"></rect>
|
70 | </svg>
|
71 | );
|
72 | } else if (iconProp) {
|
73 | icon = iconProp;
|
74 | }
|
75 |
|
76 | return (
|
77 | <WrapTag {...attributes} className={classes}>
|
78 | {icon}
|
79 | <Tag className={mapToCssModules(classNames(tagClassName, { "ml-2": icon != null }), cssModule)}>
|
80 | {children}
|
81 | </Tag>
|
82 | {close || closeButton}
|
83 | </WrapTag>
|
84 | );
|
85 | };
|
86 |
|
87 | ToastHeader.propTypes = propTypes;
|
88 | ToastHeader.defaultProps = defaultProps;
|
89 |
|
90 | export default ToastHeader;
|