feat(Media): add Media component (#94)

reactstrap · Aug 18, 2016 · d4c0f2d · d4c0f2d
1 parent 53e285a
commit d4c0f2d
Show file tree

Hide file tree

Showing 13 changed files with 476 additions and 2 deletions.
diff --git a/docs/lib/Components/MediaPage.jsx b/docs/lib/Components/MediaPage.jsx
@@ -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>
+    );
+  }
+}
diff --git a/docs/lib/Components/index.jsx b/docs/lib/Components/index.jsx
@@ -83,6 +83,10 @@ class Components extends React.Component {
           name: 'Tables',
           to: '/components/tables/'
         },
+        {
+          name: 'Media',
+          to: '/components/media/'
+        },
       ]
     };
   }

diff --git a/docs/lib/app.jsx b/docs/lib/app.jsx
@@ -14,7 +14,26 @@ if (typeof document !== 'undefined') {
     window.ga('set', 'page', location.pathname);
     window.ga('send', 'pageview');
   });
-  ReactDOM.render(<Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory} routes={routes} />, outlet);
+
+  let Holder;
+  window.addEventListener('DOMContentLoaded', () => {
+    Holder = require('holderjs');
+  });
+
+  ReactDOM.render(
+    <Router
+      onUpdate={() => {
+        window.scrollTo(0, 0);
+
+        if (Holder) {
+          Holder.run();
+        }
+      }}
+      history={browserHistory}
+      routes={routes}
+    />,
+    outlet
+  );
 }
 
 // Exported static site renderer:

diff --git a/docs/lib/examples/Media.jsx b/docs/lib/examples/Media.jsx
@@ -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;
diff --git a/docs/lib/examples/MediaAlignment.jsx b/docs/lib/examples/MediaAlignment.jsx
@@ -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;
diff --git a/docs/lib/examples/MediaList.jsx b/docs/lib/examples/MediaList.jsx
@@ -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;
diff --git a/docs/lib/examples/MediaNested.jsx b/docs/lib/examples/MediaNested.jsx
@@ -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;
diff --git a/docs/lib/routes.jsx b/docs/lib/routes.jsx
@@ -14,6 +14,7 @@ import InputGroupPage from './Components/InputGroupPage';
 import PopoversPage from './Components/PopoversPage';
 import TooltipsPage from './Components/TooltipsPage';
 import TagsPage from './Components/TagsPage';
+import MediaPage from './Components/MediaPage';
 import ModalsPage from './Components/ModalsPage';
 import CardPage from './Components/CardPage';
 import TablesPage from './Components/TablesPage';
@@ -42,6 +43,7 @@ const routes = (
       <Route path="layout/" component={LayoutPage} />
       <Route path="navs/" component={NavsPage} />
       <Route path="navbar/" component={NavbarPage} />
+      <Route path="media/" component={MediaPage} />
     </Route>
     <Route path="*" component={NotFound} />
   </Route>

diff --git a/package.json b/package.json
@@ -82,6 +82,7 @@
     "eslint-plugin-standard": "^2.0.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "history": "^3.0.0",
+    "holderjs": "^2.9.3",
     "jasmine-core": "^2.4.1",
     "json-loader": "^0.5.4",
     "karma": "^1.1.2",

diff --git a/src/Media.jsx b/src/Media.jsx
@@ -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;
diff --git a/src/index.js b/src/index.js
@@ -53,6 +53,7 @@ import InputGroup from './InputGroup';
 import InputGroupAddon from './InputGroupAddon';
 import InputGroupButton from './InputGroupButton';
 import Label from './Label';
+import Media from './Media';
 
 export {
   Container,
@@ -110,4 +111,5 @@ export {
   InputGroupAddon,
   InputGroupButton,
   Label,
+  Media,
 };