import React from 'react'; import PropTypes from 'prop-types'; import { injectIntl, FormattedMessage } from 'react-intl'; import Button from '../../../components/button'; export default @injectIntl class ConfirmationModal extends React.PureComponent { static propTypes = { message: PropTypes.node.isRequired, confirm: PropTypes.string.isRequired, onClose: PropTypes.func.isRequired, onConfirm: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; componentDidMount() { this.button.focus(); } handleClick = () => { this.props.onClose(); this.props.onConfirm(); } handleCancel = () => { this.props.onClose(); } setRef = (c) => { this.button = c; } render () { const { message, confirm } = this.props; return ( <div className='modal-root__modal confirmation-modal'> <div className='confirmation-modal__container'> {message} </div> <div className='confirmation-modal__action-bar'> <Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'> <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' /> </Button> <Button text={confirm} onClick={this.handleClick} ref={this.setRef} /> </div> </div> ); } }