-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Media): add Media component (#94)
- Loading branch information
1 parent
53e285a
commit d4c0f2d
Showing
13 changed files
with
476 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ | ||
import React from 'react'; | ||
import { PrismCode } from 'react-prism'; | ||
import Helmet from 'react-helmet'; | ||
|
||
import MediaExample from '../examples/Media'; | ||
const MediaExampleSource = require('!!raw!../examples/Media.jsx'); | ||
|
||
import MediaNestedExample from '../examples/MediaNested'; | ||
const MediaNestedExampleSource = require('!!raw!../examples/MediaNested.jsx'); | ||
|
||
import MediaAlignmentExample from '../examples/MediaAlignment'; | ||
const MediaAlignmentExampleSource = require('!!raw!../examples/MediaAlignment.jsx'); | ||
|
||
import MediaListExample from '../examples/MediaList'; | ||
const MediaListExampleSource = require('!!raw!../examples/MediaList.jsx'); | ||
|
||
export default class MediaPage extends React.Component { | ||
render() { | ||
return ( | ||
<div> | ||
<Helmet title="Media object" /> | ||
<h3>Media object</h3> | ||
<div className="docs-example"> | ||
<MediaExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{MediaExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h4>Properties</h4> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{`Media.propTypes = { | ||
body: PropTypes.bool, | ||
bottom: PropTypes.bool, | ||
children: PropTypes.node, | ||
className: PropTypes.string, | ||
heading: PropTypes.bool, | ||
left: PropTypes.bool, | ||
list: PropTypes.bool, | ||
middle: PropTypes.bool, | ||
object: PropTypes.bool, | ||
right: PropTypes.bool, | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
top: PropTypes.bool, | ||
};`} | ||
</PrismCode> | ||
</pre> | ||
<h4>Nesting</h4> | ||
<div className="docs-example"> | ||
<MediaNestedExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{MediaNestedExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h4>Alignment</h4> | ||
<div className="docs-example"> | ||
<MediaAlignmentExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{MediaAlignmentExampleSource} | ||
</PrismCode> | ||
</pre> | ||
<h4>Media list</h4> | ||
<div className="docs-example"> | ||
<MediaListExample /> | ||
</div> | ||
<pre> | ||
<PrismCode className="language-jsx"> | ||
{MediaListExampleSource} | ||
</PrismCode> | ||
</pre> | ||
</div> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import React from 'react'; | ||
import { Media } from 'reactstrap'; | ||
|
||
const Example = () => { | ||
return ( | ||
<Media> | ||
<Media left href="#"> | ||
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" /> | ||
</Media> | ||
<Media body> | ||
<Media heading> | ||
Media heading | ||
</Media> | ||
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. | ||
</Media> | ||
</Media> | ||
); | ||
}; | ||
|
||
export default Example; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import React from 'react'; | ||
import { Media } from 'reactstrap'; | ||
|
||
const Example = () => { | ||
return ( | ||
<div> | ||
<Media> | ||
<Media left top href="#"> | ||
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" /> | ||
</Media> | ||
<Media body> | ||
<Media heading> | ||
Top aligned media | ||
</Media> | ||
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. | ||
</Media> | ||
</Media> | ||
<Media className="m-t-1"> | ||
<Media left middle href="#"> | ||
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" /> | ||
</Media> | ||
<Media body> | ||
<Media heading> | ||
Middle aligned media | ||
</Media> | ||
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. | ||
</Media> | ||
</Media> | ||
<Media className="m-t-1"> | ||
<Media left bottom href="#"> | ||
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" /> | ||
</Media> | ||
<Media body> | ||
<Media heading> | ||
Bottom aligned media | ||
</Media> | ||
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. | ||
</Media> | ||
</Media> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Example; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import React from 'react'; | ||
import { Media } from 'reactstrap'; | ||
|
||
const Example = () => { | ||
return ( | ||
<Media list> | ||
<Media tag="li"> | ||
<Media left href="#"> | ||
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" /> | ||
</Media> | ||
<Media body> | ||
<Media heading> | ||
Media heading | ||
</Media> | ||
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. | ||
<Media> | ||
<Media left href="#"> | ||
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" /> | ||
</Media> | ||
<Media body> | ||
<Media heading> | ||
Nested media heading | ||
</Media> | ||
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. | ||
<Media> | ||
<Media left href="#"> | ||
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" /> | ||
</Media> | ||
<Media body> | ||
<Media heading> | ||
Nested media heading | ||
</Media> | ||
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. | ||
</Media> | ||
</Media> | ||
</Media> | ||
</Media> | ||
<Media> | ||
<Media left href="#"> | ||
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" /> | ||
</Media> | ||
<Media body> | ||
<Media heading> | ||
Nested media heading | ||
</Media> | ||
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. | ||
</Media> | ||
</Media> | ||
</Media> | ||
</Media> | ||
<Media tag="li"> | ||
<Media body> | ||
<Media heading> | ||
Media heading | ||
</Media> | ||
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. | ||
</Media> | ||
<Media right href="#"> | ||
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" /> | ||
</Media> | ||
</Media> | ||
</Media> | ||
); | ||
}; | ||
|
||
export default Example; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import React from 'react'; | ||
import { Media } from 'reactstrap'; | ||
|
||
const Example = () => { | ||
return ( | ||
<Media> | ||
<Media left href="#"> | ||
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" /> | ||
</Media> | ||
<Media body> | ||
<Media heading> | ||
Media heading | ||
</Media> | ||
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. | ||
<Media> | ||
<Media left href="#"> | ||
<Media object data-src="holder.js/64x64" alt="Generic placeholder image" /> | ||
</Media> | ||
<Media body> | ||
<Media heading> | ||
Nested media heading | ||
</Media> | ||
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. | ||
</Media> | ||
</Media> | ||
</Media> | ||
</Media> | ||
); | ||
}; | ||
|
||
export default Example; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
import React, { PropTypes } from 'react'; | ||
import classNames from 'classnames'; | ||
|
||
const propTypes = { | ||
body: PropTypes.bool, | ||
bottom: PropTypes.bool, | ||
children: PropTypes.node, | ||
className: PropTypes.string, | ||
heading: PropTypes.bool, | ||
left: PropTypes.bool, | ||
list: PropTypes.bool, | ||
middle: PropTypes.bool, | ||
object: PropTypes.bool, | ||
right: PropTypes.bool, | ||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), | ||
top: PropTypes.bool, | ||
}; | ||
|
||
const Media = (props) => { | ||
const { | ||
body, | ||
bottom, | ||
className, | ||
heading, | ||
left, | ||
list, | ||
middle, | ||
object, | ||
right, | ||
tag, | ||
top, | ||
...attributes, | ||
} = props; | ||
|
||
let defaultTag; | ||
if (heading) { | ||
defaultTag = 'h4'; | ||
} else if (left || right) { | ||
defaultTag = 'a'; | ||
} else if (object) { | ||
defaultTag = 'img'; | ||
} else if (list) { | ||
defaultTag = 'ul'; | ||
} else { | ||
defaultTag = 'div'; | ||
} | ||
const Tag = tag || defaultTag; | ||
|
||
const classes = classNames( | ||
className, | ||
{ | ||
'media-body': body, | ||
'media-heading': heading, | ||
'media-left': left, | ||
'media-right': right, | ||
'media-top': top, | ||
'media-bottom': bottom, | ||
'media-middle': middle, | ||
'media-object': object, | ||
'media-list': list, | ||
media: !body && !heading && !left && !right && !top && !bottom && !middle && !object && !list, | ||
} | ||
); | ||
|
||
return ( | ||
<Tag {...attributes} className={classes} /> | ||
); | ||
}; | ||
|
||
Media.propTypes = propTypes; | ||
|
||
export default Media; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.