react-router-navigation-confirm
Version:
A collection of components to display a custom confirmation dialog on navigation. More flexible solution to prevent than default react-router 'Prompt'
60 lines • 3.29 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import * as React from 'react';
import { NavigationConfirmWithRouter } from './NavigationConfirm';
import './NavigationConfirmModal.css';
var NavigationConfirmModal = /** @class */ (function (_super) {
__extends(NavigationConfirmModal, _super);
function NavigationConfirmModal() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.decorate = function (fn, hook) {
return function () {
if (hook) {
hook();
}
fn();
};
};
_this.renderModal = function (_a) {
var onConfirm = _a.onConfirm, onCancel = _a.onCancel;
var _b = _this.props, children = _b.children, confirmText = _b.confirmText, cancelText = _b.cancelText, modalClassName = _b.modalClassName, backdropClassName = _b.backdropClassName, contentClassName = _b.contentClassName, bodyClassName = _b.bodyClassName, footerClassName = _b.footerClassName, buttonClassName = _b.buttonClassName, buttonConfirmClassName = _b.buttonConfirmClassName, cancelHook = _b.onCancel, confirmHook = _b.onConfirm;
return (React.createElement("div", { className: modalClassName },
React.createElement("div", { className: backdropClassName }),
React.createElement("div", { className: contentClassName },
React.createElement("div", { className: bodyClassName }, children),
React.createElement("div", { className: footerClassName },
React.createElement("button", { className: buttonClassName + " " + buttonConfirmClassName, onClick: _this.decorate(onConfirm, confirmHook) }, confirmText),
React.createElement("button", { className: buttonClassName, onClick: _this.decorate(onCancel, cancelHook) }, cancelText)))));
};
return _this;
}
NavigationConfirmModal.prototype.render = function () {
return (React.createElement(NavigationConfirmWithRouter, { when: this.props.when }, this.renderModal));
};
NavigationConfirmModal.defaultProps = {
children: 'Are you sure you want to leave this page?',
backdropClassName: 'nc-modal__backdrop',
bodyClassName: 'nc-modal__body',
contentClassName: 'nc-modal__content',
footerClassName: 'nc-modal__footer',
modalClassName: 'nc-modal',
buttonClassName: 'nc-modal__button',
buttonConfirmClassName: 'confirm',
cancelText: 'Cancel',
confirmText: 'Confirm',
};
return NavigationConfirmModal;
}(React.Component));
export { NavigationConfirmModal, };
//# sourceMappingURL=NavigationConfirmModal.js.map