react-confirm-alert 2.6.2 → 3.0.0

package/Readme.md

@@ -1,10 +1,14 @@
 # react-confirm-alert
 
-react component confirm dialog. [Live demo](https://ga-mo.github.io/react-confirm-alert/demo/)
+### React 18 is supported!!
+
+React component confirm dialog. [Live demo](https://ga-mo.github.io/react-confirm-alert/demo/)
 
 [![npm version](https://badge.fury.io/js/react-confirm-alert.svg)](https://badge.fury.io/js/react-confirm-alert)
 
-Document for v.1.x.x [see](https://github.com/GA-MO/react-confirm-alert/blob/master/Document-v1.md)
+Document for 
+[v.1.x.x](https://github.com/GA-MO/react-confirm-alert/blob/master/Document-v1.md), 
+[v.2.x.x](https://github.com/GA-MO/react-confirm-alert/blob/master/Document-v2.md)
 
 ## Getting started
 
@@ -30,14 +34,15 @@ const options = {
       onClick: () => alert('Click No')
     }
   ],
-  childrenElement: () => <div />,
-  customUI: ({ onClose }) => <div>Custom UI</div>,
   closeOnEscape: true,
   closeOnClickOutside: true,
+  keyCodeForClose: [8, 32],
   willUnmount: () => {},
   afterClose: () => {}
   onClickOutside: () => {},
-  onKeypressEscape: () => {}
+  onKeypress: () => {},
+  onKeypressEscape: () => {},
+  overlayClassName: "overlay-custom-class-name"
 };
 
 confirmAlert(options);

package/index.d.ts

@@ -1,23 +1,26 @@
 declare module 'react-confirm-alert' {
   export interface ReactConfirmAlertProps {
+    targetId: string
     title?: string
     message?: string
     buttons?: Array<{
       label: string
-      onClick: () => void
       className?: string
-    }>
+    } & HTMLButtonElement>
     childrenElement?: () => React.ReactNode
     customUI?: (customUiOptions: {
-    title: string
-    message: string
-    onClose: () => void
+      title: string
+      message: string
+      onClose: () => void
     }) => React.ReactNode
     closeOnClickOutside?: boolean
     closeOnEscape?: boolean
+    keyCodeForClose: Array<number>
     willUnmount?: () => void
     onClickOutside?: () => void
     onKeypressEscape?: () => void
+    onkeyPress?: () => void
+    overlayClassName?: string
   }
 
   export function confirmAlert(options: ReactConfirmAlertProps): void

package/lib/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = undefined;
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _class, _temp2;
@@ -19,7 +21,7 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _reactDom = require('react-dom');
+var _client = require('react-dom/client');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -61,23 +63,34 @@ var ReactConfirmAlert = (_temp2 = _class = function (_Component) {
       var afterClose = _this.props.afterClose;
 
       removeBodyClass();
-      removeElementReconfirm();
+      removeElementReconfirm(_this.props);
       removeSVGBlurReconfirm(afterClose);
-    }, _this.keyboardClose = function (event) {
+    }, _this.keyboard = function (event) {
       var _this$props2 = _this.props,
           closeOnEscape = _this$props2.closeOnEscape,
-          onKeypressEscape = _this$props2.onKeypressEscape;
+          onKeypressEscape = _this$props2.onKeypressEscape,
+          onkeyPress = _this$props2.onkeyPress,
+          keyCodeForClose = _this$props2.keyCodeForClose;
+
+      var keyCode = event.keyCode;
+      var isKeyCodeEscape = keyCode === 27;
 
-      var isKeyCodeEscape = event.keyCode === 27;
+      if (keyCodeForClose.includes(keyCode)) {
+        _this.close();
+      }
 
       if (closeOnEscape && isKeyCodeEscape) {
         onKeypressEscape(event);
         _this.close();
       }
+
+      if (onkeyPress) {
+        onkeyPress();
+      }
     }, _this.componentDidMount = function () {
-      document.addEventListener('keydown', _this.keyboardClose, false);
+      document.addEventListener('keydown', _this.keyboard, false);
     }, _this.componentWillUnmount = function () {
-      document.removeEventListener('keydown', _this.keyboardClose, false);
+      document.removeEventListener('keydown', _this.keyboard, false);
       _this.props.willUnmount();
     }, _this.renderCustomUI = function () {
       var _this$props3 = _this.props,
@@ -107,13 +120,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;
           },
@@ -138,9 +152,13 @@ var ReactConfirmAlert = (_temp2 = _class = function (_Component) {
               buttons.map(function (button, i) {
                 return _react2.default.createElement(
                   'button',
-                  { key: i, onClick: function onClick() {
+                  _extends({
+                    key: i,
+                    onClick: function onClick() {
                       return _this2.handleClickButton(button);
-                    }, className: button.className },
+                    },
+                    className: button.className
+                  }, button),
                   button.label
                 );
               })
@@ -160,10 +178,13 @@ 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,
+  onkeyPress: _propTypes2.default.func,
+  overlayClassName: _propTypes2.default.string
 }, _class.defaultProps = {
   buttons: [{
     label: 'Cancel',
@@ -183,6 +204,7 @@ var ReactConfirmAlert = (_temp2 = _class = function (_Component) {
   },
   closeOnClickOutside: true,
   closeOnEscape: true,
+  keyCodeForClose: [],
   willUnmount: function willUnmount() {
     return null;
   },
@@ -199,6 +221,9 @@ var ReactConfirmAlert = (_temp2 = _class = function (_Component) {
 exports.default = ReactConfirmAlert;
 
 
+var root = null;
+var targetId = 'react-confirm-alert';
+
 function createSVGBlurReconfirm() {
   // If has svg ignore to create the svg
   var svg = document.getElementById('react-confirm-alert-firm-svg');
@@ -221,31 +246,37 @@ function createSVGBlurReconfirm() {
 
 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) {
-  var divTarget = document.getElementById('react-confirm-alert');
+  var divTarget = document.getElementById(properties.targetId || targetId);
+
+  if (properties.targetId && !divTarget) {
+    console.error('React Confirm Alert:', 'Can not get element id (#' + properties.targetId + ')');
+  }
+
   if (divTarget) {
-    // Rerender - the mounted ReactConfirmAlert
-    (0, _reactDom.render)(_react2.default.createElement(ReactConfirmAlert, properties), divTarget);
+    root = (0, _client.createRoot)(divTarget);
+    root.render(_react2.default.createElement(ReactConfirmAlert, properties));
   } else {
-    // Mount the ReactConfirmAlert component
     document.body.children[0].classList.add('react-confirm-alert-blur');
     divTarget = document.createElement('div');
-    divTarget.id = 'react-confirm-alert';
+    divTarget.id = targetId;
     document.body.appendChild(divTarget);
-    (0, _reactDom.render)(_react2.default.createElement(ReactConfirmAlert, properties), divTarget);
+    root = (0, _client.createRoot)(divTarget);
+    root.render(_react2.default.createElement(ReactConfirmAlert, properties));
   }
 }
 
-function removeElementReconfirm() {
-  var target = document.getElementById('react-confirm-alert');
+function removeElementReconfirm(properties) {
+  var target = document.getElementById(properties.targetId || targetId);
   if (target) {
-    (0, _reactDom.unmountComponentAtNode)(target);
-    target.parentNode.removeChild(target);
+    root.unmount(target);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-confirm-alert",
-  "version": "2.6.2",
+  "version": "3.0.0",
   "description": "react component confirm dialog.",
   "main": "lib/index.js",
   "scripts": {
@@ -63,8 +63,8 @@
     "eslint-plugin-standard": "^3.0.1",
     "mocha": "^3.5.0",
     "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-hot-loader": "^4.3.3",
     "rimraf": "^2.6.1",
     "style-loader": "^0.18.2",
@@ -73,7 +73,7 @@
     "webpack-dev-server": "^2.7.1"
   },
   "peerDependencies": {
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=10.0.0"
   }
 }