<commit_before>const React = require('react');

const Column = React.createClass({
  propTypes: {
    breakpointLarge: React.PropTypes.number,
    breakpointMedium: React.PropTypes.number,
    breakpointSmall: React.PropTypes.number,
    columnCount: React.PropTypes.number,
    columnLarge: React.PropTypes.number,
    columnMedium: React.PropTypes.number,
    columnSmall: React.PropTypes.number,
    offsetLarge: React.PropTypes.number,
    offsetMedium: React.PropTypes.number,
    offsetSmall: React.PropTypes.number,
    orderLarge: React.PropTypes.number,
    orderMediumpoint: React.PropTypes.number,
    orderSmall: React.PropTypes.number,
    style: React.PropTypes.object
  },

  getDefaultProps () {
    return {
      breakpointLarge: 1200,
      breakpointMedium: 750,
      columnCount: 12,
      columnLarge: 12,
      columnMedium: 12,
      columnSmall: 12,
      offsetLarge: 0,
      offsetMedium: 0,
      offsetSmall: 0
    };
  },

  getInitialState () {
    return {
      screenWidth: this._getScreenWidth()
    };
  },

  componentDidMount () {
    window.addEventListener('resize', this._handleWindowResize);
  },

  componentWillUnmount () {
    window.removeEventListener('resize', this._handleWindowResize);
  },

  _getScreenWidth () {
    const width = document.documentElement.clientWidth || document.body.clientWidth;
    let screenWidth = 'Small';

    if (width >= this.props.breakpointLarge) {
      screenWidth = 'Large';
    } else if (width >= this.props.breakpointMedium) {
      screenWidth = 'Medium';
    }

    return screenWidth;
  },

  _handleWindowResize () {
    this.setState({
      screenWidth: this._getScreenWidth()
    });
  },

  render () {
    const styles = this.styles();

    return (
      <div style={styles.component}>
        {this.props.children}
      </div>
    );
  },

  styles () {
    return {
      component: Object.assign({}, {
        boxSizing: 'border-box',
        flexBasis: (this.props['column' + this.state.screenWidth] / this.props.columnCount * 100) + '%',
        flexGrow: 0,
        flexShrink: 0,
        marginLeft: (this.props['offset' + this.state.screenWidth] / this.props.columnCount * 100) + '%',
        order: this.props['order' + this.state.screenWidth],
        padding: '0 10px'
      }, this.props.style)
    };
  }
});

module.exports = Column;<commit_msg>add 0 option to column to hide<commit_after>const React = require('react');

const Column = React.createClass({
  propTypes: {
    breakpointLarge: React.PropTypes.number,
    breakpointMedium: React.PropTypes.number,
    breakpointSmall: React.PropTypes.number,
    columnCount: React.PropTypes.number,
    columnLarge: React.PropTypes.number,
    columnMedium: React.PropTypes.number,
    columnSmall: React.PropTypes.number,
    offsetLarge: React.PropTypes.number,
    offsetMedium: React.PropTypes.number,
    offsetSmall: React.PropTypes.number,
    orderLarge: React.PropTypes.number,
    orderMediumpoint: React.PropTypes.number,
    orderSmall: React.PropTypes.number,
    style: React.PropTypes.object
  },

  getDefaultProps () {
    return {
      breakpointLarge: 1200,
      breakpointMedium: 750,
      columnCount: 12,
      columnLarge: 12,
      columnMedium: 12,
      columnSmall: 12,
      offsetLarge: 0,
      offsetMedium: 0,
      offsetSmall: 0
    };
  },

  getInitialState () {
    return {
      screenWidth: this._getScreenWidth()
    };
  },

  componentDidMount () {
    window.addEventListener('resize', this._handleWindowResize);
  },

  componentWillUnmount () {
    window.removeEventListener('resize', this._handleWindowResize);
  },

  _getScreenWidth () {
    const width = document.documentElement.clientWidth || document.body.clientWidth;
    let screenWidth = 'Small';

    if (width >= this.props.breakpointLarge) {
      screenWidth = 'Large';
    } else if (width >= this.props.breakpointMedium) {
      screenWidth = 'Medium';
    }

    return screenWidth;
  },

  _handleWindowResize () {
    this.setState({
      screenWidth: this._getScreenWidth()
    });
  },

  render () {
    const styles = this.styles();

    return (
      <div style={styles.component}>
        {this.props['column' + this.state.screenWidth] ? this.props.children : null}
      </div>
    );
  },

  styles () {
    return {
      component: Object.assign({}, {
        boxSizing: 'border-box',
        flexBasis: (this.props['column' + this.state.screenWidth] / this.props.columnCount * 100) + '%',
        flexGrow: 0,
        flexShrink: 0,
        marginLeft: (this.props['offset' + this.state.screenWidth] / this.props.columnCount * 100) + '%',
        order: this.props['order' + this.state.screenWidth],
        padding: '0 10px'
      }, this.props.style)
    };
  }
});

module.exports = Column;
{'fraction_non_alphanumeric': 0.12949039264828738, 'fraction_numerical': 0.012322472848788638, 'mean_word_length': 2.8934959349593496, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 11, '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': '641063', 'n_tokens_mistral': 1533, 'n_tokens_neox': 1440, 'n_words': 264}