<commit_before>import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classnames from 'classnames';
import ListStyles from 'styles/components/map/item-list.scss';
import Toggle from 'components/Shared/Toggle';
import IconStyles from 'styles/icons.scss';
import PencilIcon from '-!babel-loader!svg-react-loader!assets/icons/pencil.svg?name=PencilIcon';
import DeleteIcon from '-!babel-loader!svg-react-loader!assets/icons/delete.svg?name=DeleteIcon';

class FilterGroupItem extends Component {
  constructor(props) {
    super(props);

    this.onClickFilterGroupEdit = this.onClickFilterGroupEdit.bind(this);
    this.onClickFilterGroupDelete = this.onClickFilterGroupDelete.bind(this);
  }

  onChangeFilterGroupVisibility() {
    // TODO: hide quick edits and such

    this.props.toggleFilterGroupVisibility(this.props.index);
  }

  onClickFilterGroupDelete() {
    this.props.deleteFilterGroup(this.props.index);
  }

  onClickFilterGroupEdit() {
    this.props.editFilterGroup(this.props.index);
  }

  render() {
    const actionIcons = (
      <ul className={ListStyles.itemOptionList} >
        <li
          className={ListStyles.itemOptionItem}
          onClick={this.onClickFilterGroupEdit}
        >
          <PencilIcon className={IconStyles.pencilIcon} />
        </li >
        <li
          className={ListStyles.itemOptionItem}
          onClick={this.onClickFilterGroupDelete}
        >
          <DeleteIcon className={IconStyles.deleteBucketIcon} />
        </li >
      </ul >
    );

    return (
      <li
        className={ListStyles.listItem}
      >
        <Toggle
          on={this.props.filterGroup.visible}
          color={this.props.filterGroup.color}
          onToggled={() => this.onChangeFilterGroupVisibility()}
        />
        <input
          className={classnames(ListStyles.itemName, { [ListStyles.itemRename]: this.props.isFilterGroupQuickEditMode })}
          onChange={e => this.onChangeLayerLabel(e.currentTarget.value)}
          readOnly={!this.props.isFilterGroupQuickEditMode}
          value={this.props.filterGroup.label}
        />
        {actionIcons}
      </li >
    );
  }
}

FilterGroupItem.propTypes = {
  index: PropTypes.number,
  filterGroup: PropTypes.object,
  isFilterGroupQuickEditMode: PropTypes.bool, // if currently editing this filter group
  editFilterGroup: PropTypes.func,
  deleteFilterGroup: PropTypes.func,
  toggleFilterGroupVisibility: PropTypes.func
};

FilterGroupItem.defaultProps = {
  isFilterGroupQuickEditMode: false
};

export default FilterGroupItem;
<commit_msg>Fix height of filter items<commit_after>import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classnames from 'classnames';
import ListStyles from 'styles/components/map/item-list.scss';
import Toggle from 'components/Shared/Toggle';
import IconStyles from 'styles/icons.scss';
import PencilIcon from '-!babel-loader!svg-react-loader!assets/icons/pencil.svg?name=PencilIcon';
import DeleteIcon from '-!babel-loader!svg-react-loader!assets/icons/delete.svg?name=DeleteIcon';

class FilterGroupItem extends Component {
  constructor(props) {
    super(props);

    this.onClickFilterGroupEdit = this.onClickFilterGroupEdit.bind(this);
    this.onClickFilterGroupDelete = this.onClickFilterGroupDelete.bind(this);
  }

  onChangeFilterGroupVisibility() {
    // TODO: hide quick edits and such

    this.props.toggleFilterGroupVisibility(this.props.index);
  }

  onClickFilterGroupDelete() {
    this.props.deleteFilterGroup(this.props.index);
  }

  onClickFilterGroupEdit() {
    this.props.editFilterGroup(this.props.index);
  }

  render() {
    const actionIcons = (
      <ul className={ListStyles.itemOptionList} >
        <li
          className={ListStyles.itemOptionItem}
          onClick={this.onClickFilterGroupEdit}
        >
          <PencilIcon className={IconStyles.pencilIcon} />
        </li >
        <li
          className={ListStyles.itemOptionItem}
          onClick={this.onClickFilterGroupDelete}
        >
          <DeleteIcon className={IconStyles.deleteBucketIcon} />
        </li >
      </ul >
    );

    return (
      <li
        className={classnames(ListStyles.listItem, ListStyles._fixed)}
      >
        <Toggle
          on={this.props.filterGroup.visible}
          color={this.props.filterGroup.color}
          onToggled={() => this.onChangeFilterGroupVisibility()}
        />
        <input
          className={classnames(ListStyles.itemName, { [ListStyles.itemRename]: this.props.isFilterGroupQuickEditMode })}
          onChange={e => this.onChangeLayerLabel(e.currentTarget.value)}
          readOnly={!this.props.isFilterGroupQuickEditMode}
          value={this.props.filterGroup.label}
        />
        {actionIcons}
      </li >
    );
  }
}

FilterGroupItem.propTypes = {
  index: PropTypes.number,
  filterGroup: PropTypes.object,
  isFilterGroupQuickEditMode: PropTypes.bool, // if currently editing this filter group
  editFilterGroup: PropTypes.func,
  deleteFilterGroup: PropTypes.func,
  toggleFilterGroupVisibility: PropTypes.func
};

FilterGroupItem.defaultProps = {
  isFilterGroupQuickEditMode: false
};

export default FilterGroupItem;

{'fraction_non_alphanumeric': 0.11183454615090004, 'fraction_numerical': 0.0, 'mean_word_length': 3.363408521303258, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 31, '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': '3824550', 'n_tokens_mistral': 1495, 'n_tokens_neox': 1527, 'n_words': 237}