<commit_before>import React, { Component } from 'react';
import * as ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import { defineMessages, injectIntl, intlShape } from 'react-intl';
import { CustomPicker, CirclePicker, ChromePicker } from 'react-color';
import { Manager, Reference, Popper } from 'react-popper';

import { COLORS, CIRCLE_SIZE, CIRCLE_SPACING, CIRCLE_PICKER_WIDTH } from './colorPickerSettings';

import styles from './colorPicker.scss';

const cx = classNames.bind(styles);

const messages = defineMessages({
  pickSwatch: {
    id: 'ColorPicker.pickSwatch',
    defaultMessage: 'Pick a swatch',
  },
  selectColor: {
    id: 'ColorPicker.selectColor',
    defaultMessage: 'Select your color',
  },
});

@injectIntl
class ColorPickerComponent extends Component {
  static propTypes = {
    hex: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    intl: intlShape.isRequired,
  };

  state = {
    opened: false,
  };

  toggleColorPicker = () => {
    this.setState({ opened: !this.state.opened });
  };

  render() {
    const { hex, onChange, intl } = this.props;
    const { opened } = this.state;

    return (
      <Manager>
        <Reference>
          {({ ref }) => (
            <button
              type="button"
              ref={ref}
              className={cx('control', { 'control-opened': opened })}
              onClick={this.toggleColorPicker}
            >
              <span className={cx('color-marker')} style={{ backgroundColor: hex }} />
            </button>
          )}
        </Reference>
        {opened &&
          ReactDOM.createPortal(
            <Popper placement="bottom-start">
              {({ ref, style, placement }) => (
                <div
                  className={cx('color-picker')}
                  ref={ref}
                  style={style}
                  data-placement={placement}
                  onClick={(e) => e.stopPropagation()}<commit_msg>EPMRPP-38613: part of EPMRPP-33317, close color picker when click outside<commit_after>import React, { Component } from 'react';
import * as ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import { defineMessages, injectIntl, intlShape } from 'react-intl';
import { CustomPicker, CirclePicker, ChromePicker } from 'react-color';
import { Manager, Reference, Popper } from 'react-popper';

import { COLORS, CIRCLE_SIZE, CIRCLE_SPACING, CIRCLE_PICKER_WIDTH } from './colorPickerSettings';

import styles from './colorPicker.scss';

const cx = classNames.bind(styles);

const messages = defineMessages({
  pickSwatch: {
    id: 'ColorPicker.pickSwatch',
    defaultMessage: 'Pick a swatch',
  },
  selectColor: {
    id: 'ColorPicker.selectColor',
    defaultMessage: 'Select your color',
  },
});

@injectIntl
class ColorPickerComponent extends Component {
  static propTypes = {
    hex: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    intl: intlShape.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      opened: false,
    };

    this.pickerNode = null;
    this.controlNode = null;
  }

  componentDidMount() {
    document.addEventListener('click', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleClickOutside);
  }

  handleClickOutside = (e) => {
    if (
      this.pickerNode &&
      !this.pickerNode.contains(e.target) &&
      this.controlNode &&
      !this.controlNode.contains(e.target)
    ) {
      this.setState({ opened: false });
    }
  };

  toggleColorPicker = () => {
    this.setState({ opened: !this.state.opened });
  };

  render() {
    const { hex, onChange, intl } = this.props;
    const { opened } = this.state;

    return (
      <Manager>
        <Reference>
          {({ ref }) => (
            <button
              type="button"
              ref={(node) => {
                ref(node);
                this.controlNode = node;
              }}
              className={cx('control', { 'control-opened': opened })}
              onClick={this.toggleColorPicker}
            >
              <span className={cx('color-marker')} style={{ backgroundColor: hex }} />
            </button>
          )}
        </Reference>
        {opened &&
          ReactDOM.createPortal(
            <Popper
              innerRef={(node) => {
                this.pickerNode = node;
              }}
              placement="bottom-start"
            >
              {({ ref, style, placement }) => (
                <div
                  className={cx('color-picker')}
                  ref={ref}
                  style={style}
                  data-placement={placement}
{'fraction_non_alphanumeric': 0.13234371733221828, 'fraction_numerical': 0.0020907380305247754, 'mean_word_length': 2.2834591626630063, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 27, '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': '5038742', 'n_tokens_mistral': 1386, 'n_tokens_neox': 1353, 'n_words': 290}