<commit_before>import React from 'react';
import classSet from 'classnames';
import Const from './Const';
import Util from './util';
import DateFilter from './filters/Date';
import TextFilter from './filters/Text';
import SelectFilter from './filters/Select';
import NumberFilter from './filters/Number';

class TableHeaderColumn extends React.Component{

  constructor(props) {
    super(props);
    this.handleFilter = this.handleFilter.bind(this);
  }

  handleColumnClick(e){
    if(!this.props.dataSort)return;
    let order = this.props.sort == Const.SORT_DESC?Const.SORT_ASC:Const.SORT_DESC;
    this.props.onSort(order, this.props.dataField);
  }

  handleFilter(value, type) {
    this.props.filter.emitter.handleFilter(this.props.dataField, value, type);
  }

  getFilters() {
    switch (this.props.filter.type) {
      case Const.FILTER_TYPE.TEXT: {
        return <TextFilter {...this.props.filter} columnName={this.props.children} filterHandler={this.handleFilter} />;
      }
      case Const.FILTER_TYPE.SELECT: {
        return <SelectFilter {...this.props.filter} columnName={this.props.children} filterHandler={this.handleFilter} />;
      }
      case Const.FILTER_TYPE.NUMBER: {
        return <NumberFilter {...this.props.filter} columnName={this.props.children} filterHandler={this.handleFilter} />;
      }
      case Const.FILTER_TYPE.DATE: {
        return <DateFilter {...this.props.filter} columnName={this.props.children} filterHandler={this.handleFilter} />;
      }
      case Const.FILTER_TYPE.CUSTOM: {
        return this.props.filter.getElement(this.handleFilter, this.props.filter.customFilterParameters);
      }
    }
  }

  componentDidMount(){
    this.refs.innerDiv.setAttribute("data-field", this.props.dataField);
  }

  render(){
    var width = this.props.width!==null?parseInt(this.props.width):null;
    var thStyle = {
      textAlign: this.props.dataAlign,
      display: this.props.hidden?"none":null,
      width: width,
      maxWidth: width
    };

    const defaultCaret = (!this.props.dataSort) ? null : (
      <span className="order">
        <span className="dropdown">
          <span className="caret" style={{margin: '10px 0 10px 5px', color: '#ccc'}}></span>
        </span>
        <span className="dropup">
          <span className="caret" style={{margin: '10px 0', color: '#ccc'}}></span>
        </span>
      </span>
    );
    const sortCaret = this.props.sort ? Util.renderReactSortCaret(this.props.sort) : defaultCaret;

    var classes = this.props.className+" "+(this.props.dataSort?"sort-column":"");
    return(
      <th ref='header-col' className={classes} style={thStyle}>
        <div ref="innerDiv" className="th-inner table-header-column"
          onClick={this.handleColumnClick.bind(this)}>
          {this.props.children}{sortCaret}
        </div>
        {this.props.filter ? this.getFilters() : ''}
      </th>
    )
  }
}

var filterTypeArray = [];
for (let key in Const.FILTER_TYPE) {
  filterTypeArray.push(Const.FILTER_TYPE[key]);
}

TableHeaderColumn.propTypes = {
  dataField: React.PropTypes.string,
  dataAlign: React.PropTypes.string,
  dataSort: React.PropTypes.bool,
  onSort: React.PropTypes.func,
  dataFormat: React.PropTypes.func,
  isKey: React.PropTypes.bool,
  editable: React.PropTypes.any,
  hidden: React.PropTypes.bool,
  className:React.PropTypes.string,
  width: React.PropTypes.string,
  sortFunc: React.PropTypes.func,
  columnClassName: React.PropTypes.any,
  filterFormatted: React.PropTypes.bool,
  sort: React.PropTypes.string,
  formatExtraData: React.PropTypes.any,
  filter: React.PropTypes.shape({
    type: React.PropTypes.oneOf(filterTypeArray),
    delay: React.PropTypes.number,<commit_msg>use null instead empty string<commit_after>import React from 'react';
import classSet from 'classnames';
import Const from './Const';
import Util from './util';
import DateFilter from './filters/Date';
import TextFilter from './filters/Text';
import SelectFilter from './filters/Select';
import NumberFilter from './filters/Number';

class TableHeaderColumn extends React.Component{

  constructor(props) {
    super(props);
    this.handleFilter = this.handleFilter.bind(this);
  }

  handleColumnClick(e){
    if(!this.props.dataSort)return;
    let order = this.props.sort == Const.SORT_DESC?Const.SORT_ASC:Const.SORT_DESC;
    this.props.onSort(order, this.props.dataField);
  }

  handleFilter(value, type) {
    this.props.filter.emitter.handleFilter(this.props.dataField, value, type);
  }

  getFilters() {
    switch (this.props.filter.type) {
      case Const.FILTER_TYPE.TEXT: {
        return <TextFilter {...this.props.filter} columnName={this.props.children} filterHandler={this.handleFilter} />;
      }
      case Const.FILTER_TYPE.SELECT: {
        return <SelectFilter {...this.props.filter} columnName={this.props.children} filterHandler={this.handleFilter} />;
      }
      case Const.FILTER_TYPE.NUMBER: {
        return <NumberFilter {...this.props.filter} columnName={this.props.children} filterHandler={this.handleFilter} />;
      }
      case Const.FILTER_TYPE.DATE: {
        return <DateFilter {...this.props.filter} columnName={this.props.children} filterHandler={this.handleFilter} />;
      }
      case Const.FILTER_TYPE.CUSTOM: {
        return this.props.filter.getElement(this.handleFilter, this.props.filter.customFilterParameters);
      }
    }
  }

  componentDidMount(){
    this.refs.innerDiv.setAttribute("data-field", this.props.dataField);
  }

  render(){
    var width = this.props.width!==null?parseInt(this.props.width):null;
    var thStyle = {
      textAlign: this.props.dataAlign,
      display: this.props.hidden?"none":null,
      width: width,
      maxWidth: width
    };

    const defaultCaret = (!this.props.dataSort) ? null : (
      <span className="order">
        <span className="dropdown">
          <span className="caret" style={{margin: '10px 0 10px 5px', color: '#ccc'}}></span>
        </span>
        <span className="dropup">
          <span className="caret" style={{margin: '10px 0', color: '#ccc'}}></span>
        </span>
      </span>
    );
    const sortCaret = this.props.sort ? Util.renderReactSortCaret(this.props.sort) : defaultCaret;

    var classes = this.props.className+" "+(this.props.dataSort?"sort-column":"");
    return(
      <th ref='header-col' className={classes} style={thStyle}>
        <div ref="innerDiv" className="th-inner table-header-column"
          onClick={this.handleColumnClick.bind(this)}>
          {this.props.children}{sortCaret}
        </div>
        {this.props.filter ? this.getFilters() : null}
      </th>
    )
  }
}

var filterTypeArray = [];
for (let key in Const.FILTER_TYPE) {
  filterTypeArray.push(Const.FILTER_TYPE[key]);
}

TableHeaderColumn.propTypes = {
  dataField: React.PropTypes.string,
  dataAlign: React.PropTypes.string,
  dataSort: React.PropTypes.bool,
  onSort: React.PropTypes.func,
  dataFormat: React.PropTypes.func,
  isKey: React.PropTypes.bool,
  editable: React.PropTypes.any,
  hidden: React.PropTypes.bool,
  className:React.PropTypes.string,
  width: React.PropTypes.string,
  sortFunc: React.PropTypes.func,
  columnClassName: React.PropTypes.any,
  filterFormatted: React.PropTypes.bool,
  sort: React.PropTypes.string,
  formatExtraData: React.PropTypes.any,
  filter: React.PropTypes.shape({
    type: React.PropTypes.oneOf(filterTypeArray),
    delay: React.PropTypes.number,
{'fraction_non_alphanumeric': 0.14473684210526316, 'fraction_numerical': 0.0024167561761546724, 'mean_word_length': 3.5063520871143377, 'pattern_counts': {'":': 4, '<': 39, '<?xml version=': 0, '>': 39, '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': '1326223', 'n_tokens_mistral': 2335, 'n_tokens_neox': 2314, 'n_words': 410}