<commit_before>const React = require('react');
const classnames = require('classnames');
import {mergeProps} from 'pui-react-helpers';

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

      for (let breakpoint in columns) {
        if (columns.hasOwnProperty(breakpoint)) {
          classes.push(`tile-layout-${breakpoint}-${columns[breakpoint]}`);
        }
      }

      return classes;
    } else {
      return `tile-layout-xs-${columns}`;
    }
  },
  render() {
    const {children, columns, noGutter, ...others} = this.props;


    const classes = classnames(
      this.getColumnClasses(columns),
      noGutter ? null : 'tile-gutter',
      'tile-layout'
    );
    const props = mergeProps({className: classes}, ...others);
    return (
      <div {...props}>
        {children}
      </div>
    );
  }
});

TileLayout.Item = React.createClass({
  render() {
    return (
      <div {...mergeProps({className: 'tile-item'}, this.props)}></div>
    );
  }
});

export default TileLayout;

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

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

 Require the component:

 ```<commit_msg>chore(tile-layout): add javadocs<commit_after>const React = require('react');
const classnames = require('classnames');
import {mergeProps} from '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('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)
 */
const TileLayout = React.createClass({
  propTypes: {
    columns: React.PropTypes.oneOfType([
      React.PropTypes.number,
      React.PropTypes.object
    ]),
    noGutter: React.PropTypes.bool
  },
  getColumnClasses(columns) {
    if (columns instanceof Object) {
      const classes = [];

      for (let breakpoint in columns) {
        if (columns.hasOwnProperty(breakpoint)) {
          classes.push(`tile-layout-${breakpoint}-${columns[breakpoint]}`);
        }
      }

      return classes;
    } else {
      return `tile-layout-xs-${columns}`;
    }
  },
  render() {
    const {children, columns, noGutter, ...others} = this.props;


    const classes = classnames(
      this.getColumnClasses(columns),
      noGutter ? null : 'tile-gutter',
      'tile-layout'
    );
    const props = mergeProps({className: classes}, ...others);
    return (
      <div {...props}>
        {children}
      </div>
    );
  }
});

/**
 * @component TileLayout.Item
 * @description Wrapper element for items in a tile layout
 *
 * @example ```js
 * var TileLayout = require('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({
  render() {
    return (
      <div {...mergeProps({className: 'tile-item'}, this.props)}></div>
    );
  }
});

export default TileLayout;

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

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

 Require the component:

 ```
{'fraction_non_alphanumeric': 0.150416044378067, 'fraction_numerical': 0.0004267121826328142, 'mean_word_length': 2.543461829176115, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '818060', 'n_tokens_mistral': 1462, 'n_tokens_neox': 1457, 'n_words': 322}