<commit_before>import stylesheet from './stylesheet';
import StyleSheet from 'stilr';
import React, { Component, PropTypes as Type } from 'react';
import assign from 'react/lib/Object.assign';
import cloneWithProps from 'react/lib/cloneWithProps';
import { vertical, horizontal } from './utils/flex-alignments';
import { variables } from './defaults';
import doubleUnit from './utils/double-unit';
import { findCurrentBreakpoints } from './utils';

const styles = StyleSheet.create({
  base: {
    display: 'flex',
    flexWrap: 'wrap',
    listStyle: 'none',
    padding: 0,
    margin: `0 -${ variables.gutter } ${ doubleUnit(variables.gutter) }`
  },
  leftHorizontal: {
    justifyContent: horizontal.left
  },
  centerHorizontal: {
    justifyContent: horizontal.center
  },
  rightHorizontal: {
    justifyContent: horizontal.right
  },
  topVertical: {
    alignItems: vertical.top
  },
  centerVertical: {
    alignItems: vertical.center
  },
  bottomVertical: {
    alignItems: vertical.bottom
  }
}, stylesheet);


class Grid extends Component {
  static propTypes = {
    gutter: Type.string,
    flexCells: Type.bool,
    align: Type.oneOf(['top', 'center', 'bottom'])
  }

  static contextTypes = {
    breakpoints: Type.arrayOf( Type.string )
  }

  static childContextTypes = {
    breakpoints: Type.arrayOf( Type.string )
  }

  getChildContext() {
    return {
      breakpoints: this.context.breakpoints
        || this.props.breakpoints
        || findCurrentBreakpoints()
        || []
    };
  }

  render() {
    const {
      gutter,
      style,
      align,
      hAlign,
      flexCells,
      children,
      className,
      ...rest } = this.props;

    this.styles = assign(
      {},
      style,
      gutter
        ? { margin: `0 -${ gutter } ${ doubleUnit(gutter) }` }
        : null
    );

    const classes = [
      styles.base,
      className,
      align
        ? styles[align + 'Vertical']
        : null,
      hAlign
        ? styles[hAlign + 'Horizontal']
        : null
    ].filter(Boolean).join(' ');


    // TODO: Find a better context solution when React 0.14 lands.
    let parentProps = {};
    if (flexCells) parentProps.flex = true;
    const contextifiedChildren = React.Children.map(
      children, ( child ) => cloneWithProps( child, parentProps )
    );

    return (
      <div
        { ...rest }
        style={ this.styles }
        className={ classes }>
        { contextifiedChildren }
      </div>
    );<commit_msg>keep ref and key when cloning elements<commit_after>import stylesheet from './stylesheet';
import StyleSheet from 'stilr';
import React, { Component, PropTypes as Type } from 'react';
import assign from 'react/lib/Object.assign';
import cloneWithProps from 'react/lib/cloneWithProps';
import { vertical, horizontal } from './utils/flex-alignments';
import { variables } from './defaults';
import doubleUnit from './utils/double-unit';
import { findCurrentBreakpoints } from './utils';

const styles = StyleSheet.create({
  base: {
    display: 'flex',
    flexWrap: 'wrap',
    listStyle: 'none',
    padding: 0,
    margin: `0 -${ variables.gutter } ${ doubleUnit(variables.gutter) }`
  },
  leftHorizontal: {
    justifyContent: horizontal.left
  },
  centerHorizontal: {
    justifyContent: horizontal.center
  },
  rightHorizontal: {
    justifyContent: horizontal.right
  },
  topVertical: {
    alignItems: vertical.top
  },
  centerVertical: {
    alignItems: vertical.center
  },
  bottomVertical: {
    alignItems: vertical.bottom
  }
}, stylesheet);


class Grid extends Component {
  static propTypes = {
    gutter: Type.string,
    flexCells: Type.bool,
    align: Type.oneOf(['top', 'center', 'bottom'])
  }

  static contextTypes = {
    breakpoints: Type.arrayOf( Type.string )
  }

  static childContextTypes = {
    breakpoints: Type.arrayOf( Type.string )
  }

  getChildContext() {
    return {
      breakpoints: this.context.breakpoints
        || this.props.breakpoints
        || findCurrentBreakpoints()
        || []
    };
  }

  render() {
    const {
      gutter,
      style,
      align,
      hAlign,
      flexCells,
      children,
      className,
      ...rest } = this.props;

    this.styles = assign(
      {},
      style,
      gutter
        ? { margin: `0 -${ gutter } ${ doubleUnit(gutter) }` }
        : null
    );

    const classes = [
      styles.base,
      className,
      align
        ? styles[align + 'Vertical']
        : null,
      hAlign
        ? styles[hAlign + 'Horizontal']
        : null
    ].filter(Boolean).join(' ');


    // TODO: Find a better context solution when React 0.14 lands.
    const contextifiedChildren = React.Children.map(
      children, ( child ) => {
        return cloneWithProps( child, {
          flex: flexCells ? true : false,
          key: child.key,
          ref: child.ref
        });
      }
    );

    return (
      <div
        { ...rest }
        style={ this.styles }
        className={ classes }>
        { contextifiedChildren }
      </div>
    );
{'fraction_non_alphanumeric': 0.12790005948839978, 'fraction_numerical': 0.002379535990481856, 'mean_word_length': 2.3806970509383376, 'pattern_counts': {'":': 0, '<': 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': '880957', 'n_tokens_mistral': 1499, 'n_tokens_neox': 1473, 'n_words': 352}