79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
import MailPoet from 'mailpoet';
|
|
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
|
|
class ConfirmAlert extends React.Component {
|
|
static propTypes = {
|
|
title: PropTypes.string,
|
|
message: PropTypes.string.isRequired,
|
|
cancelLabel: PropTypes.string,
|
|
confirmLabel: PropTypes.string,
|
|
onConfirm: PropTypes.func.isRequired,
|
|
}
|
|
|
|
static defaultProps = {
|
|
title: MailPoet.I18n.t('confirmTitle'),
|
|
cancelLabel: MailPoet.I18n.t('cancelLabel'),
|
|
confirmLabel: MailPoet.I18n.t('confirmLabel'),
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { show: true };
|
|
}
|
|
|
|
componentWillUpdate = () => {
|
|
if (!this.state.show) {
|
|
this.setState({ show: true });
|
|
}
|
|
}
|
|
|
|
onClose = () => {
|
|
this.setState({ show: false });
|
|
}
|
|
|
|
onConfirm = () => {
|
|
this.onClose();
|
|
this.props.onConfirm();
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
title, message, confirmLabel, cancelLabel,
|
|
} = this.props;
|
|
|
|
return (this.state.show
|
|
&& (
|
|
<div className="mailpoet_modal_overlay">
|
|
<div className="mailpoet_popup" tabIndex="-1">
|
|
<div className="mailpoet_popup_wrapper">
|
|
<button className="mailpoet_modal_close" onClick={this.onClose} type="button" />
|
|
{title
|
|
&& (
|
|
<div className="mailpoet_popup_title">
|
|
<h2>{title}</h2>
|
|
</div>
|
|
)
|
|
}
|
|
<div className="mailpoet_popup_body clearfix">
|
|
<p className="mailpoet_hp_email_label">{message}</p>
|
|
<button className="button button-secondary" onClick={this.onClose} type="button">
|
|
{cancelLabel}
|
|
</button>
|
|
<button className="button button-primary" onClick={this.onConfirm} type="submit">
|
|
{confirmLabel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
export default function confirmAlert(props) {
|
|
ReactDOM.render(<ConfirmAlert {...props} />, document.getElementById('mailpoet_confirm_alert_holder'));
|
|
}
|