<commit_before>import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import elementType from 'prop-types-extra/lib/elementType';

import { bsClass, prefix, splitBsProps } from './utils/bootstrapUtils';
import { DEVICE_SIZES } from './utils/StyleConfig';

const column = PropTypes.oneOfType([
  PropTypes.oneOf(['auto']),
  PropTypes.number
]);

const propTypes = {
  componentClass: elementType,

  /**
   * The number of columns you wish to span
   *
   * for Extra small devices Phones (<576px)
   *
   * class-prefix `col-`
   */
  xs: column,

  /**
   * The number of columns you wish to span
   *
   * for Small devices Tablets (≥576px)
   *
   * class-prefix `col-sm-`
   */
  sm: column,

  /**
   * The number of columns you wish to span
   *
   * for Medium devices Desktops (≥768px)
   *
   * class-prefix `col-md-`
   */
  md: column,

  /**
   * The number of columns you wish to span
   *
   * for Large devices Desktops (≥992px)
   *
   * class-prefix `col-lg-`
   */
  lg: column,

  /**
   * The number of columns you wish to span
   *
   * for Large devices Desktops (≥1200px)
   *
   * class-prefix `col-xl-`
   */
  xl: column
};

const defaultProps = {
  componentClass: 'div'
};

class Col extends React.Component {
  render() {
    const { componentClass: Component, className, ...props } = this.props;
    const [bsProps, elementProps] = splitBsProps(props);

    const classes = [];

    DEVICE_SIZES.forEach(size => {
      const propValue = elementProps[size];

      if (propValue == null) return;

      if (size === 'xs') {
        // col and col-4
        classes.push(
          propValue === true
            ? bsProps.bsClass
            : prefix(bsProps, `-${propValue}`)
        );
      } else {
        // col-md-3
        classes.push(prefix(bsProps, `${size}-${propValue}`));
      }

      delete elementProps[size];
    });

    if (!classes.length) {
      classes.push(bsProps.bsClass); // plain 'col'
    }

    return (
      <Component {...elementProps} className={classNames(className, classes)} />
    );
  }
}

Col.propTypes = propTypes;
Col.defaultProps = defaultProps;

export default bsClass('col', Col);<commit_msg>V4: Fixing Col xs attribute not working (#3098)<commit_after>import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import elementType from 'prop-types-extra/lib/elementType';

import { bsClass, prefix, splitBsProps } from './utils/bootstrapUtils';
import { DEVICE_SIZES } from './utils/StyleConfig';

const column = PropTypes.oneOfType([
  PropTypes.oneOf(['auto']),
  PropTypes.number
]);

const propTypes = {
  componentClass: elementType,

  /**
   * The number of columns you wish to span
   *
   * for Extra small devices Phones (<576px)
   *
   * class-prefix `col-`
   */
  xs: column,

  /**
   * The number of columns you wish to span
   *
   * for Small devices Tablets (≥576px)
   *
   * class-prefix `col-sm-`
   */
  sm: column,

  /**
   * The number of columns you wish to span
   *
   * for Medium devices Desktops (≥768px)
   *
   * class-prefix `col-md-`
   */
  md: column,

  /**
   * The number of columns you wish to span
   *
   * for Large devices Desktops (≥992px)
   *
   * class-prefix `col-lg-`
   */
  lg: column,

  /**
   * The number of columns you wish to span
   *
   * for Large devices Desktops (≥1200px)
   *
   * class-prefix `col-xl-`
   */
  xl: column
};

const defaultProps = {
  componentClass: 'div'
};

class Col extends React.Component {
  render() {
    const { componentClass: Component, className, ...props } = this.props;
    const [bsProps, elementProps] = splitBsProps(props);

    const classes = [];

    DEVICE_SIZES.forEach(size => {
      const propValue = elementProps[size];

      if (propValue == null) return;

      if (size === 'xs') {
        // col and col-4
        classes.push(
          propValue === true
            ? bsProps.bsClass
            : prefix(bsProps, `${propValue}`)
        );
      } else {
        // col-md-3
        classes.push(prefix(bsProps, `${size}-${propValue}`));
      }

      delete elementProps[size];
    });

    if (!classes.length) {
      classes.push(bsProps.bsClass); // plain 'col'
    }

    return (
      <Component {...elementProps} className={classNames(className, classes)} />
    );
  }
}

Col.propTypes = propTypes;
Col.defaultProps = defaultProps;

export default bsClass('col', Col);
{'fraction_non_alphanumeric': 0.14004033161550528, 'fraction_numerical': 0.009186645753977145, 'mean_word_length': 2.5121951219512195, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, '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': '3767083', 'n_tokens_mistral': 1486, 'n_tokens_neox': 1417, 'n_words': 378}