@npmcorp/pui-react-tile-layout/tile-layout.js

React tile layout component

/*(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.*/
'use strict';

var _objectWithoutProperties = require('babel-runtime/helpers/object-without-properties')['default'];

exports.__esModule = true;

var _npmcorpPuiReactHelpers = require('@npmcorp/pui-react-helpers');

/**
 * @component TileLayout
 * @description A responsive left to right wrapping layout with a set number of columns
 * where items will scale to fit their container
 *
 * @property columns {Number|Object} Number of columns or mapping from screen size to number of columns
 * @property noGutter {Boolean} Removes the gutter
 *
 * @example ```js
 * var TileLayout = require('@npmcorp/pui-react-tile-layout').TileLayout;
 * var MyComponent = React.createClass({
 *   render() {
 *     return (
 *       <TileLayout columns={3}>
 *         <TileLayout.Item>
 *           An Item
 *         </TileLayout.Item>
 *         <TileLayout.Item>
 *           Another Item
 *         </TileLayout.Item>
 *         <TileLayout.Item>
 *           A third item
 *         </TileLayout.Item>
 *       </TileLayout>
 *     );
 *   }
 * });
 * ```
 *
 * @see [Pivotal UI React](http://styleguide.pivotal.io/react_all_tile-layout.html)
 */
var React = require('react');
var classnames = require('classnames');
var TileLayout = React.createClass({
  displayName: 'TileLayout',

  propTypes: {
    columns: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.object]),
    noGutter: React.PropTypes.bool
  },
  getColumnClasses: function getColumnClasses(columns) {
    if (columns instanceof Object) {
      var classes = [];

      for (var breakpoint in columns) {
        if (columns.hasOwnProperty(breakpoint)) {
          classes.push('tile-layout-' + breakpoint + '-' + columns[breakpoint]);
        }
      }

      return classes;
    } else {
      return 'tile-layout-xs-' + columns;
    }
  },
  render: function render() {
    var _props = this.props;
    var children = _props.children;
    var columns = _props.columns;
    var noGutter = _props.noGutter;

    var others = _objectWithoutProperties(_props, ['children', 'columns', 'noGutter']);

    var classes = classnames(this.getColumnClasses(columns), noGutter ? null : 'tile-gutter', 'tile-layout');
    var props = _npmcorpPuiReactHelpers.mergeProps.apply(undefined, [{ className: classes }].concat(others));
    return React.createElement(
      'div',
      props,
      children
    );
  }
});

/**
 * @component TileLayout.Item
 * @description Wrapper element for items in a tile layout
 *
 * @example ```js
 * var TileLayout = require('@npmcorp/pui-react-tile-layout').TileLayout;
 *
 * var MyComponent = React.createClass({
 *   render() {
 *     return (
 *       <TileLayout columns={3}>
 *         <TileLayout.Item>
 *           An Item
 *         </TileLayout.Item>
 *         <TileLayout.Item>
 *           Another Item
 *         </TileLayout.Item>
 *         <TileLayout.Item>
 *           A third item
 *         </TileLayout.Item>
 *       </TileLayout>
 *     );
 *   }
 * });
 * ```
 *
 * @see [Pivotal UI React](http://styleguide.pivotal.io/react_all_tile-layout.html)
 */
TileLayout.Item = React.createClass({
  displayName: 'Item',

  render: function render() {
    return React.createElement('div', _npmcorpPuiReactHelpers.mergeProps({ className: 'tile-item' }, this.props));
  }
});

exports['default'] = TileLayout;

/*doc
 ---
 title: Tile Layout
 name: tile_layout_react
 categories:
 - react_utilities_tile-layout
 - react_all
 ---

 <code class="pam">
 <i class="fa fa-download" alt="Install the Component">
 npm install @npmcorp/pui-react-tile-layout @npmcorp/pui-react-panels --save
 </i>
 </code>

 Require the component:

 ```
var TileLayout = require('@npmcorp/pui-react-tile-layout');
var ClickableAltPanel = require('@npmcorp/pui-react-panels').ClickableAltPanel;
 ```

 For the example, you also need to require `ClickableAltPanel` from [Panels](/react_components_panels.html).


 ```react_example
 <TileLayout columns={3}>
   <TileLayout.Item>
     <ClickableAltPanel>Hey</ClickableAltPanel>
   </TileLayout.Item>
   <TileLayout.Item>
     <ClickableAltPanel>What</ClickableAltPanel>
   </TileLayout.Item>
   <TileLayout.Item>
     <ClickableAltPanel>Hello</ClickableAltPanel>
   </TileLayout.Item>
   <TileLayout.Item>
     <ClickableAltPanel>What</ClickableAltPanel>
   </TileLayout.Item>
 </TileLayout>
 ```
*/

/*doc
 ---
 title: Responsive Breakpoints
 name: 01_tile_layout_responsive
 parent: tile_layout_react
 ---

 You can also pass an object setting the number of columns for responsive
 breakpoints to the columns prop. You can set separate column values
 (from 1 - 12 columns) for some or all of xs, sm, md, lg, and xl screen sizes.

 ```react_example
 <TileLayout columns={{xs: 1, sm: 2, md: 3}}>
   <TileLayout.Item>
     <ClickableAltPanel>Hey</ClickableAltPanel>
   </TileLayout.Item>
   <TileLayout.Item>
     <ClickableAltPanel>What</ClickableAltPanel>
   </TileLayout.Item>
   <TileLayout.Item>
     <ClickableAltPanel>Hello</ClickableAltPanel>
   </TileLayout.Item>
   <TileLayout.Item>
     <ClickableAltPanel>What</ClickableAltPanel>
   </TileLayout.Item>
 </TileLayout>
 ```

*/

/*doc
 ---
 title: Gutters
 name: 02_tile_layout_gutters
 parent: tile_layout_react
 ---

  You can make a TileLayout without gutters by passing noGutter as a prop.

 ```react_example
 <TileLayout noGutter columns={3}>
   <TileLayout.Item>
    <ClickableAltPanel>Hey</ClickableAltPanel>
   </TileLayout.Item>
   <TileLayout.Item>
    <ClickableAltPanel>What</ClickableAltPanel>
   </TileLayout.Item>
   <TileLayout.Item>
    <ClickableAltPanel>Hello</ClickableAltPanel>
   </TileLayout.Item>
 </TileLayout>
 ```

 */
module.exports = exports['default'];