Confirm

Confirm

<div id="confirm"></div>

button {
  margin-right: 8px !important;
}

import {render} from 'react-dom';
import React from 'react';
import Confirm from '@jetbrains/ring-ui/components/confirm/confirm';
import Button from '@jetbrains/ring-ui/components/button/button';

class ConfirmDemo extends React.Component {
  state = {
    confirm: {
      show: true,
      text: 'Do you really wish to proceed?',
      description: 'A description of an action that is about to take place.',
      inProgress: false,
      onConfirm: () => {},
      onReject: () => {}
    }
  };

  componentDidMount() {
    this.showConfirm();
  }

  hideConfirm = () => {
    this.setState({confirm: {show: false}});
  }

  showConfirm = () => {
    return new Promise((resolve, reject) => {
      this.setState({
        confirm: {
          show: true,
          text: 'Do you really wish to proceed?',
          description: 'A description of an action that is about to take place.',
          onConfirm: () => this.hideConfirm() || resolve(),
          onReject: () => this.hideConfirm() || reject()
        }
      });
    }).
      then(() => console.info('Confirmed')).
      catch(() => console.warn('Rejected'));
  }

  showWithAnotherText = () => {
    return new Promise((resolve, reject) => {
      this.setState({
        confirm: {
          show: true,
          text: 'There is another question',
          onConfirm: () => this.hideConfirm() || resolve(),
          onReject: () => this.hideConfirm() || reject()
        }
      });
    }).
      then(() => console.info('Confirmed')).
      catch(() => console.warn('Rejected'));
  }

  render() {
    return (
    <div>
      <Button onClick={this.showConfirm}>Show confirm</Button>
      <Button onClick={this.showWithAnotherText}>Show another message</Button>
      <Confirm
        show={this.state.confirm.show}
        text={this.state.confirm.text}
        description={this.state.confirm.description}
        inProgress={this.state.inProgress}
        confirmLabel="OK"
        rejectLabel="Cancel"
        onConfirm={this.state.confirm.onConfirm}
        onReject={this.state.confirm.onReject}
      />
    </div>
    );
  }
 }

render(<ConfirmDemo/>, document.getElementById('confirm'));