react-bootstrap-sweetalert
Version:
A variant of sweetalert for use with React and Bootstrap
197 lines • 8.7 kB
JavaScript
"use strict";
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 __());
};
})();
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var styles = __importStar(require("../styles/SweetAlertStyles"));
var SweetAlertStyles_1 = require("../styles/SweetAlertStyles");
var Buttons = /** @class */ (function (_super) {
__extends(Buttons, _super);
function Buttons() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.buttonStyles = {};
_this.confirmButtonElement = null;
_this.cancelButtonElement = null;
_this.setConfirmButtonElementRef = function (element) {
_this.confirmButtonElement = element;
};
_this.setCancelButtonElementRef = function (element) {
_this.cancelButtonElement = element;
};
_this.getButtonStyle = function (bsStyle) {
if (bsStyle === 'error')
bsStyle = 'danger';
if (_this.buttonStyles[bsStyle] == null) {
var style = Buttons.styles[bsStyle] || Buttons.styles.default;
_this.buttonStyles[bsStyle] = {
borderColor: "" + style.borderColor,
boxShadow: "inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px " + style.shadowColor,
};
}
return _this.buttonStyles[bsStyle];
};
return _this;
}
Buttons.prototype.componentDidMount = function () {
this.focusButton();
};
Buttons.prototype.componentDidUpdate = function (prevProps) {
var _this = this;
// when displaying back to back alerts React will treat this
// as an update to the same alert. this causes componentDidMount
// to not be called for the subsequent alerts. i hope to find a better
// way to handle this in the future, but for now i'm checking if the
// title, type, or button text has changed
if (prevProps.type !== this.props.type ||
prevProps.confirmBtnText !== this.props.confirmBtnText ||
prevProps.title !== this.props.title) {
setTimeout(function () { return _this.focusButton(); }, 0);
}
};
Buttons.prototype.focusButton = function () {
if (this.props.focusCancelBtn && this.cancelButtonElement) {
try {
this.cancelButtonElement.focus();
}
catch (e) {
// whoops
}
}
else if (this.props.focusConfirmBtn && this.confirmButtonElement) {
try {
this.confirmButtonElement.focus();
}
catch (e) {
// whoops
}
}
};
Buttons.prototype.confirmButtonRender = function () {
var _this = this;
if (!this.props.showConfirm)
return false;
var confirmBtnBsStyle = this.props.confirmBtnBsStyle === 'error' ? 'danger' : this.props.confirmBtnBsStyle;
var confirmButtonStyle = Object.assign({}, styles.button, this.getButtonStyle(confirmBtnBsStyle), this.props.confirmBtnStyle || {});
/**
* These buttons are <a> anchor tags because for some reason React is triggering click events on <button>
* elements when an enter key event is fired from an input field in the alert.
* Please do not change this back to any other type of element.
*/
return (react_1.default.createElement("a", { ref: this.setConfirmButtonElementRef, href: '#', style: confirmButtonStyle, className: "btn btn-" + this.props.btnSize + " btn-" + confirmBtnBsStyle + " " + this.props.confirmBtnCssClass + " " + (this.props.disabled ? 'disabled' : ''), onClick: function (e) {
e.stopPropagation();
e.preventDefault();
if (!_this.props.disabled) {
_this.props.onConfirm();
}
} }, this.props.confirmBtnText));
};
Buttons.prototype.cancelButtonRender = function () {
var _this = this;
if (!this.props.showCancel)
return false;
var cancelBtnBsStyle = this.props.cancelBtnBsStyle === 'error' ? 'danger' : this.props.cancelBtnBsStyle;
var cancelButtonStyle = Object.assign({}, styles.button, this.props.cancelBtnStyle || {});
/**
* These buttons are <a> anchor tags because for some reason React is triggering click events on <button>
* elements when an enter key event is fired from an input field in the alert.
* Please do not change this back to any other type of element.
*/
return (react_1.default.createElement("a", { ref: this.setCancelButtonElementRef, href: '#', style: cancelButtonStyle, className: "btn btn-" + this.props.btnSize + " btn-" + cancelBtnBsStyle + " " + this.props.cancelBtnCssClass, onClick: function (e) {
e.stopPropagation();
e.preventDefault();
_this.props.onCancel();
} }, this.props.cancelBtnText));
};
Buttons.prototype.render = function () {
if (!this.props.showConfirm && !this.props.showCancel) {
return false;
}
return (react_1.default.createElement("p", { style: SweetAlertStyles_1.actions }, this.props.customButtons ? (this.props.customButtons) : (react_1.default.createElement(react_1.default.Fragment, null, !this.props.reverseButtons ? (react_1.default.createElement(react_1.default.Fragment, null,
this.cancelButtonRender(),
this.confirmButtonRender())) : (react_1.default.createElement(react_1.default.Fragment, null,
this.confirmButtonRender(),
this.cancelButtonRender()))))));
};
Buttons.defaultProps = {
confirmBtnText: 'OK',
confirmBtnBsStyle: 'primary',
confirmBtnCssClass: '',
confirmBtnStyle: {},
cancelBtnText: 'Cancel',
cancelBtnBsStyle: 'link',
cancelBtnCssClass: '',
cancelBtnStyle: {},
focusConfirmBtn: true,
focusCancelBtn: false,
showConfirm: true,
showCancel: false,
reverseButtons: false,
btnSize: 'lg',
};
Buttons.styles = {
primary: {
borderColor: '#286090',
shadowColor: 'rgb(165, 202, 234)'
},
success: {
borderColor: '#4cae4c',
shadowColor: 'rgba(76, 174, 76, 0.6)'
},
info: {
borderColor: '#46b8da',
shadowColor: 'rgba(70, 184, 218, 0.6)'
},
danger: {
borderColor: '#d43f3a',
shadowColor: 'rgba(212, 63, 58, 0.6)'
},
warning: {
borderColor: '#eea236',
shadowColor: 'rgba(238, 162, 54, 0.6)'
},
default: {
borderColor: '#cccccc',
shadowColor: 'rgba(204, 204, 204, 0.6)'
},
secondary: {
borderColor: '#cccccc',
shadowColor: 'rgba(204, 204, 204, 0.6)'
}
};
return Buttons;
}(react_1.default.Component));
exports.default = Buttons;
//# sourceMappingURL=Buttons.js.map