<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from '../../Icon';

export default class TableHeaderCell extends Component {

  static propTypes = {
    children: PropTypes.node,
    scope: PropTypes.string,
    inputId: PropTypes.string,
    containerId: PropTypes.string,
    inputLabel: PropTypes.string,
    columnSort: PropTypes.bool
  }

  static defaultProps = {
    scope: 'col',
    columnSort: false
  }

  constructor(props) {
    super(props)

    this.state = {
      iconName: 'sortable-18'
    }
  }

  iconToggle = () => {
    const { iconName } = this.state;
    if (iconName === 'sortable-18') {
      this.setState({ iconName: 'sort-up-18' })
    } else if (iconName === 'sort-up-18') {
      this.setState({ iconName: 'sort-down-18' })
    } else if (iconName === 'sort-down-18') {
      this.setState({ iconName: 'sort-up-18' })
    }
  }

  checkAll = () => {
    const checkboxes = document.getElementsByTagName('input');
    for (let i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type === 'checkbox') {
        if (checkboxes[i].checked === false) {
          console.log('check');
          checkboxes[i].checked = true;
        } else {
          console.log('uncheck');
          checkboxes[i].checked = false;
        }
      }
    }
  }


  render() {
    const { children, scope, inputId, containerId, inputLabel, columnSort } = this.props;
    const { selectable } = this.context;
    const { iconName } = this.state;

    return (
      <th aria-sort={
        iconName === 'sort-up-18'
        ? 'ascending'
        : iconName === 'sort-down-18'
        ? 'descending'
        : null
      }>
        {
          selectable && !children
            ?  <div className="pe-checkbox" id={containerId} onChange={this.checkAll}>
                 <input type="checkbox" id={inputId} />
                 <label htmlFor={inputId}>{inputLabel}</label>
                 <span>
                   <Icon name="check-sm-18" />
                 </span>
               </div>
            : children
        }
        {
          columnSort &&
            <button type="button" className="pe-icon--btn" onClick={this.iconToggle}>
              <Icon name={iconName} />
            </button>
        }
      </th>
    )
  }
}

TableHeaderCell.contextTypes = {
  selectable: PropTypes.bool
}<commit_msg>chore: selectAll functionality, add EL's to handle keys<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from '../../Icon';

export default class TableHeaderCell extends Component {

  static propTypes = {
    children: PropTypes.node,
    scope: PropTypes.string,
    inputId: PropTypes.string,
    containerId: PropTypes.string,
    inputLabel: PropTypes.string,
    columnSort: PropTypes.bool
  }

  static defaultProps = {
    scope: 'col',
    columnSort: false
  }

  constructor(props) {
    super(props)

    this.state = {
      iconName: 'sortable-18'
    }

    this.selectAll = _selectAll.bind(this);
    this.handleKeys = _handleKeys.bind(this);
  }

  componentDidMount() {
    document.addEventListener('keydown', this.handleKeys);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeys);
  }

  iconToggle = () => {
    const { iconName } = this.state;
    if (iconName === 'sortable-18') {
      this.setState({ iconName: 'sort-up-18' })
    } else if (iconName === 'sort-up-18') {
      this.setState({ iconName: 'sort-down-18' })
    } else if (iconName === 'sort-down-18') {
      this.setState({ iconName: 'sort-up-18' })
    }
  }

  render() {
    const { children, scope, inputId, containerId, inputLabel, columnSort } = this.props;
    const { selectable } = this.context;
    const { iconName } = this.state;

    return (
      <th aria-sort={
        iconName === 'sort-up-18'
        ? 'ascending'
        : iconName === 'sort-down-18'
        ? 'descending'
        : null }
      >
        {
          selectable && !children
            ? <div className="pe-checkbox"
                   id={containerId}
                   onClick={this.selectAll}
                   onKeyDown={this.handleKeys}>
                <input type="checkbox" id={inputId} />
                <label htmlFor={inputId}>{inputLabel}</label>
                <span>
                  <Icon name="check-sm-18" />
                </span>
              </div>
            : children
        }
        {
          columnSort &&
            <button type="button" className="pe-icon--btn" onClick={this.iconToggle}>
              <Icon name={iconName} />
            </button>
        }
      </th>
    )
  }
}

TableHeaderCell.contextTypes = {
  selectable: PropTypes.bool
}

function _selectAll() {
  const checkboxes = document.getElementsByTagName('input');
  for (let i = 1; i < checkboxes.length; i++) {
    checkboxes[i].checked = checkboxes[0].checked;
  }
}

function _handleKeys(e) {
  if (e.which === 32) {
    this.selectAll;
  }
}
{'fraction_non_alphanumeric': 0.1454183266932271, 'fraction_numerical': 0.008964143426294821, 'mean_word_length': 2.0671960904092854, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 32, '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': '354356', 'n_tokens_mistral': 1555, 'n_tokens_neox': 1525, 'n_words': 306}