react-confirm-alert - npm Package Compare versions

Comparing version 2.8.0 to 3.0.0

index.d.ts

 declare module 'react-confirm-alert' {
   export interface ReactConfirmAlertProps {
+    targetId: string
     title?: string
@@ -7,16 +8,17 @@ message?: string
       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
@@ -23,0 +25,0 @@ }

lib/index.js

@@ -8,2 +8,4 @@ 'use strict';
 
+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; }; }();
@@ -23,3 +25,3 @@
 
-var _reactDom = require('react-dom');
+var _client = require('react-dom/client');
 
@@ -66,8 +68,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
       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,
+          onkeyPress = _this$props2.onkeyPress,
           keyCodeForClose = _this$props2.keyCodeForClose;
@@ -86,6 +89,10 @@
       }
+
+      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();
@@ -152,5 +159,9 @@ }, _this.renderCustomUI = function () {
                   '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
@@ -180,2 +191,3 @@ );
   onKeypressEscape: _propTypes2.default.func,
+  onkeyPress: _propTypes2.default.func,
   overlayClassName: _propTypes2.default.string
@@ -218,2 +230,5 @@ }, _class.defaultProps = {
 
+var root = null;
+var targetId = 'react-confirm-alert';
+
 function createSVGBlurReconfirm() {
@@ -249,21 +264,25 @@ // If has svg ignore to create the svg
 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);
   }
@@ -270,0 +289,0 @@ }

package.json

 {
   "name": "react-confirm-alert",
-  "version": "2.8.0",
+  "version": "3.0.0",
   "description": "react component confirm dialog.",
@@ -66,4 +66,4 @@ "main": "lib/index.js",
     "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",
@@ -77,5 +77,5 @@ "rimraf": "^2.6.1",
   "peerDependencies": {
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=10.0.0"
   }
 }

Readme.md

 # 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)
 
@@ -33,4 +37,2 @@ ## Getting started
   ],
-  childrenElement: () => <div />,
-  customUI: ({ onClose }) => <div>Custom UI</div>,
   closeOnEscape: true,
@@ -42,2 +44,3 @@ closeOnClickOutside: true,
   onClickOutside: () => {},
+  onKeypress: () => {},
   onKeypressEscape: () => {},
@@ -44,0 +47,0 @@ overlayClassName: "overlay-custom-class-name"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18943

increased by4.1%

Lines of code

380

increased by4.4%

Number of lines in readme file

108

increased by2.86%

No dependency changes