<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import ReactHintFactory from 'react-hint';
import { FormattedMessage, intlShape } from 'react-intl';
import classNames from 'classnames';

import FlexContainer from 'primitives/container/flex-container';
import Header, { HeaderType } from 'primitives/text/header';
import Input from 'primitives/form/input';

import { Check, X, Edit3, MoreHorizontal, EyeOff } from 'constants/icons';
import { LAYER_NAME_LENGTH } from 'constants/defaults';
import './style.css';

const ReactHint = ReactHintFactory(React);

export default function RegionRow({
  intl,
  isShared,
  regionId,
  region,
  regionForm,
  colorPicker,
  regionPaint,
  onDelete,
  updateRegionForm,
  initializeRegionForm,
  cancelRegionForm,
  submitRegionForm,
  openColorPicker,
  beginRegionPaint,
  closeRegionPaint,
  updateRegion,
}) {
  if (!regionId && !regionForm) {
    return null;
  } else if (!regionId || regionId === (regionForm || {}).regionId) {
    const isOutOfRange = regionForm.name.length > 40;
    return (
      <FlexContainer className="RegionRow" align="center">
        <Check
          className={!isOutOfRange ? 'RegionRow-Icon' : 'RegionRow-Close'}
          size={25}
          onClick={() => {
            if (!isOutOfRange) {
              submitRegionForm();
            }
          }}
        />
        <X
          className="RegionRow-Close"
          size={25}
          onClick={() => cancelRegionForm()}
        />
        <Input
          value={regionForm.name}
          error={isOutOfRange}
          placeholder={intl.formatMessage(
            { id: 'misc.nameLimit' },
            { num: LAYER_NAME_LENGTH },
          )}
          onChange={({ target }) => updateRegionForm({ name: target.value })}
        />
      </FlexContainer>
    );
  }

  const onRenderContent = () => (
    <FlexContainer
      className="RegionRow-OptionDropdown--content"
      direction="column"
    >
      <div
        className="RegionRow-Option"
        onClick={() => updateRegion(regionId, { isHidden: !region.isHidden })}
      >
        <FormattedMessage
          id={region.isHidden ? 'misc.showEntity' : 'misc.hideEntity'}
          values={{ entity: intl.formatMessage({ id: 'misc.region' }) }}
        />
      </div>
      <div
        className="RegionRow-Option"
        onClick={() => initializeRegionForm(regionId)}
      >
        <FormattedMessage id="misc.editName" />
      </div>
      <div className="RegionRow-Option" onClick={() => onDelete(regionId)}>
        <FormattedMessage id="misc.delete" />
      </div>
    </FlexContainer>
  );

  const drodownAttr = `data-options-${regionId.toLowerCase()}`;

  let hidden = null;
  if (region.isHidden) {
    hidden = <EyeOff className="RegionRow-HiddenIcon" size={18} />;
  }

  let paintIcon;
  let moreIcon;
  if (!isShared) {
    moreIcon = (
      <MoreHorizontal
        {...{ [drodownAttr]: true }}
        className="RegionRow-OtherActions"
        size={25}
      />
    );
    paintIcon = (
      <Edit3
        className="RegionRow-Icon"
        size={20}
        onClick={() => beginRegionPaint(regionId)}
      />
    );
  } else if (regionId === regionPaint) {
    paintIcon = (
      <X
        data-paint={intl.formatMessage({ id: 'misc.selectToPaint' })}
        className="RegionRow-Close"
        size={20}
        onClick={() => closeRegionPaint()}
      />
    );
  }

  return (
    <FlexContainer className="RegionRow" align="center">
      {paintIcon}
      <span
        data-color
        style={{ backgroundColor: region.color }}
        onClick={() =>
          colorPicker !== regionId ? openColorPicker(regionId) : undefined
        }
        className="RegionRow-Color"
      />
      <Header
        type={HeaderType.header4}<commit_msg>Fix paint icon switching in region row<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import ReactHintFactory from 'react-hint';
import { FormattedMessage, intlShape } from 'react-intl';
import classNames from 'classnames';

import FlexContainer from 'primitives/container/flex-container';
import Header, { HeaderType } from 'primitives/text/header';
import Input from 'primitives/form/input';

import { Check, X, Edit3, MoreHorizontal, EyeOff } from 'constants/icons';
import { LAYER_NAME_LENGTH } from 'constants/defaults';
import './style.css';

const ReactHint = ReactHintFactory(React);

export default function RegionRow({
  intl,
  isShared,
  regionId,
  region,
  regionForm,
  colorPicker,
  regionPaint,
  onDelete,
  updateRegionForm,
  initializeRegionForm,
  cancelRegionForm,
  submitRegionForm,
  openColorPicker,
  beginRegionPaint,
  closeRegionPaint,
  updateRegion,
}) {
  if (!regionId && !regionForm) {
    return null;
  } else if (!regionId || regionId === (regionForm || {}).regionId) {
    const isOutOfRange = regionForm.name.length > 40;
    return (
      <FlexContainer className="RegionRow" align="center">
        <Check
          className={!isOutOfRange ? 'RegionRow-Icon' : 'RegionRow-Close'}
          size={25}
          onClick={() => {
            if (!isOutOfRange) {
              submitRegionForm();
            }
          }}
        />
        <X
          className="RegionRow-Close"
          size={25}
          onClick={() => cancelRegionForm()}
        />
        <Input
          value={regionForm.name}
          error={isOutOfRange}
          placeholder={intl.formatMessage(
            { id: 'misc.nameLimit' },
            { num: LAYER_NAME_LENGTH },
          )}
          onChange={({ target }) => updateRegionForm({ name: target.value })}
        />
      </FlexContainer>
    );
  }

  const onRenderContent = () => (
    <FlexContainer
      className="RegionRow-OptionDropdown--content"
      direction="column"
    >
      <div
        className="RegionRow-Option"
        onClick={() => updateRegion(regionId, { isHidden: !region.isHidden })}
      >
        <FormattedMessage
          id={region.isHidden ? 'misc.showEntity' : 'misc.hideEntity'}
          values={{ entity: intl.formatMessage({ id: 'misc.region' }) }}
        />
      </div>
      <div
        className="RegionRow-Option"
        onClick={() => initializeRegionForm(regionId)}
      >
        <FormattedMessage id="misc.editName" />
      </div>
      <div className="RegionRow-Option" onClick={() => onDelete(regionId)}>
        <FormattedMessage id="misc.delete" />
      </div>
    </FlexContainer>
  );

  const drodownAttr = `data-options-${regionId.toLowerCase()}`;

  let hidden = null;
  if (region.isHidden) {
    hidden = <EyeOff className="RegionRow-HiddenIcon" size={18} />;
  }

  let paintIcon;
  let moreIcon;
  if (!isShared) {
    moreIcon = (
      <MoreHorizontal
        {...{ [drodownAttr]: true }}
        className="RegionRow-OtherActions"
        size={25}
      />
    );
    paintIcon = (
      <Edit3
        className="RegionRow-Icon"
        size={20}
        onClick={() => beginRegionPaint(regionId)}
      />
    );
    if (regionId === regionPaint) {
      paintIcon = (
        <X
          data-paint={intl.formatMessage({ id: 'misc.selectToPaint' })}
          className="RegionRow-Close"
          size={20}
          onClick={() => closeRegionPaint()}
        />
      );
    }
  }

  return (
    <FlexContainer className="RegionRow" align="center">
      {paintIcon}
      <span
        data-color
        style={{ backgroundColor: region.color }}
        onClick={() =>
          colorPicker !== regionId ? openColorPicker(regionId) : undefined
        }
        className="RegionRow-Color"
      />
      <Header
        type={HeaderType.header4}
{'fraction_non_alphanumeric': 0.13838120104438642, 'fraction_numerical': 0.004438642297650131, 'mean_word_length': 2.4385098743267504, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 69, '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': '3836437', 'n_tokens_mistral': 2266, 'n_tokens_neox': 2260, 'n_words': 434}