react-confirm 0.1.21 → 0.2.0

package/README.md

@@ -34,13 +34,13 @@ import PropTypes from 'prop-types';
 import { confirmable } from 'react-confirm';
 import Dialog from 'any-dialog-library'; // your choice.
 
-const YourDialog = ({show, proceed, confirmation, options}) => {
+const YourDialog = ({show, proceed, confirmation, options}) => (
   <Dialog onHide={() => proceed(false)} show={show}>
     {confirmation}
     <button onClick={() => proceed(false)}>CANCEL</button>
     <button onClick={() => proceed(true)}>OK</button>
   </Dialog>
-}
+)
 
 YourDialog.propTypes = {
   show: PropTypes.bool,            // from confirmable. indicates if the dialog is shown or not.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-confirm",
-  "version": "0.1.21",
+  "version": "0.2.0",
   "description": "Small library which makes your Dialog component callable",
   "main": "lib/index.js",
   "repository": {
@@ -29,19 +29,15 @@
   "author": "",
   "license": "MIT",
   "peerDependencies": {
-    "react-dom": "^0.14.7 || 15.x || 16.x || 17.x",
-    "react": "^0.14.7 || 15.x || 16.x || 17.x"
+    "react-dom": "18.x",
+    "react": "18.x"
   },
   "devDependencies": {
-    "babel-cli": "^6.4.5",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^6.4.1",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
-    "dependency-check": "^3.2.1",
-    "rimraf": "^2.5.1",
-    "webpack": "^1.15.0"
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.9",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "rimraf": "^3.0.2"
   },
   "dependencies": {}
 }

package/src/confirmable.js

@@ -1,38 +1,31 @@
-import React from 'react'
+import React, {useState} from 'react';
 
-const confirmable = (Component) => class extends React.Component {
+const confirmable = (Component) => ({dispose, reject, resolve, ...other}) => {
+  const [show, setShow] = useState(true);
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      show: true,
-    }
-  }
-  dismiss() {
-    this.setState({
-      show: false,
-    }, () => {
-      this.props.dispose();
-    });
-  }
-  cancel(value) {
-    this.setState({
-      show: false,
-    }, () => {
-      this.props.reject(value);
-    });
+  const dismiss = () => {
+    setShow(false);
+    dispose()
   }
-  proceed(value) {
-    this.setState({
-      show: false,
-    }, () => {
-      this.props.resolve(value);
-    });
+
+  const cancel = (value) => {
+    setShow(false)
+    reject(value);
   }
-  render() {
-    return <Component proceed={::this.proceed} cancel={::this.cancel} dismiss={::this.dismiss} show={this.state.show} {...this.props}/>
+
+  const proceed = (value) => {
+    setShow(false)
+    resolve(value)
   }
+
+  return (
+    <Component
+      cancel={cancel}
+      dismiss={dismiss}
+      proceed={proceed}
+      show={show}
+      {...other} />
+  );
 }
 
 export default confirmable;

package/src/createConfirmation.js

@@ -1,20 +1,20 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 const createConfirmation = (Component, unmountDelay = 1000, mountingNode) => {
   return (props) => {
     const wrapper = (mountingNode || document.body).appendChild(document.createElement('div'));
+    const root = createRoot(wrapper);
 
     const promise = new Promise((resolve, reject) => {
       try {
-        ReactDOM.render(
+        root.render(
           <Component
             reject={reject}
             resolve={resolve}
             dispose={dispose}
             {...props}
-          />,
-          wrapper
+          />
         );
       } catch (e) {
         console.error(e);
@@ -24,7 +24,7 @@ const createConfirmation = (Component, unmountDelay = 1000, mountingNode) => {
 
     function dispose() {
       setTimeout(() => {
-        ReactDOM.unmountComponentAtNode(wrapper);
+        root.unmount();
         setTimeout(() => {
             if (document.body.contains(wrapper)) {
               document.body.removeChild(wrapper)

package/lib/confirmable.js

@@ -1,82 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-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 _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var confirmable = function confirmable(Component) {
-  return function (_React$Component) {
-    _inherits(_class, _React$Component);
-
-    function _class(props) {
-      _classCallCheck(this, _class);
-
-      var _this = _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).call(this, props));
-
-      _this.state = {
-        show: true
-      };
-      return _this;
-    }
-
-    _createClass(_class, [{
-      key: 'dismiss',
-      value: function dismiss() {
-        var _this2 = this;
-
-        this.setState({
-          show: false
-        }, function () {
-          _this2.props.dispose();
-        });
-      }
-    }, {
-      key: 'cancel',
-      value: function cancel(value) {
-        var _this3 = this;
-
-        this.setState({
-          show: false
-        }, function () {
-          _this3.props.reject(value);
-        });
-      }
-    }, {
-      key: 'proceed',
-      value: function proceed(value) {
-        var _this4 = this;
-
-        this.setState({
-          show: false
-        }, function () {
-          _this4.props.resolve(value);
-        });
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(Component, _extends({ proceed: this.proceed.bind(this), cancel: this.cancel.bind(this), dismiss: this.dismiss.bind(this), show: this.state.show }, this.props));
-      }
-    }]);
-
-    return _class;
-  }(_react2.default.Component);
-};
-
-exports.default = confirmable;

package/lib/createConfirmation.js

@@ -1,60 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-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 _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var createConfirmation = function createConfirmation(Component) {
-  var unmountDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
-  var mountingNode = arguments[2];
-
-  return function (props) {
-    var wrapper = (mountingNode || document.body).appendChild(document.createElement('div'));
-
-    var promise = new Promise(function (resolve, reject) {
-      try {
-        _reactDom2.default.render(_react2.default.createElement(Component, _extends({
-          reject: reject,
-          resolve: resolve,
-          dispose: dispose
-        }, props)), wrapper);
-      } catch (e) {
-        console.error(e);
-        throw e;
-      }
-    });
-
-    function dispose() {
-      setTimeout(function () {
-        _reactDom2.default.unmountComponentAtNode(wrapper);
-        setTimeout(function () {
-          if (document.body.contains(wrapper)) {
-            document.body.removeChild(wrapper);
-          }
-        });
-      }, unmountDelay);
-    }
-
-    return promise.then(function (result) {
-      dispose();
-      return result;
-    }, function (result) {
-      dispose();
-      return Promise.reject(result);
-    });
-  };
-};
-
-exports.default = createConfirmation;

package/lib/index.js

@@ -1,19 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createConfirmation = exports.confirmable = undefined;
-
-var _confirmable = require('./confirmable');
-
-var _confirmable2 = _interopRequireDefault(_confirmable);
-
-var _createConfirmation = require('./createConfirmation');
-
-var _createConfirmation2 = _interopRequireDefault(_createConfirmation);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.confirmable = _confirmable2.default;
-exports.createConfirmation = _createConfirmation2.default;