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 | inverse: PropTypes.bool,
|
9 | color: PropTypes.string,
|
10 | body: PropTypes.bool,
|
11 | outline: PropTypes.bool,
|
12 | className: PropTypes.string,
|
13 | cssModule: PropTypes.object,
|
14 | innerRef: PropTypes.oneOfType([
|
15 | PropTypes.object,
|
16 | PropTypes.string,
|
17 | PropTypes.func,
|
18 | ]),
|
19 | };
|
20 |
|
21 | const defaultProps = {
|
22 | tag: 'div'
|
23 | };
|
24 |
|
25 | const Card = (props) => {
|
26 | const {
|
27 | className,
|
28 | cssModule,
|
29 | color,
|
30 | body,
|
31 | inverse,
|
32 | outline,
|
33 | tag: Tag,
|
34 | innerRef,
|
35 | ...attributes
|
36 | } = props;
|
37 | const classes = mapToCssModules(classNames(
|
38 | className,
|
39 | 'card',
|
40 | inverse ? 'text-white' : false,
|
41 | body ? 'card-body' : false,
|
42 | color ? `${outline ? 'border' : 'bg'}-${color}` : false
|
43 | ), cssModule);
|
44 |
|
45 | return (
|
46 | <Tag {...attributes} className={classes} ref={innerRef} />
|
47 | );
|
48 | };
|
49 |
|
50 | Card.propTypes = propTypes;
|
51 | Card.defaultProps = defaultProps;
|
52 |
|
53 | export default Card;
|