react-bootstrap-sweetalert
Version:
A variant of sweetalert for use with React and Bootstrap
505 lines • 26.5 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 __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
// third-party
var react_1 = __importDefault(require("react"));
// components
var SuccessIcon_1 = __importDefault(require("./SuccessIcon"));
var ErrorIcon_1 = __importDefault(require("./ErrorIcon"));
var InfoIcon_1 = __importDefault(require("./InfoIcon"));
var WarningIcon_1 = __importDefault(require("./WarningIcon"));
var CustomIcon_1 = __importDefault(require("./CustomIcon"));
var Buttons_1 = __importDefault(require("./Buttons"));
var Input_1 = __importDefault(require("./Input"));
var ValidationMessage_1 = __importDefault(require("./ValidationMessage"));
var Title_1 = __importDefault(require("./Title"));
var Content_1 = __importDefault(require("./Content"));
var Overlay_1 = __importDefault(require("./Overlay"));
// other
var styles = __importStar(require("../styles/SweetAlertStyles"));
var Patterns = __importStar(require("../constants/patterns"));
var prop_types_1 = require("../prop-types");
var default_props_1 = require("../default-props");
var SWEET_ALERT_DEFAULT_STYLES = styles.sweetAlert;
var _resetting = {};
var debugLogger = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
// uncomment the next line to get some debugging logs.
// console.log(...args);
};
var SweetAlert = /** @class */ (function (_super) {
__extends(SweetAlert, _super);
function SweetAlert(props) {
var _this = _super.call(this, props) || this;
_this.inputElement = null;
_this.unsupportedProp = function (oldProp, message) {
try {
console.warn("react-bootstrap-sweetalert: Unsupported prop '" + oldProp + "'. Please " + message);
}
catch (e) {
// do nothing
}
};
_this.focusInput = function () {
debugLogger('inputElement', _this.inputElement);
if (_this.inputElement) {
debugLogger('inputElement trying to focus', _this.inputElement);
try {
_this.inputElement.focus();
}
catch (e) {
debugLogger('inputElement focus error', e);
// whoops
}
}
};
_this.getIcon = function () {
switch (_this.state.type) {
case 'danger':
case 'error':
return react_1.default.createElement(ErrorIcon_1.default, null);
case 'warning':
return react_1.default.createElement(WarningIcon_1.default, null);
case 'info':
return react_1.default.createElement(InfoIcon_1.default, null);
case 'success':
return react_1.default.createElement(SuccessIcon_1.default, null);
case 'custom':
if (_this.props.customIcon) {
if (typeof _this.props.customIcon == 'string') {
return react_1.default.createElement(CustomIcon_1.default, { iconUrl: _this.props.customIcon });
}
return _this.props.customIcon;
}
return null;
default:
return null;
}
};
_this.onChangeInput = function (e) {
var target = e.target;
_this.setState({
inputValue: target.value,
showValidationMessage: false
});
};
_this.isValidInput = function () {
if (!_this.props.required) {
return true;
}
var regex = _this.props.validationRegex || (_this.props.inputType === 'email' ? Patterns.emailRegex : Patterns.defaultRegex);
return regex.test(_this.state.inputValue);
};
_this.isDisabled = function () {
return _this.props.onCancel && _this.props.disabled;
};
_this.onAlertClose = function (callback) {
_resetting[_this.state.id] = true;
debugLogger('onAlertClose resetting state');
_this.setState(__assign(__assign({}, SweetAlert.getDefaultState()), { id: _this.state.id }), function () {
_resetting[_this.state.id] = false;
callback();
});
};
_this.beforeCloseAlert = function (closingAction, callback) {
debugLogger('in beforeCloseAlert: setting show to false');
_this.setState({ show: false, closingAction: closingAction }, function () {
debugLogger('state updated', _this.state.show);
if (!_this.state.show) {
debugLogger('invoking callback');
callback();
}
});
};
_this.onConfirm = function (handleCloseAnimations) {
if (handleCloseAnimations === void 0) { handleCloseAnimations = true; }
if (_this.isDisabled()) {
return;
}
// if this is an input alert, then we will send the input value to the props.onConfirm function
var isInput = _this.state.type === 'input';
var inputValue = _this.state.inputValue;
// if this is a controlled alert, then we will send the dependencies value to the props.onConfirm function
var isControlled = _this.state.type === 'controlled';
var dependencies = __spreadArrays(_this.state.dependencies);
if (isInput && !_this.isValidInput()) {
_this.setState({
showValidationMessage: true
});
return;
}
var confirm = function () {
debugLogger('in confirm callback');
if (isInput) {
_this.onAlertClose(function () {
_this.props.onConfirm(inputValue);
});
}
else if (isControlled) {
_this.onAlertClose(function () {
_this.props.onConfirm(dependencies);
});
}
else {
_this.onAlertClose(function () { return _this.props.onConfirm(); });
}
};
if (handleCloseAnimations) {
debugLogger('calling beforeCloseAlert');
_this.beforeCloseAlert('confirm', function () { return confirm(); });
}
else {
confirm();
}
};
_this.onCancel = function (handleCloseAnimations) {
if (handleCloseAnimations === void 0) { handleCloseAnimations = true; }
var cancel = function () {
_this.onAlertClose(function () {
if (_this.props.onCancel) {
_this.props.onCancel();
}
});
};
if (handleCloseAnimations) {
_this.beforeCloseAlert('cancel', function () { return cancel(); });
}
else {
cancel();
}
};
_this.onInputKeyDown = function (e) {
if (e.keyCode == 13) {
e.stopPropagation();
_this.onConfirm();
}
};
_this.onKeyDown = function (e) {
if (e.keyCode == 27) {
if (_this.props.allowEscape && _this.props.onCancel) {
e.stopPropagation();
_this.onCancel();
}
}
};
_this.onClickInside = function (e) {
e.stopPropagation();
};
_this.onClickOutside = function () {
if (_this.props.closeOnClickOutside && _this.props.onCancel) {
_this.onCancel();
}
};
_this.setAutoFocusInputRef = function (element) {
_this.inputElement = element;
};
_this.getComposedStyle = function () {
return Object.assign({}, SWEET_ALERT_DEFAULT_STYLES, _this.props.style, { animation: _this.state.animation });
};
_this.getAlertContent = function () {
// Support for render props for content of alert
if (typeof _this.props.children === 'function') {
var renderProps = {
onEnterKeyDownConfirm: function (event) {
if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
_this.onConfirm();
}
},
confirm: function () { return _this.onConfirm(); },
cancel: function () { return _this.onCancel(); },
setAutoFocusInputRef: _this.setAutoFocusInputRef.bind(_this),
};
return _this.props.children(renderProps);
}
return _this.props.children;
};
_this.getCloseButton = function () {
if (!_this.props.showCloseButton || !_this.props.onCancel) {
return null;
}
return (react_1.default.createElement("span", { className: 'btn', style: Object.assign({}, styles.closeButton, _this.props.closeBtnStyle), onClick: function () { return _this.onCancel(); } }, "x"));
};
_this.getInputField = function () {
if (_this.state.type !== 'input') {
return null;
}
return (react_1.default.createElement(Input_1.default, __assign({}, _this.props, _this.state, { type: _this.state.type, onInputKeyDown: _this.onInputKeyDown, onChangeInput: _this.onChangeInput })));
};
_this.getValidationMessage = function () {
if (!_this.state.showValidationMessage) {
return null;
}
return react_1.default.createElement(ValidationMessage_1.default, __assign({}, _this.props));
};
_this.getButtons = function () {
return (react_1.default.createElement(Buttons_1.default, __assign({}, _this.props, { type: _this.state.type, onConfirm: _this.onConfirm, onCancel: _this.onCancel, focusConfirmBtn: _this.state.focusConfirmBtn, focusCancelBtn: _this.state.focusCancelBtn, disabled: _this.isDisabled() })));
};
_this.getInjectedStyles = function () {
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("style", { type: "text/css", dangerouslySetInnerHTML: {
__html: "\n body.sweetalert-overflow-hidden {\n overflow: hidden;\n }\n body .sweet-alert button {\n outline: none !important;\n }\n "
} }),
react_1.default.createElement("style", { type: "text/css" }, "@-webkit-keyframes showSweetAlert { 0% { transform: scale(0.7); -webkit-transform: scale(0.7); } 45% { transform: scale(1.05); -webkit-transform: scale(1.05); } 80% { transform: scale(0.95); -webkit-tranform: scale(0.95); } 100% { transform: scale(1); -webkit-transform: scale(1); }}@keyframes showSweetAlert { 0% { transform: scale(0.7); -webkit-transform: scale(0.7); } 45% { transform: scale(1.05); -webkit-transform: scale(1.05); } 80% { transform: scale(0.95); -webkit-tranform: scale(0.95); } 100% { transform: scale(1); -webkit-transform: scale(1); }}@-webkit-keyframes hideSweetAlert { 0% { transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0.4); -webkit-transform: scale(0.4); }}@keyframes hideSweetAlert { 0% { transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0.4); -webkit-transform: scale(0.4); }}@-webkit-keyframes animateSuccessTip { 0% { width: 0; left: 1px; top: 19px; } 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 45px; }}@keyframes animateSuccessTip { 0% { width: 0; left: 1px; top: 19px; } 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 45px; }}@-webkit-keyframes animateSuccessLong { 0% { width: 0; right: 46px; top: 54px; } 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0px; top: 35px; } 100% { width: 47px; right: 8px; top: 38px; }}@keyframes animateSuccessLong { 0% { width: 0; right: 46px; top: 54px; } 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0px; top: 35px; } 100% { width: 47px; right: 8px; top: 38px; }}@-webkit-keyframes rotatePlaceholder { 0% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 5% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 12% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } 100% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); }}@keyframes rotatePlaceholder { 0% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 5% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 12% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } 100% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); }}@-webkit-keyframes animateErrorIcon { 0% { transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0; } 100% { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; }}@keyframes animateErrorIcon { 0% { transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0; } 100% { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; }}@-webkit-keyframes animateXMark { 0% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 50% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 80% { transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px; } 100% { transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1; }}@keyframes animateXMark { 0% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 50% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 80% { transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px; } 100% { transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1; }}@-webkit-keyframes pulseWarning { 0% { border-color: #F8D486; } 100% { border-color: #F8BB86; }}@keyframes pulseWarning { 0% { border-color: #F8D486; } 100% { border-color: #F8BB86; }}@-webkit-keyframes pulseWarningIns { 0% { background-color: #F8D486; } 100% { background-color: #F8BB86; }}@keyframes pulseWarningIns { 0% { background-color: #F8D486; } 100% { background-color: #F8BB86; }}")));
};
if (_this.props.beforeUpdate) {
_this.unsupportedProp('beforeUpdate', 'use props.afterUpdate');
}
var newState = Object.assign(SweetAlert.getDefaultState(), {
hideTimeoutHandlerFunc: _this.hideTimeoutHandler.bind(_this)
});
if (_this.props.defaultValue != null) {
newState.inputValue = _this.props.defaultValue;
}
_this.state = newState;
_this.props.beforeMount();
return _this;
}
SweetAlert.prototype.componentDidMount = function () {
document.body.classList.add('sweetalert-overflow-hidden');
this.focusInput();
if (this.props.afterMount) {
this.props.afterMount();
}
};
SweetAlert.generateId = function () {
return '' + Date.now() + Math.ceil(Math.random() * 10000000000) + Math.ceil(Math.random() * 10000000000);
};
SweetAlert.getDefaultState = function () {
return {
id: SweetAlert.generateId(),
show: true,
focusConfirmBtn: true,
focusCancelBtn: false,
inputValue: '',
showValidationMessage: false,
timer: null,
animation: "",
prevTimeout: 0,
closingAction: null,
dependencies: [],
};
};
SweetAlert.getDerivedStateFromProps = function (nextProps, nextState) {
if (_resetting[nextState.id]) {
return {};
}
var newState = {};
var typeChanged = nextState.type !== SweetAlert.getTypeFromProps(nextProps);
var dependenciesChanged = nextState.dependencies !== nextProps.dependencies;
var timeoutChanged = nextState.prevTimeout !== nextProps.timeout;
// if the type of the alert changed, or the dependencies changed, then update the state from props
if (typeChanged || dependenciesChanged) {
newState = __assign(__assign({}, newState), SweetAlert.getStateFromProps(nextProps));
}
// if the state is changing, or the timeout changed, then reset the timeout timer
if (JSON.stringify(newState) !== '{}' || timeoutChanged) {
newState = __assign(__assign({}, newState), SweetAlert.handleTimeout(nextProps, nextState.timer));
}
// return the partially updated state
return __assign(__assign({}, newState), SweetAlert.handleAnimState(nextProps, nextState, nextState.hideTimeoutHandlerFunc));
};
SweetAlert.prototype.componentDidUpdate = function (prevProps, prevState) {
if (this.props.beforeUpdate) {
this.props.beforeUpdate(prevProps, prevState);
}
if (!prevState.show && this.state.show) {
this.focusInput();
}
this.props.afterUpdate(this.props, this.state);
};
SweetAlert.prototype.componentWillUnmount = function () {
document.body.classList.remove('sweetalert-overflow-hidden');
if (this.state.timer) {
clearTimeout(this.state.timer);
}
if (this.props.beforeUnmount) {
this.props.beforeUnmount();
}
};
SweetAlert.prototype.hideTimeoutHandler = function (time) {
var _this = this;
setTimeout(function () {
var closingAction = _this.state.closingAction;
/**
* Removing the closing action (shouldn't trigger another animation timeout)
*/
_this.setState({ show: false, closingAction: null }, function () {
// handle the action that was started before the closing animation was started
switch (closingAction) {
case 'confirm':
_this.onConfirm(false);
break;
case 'cancel':
_this.onCancel(false);
break;
default:
break;
}
});
}, time);
};
;
SweetAlert.handleTimeout = function (props, currentTimer) {
if (currentTimer) {
clearTimeout(currentTimer);
}
if (props.timeout && props.timeout > 0) {
var timer = setTimeout(function () { return props.onConfirm(); }, props.timeout);
return { timer: timer, prevTimeout: props.timeout };
}
return null;
};
SweetAlert.isAnimation = function (animProp) {
return animProp && typeof animProp !== 'boolean';
};
SweetAlert.animationFromProp = function (animProp) {
return animProp.name + ' ' + animProp.duration + 'ms';
};
SweetAlert.handleAnimState = function (props, state, hideTimeout) {
var userDefinedShow = typeof props.show === 'boolean';
var show = (userDefinedShow && !state.closingAction) ? props.show : state.show;
var animation = '';
if (show) {
if (props.openAnim) {
if (SweetAlert.isAnimation(props.openAnim)) {
animation = SweetAlert.animationFromProp(props.openAnim);
}
else if (SweetAlert.isAnimation(SweetAlert.defaultProps.openAnim)) {
animation = SweetAlert.animationFromProp(SweetAlert.defaultProps.openAnim);
}
}
}
else if (state.closingAction && props.closeAnim) {
var animProp = void 0;
if (SweetAlert.isAnimation(props.closeAnim)) {
animProp = props.closeAnim;
}
else if (SweetAlert.isAnimation(SweetAlert.defaultProps.closeAnim)) {
animProp = SweetAlert.defaultProps.closeAnim;
}
if (animProp) {
animation = SweetAlert.animationFromProp(animProp);
hideTimeout(animProp.duration);
show = true;
}
}
return { show: show, animation: animation };
};
;
SweetAlert.prototype.render = function () {
if (!this.state.show) {
return null;
}
return (react_1.default.createElement("div", null,
this.getInjectedStyles(),
react_1.default.createElement(Overlay_1.default, { show: !this.props.hideOverlay, onClick: this.onClickOutside, onKeyDown: this.onKeyDown },
react_1.default.createElement("div", { style: this.getComposedStyle(), tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClickInside, className: 'sweet-alert ' + this.props.customClass },
this.getCloseButton(),
this.getIcon(),
react_1.default.createElement(Title_1.default, null, this.props.title),
react_1.default.createElement(Content_1.default, null, this.getAlertContent()),
this.getInputField(),
this.getValidationMessage(),
this.getButtons()))));
};
SweetAlert.propTypes = prop_types_1.SWEET_ALERT_PROP_TYPES;
SweetAlert.defaultProps = default_props_1.SWEET_ALERT_DEFAULT_PROPS;
SweetAlert.SuccessIcon = SuccessIcon_1.default;
SweetAlert.ErrorIcon = ErrorIcon_1.default;
SweetAlert.InfoIcon = InfoIcon_1.default;
SweetAlert.WarningIcon = WarningIcon_1.default;
SweetAlert.CustomIcon = CustomIcon_1.default;
SweetAlert.Buttons = Buttons_1.default;
SweetAlert.Input = Input_1.default;
SweetAlert.ValidationMessage = ValidationMessage_1.default;
SweetAlert.Title = Title_1.default;
SweetAlert.Content = Content_1.default;
SweetAlert.getStateFromProps = function (props) {
var type = SweetAlert.getTypeFromProps(props);
return {
type: type,
focusConfirmBtn: props.focusConfirmBtn && type !== 'input',
focusCancelBtn: props.focusCancelBtn && type !== 'input',
dependencies: props.dependencies,
};
};
SweetAlert.getTypeFromProps = function (props) {
if (props.type)
return props.type;
if (props.secondary)
return 'secondary';
if (props.info)
return 'info';
if (props.success)
return 'success';
if (props.warning)
return 'warning';
if (props.danger || props.error)
return 'danger';
if (props.input)
return 'input';
if (props.custom)
return 'custom';
return 'default';
};
return SweetAlert;
}(react_1.default.Component));
exports.default = SweetAlert;
//# sourceMappingURL=SweetAlert.js.map