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 | color: PropTypes.string,
|
8 | pill: PropTypes.bool,
|
9 | tag: tagPropType,
|
10 | innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
|
11 | children: PropTypes.node,
|
12 | className: PropTypes.string,
|
13 | cssModule: PropTypes.object,
|
14 | };
|
15 |
|
16 | const defaultProps = {
|
17 | color: 'secondary',
|
18 | pill: false,
|
19 | tag: 'span'
|
20 | };
|
21 |
|
22 | const Badge = (props) => {
|
23 | let {
|
24 | className,
|
25 | cssModule,
|
26 | color,
|
27 | innerRef,
|
28 | pill,
|
29 | tag: Tag,
|
30 | ...attributes
|
31 | } = props;
|
32 |
|
33 | const classes = mapToCssModules(classNames(
|
34 | className,
|
35 | 'badge',
|
36 | 'badge-' + color,
|
37 | pill ? 'badge-pill' : false
|
38 | ), cssModule);
|
39 |
|
40 | if (attributes.href && Tag === 'span') {
|
41 | Tag = 'a';
|
42 | }
|
43 |
|
44 | return (
|
45 | <Tag {...attributes} className={classes} ref={innerRef} />
|
46 | );
|
47 | };
|
48 |
|
49 | Badge.propTypes = propTypes;
|
50 | Badge.defaultProps = defaultProps;
|
51 |
|
52 | export default Badge;
|