Skip to content

Commit a65ad60

Browse files
mking-clarimking-clari
committed
feat(Media): add component
1 parent 92c62b1 commit a65ad60

27 files changed

Lines changed: 814 additions & 2 deletions

‎docs/lib/Components/MediaPage.jsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
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+
// Media body
37+
children: PropTypes.element,
38+
className: PropTypes.string,
39+
// Media left
40+
left: PropTypes.element,
41+
// Media right
42+
right: PropTypes.element,
43+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
44+
};`}
45+
</PrismCode>
46+
</pre>
47+
<h4>Nesting</h4>
48+
<div className="docs-example">
49+
<MediaNestedExample />
50+
</div>
51+
<pre>
52+
<PrismCode className="language-jsx">
53+
{MediaNestedExampleSource}
54+
</PrismCode>
55+
</pre>
56+
<h4>Alignment</h4>
57+
<div className="docs-example">
58+
<MediaAlignmentExample />
59+
</div>
60+
<pre>
61+
<PrismCode className="language-jsx">
62+
{MediaAlignmentExampleSource}
63+
</PrismCode>
64+
</pre>
65+
<h4>Media list</h4>
66+
<div className="docs-example">
67+
<MediaListExample />
68+
</div>
69+
<pre>
70+
<PrismCode className="language-jsx">
71+
{MediaListExampleSource}
72+
</PrismCode>
73+
</pre>
74+
</div>
75+
);
76+
}
77+
}

‎docs/lib/Components/index.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@ class Components extends React.Component {
7979
name: 'Tables',
8080
to: '/components/tables/'
8181
},
82+
{
83+
name: 'Media',
84+
to: '/components/media/'
85+
},
8286
]
8387
};
8488
}

‎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: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { Media, MediaBody, MediaHeading, MediaLeft, MediaObject } from 'reactstrap';
3+
4+
const Example = () => {
5+
return (
6+
<Media
7+
left={<MediaLeft href="#">
8+
<MediaObject data-src="holder.js/64x64" alt="Generic placeholder image" />
9+
</MediaLeft>}
10+
>
11+
<MediaBody>
12+
<MediaHeading>
13+
Media heading
14+
</MediaHeading>
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+
</MediaBody>
17+
</Media>
18+
);
19+
};
20+
21+
export default Example;

‎docs/lib/examples/MediaAlignment.jsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react';
2+
import { Media, MediaBody, MediaHeading, MediaLeft, MediaObject } from 'reactstrap';
3+
4+
const Example = () => {
5+
return (
6+
<div>
7+
<Media
8+
left={<MediaLeft alignment="top" href="#">
9+
<MediaObject data-src="holder.js/64x64" alt="Generic placeholder image" />
10+
</MediaLeft>}
11+
>
12+
<MediaBody>
13+
<MediaHeading>
14+
Top aligned media
15+
</MediaHeading>
16+
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.
17+
</MediaBody>
18+
</Media>
19+
<Media
20+
className="m-t-1"
21+
left={<MediaLeft alignment="middle" href="#">
22+
<MediaObject data-src="holder.js/64x64" alt="Generic placeholder image" />
23+
</MediaLeft>}
24+
>
25+
<MediaBody>
26+
<MediaHeading>
27+
Middle aligned media
28+
</MediaHeading>
29+
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.
30+
</MediaBody>
31+
</Media>
32+
<Media
33+
className="m-t-1"
34+
left={<MediaLeft alignment="bottom" href="#">
35+
<MediaObject data-src="holder.js/64x64" alt="Generic placeholder image" />
36+
</MediaLeft>}
37+
>
38+
<MediaBody>
39+
<MediaHeading>
40+
Bottom aligned media
41+
</MediaHeading>
42+
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.
43+
</MediaBody>
44+
</Media>
45+
</div>
46+
);
47+
};
48+
49+
export default Example;

‎docs/lib/examples/MediaList.jsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import { Media, MediaBody, MediaHeading, MediaLeft, MediaList, MediaObject, MediaRight } from 'reactstrap';
3+
4+
const Example = () => {
5+
return (
6+
<MediaList>
7+
<Media
8+
left={<MediaLeft href="#">
9+
<MediaObject data-src="holder.js/64x64" alt="Generic placeholder image" />
10+
</MediaLeft>}
11+
>
12+
<MediaBody>
13+
<MediaHeading>
14+
Media heading
15+
</MediaHeading>
16+
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.
17+
<Media
18+
left={<MediaLeft href="#">
19+
<MediaObject data-src="holder.js/64x64" alt="Generic placeholder image" />
20+
</MediaLeft>}
21+
>
22+
<MediaBody>
23+
<MediaHeading>
24+
Nested media heading
25+
</MediaHeading>
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+
left={<MediaLeft href="#">
29+
<MediaObject data-src="holder.js/64x64" alt="Generic placeholder image" />
30+
</MediaLeft>}
31+
>
32+
<MediaBody>
33+
<MediaHeading>
34+
Nested media heading
35+
</MediaHeading>
36+
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.
37+
</MediaBody>
38+
</Media>
39+
</MediaBody>
40+
</Media>
41+
<Media
42+
left={<MediaLeft href="#">
43+
<MediaObject data-src="holder.js/64x64" alt="Generic placeholder image" />
44+
</MediaLeft>}
45+
>
46+
<MediaBody>
47+
<MediaHeading>
48+
Nested media heading
49+
</MediaHeading>
50+
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.
51+
</MediaBody>
52+
</Media>
53+
</MediaBody>
54+
</Media>
55+
<Media
56+
right={<MediaRight href="#">
57+
<MediaObject data-src="holder.js/64x64" alt="Generic placeholder image" />
58+
</MediaRight>}
59+
>
60+
<MediaBody>
61+
<MediaHeading>
62+
Media heading
63+
</MediaHeading>
64+
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.
65+
</MediaBody>
66+
</Media>
67+
</MediaList>
68+
);
69+
};
70+
71+
export default Example;

‎docs/lib/examples/MediaNested.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import { Media, MediaBody, MediaHeading, MediaLeft, MediaObject } from 'reactstrap';
3+
4+
const Example = () => {
5+
return (
6+
<Media
7+
left={<MediaLeft href="#">
8+
<MediaObject data-src="holder.js/64x64" alt="Generic placeholder image" />
9+
</MediaLeft>}
10+
>
11+
<MediaBody>
12+
<MediaHeading>
13+
Media heading
14+
</MediaHeading>
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+
left={<MediaLeft href="#">
18+
<MediaObject data-src="holder.js/64x64" alt="Generic placeholder image" />
19+
</MediaLeft>}
20+
>
21+
<MediaBody>
22+
<MediaHeading>
23+
Nested media heading
24+
</MediaHeading>
25+
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.
26+
</MediaBody>
27+
</Media>
28+
</MediaBody>
29+
</Media>
30+
);
31+
};
32+
33+
export default Example;

‎docs/lib/routes.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import FormPage from './Components/FormPage';
1313
import PopoversPage from './Components/PopoversPage';
1414
import TooltipsPage from './Components/TooltipsPage';
1515
import TagsPage from './Components/TagsPage';
16+
import MediaPage from './Components/MediaPage';
1617
import ModalsPage from './Components/ModalsPage';
1718
import CardPage from './Components/CardPage';
1819
import TablesPage from './Components/TablesPage';
@@ -40,6 +41,7 @@ const routes = (
4041
<Route path="layout/" component={LayoutPage} />
4142
<Route path="navs/" component={NavsPage} />
4243
<Route path="navbar/" component={NavbarPage} />
44+
<Route path="media/" component={MediaPage} />
4345
</Route>
4446
<Route path="*" component={NotFound} />
4547
</Route>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
"eslint-plugin-standard": "^2.0.0",
8181
"extract-text-webpack-plugin": "^1.0.1",
8282
"history": "^3.0.0",
83+
"holderjs": "^2.9.3",
8384
"isparta-loader": "^2.0.0",
8485
"jasmine-core": "^2.4.1",
8586
"json-loader": "^0.5.4",

‎src/Media.jsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { PropTypes } from 'react';
2+
import classNames from 'classnames';
3+
4+
const propTypes = {
5+
children: PropTypes.element,
6+
className: PropTypes.string,
7+
left: PropTypes.element,
8+
right: PropTypes.element,
9+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
10+
};
11+
12+
const defaultProps = {
13+
tag: 'div',
14+
};
15+
16+
const Media = (props) => {
17+
const {
18+
children,
19+
className,
20+
left,
21+
right,
22+
tag: Tag,
23+
...attributes,
24+
} = props;
25+
26+
const classes = classNames(
27+
className,
28+
'media'
29+
);
30+
31+
return (
32+
<Tag {...attributes} className={classes}>
33+
{left}
34+
{children}
35+
{right}
36+
</Tag>
37+
);
38+
};
39+
40+
Media.propTypes = propTypes;
41+
Media.defaultProps = defaultProps;
42+
43+
export default Media;

0 commit comments

Comments
 (0)