react-confirm-alert 2.6.0 → 2.8.0

package/Readme.md

@@ -34,10 +34,12 @@ const options = {
   customUI: ({ onClose }) => <div>Custom UI</div>,
   closeOnEscape: true,
   closeOnClickOutside: true,
+  keyCodeForClose: [8, 32],
   willUnmount: () => {},
   afterClose: () => {}
   onClickOutside: () => {},
-  onKeypressEscape: () => {}
+  onKeypressEscape: () => {},
+  overlayClassName: "overlay-custom-class-name"
 };
 
 confirmAlert(options);

package/index.d.ts

@@ -5,6 +5,7 @@ declare module 'react-confirm-alert' {
     buttons?: Array<{
       label: string
       onClick: () => void
+      className?: string
     }>
     childrenElement?: () => React.ReactNode
     customUI?: (customUiOptions: {
@@ -17,6 +18,7 @@ declare module 'react-confirm-alert' {
     willUnmount?: () => void
     onClickOutside?: () => void
     onKeypressEscape?: () => void
+    overlayClassName?: string
   }
 
   export function confirmAlert(options: ReactConfirmAlertProps): void

package/lib/index.js

@@ -61,14 +61,20 @@ var ReactConfirmAlert = (_temp2 = _class = function (_Component) {
       var afterClose = _this.props.afterClose;
 
       removeBodyClass();
-      removeElementReconfirm(afterClose);
-      removeSVGBlurReconfirm();
+      removeElementReconfirm();
+      removeSVGBlurReconfirm(afterClose);
     }, _this.keyboardClose = function (event) {
       var _this$props2 = _this.props,
           closeOnEscape = _this$props2.closeOnEscape,
-          onKeypressEscape = _this$props2.onKeypressEscape;
+          onKeypressEscape = _this$props2.onKeypressEscape,
+          keyCodeForClose = _this$props2.keyCodeForClose;
 
-      var isKeyCodeEscape = event.keyCode === 27;
+      var keyCode = event.keyCode;
+      var isKeyCodeEscape = keyCode === 27;
+
+      if (keyCodeForClose.includes(keyCode)) {
+        _this.close();
+      }
 
       if (closeOnEscape && isKeyCodeEscape) {
         onKeypressEscape(event);
@@ -107,13 +113,14 @@ var ReactConfirmAlert = (_temp2 = _class = function (_Component) {
           message = _props.message,
           buttons = _props.buttons,
           childrenElement = _props.childrenElement,
-          customUI = _props.customUI;
+          customUI = _props.customUI,
+          overlayClassName = _props.overlayClassName;
 
 
       return _react2.default.createElement(
         'div',
         {
-          className: 'react-confirm-alert-overlay',
+          className: 'react-confirm-alert-overlay ' + overlayClassName,
           ref: function ref(dom) {
             return _this2.overlay = dom;
           },
@@ -160,10 +167,12 @@ var ReactConfirmAlert = (_temp2 = _class = function (_Component) {
   customUI: _propTypes2.default.func,
   closeOnClickOutside: _propTypes2.default.bool,
   closeOnEscape: _propTypes2.default.bool,
+  keyCodeForClose: _propTypes2.default.arrayOf(_propTypes2.default.number),
   willUnmount: _propTypes2.default.func,
   afterClose: _propTypes2.default.func,
   onClickOutside: _propTypes2.default.func,
-  onKeypressEscape: _propTypes2.default.func
+  onKeypressEscape: _propTypes2.default.func,
+  overlayClassName: _propTypes2.default.string
 }, _class.defaultProps = {
   buttons: [{
     label: 'Cancel',
@@ -183,6 +192,7 @@ var ReactConfirmAlert = (_temp2 = _class = function (_Component) {
   },
   closeOnClickOutside: true,
   closeOnEscape: true,
+  keyCodeForClose: [],
   willUnmount: function willUnmount() {
     return null;
   },
@@ -219,10 +229,13 @@ function createSVGBlurReconfirm() {
   document.body.appendChild(svgElem);
 }
 
-function removeSVGBlurReconfirm() {
+function removeSVGBlurReconfirm(afterClose) {
   var svg = document.getElementById('react-confirm-alert-firm-svg');
-  svg.parentNode.removeChild(svg);
+  if (svg) {
+    svg.parentNode.removeChild(svg);
+  }
   document.body.children[0].classList.remove('react-confirm-alert-blur');
+  afterClose();
 }
 
 function createElementReconfirm(properties) {
@@ -240,12 +253,11 @@ function createElementReconfirm(properties) {
   }
 }
 
-function removeElementReconfirm(afterClose) {
+function removeElementReconfirm() {
   var target = document.getElementById('react-confirm-alert');
   if (target) {
     (0, _reactDom.unmountComponentAtNode)(target);
     target.parentNode.removeChild(target);
-    afterClose();
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-confirm-alert",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "react component confirm dialog.",
   "main": "lib/index.js",
   "scripts": {