/
Card.tsx
124 lines (111 loc) · 3.04 KB
/
Card.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import classNames from 'classnames';
import * as React from 'react';
import PropTypes from 'prop-types';
import { useBootstrapPrefix } from './ThemeProvider';
import createWithBsPrefix from './createWithBsPrefix';
import divWithClassName from './divWithClassName';
import CardImg from './CardImg';
import CardHeader from './CardHeader';
import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
import { Color, Variant } from './types';
const DivStyledAsH5 = divWithClassName('h5');
const DivStyledAsH6 = divWithClassName('h6');
const CardBody = createWithBsPrefix('card-body');
const CardTitle = createWithBsPrefix('card-title', {
Component: DivStyledAsH5,
});
const CardSubtitle = createWithBsPrefix('card-subtitle', {
Component: DivStyledAsH6,
});
const CardLink = createWithBsPrefix('card-link', { Component: 'a' });
const CardText = createWithBsPrefix('card-text', { Component: 'p' });
const CardFooter = createWithBsPrefix('card-footer');
const CardImgOverlay = createWithBsPrefix('card-img-overlay');
export interface CardProps
extends BsPrefixProps,
React.HTMLAttributes<HTMLElement> {
bg?: Variant;
text?: Color;
border?: Variant;
body?: boolean;
}
const propTypes = {
/**
* @default 'card'
*/
bsPrefix: PropTypes.string,
/**
* Sets card background
*
* @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light')}
*/
bg: PropTypes.string,
/**
* Sets card text color
*
* @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light'|'white'|'muted')}
*/
text: PropTypes.string,
/**
* Sets card border color
*
* @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light')}
*/
border: PropTypes.string,
/**
* When this prop is set, it creates a Card with a Card.Body inside
* passing the children directly to it
*/
body: PropTypes.bool,
as: PropTypes.elementType,
};
const Card: BsPrefixRefForwardingComponent<'div', CardProps> = React.forwardRef<
HTMLElement,
CardProps
>(
(
{
bsPrefix,
className,
bg,
text,
border,
body = false,
children,
// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
as: Component = 'div',
...props
},
ref,
) => {
const prefix = useBootstrapPrefix(bsPrefix, 'card');
return (
<Component
ref={ref}
{...props}
className={classNames(
className,
prefix,
bg && `bg-${bg}`,
text && `text-${text}`,
border && `border-${border}`,
)}
>
{body ? <CardBody>{children}</CardBody> : children}
</Component>
);
},
);
Card.displayName = 'Card';
Card.propTypes = propTypes;
export default Object.assign(Card, {
Img: CardImg,
Title: CardTitle,
Subtitle: CardSubtitle,
Body: CardBody,
Link: CardLink,
Text: CardText,
Header: CardHeader,
Footer: CardFooter,
ImgOverlay: CardImgOverlay,
});