<commit_before>import React from "react";
import ArrowIcon from "../../../img/svg-icons/arrow-icon.svg";
import CheckIcon from "../../../img/svg-icons/check-icon.svg";
import { SvgIcon } from "../../util/svg-icon";

import css from "../../../css/portal-dashboard/custom-select.less";

interface IProps {
  dataCy: string;
  disableDropdown?: boolean;
  HeaderIcon: SvgIcon;
  isHeader?: boolean;
  items: SelectItem[];
  onChange: (value: string) => void;
  value?: string;
  trackEvent: (category: string, action: string, label: string) => void;
}

interface IState {
  value: string;
  showList: boolean;
}

export interface SelectItem {
  value: string;
  label: string;
}

export class CustomSelect extends React.PureComponent<IProps, IState> {
  private divRef = React.createRef<HTMLDivElement>();
  constructor(props: IProps) {
    super(props);
    this.state = {
      value: props.value || props.items[0].value,
      showList: false
    };
  }

  public componentDidMount() {
    document.addEventListener("mousedown", this.handleClick, false);
  }

  public componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClick, false);
  }

  public render() {
    return (
      <div className={css.customSelect} ref={this.divRef} data-cy={this.props.dataCy}>
        { this.renderHeader() }
        { this.renderList() }
      </div>
    );
  }

  private renderHeader = () => {
    const { items, HeaderIcon, value } = this.props;
    const currentValue = value || this.state.value;
    const currentItem = items.find(i => i.value === currentValue);
    const showListClass = this.state.showList ? css.showList : "";
    const useHeader = this.props.isHeader ? css.topHeader : "";
    const disabled = this.props.disableDropdown ? css.disabled : "";
    return (
      <div className={`${css.header} ${useHeader} ${showListClass} ${disabled}`} onClick={this.handleHeaderClick}>
        { <HeaderIcon className={`${css.icon} ${showListClass}`} /> }
        <div className={css.current}>{currentItem && currentItem.label}</div>
        { <ArrowIcon className={`${css.arrow} ${showListClass} ${disabled}`} /> }
      </div>
    );
  }

  private renderList = () => {
    const { items, value } = this.props;
    const currentValue = value || this.state.value;
    const useHeader = this.props.isHeader ? css.topHeader : "";
    return (
      <div className={`${css.list} ${useHeader} ${(this.state.showList ? css.show : "")}`}>
        { items && items.map((item: SelectItem, i: number) => {
          const currentClass = currentValue === item.value ? css.selected : "";
          return (
            <div
              key={`item ${i}`}
              className={`${css.listItem} ${currentClass}`}
              onClick={this.handleChange(item.value)}
              data-cy={`list-item-${item.label.toLowerCase().replace(/\ /g, "-")}`}
            >
              <CheckIcon className={`${css.check} ${currentClass}`} />
              <div>{item.label}</div>
            </div>
          );
        }) }
      </div>
    );
  }<commit_msg>Changes based on PR review<commit_after>import React from "react";
import ArrowIcon from "../../../img/svg-icons/arrow-icon.svg";
import CheckIcon from "../../../img/svg-icons/check-icon.svg";
import { SvgIcon } from "../../util/svg-icon";

import css from "../../../css/portal-dashboard/custom-select.less";

interface IProps {
  dataCy: string;
  disableDropdown?: boolean;
  HeaderIcon: SvgIcon;
  isHeader?: boolean;
  items: SelectItem[];
  onChange: (value: string) => void;
  value?: string;
  trackEvent: (category: string, action: string, label: string) => void;
}

interface IState {
  value: string;
  showList: boolean;
}

export interface SelectItem {
  value: string;
  label: string;
}

export class CustomSelect extends React.PureComponent<IProps, IState> {
  private divRef = React.createRef<HTMLDivElement>();
  constructor(props: IProps) {
    super(props);
    this.state = {
      value: props.value || props.items[0].value,
      showList: false
    };
  }

  public componentDidMount() {
    document.addEventListener("mousedown", this.handleClick, false);
  }

  public componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClick, false);
  }

  public render() {
    return (
      <div className={css.customSelect} ref={this.divRef} data-cy={this.props.dataCy}>
        { this.renderHeader() }
        { this.renderList() }
      </div>
    );
  }

  private renderHeader = () => {
    const { items, HeaderIcon, value } = this.props;
    const currentValue = value || this.state.value;
    const currentItem = items.find(i => i.value === currentValue);
    const showListClass = this.state.showList ? css.showList : "";
    const useHeader = this.props.isHeader ? css.topHeader : "";
    const disabled = this.props.disableDropdown ? css.disabled : "";
    return (
      <div className={`${css.header} ${useHeader} ${showListClass} ${disabled}`} onClick={this.handleHeaderClick}>
        { <HeaderIcon className={`${css.icon} ${showListClass}`} /> }
        <div className={css.current}>{currentItem?.label}</div>
        { <ArrowIcon className={`${css.arrow} ${showListClass} ${disabled}`} /> }
      </div>
    );
  }

  private renderList = () => {
    const { items, value } = this.props;
    const currentValue = value || this.state.value;
    const useHeader = this.props.isHeader ? css.topHeader : "";
    return (
      <div className={`${css.list} ${useHeader} ${(this.state.showList ? css.show : "")}`}>
        { items && items.map((item: SelectItem, i: number) => {
          const currentClass = currentValue === item.value ? css.selected : "";
          return (
            <div
              key={`item ${i}`}
              className={`${css.listItem} ${currentClass}`}
              onClick={this.handleChange(item.value)}
              data-cy={`list-item-${item.label.toLowerCase().replace(/\ /g, "-")}`}
            >
              <CheckIcon className={`${css.check} ${currentClass}`} />
              <div>{item.label}</div>
            </div>
          );
        }) }
      </div>
    );
  }
{'fraction_non_alphanumeric': 0.1707634706169624, 'fraction_numerical': 0.00032557382386456127, 'mean_word_length': 2.813780260707635, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 49, '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': '5556207', 'n_tokens_mistral': 1854, 'n_tokens_neox': 1872, 'n_words': 379}