Skip to content

Commit d4c0f2d

Browse files
mking-clarieddywashere
mking-clari
authored and
eddywashere
committed
feat(Media): add Media component (#94)
1 parent 53e285a commit d4c0f2d

13 files changed

Lines changed: 476 additions & 2 deletions

File tree

‎docs/lib/Components/MediaPage.jsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
2+
import React from 'react';
3+
import { PrismCode } from 'react-prism';
4+
import Helmet from 'react-helmet';
5+
6+
import MediaExample from '../examples/Media';
7+
const MediaExampleSource = require('!!raw!../examples/Media.jsx');
8+
9+
import MediaNestedExample from '../examples/MediaNested';
10+
const MediaNestedExampleSource = require('!!raw!../examples/MediaNested.jsx');
11+
12+
import MediaAlignmentExample from '../examples/MediaAlignment';
13+
const MediaAlignmentExampleSource = require('!!raw!../examples/MediaAlignment.jsx');
14+
15+
import MediaListExample from '../examples/MediaList';
16+
const MediaListExampleSource = require('!!raw!../examples/MediaList.jsx');
17+
18+
export default class MediaPage extends React.Component {
19+
render() {
20+
return (
21+
<div>
22+
<Helmet title="Media object" />
23+
<h3>Media object</h3>
24+
<div className="docs-example">
25+
<MediaExample />
26+
</div>
27+
<pre>
28+
<PrismCode className="language-jsx">
29+
{MediaExampleSource}
30+
</PrismCode>
31+
</pre>
32+
<h4>Properties</h4>
33+
<pre>
34+
<PrismCode className="language-jsx">
35+
{`Media.propTypes = {
36+
body: PropTypes.bool,
37+
bottom: PropTypes.bool,
38+
children: PropTypes.node,
39+
className: PropTypes.string,
40+
heading: PropTypes.bool,
41+
left: PropTypes.bool,
42+
list: PropTypes.bool,
43+
middle: PropTypes.bool,
44+
object: PropTypes.bool,
45+
right: PropTypes.bool,
46+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
47+
top: PropTypes.bool,
48+
};`}
49+
</PrismCode>
50+
</pre>
51+
<h4>Nesting</h4>
52+
<div className="docs-example">
53+
<MediaNestedExample />
54+
</div>
55+
<pre>
56+
<PrismCode className="language-jsx">
57+
{MediaNestedExampleSource}
58+
</PrismCode>
59+
</pre>
60+
<h4>Alignment</h4>
61+
<div className="docs-example">
62+
<MediaAlignmentExample />
63+
</div>
64+
<pre>
65+
<PrismCode className="language-jsx">
66+
{MediaAlignmentExampleSource}
67+
</PrismCode>
68+
</pre>
69+
<h4>Media list</h4>
70+
<div className="docs-example">
71+
<MediaListExample />
72+
</div>
73+
<pre>
74+
<PrismCode className="language-jsx">
75+
{MediaListExampleSource}
76+
</PrismCode>
77+
</pre>
78+
</div>
79+
);
80+
}
81+
}

‎docs/lib/Components/index.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@ class Components extends React.Component {
8383
name: 'Tables',
8484
to: '/components/tables/'
8585
},
86+
{
87+
name: 'Media',
88+
to: '/components/media/'
89+
},
8690
]
8791
};
8892
}

‎docs/lib/app.jsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,26 @@ if (typeof document !== 'undefined') {
1414
window.ga('set', 'page', location.pathname);
1515
window.ga('send', 'pageview');
1616
});
17-
ReactDOM.render(<Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory} routes={routes} />, outlet);
17+
18+
let Holder;
19+
window.addEventListener('DOMContentLoaded', () => {
20+
Holder = require('holderjs');
21+
});
22+
23+
ReactDOM.render(
24+
<Router
25+
onUpdate={() => {
26+
window.scrollTo(0, 0);
27+
28+
if (Holder) {
29+
Holder.run();
30+
}
31+
}}
32+
history={browserHistory}
33+
routes={routes}
34+
/>,
35+
outlet
36+
);
1837
}
1938

2039
// Exported static site renderer:

‎docs/lib/examples/Media.jsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { Media } from 'reactstrap';
3+
4+
const Example = () => {
5+
return (
6+
<Media>
7+
<Media left href="#">
8+
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
9+
</Media>
10+
<Media body>
11+
<Media heading>
12+
Media heading
13+
</Media>
14+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
15+
</Media>
16+
</Media>
17+
);
18+
};
19+
20+
export default Example;

‎docs/lib/examples/MediaAlignment.jsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
import { Media } from 'reactstrap';
3+
4+
const Example = () => {
5+
return (
6+
<div>
7+
<Media>
8+
<Media left top href="#">
9+
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
10+
</Media>
11+
<Media body>
12+
<Media heading>
13+
Top aligned media
14+
</Media>
15+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
16+
</Media>
17+
</Media>
18+
<Media className="m-t-1">
19+
<Media left middle href="#">
20+
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
21+
</Media>
22+
<Media body>
23+
<Media heading>
24+
Middle aligned media
25+
</Media>
26+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
27+
</Media>
28+
</Media>
29+
<Media className="m-t-1">
30+
<Media left bottom href="#">
31+
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
32+
</Media>
33+
<Media body>
34+
<Media heading>
35+
Bottom aligned media
36+
</Media>
37+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
38+
</Media>
39+
</Media>
40+
</div>
41+
);
42+
};
43+
44+
export default Example;

‎docs/lib/examples/MediaList.jsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
import { Media } from 'reactstrap';
3+
4+
const Example = () => {
5+
return (
6+
<Media list>
7+
<Media tag="li">
8+
<Media left href="#">
9+
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
10+
</Media>
11+
<Media body>
12+
<Media heading>
13+
Media heading
14+
</Media>
15+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
16+
<Media>
17+
<Media left href="#">
18+
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
19+
</Media>
20+
<Media body>
21+
<Media heading>
22+
Nested media heading
23+
</Media>
24+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
25+
<Media>
26+
<Media left href="#">
27+
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
28+
</Media>
29+
<Media body>
30+
<Media heading>
31+
Nested media heading
32+
</Media>
33+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
34+
</Media>
35+
</Media>
36+
</Media>
37+
</Media>
38+
<Media>
39+
<Media left href="#">
40+
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
41+
</Media>
42+
<Media body>
43+
<Media heading>
44+
Nested media heading
45+
</Media>
46+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
47+
</Media>
48+
</Media>
49+
</Media>
50+
</Media>
51+
<Media tag="li">
52+
<Media body>
53+
<Media heading>
54+
Media heading
55+
</Media>
56+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
57+
</Media>
58+
<Media right href="#">
59+
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
60+
</Media>
61+
</Media>
62+
</Media>
63+
);
64+
};
65+
66+
export default Example;

‎docs/lib/examples/MediaNested.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import { Media } from 'reactstrap';
3+
4+
const Example = () => {
5+
return (
6+
<Media>
7+
<Media left href="#">
8+
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
9+
</Media>
10+
<Media body>
11+
<Media heading>
12+
Media heading
13+
</Media>
14+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
15+
<Media>
16+
<Media left href="#">
17+
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
18+
</Media>
19+
<Media body>
20+
<Media heading>
21+
Nested media heading
22+
</Media>
23+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
24+
</Media>
25+
</Media>
26+
</Media>
27+
</Media>
28+
);
29+
};
30+
31+
export default Example;

‎docs/lib/routes.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import InputGroupPage from './Components/InputGroupPage';
1414
import PopoversPage from './Components/PopoversPage';
1515
import TooltipsPage from './Components/TooltipsPage';
1616
import TagsPage from './Components/TagsPage';
17+
import MediaPage from './Components/MediaPage';
1718
import ModalsPage from './Components/ModalsPage';
1819
import CardPage from './Components/CardPage';
1920
import TablesPage from './Components/TablesPage';
@@ -42,6 +43,7 @@ const routes = (
4243
<Route path="layout/" component={LayoutPage} />
4344
<Route path="navs/" component={NavsPage} />
4445
<Route path="navbar/" component={NavbarPage} />
46+
<Route path="media/" component={MediaPage} />
4547
</Route>
4648
<Route path="*" component={NotFound} />
4749
</Route>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"eslint-plugin-standard": "^2.0.0",
8383
"extract-text-webpack-plugin": "^1.0.1",
8484
"history": "^3.0.0",
85+
"holderjs": "^2.9.3",
8586
"jasmine-core": "^2.4.1",
8687
"json-loader": "^0.5.4",
8788
"karma": "^1.1.2",

‎src/Media.jsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React, { PropTypes } from 'react';
2+
import classNames from 'classnames';
3+
4+
const propTypes = {
5+
body: PropTypes.bool,
6+
bottom: PropTypes.bool,
7+
children: PropTypes.node,
8+
className: PropTypes.string,
9+
heading: PropTypes.bool,
10+
left: PropTypes.bool,
11+
list: PropTypes.bool,
12+
middle: PropTypes.bool,
13+
object: PropTypes.bool,
14+
right: PropTypes.bool,
15+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
16+
top: PropTypes.bool,
17+
};
18+
19+
const Media = (props) => {
20+
const {
21+
body,
22+
bottom,
23+
className,
24+
heading,
25+
left,
26+
list,
27+
middle,
28+
object,
29+
right,
30+
tag,
31+
top,
32+
...attributes,
33+
} = props;
34+
35+
let defaultTag;
36+
if (heading) {
37+
defaultTag = 'h4';
38+
} else if (left || right) {
39+
defaultTag = 'a';
40+
} else if (object) {
41+
defaultTag = 'img';
42+
} else if (list) {
43+
defaultTag = 'ul';
44+
} else {
45+
defaultTag = 'div';
46+
}
47+
const Tag = tag || defaultTag;
48+
49+
const classes = classNames(
50+
className,
51+
{
52+
'media-body': body,
53+
'media-heading': heading,
54+
'media-left': left,
55+
'media-right': right,
56+
'media-top': top,
57+
'media-bottom': bottom,
58+
'media-middle': middle,
59+
'media-object': object,
60+
'media-list': list,
61+
media: !body && !heading && !left && !right && !top && !bottom && !middle && !object && !list,
62+
}
63+
);
64+
65+
return (
66+
<Tag {...attributes} className={classes} />
67+
);
68+
};
69+
70+
Media.propTypes = propTypes;
71+
72+
export default Media;

0 commit comments

Comments
 (0)