<commit_before>// @flow

import styles from './ConfirmModal.css';
import React, { type ComponentType, type Node } from 'react';
import Modal from 'app/components/Modal';
import Button from '../Button';

type ConfirmModalProps = {
  onConfirm?: () => Promise<*>,
  onCancel?: () => Promise<*>,
  message: string,
  title: string,
  children: Node
};

export const ConfirmModal = ({
  message,
  onConfirm,
  onCancel,
  title
}: ConfirmModalProps) => (
  <div className={styles.overlay}>
    <div className={styles.confirmContainer}>
      <h2 className={styles.confirmTitle}>{title}</h2>
      <div className={styles.confirmMessage}>{message}</div>
      <div className={styles.buttonGroup}>
        <Button onClick={onCancel}>Avbryt</Button>
        <Button onClick={onConfirm}>Ja</Button>
      </div>
    </div>
  </div>
);

type State = {
  modalVisible: boolean
};

type withModalProps = {
  /* Close the modal after confirm promise is resolved*/
  closeOnConfirm?: boolean,
  /* Close the modal after confirm promise is resolved*/
  closeOnCancel?: boolean,
  children: Node
};

export default function withModal<Props>(
  WrappedComponent: ComponentType<Props>
) {
  const displayName =
    WrappedComponent.displayName || WrappedComponent.name || 'Unknown';

  return class extends React.Component<
    withModalProps & ConfirmModalProps,
    State
  > {
    static displayName = `WithModal(${displayName})`;
    state = { modalVisible: false };

    toggleModal = () => {
      this.setState(state => ({
        modalVisible: !state.modalVisible
      }));
    };

    render() {
      const {
        onConfirm = () => Promise.resolve(),
        onCancel = () => Promise.resolve(),
        message,
        title,
        closeOnCancel = true,
        closeOnConfirm = false,
        ...props
      } = this.props;

      const modalOnConfirm = () =>
        onConfirm.then(result => {
          closeOnConfirm && this.toggleModal();
          return result;
        });

      const modalOnCancel = () =>
        onCancel.then(result => {
          closeOnCancel && this.toggleModal();
          return result;
        });

      return [<commit_msg>Add support for disabling buttons in confirm modal<commit_after>// @flow

import styles from './ConfirmModal.css';
import React, { type ComponentType, type Node } from 'react';
import Modal from 'app/components/Modal';
import Button from '../Button';

type ConfirmModalProps = {
  onConfirm?: () => Promise<*>,
  onCancel?: () => Promise<*>,
  message: string,
  title: string,
  disabled?: boolean
};

export const ConfirmModal = ({
  message,
  onConfirm,
  onCancel,
  title,
  disabled = false
}: ConfirmModalProps) => (
  <div className={styles.overlay}>
    <div className={styles.confirmContainer}>
      <h2 className={styles.confirmTitle}>{title}</h2>
      <div className={styles.confirmMessage}>{message}</div>
      <div className={styles.buttonGroup}>
        <Button disabled={disabled} onClick={onCancel}>
          Avbryt
        </Button>
        <Button disabled={disabled} onClick={onConfirm}>
          Ja
        </Button>
      </div>
    </div>
  </div>
);

type State = {
  modalVisible: boolean,
  working: boolean
};

type withModalProps = {
  /* Close the modal after confirm promise is resolved*/
  closeOnConfirm?: boolean,
  /* Close the modal after confirm promise is resolved*/
  closeOnCancel?: boolean,
  children: Node
};

export default function withModal<Props>(
  WrappedComponent: ComponentType<Props>
) {
  const displayName =
    WrappedComponent.displayName || WrappedComponent.name || 'Unknown';

  return class extends React.Component<
    withModalProps & ConfirmModalProps,
    State
  > {
    static displayName = `WithModal(${displayName})`;
    state = { modalVisible: false, working: false };

    toggleModal = () => {
      this.setState(state => ({
        modalVisible: !state.modalVisible
      }));
    };

    startWorking = () => {
      this.setState({
        working: true
      });
    };

    stopWorking = () => {
      this.setState({
        working: false
      });
    };

    render() {
      const {
        onConfirm = () => Promise.resolve(),
        onCancel = () => Promise.resolve(),
        message,
        title,
        closeOnCancel = true,
        closeOnConfirm = false,
        ...props
      } = this.props;

      const modalOnConfirm = () => {
        this.startWorking();
        return onConfirm().then(result => {
          this.stopWorking();
          closeOnConfirm && this.state.modalVisible && this.toggleModal();
          return result;
        });
      };

      const modalOnCancel = () => {
        this.startWorking();
        return onCancel().then(result => {
          this.stopWorking();
          closeOnCancel && this.state.modalVisible && this.toggleModal();
          return result;
        });
      };

      return [
{'fraction_non_alphanumeric': 0.13724688075271016, 'fraction_numerical': 0.0008181632235631009, 'mean_word_length': 2.6411020104244227, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 65, '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': '3729377', 'n_tokens_mistral': 1372, 'n_tokens_neox': 1354, 'n_words': 323}