<commit_before>import React from 'react'
import classNames from 'classnames'

import styles from './styles.styl'

const ModalTitle = ({ title }) =>
  (
    <h2 className={styles['coz-modal-title']}>{title}</h2>
  )

const ModalCross = ({ withCross, secondaryAction, secondaryText }) =>
  withCross &&
  (
    <button
      className={classNames('coz-btn', 'coz-btn--close', styles['coz-btn-modal-close'])}
      onClick={secondaryAction}
      >
      <span className='coz-hidden'>{secondaryText}</span>
    </button>
)

const ModalDescription = ({ description }) =>
  description &&
  (
    <div className={classNames(styles['coz-modal-content'], styles['coz-description'])}>
      {description}
    </div>
  )

const ModalButtons = ({ secondaryText, secondaryAction, secondaryType, primaryText, primaryAction, primaryType }) => {
  const displayPrimary = primaryText && primaryAction
  const displaySecondary = secondaryText && secondaryAction
  return (displaySecondary || displayPrimary) &&
    (
      <div className={classNames(styles['coz-modal-content'], styles['coz-modal-buttons'])}>
        { displaySecondary &&
          <button className={classNames('coz-btn', 'coz-btn--' + secondaryType)} onClick={secondaryAction}>
            {secondaryText}
          </button>
        }
        { displayPrimary &&
          <button className={classNames('coz-btn', 'coz-btn--' + primaryType)} onClick={primaryAction}>
            {primaryText}
          </button>
        }
      </div>
    )
}

const Modal = (props) => {
  const children = props.children
  return (
    <div className={styles['coz-modal-container']}>
      <div className={styles['coz-overlay']}>
        <div className={styles['coz-modal']}>
          <ModalTitle {...props} />
          <ModalCross {...props} />
          <ModalDescription {...props} />
          { children }
          <ModalButtons {...props} />
        </div>
      </div>
    </div>
  )
}

Modal.propTypes = {
  title: React.PropTypes.string.isRequired,
  description: React.PropTypes.node,
  secondaryType: React.PropTypes.string,
  secondaryText: React.PropTypes.string,
  secondaryAction: React.PropTypes.func,
  primaryType: React.PropTypes.string,
  primaryText: React.PropTypes.string,
  primaryAction: React.PropTypes.func,
  withCross: React.PropTypes.bool
}

Modal.defaultProps = {
  primaryType: 'secondary',<commit_msg>feat: add modal secondaryAction on outside click event :sparkles:<commit_after>import React from 'react'
import classNames from 'classnames'

import styles from './styles.styl'

const ModalTitle = ({ title }) =>
  (
    <h2 className={styles['coz-modal-title']}>{title}</h2>
  )

const ModalCross = ({ withCross, secondaryAction, secondaryText }) =>
  withCross &&
  (
    <button
      className={classNames('coz-btn', 'coz-btn--close', styles['coz-btn-modal-close'])}
      onClick={secondaryAction}
      >
      <span className='coz-hidden'>{secondaryText}</span>
    </button>
)

const ModalDescription = ({ description }) =>
  description &&
  (
    <div className={classNames(styles['coz-modal-content'], styles['coz-description'])}>
      {description}
    </div>
  )

const ModalButtons = ({ secondaryText, secondaryAction, secondaryType, primaryText, primaryAction, primaryType }) => {
  const displayPrimary = primaryText && primaryAction
  const displaySecondary = secondaryText && secondaryAction
  return (displaySecondary || displayPrimary) &&
    (
      <div className={classNames(styles['coz-modal-content'], styles['coz-modal-buttons'])}>
        { displaySecondary &&
          <button className={classNames('coz-btn', 'coz-btn--' + secondaryType)} onClick={secondaryAction}>
            {secondaryText}
          </button>
        }
        { displayPrimary &&
          <button className={classNames('coz-btn', 'coz-btn--' + primaryType)} onClick={primaryAction}>
            {primaryText}
          </button>
        }
      </div>
    )
}

const Modal = (props) => {
  const children = props.children

  const onOutsideClick = (event) => {
    if (event.target.className === styles['coz-overlay']) props.secondaryAction()
  }

  return (
    <div className={styles['coz-modal-container']}>
      <div onClick={onOutsideClick} className={styles['coz-overlay']}>
        <div className={styles['coz-modal']}>
          <ModalTitle {...props} />
          <ModalCross {...props} />
          <ModalDescription {...props} />
          { children }
          <ModalButtons {...props} />
        </div>
      </div>
    </div>
  )
}

Modal.propTypes = {
  title: React.PropTypes.string.isRequired,
  description: React.PropTypes.node,
  secondaryType: React.PropTypes.string,
  secondaryText: React.PropTypes.string,
  secondaryAction: React.PropTypes.func,
  primaryType: React.PropTypes.string,
  primaryText: React.PropTypes.string,
  primaryAction: React.PropTypes.func,
  withCross: React.PropTypes.bool
}

Modal.defaultProps = {
  primaryType: 'secondary',
{'fraction_non_alphanumeric': 0.15372200927980634, 'fraction_numerical': 0.0008069396812588259, 'mean_word_length': 3.201694915254237, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 62, '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': '2092108', 'n_tokens_mistral': 1462, 'n_tokens_neox': 1456, 'n_words': 267}