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 (
); } } render(, document.getElementById('confirm'));