<commit_before>/** GridRow.js mostly taken and inspired from Elemental UI.
 * used for Grid functionality
 * Copyright (c) 2016 Thinkmill Pty Ltd
 */

import React, { PropTypes } from "react";
import blacklist from "blacklist";
import A from "../constants";

/**
 * Component that handles Row part of a Grid system. Syntax is somewhat similar to bootstrap's grid class syntax.
 */
const GridRow = ({ gutter, ...props }) => {
  const rowStyle = {
    "display": "flex",
    "flexWrap": "wrap",
    "msFlexWrap": "wrap",
    "WebkitFlexWrap": "wrap",
    "marginLeft": gutter / -2,
    "marginRight": gutter / -2
  };

  const styles = blacklist(props, "className", "gutter", "style");

  return (
    <div
      {...styles}
      style={Object.assign(rowStyle, this.props.style)}
      className={this.props.className}
    />
  );
};

GridRow.propTypes = {
  "children": PropTypes.node,
  /**
   * input a css class name
   */
  "className": PropTypes.string,
  "gutter": PropTypes.number,
  "style": PropTypes.object
};

GridRow.defaultProps = { "gutter": A.width.gutter };

GridRow.styleguide = {
  "category": "Layout",
  "index": "4.4",
  "example": 
    `
<section><commit_msg>Use props instead of this.props.<commit_after>/** GridRow.js mostly taken and inspired from Elemental UI.
 * used for Grid functionality
 * Copyright (c) 2016 Thinkmill Pty Ltd
 */

import React, { PropTypes } from "react";
import blacklist from "blacklist";
import A from "../constants";

/**
 * Component that handles Row part of a Grid system. Syntax is somewhat similar to bootstrap's grid class syntax.
 */
const GridRow = ({ gutter, ...props }) => {
  const rowStyle = {
    "display": "flex",
    "flexWrap": "wrap",
    "msFlexWrap": "wrap",
    "WebkitFlexWrap": "wrap",
    "marginLeft": gutter / -2,
    "marginRight": gutter / -2
  };

  const styles = blacklist(props, "className", "gutter", "style");

  return (
    <div
      {...styles}
      style={Object.assign(rowStyle, props.style)}
      className={props.className}
    />
  );
};

GridRow.propTypes = {
  "children": PropTypes.node,
  /**
   * input a css class name
   */
  "className": PropTypes.string,
  "gutter": PropTypes.number,
  "style": PropTypes.object
};

GridRow.defaultProps = { "gutter": A.width.gutter };

GridRow.styleguide = {
  "category": "Layout",
  "index": "4.4",
  "example": 
    `
<section>
{'fraction_non_alphanumeric': 0.16111345423871784, 'fraction_numerical': 0.006748207507380852, 'mean_word_length': 3.228163992869875, 'pattern_counts': {'":': 28, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3131933', 'n_tokens_mistral': 772, 'n_tokens_neox': 763, 'n_words': 215}