react-confirm 0.1.24 → 0.2.2

package/README.md

@@ -20,6 +20,11 @@ In the [example](https://github.com/haradakunihiko/react-confirm/tree/master/exa
 ## Demo
 https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1
 
+## Versions
+
+- React 18+ users should use `react-confirm` version 0.2.x
+- React <=17 users should stick to `react-confirm` version 0.1.x
+
 ## Usage
 1. create your dialog component.
 2. apply `confirmable` to your component (optional, but usually recommended).

package/lib/confirmable.js

@@ -1,82 +1,73 @@
-'use strict';
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _excluded = ["dispose", "reject", "resolve"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-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; };
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-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; }; }();
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-var _react = require('react');
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-var _react2 = _interopRequireDefault(_react);
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-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; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 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);
+  return function (_ref) {
+    var dispose = _ref.dispose,
+        reject = _ref.reject,
+        resolve = _ref.resolve,
+        other = _objectWithoutProperties(_ref, _excluded);
+
+    var _useState = (0, _react.useState)(true),
+        _useState2 = _slicedToArray(_useState, 2),
+        show = _useState2[0],
+        setShow = _useState2[1];
+
+    var dismiss = function dismiss() {
+      setShow(false);
+      dispose();
+    };
+
+    var cancel = function cancel(value) {
+      setShow(false);
+      reject(value);
+    };
+
+    var proceed = function proceed(value) {
+      setShow(false);
+      resolve(value);
+    };
+
+    return /*#__PURE__*/_react["default"].createElement(Component, _extends({
+      cancel: cancel,
+      dismiss: dismiss,
+      proceed: proceed,
+      show: show
+    }, other));
+  };
 };
 
-exports.default = confirmable;
+var _default = confirmable;
+exports["default"] = _default;

package/lib/createConfirmation.js

@@ -1,35 +1,31 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports["default"] = void 0;
 
-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 = _interopRequireDefault(require("react"));
 
-var _react = require('react');
+var _client = require("react-dom/client");
 
-var _react2 = _interopRequireDefault(_react);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 var createConfirmation = function createConfirmation(Component) {
   var unmountDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
-  var mountingNode = arguments[2];
-
+  var mountingNode = arguments.length > 2 ? arguments[2] : undefined;
   return function (props) {
     var wrapper = (mountingNode || document.body).appendChild(document.createElement('div'));
-
+    var root = (0, _client.createRoot)(wrapper);
     var promise = new Promise(function (resolve, reject) {
       try {
-        _reactDom2.default.render(_react2.default.createElement(Component, _extends({
+        root.render( /*#__PURE__*/_react["default"].createElement(Component, _extends({
           reject: reject,
           resolve: resolve,
           dispose: dispose
-        }, props)), wrapper);
+        }, props)));
       } catch (e) {
         console.error(e);
         throw e;
@@ -38,7 +34,7 @@ var createConfirmation = function createConfirmation(Component) {
 
     function dispose() {
       setTimeout(function () {
-        _reactDom2.default.unmountComponentAtNode(wrapper);
+        root.unmount();
         setTimeout(function () {
           if (document.body.contains(wrapper)) {
             document.body.removeChild(wrapper);
@@ -57,4 +53,5 @@ var createConfirmation = function createConfirmation(Component) {
   };
 };
 
-exports.default = createConfirmation;
+var _default = createConfirmation;
+exports["default"] = _default;

package/lib/index.js

@@ -1,19 +1,23 @@
-'use strict';
+"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');
+Object.defineProperty(exports, "confirmable", {
+  enumerable: true,
+  get: function get() {
+    return _confirmable["default"];
+  }
+});
+Object.defineProperty(exports, "createConfirmation", {
+  enumerable: true,
+  get: function get() {
+    return _createConfirmation["default"];
+  }
+});
 
-var _createConfirmation2 = _interopRequireDefault(_createConfirmation);
+var _confirmable = _interopRequireDefault(require("./confirmable"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _createConfirmation = _interopRequireDefault(require("./createConfirmation"));
 
-exports.confirmable = _confirmable2.default;
-exports.createConfirmation = _createConfirmation2.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-confirm",
-  "version": "0.1.24",
+  "version": "0.2.2",
   "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)