<commit_before>import React, { PropTypes } from 'react';
import classNames from 'classnames';
import Flex from '../flex';
import Carousel from '../carousel';

function noop() {}

export default class Grid extends React.Component {
  static propTypes = {
    prefixCls: PropTypes.string,
    data: PropTypes.array,
    onClick: PropTypes.func,
    hasLine: PropTypes.bool,
    needActive: PropTypes.bool,
    isCarousel: PropTypes.bool,
  };

  static defaultProps = {
    prefixCls: 'am-grid',
    data: [],
    onClick: noop,
    hasLine: true,
    needActive: true,
    isCarousel: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      hover: false,
    };
  }

  componentWillMount() {
    this.clientWidth = document.documentElement.clientWidth;
  }

  onClick = (el, index) => {
    this.props.onClick(el, index);
  };

  onTouchStart = (index) => {
    if (this.props.needActive) {
      this.setState({
        hover: true,
        hoverIndex: index
      });
    }
  };

  onTouchEnd = () => {
    if (this.props.needActive) {
      this.setState({
        hover: false,
      });
    }
  };

  render() {
    let { className, data, prefixCls, hasLine, isCarousel, needActive, ...others } = this.props;

    const wrapCls = classNames({
      [prefixCls]: true,
      [`${prefixCls}-line`]: hasLine,
      [className]: className
    });

    const itemCls = classNames({
      [`${prefixCls}-item-hover`]: needActive,
    });

    const dataLength = data.length;

    const FlexCount = Math.ceil(dataLength / 4);

    let gridContent = [];
    let carouselContent = [];

    const flexItemStyle = {
      height: `${this.clientWidth / 4}px`,
      paddingTop: `${(this.clientWidth / 4 - 40) / 2}px`
    };

    for (let i = 0; i < FlexCount; i ++) {
      let flexContent = [];
      for (let j = 0; j < 4; j++) {
        if (i * 4 + j < dataLength) {
          flexContent.push(<Flex.Item
            className={itemCls}
            style={flexItemStyle}
            onClick={this.onClick.bind(this, data[i * 4 + j], (i * 4 + j))}
            key={`griditem-${i * 4 + j}`}
          >
            <div className={`${prefixCls}-icon`} style={{ backgroundImage: `url(${data[i * 4 + j].icon})` }} />
            <div className={`${prefixCls}-text`}>{data[i * 4 + j].text}</div>
          </Flex.Item>);
        } else {
          flexContent.push(<Flex.Item key={`griditem-${i * 4 + j}`} />);
        }
      }<commit_msg>fix grid style<commit_after>import React, { PropTypes } from 'react';
import classNames from 'classnames';
import Flex from '../flex';
import Carousel from '../carousel';

function noop() {}

export default class Grid extends React.Component {
  static propTypes = {
    prefixCls: PropTypes.string,
    data: PropTypes.array,
    onClick: PropTypes.func,
    hasLine: PropTypes.bool,
    needActive: PropTypes.bool,
    isCarousel: PropTypes.bool,
  };

  static defaultProps = {
    prefixCls: 'am-grid',
    data: [],
    onClick: noop,
    hasLine: true,
    needActive: true,
    isCarousel: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      hover: false,
    };
  }

  componentWillMount() {
    this.clientWidth = document.documentElement.clientWidth;
  }

  onClick = (el, index) => {
    this.props.onClick(el, index);
  };

  onTouchStart = (index) => {
    if (this.props.needActive) {
      this.setState({
        hover: true,
        hoverIndex: index
      });
    }
  };

  onTouchEnd = () => {
    if (this.props.needActive) {
      this.setState({
        hover: false,
      });
    }
  };

  render() {
    let { className, data, prefixCls, hasLine, isCarousel, needActive, ...others } = this.props;

    const wrapCls = classNames({
      [prefixCls]: true,
      [`${prefixCls}-line`]: hasLine,
      [className]: className
    });

    const itemCls = classNames({
      [`${prefixCls}-item-hover`]: needActive,
    });

    const dataLength = data.length;

    const FlexCount = Math.ceil(dataLength / 4);

    let gridContent = [];
    let carouselContent = [];

    const flexItemStyle = {
      height: `${this.clientWidth / 4}px`,
      paddingTop: `${(this.clientWidth / 4 - 40) / 2}px`
    };

    for (let i = 0; i < FlexCount; i ++) {
      let flexContent = [];
      for (let j = 0; j < 4; j++) {
        if (i * 4 + j < dataLength) {
          flexContent.push(<Flex.Item
            className={itemCls}
            style={flexItemStyle}
            onClick={this.onClick.bind(this, data[i * 4 + j], (i * 4 + j))}
            key={`griditem-${i * 4 + j}`}
          >
            <div className={`${prefixCls}-icon`} style={{ backgroundImage: `url(${data[i * 4 + j].icon})` }} />
            <div className={`${prefixCls}-text`}>{data[i * 4 + j].text}</div>
          </Flex.Item>);
        } else {
          flexContent.push(<Flex.Item style={flexItemStyle} key={`griditem-${i * 4 + j}`} />);
        }
      }
{'fraction_non_alphanumeric': 0.16372489348752284, 'fraction_numerical': 0.006492189085007101, 'mean_word_length': 2.282290279627164, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, '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': '6787124', 'n_tokens_mistral': 1659, 'n_tokens_neox': 1621, 'n_words': 355}