/
index.jsx
73 lines (61 loc) · 1.99 KB
/
index.jsx
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
import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { expandDts } from '../../lib/utils';
import './styles.scss';
const CardContent = ({ children, className, stretch, fill, append, dts }) => {
const baseClass = 'card-component-content';
const contentClassNames = [baseClass];
if (stretch) contentClassNames.push('stretch');
if (fill) contentClassNames.push('fill');
if (append) contentClassNames.push('append');
if (className) contentClassNames.push(className);
return (
<div className={contentClassNames.join(' ')} {...expandDts(dts)}>
{children}
</div>
);
};
CardContent.displayName = 'CardContentComponent';
CardContent.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
fill: PropTypes.bool,
stretch: PropTypes.bool,
append: PropTypes.bool,
dts: PropTypes.string,
};
CardContent.defaultProps = {
fill: false,
stretch: false,
append: false,
};
const Card = ({ children, className, accent, dts }) => {
const baseClass = 'card-component';
const containerClassNames = [baseClass];
if (accent) containerClassNames.push(`accent accent-${accent}`);
if (className) containerClassNames.push(className);
const nestedChildren = React.Children.map(children, (
child // eslint-disable-line lodash/prefer-lodash-method
) => (!_.get(child, 'props.append') ? child : null));
const appendedChildren = React.Children.map(children, (
child // eslint-disable-line lodash/prefer-lodash-method
) => (_.get(child, 'props.append') ? child : null));
return (
<div className={containerClassNames.join(' ')} {...expandDts(dts)}>
<div className={`${baseClass}-content-container`}>{nestedChildren}</div>
{appendedChildren}
</div>
);
};
Card.displayName = 'CardComponent';
Card.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
accent: PropTypes.string,
dts: PropTypes.string,
};
export default {
Container: Card,
Content: CardContent,
};