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 | body: PropTypes.bool,
|
8 | bottom: PropTypes.bool,
|
9 | children: PropTypes.node,
|
10 | className: PropTypes.string,
|
11 | cssModule: PropTypes.object,
|
12 | heading: PropTypes.bool,
|
13 | left: PropTypes.bool,
|
14 | list: PropTypes.bool,
|
15 | middle: PropTypes.bool,
|
16 | object: PropTypes.bool,
|
17 | right: PropTypes.bool,
|
18 | tag: tagPropType,
|
19 | top: PropTypes.bool,
|
20 | };
|
21 |
|
22 | function Media(props) {
|
23 | const {
|
24 | body,
|
25 | bottom,
|
26 | className,
|
27 | cssModule,
|
28 | heading,
|
29 | left,
|
30 | list,
|
31 | middle,
|
32 | object,
|
33 | right,
|
34 | tag,
|
35 | top,
|
36 | ...attributes
|
37 | } = props;
|
38 |
|
39 | let defaultTag;
|
40 | if (heading) {
|
41 | defaultTag = 'h4';
|
42 | } else if (attributes.href) {
|
43 | defaultTag = 'a';
|
44 | } else if (attributes.src || object) {
|
45 | defaultTag = 'img';
|
46 | } else if (list) {
|
47 | defaultTag = 'ul';
|
48 | } else {
|
49 | defaultTag = 'div';
|
50 | }
|
51 | const Tag = tag || defaultTag;
|
52 |
|
53 | const classes = mapToCssModules(
|
54 | classNames(className, {
|
55 | 'media-body': body,
|
56 | 'media-heading': heading,
|
57 | 'media-left': left,
|
58 | 'media-right': right,
|
59 | 'media-top': top,
|
60 | 'media-bottom': bottom,
|
61 | 'media-middle': middle,
|
62 | 'media-object': object,
|
63 | 'media-list': list,
|
64 | media:
|
65 | !body &&
|
66 | !heading &&
|
67 | !left &&
|
68 | !right &&
|
69 | !top &&
|
70 | !bottom &&
|
71 | !middle &&
|
72 | !object &&
|
73 | !list,
|
74 | }),
|
75 | cssModule,
|
76 | );
|
77 |
|
78 | return <Tag {...attributes} className={classes} />;
|
79 | }
|
80 |
|
81 | Media.propTypes = propTypes;
|
82 |
|
83 | export default Media;
|
84 |
|
\ | No newline at end of file |