react-confirm 0.4.0 → 0.5.0-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,62 @@
1
+ import React, { useState, useEffect } from 'react';
2
+ import { createPortal } from 'react-dom';
3
+ import type { TreeMounter } from '../types';
4
+
5
+ type ConfirmsMap = Record<string, { Component: React.ComponentType<any>; props: any }>;
6
+
7
+ export function createReactTreeMounter(mountNode?: Element | DocumentFragment | HTMLElement): TreeMounter {
8
+ const confirms: ConfirmsMap = {};
9
+ const callbacks: { mounted?: (components: ConfirmsMap) => void } = {};
10
+
11
+ function mount(Component: React.ComponentType<any>, props: any, _mountNode?: HTMLElement) {
12
+ const key = Math.floor(Math.random() * (1 << 30)).toString(16);
13
+ confirms[key] = { Component, props };
14
+ callbacks.mounted && callbacks.mounted(confirms);
15
+ return key;
16
+ // _mountNode is ignored - ReactTreeMounter uses options.mountNode instead
17
+ }
18
+
19
+ function unmount(key: string) {
20
+ delete confirms[key];
21
+ callbacks.mounted && callbacks.mounted(confirms);
22
+ }
23
+
24
+ function setMountedCallback(func: (components: ConfirmsMap) => void) {
25
+ callbacks.mounted = func;
26
+ }
27
+
28
+ return {
29
+ mount,
30
+ unmount,
31
+ options: {
32
+ setMountedCallback,
33
+ mountNode,
34
+ },
35
+ };
36
+ }
37
+
38
+ export function createMountPoint(reactTreeMounter: TreeMounter) {
39
+ return () => {
40
+ const [confirmComponents, setConfirmComponents] = useState<ConfirmsMap>({});
41
+
42
+ useEffect(() => {
43
+ return reactTreeMounter.options.setMountedCallback((components) => {
44
+ setConfirmComponents({ ...components });
45
+ });
46
+ }, []);
47
+
48
+ let element = (
49
+ <>
50
+ {Object.keys(confirmComponents).map((key) => {
51
+ const { Component, props } = confirmComponents[key];
52
+ return <Component key={key} {...props} />;
53
+ })}
54
+ </>
55
+ );
56
+ if (reactTreeMounter.options.mountNode) {
57
+ element = createPortal(element, reactTreeMounter.options.mountNode);
58
+ }
59
+
60
+ return element;
61
+ };
62
+ }
package/src/types.ts ADDED
@@ -0,0 +1,59 @@
1
+ import * as React from 'react';
2
+
3
+ // Core types for the confirmation system
4
+ export type ConfirmableProps<P, R> = {
5
+ dispose: () => void;
6
+ resolve: (value: R | PromiseLike<R>) => void;
7
+ reject: (reason?: any) => void;
8
+ } & P;
9
+
10
+ export type ConfirmDialogProps<P, R> = {
11
+ /** Dismiss dialog without resolving the promise. */
12
+ dismiss: () => void;
13
+ /** Resolve the promise with the given value. */
14
+ proceed: (value: R) => void;
15
+ /** Reject the promise with the given value. */
16
+ cancel: (value?: any) => void;
17
+ /** Indicates if the dialog should be shown aka. someone is waiting for a promise. */
18
+ show: boolean;
19
+ } & P;
20
+
21
+ export type ConfirmDialog<P, R> = React.ComponentType<ConfirmDialogProps<P, R>>;
22
+ export type ConfirmableDialog<P, R> = React.ComponentType<ConfirmableProps<P, R>>;
23
+
24
+ // Mounter types (public)
25
+ export type Mounter = {
26
+ mount: (component: React.ComponentType, props: any, mountNode?: HTMLElement) => string;
27
+ unmount: (key: string) => void;
28
+ };
29
+
30
+ export type TreeMounter = {
31
+ options: {
32
+ setMountedCallback: (callback: (components: any) => void) => void;
33
+ mountNode?: Element | DocumentFragment | HTMLElement;
34
+ };
35
+ } & Mounter;
36
+
37
+ // Context-aware confirmation system
38
+ export interface ConfirmationContext {
39
+ /**
40
+ * Creates a confirmation function for a given component
41
+ * @param component - The confirmable component
42
+ * @param unmountDelay - Delay before unmounting the component (default: 1000ms)
43
+ * @returns Confirmation function that returns a Promise
44
+ */
45
+ createConfirmation: <P, R>(
46
+ component: ConfirmableDialog<P, R>,
47
+ unmountDelay?: number
48
+ ) => (props: P) => Promise<R>;
49
+
50
+ /**
51
+ * React component that must be rendered in your app to display confirmations
52
+ * Place this component at the root level of your app or where you want confirmations to appear
53
+ */
54
+ ConfirmationRoot: React.ComponentType;
55
+ }
56
+
57
+ // Force declaration file emission for this module
58
+ // This value is never imported by runtime code; it only ensures dist/types.d.ts exists.
59
+ export const __types_marker = 0 as const;
@@ -1,50 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports["default"] = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _excluded = ["dispose", "reject", "resolve"];
10
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
11
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
12
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
13
- 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."); }
14
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
15
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
16
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
17
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
18
- function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) { o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
19
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } } return t; }
20
- var confirmable = function confirmable(Component) {
21
- return function (_ref) {
22
- var dispose = _ref.dispose,
23
- reject = _ref.reject,
24
- resolve = _ref.resolve,
25
- other = _objectWithoutProperties(_ref, _excluded);
26
- var _useState = (0, _react.useState)(true),
27
- _useState2 = _slicedToArray(_useState, 2),
28
- show = _useState2[0],
29
- setShow = _useState2[1];
30
- var dismiss = function dismiss() {
31
- setShow(false);
32
- dispose();
33
- };
34
- var cancel = function cancel(value) {
35
- setShow(false);
36
- reject(value);
37
- };
38
- var proceed = function proceed(value) {
39
- setShow(false);
40
- resolve(value);
41
- };
42
- return /*#__PURE__*/_react["default"].createElement(Component, _extends({
43
- cancel: cancel,
44
- dismiss: dismiss,
45
- proceed: proceed,
46
- show: show
47
- }, other));
48
- };
49
- };
50
- var _default = exports["default"] = confirmable;
package/lib/context.js DELETED
@@ -1,26 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.ContextAwareConfirmation = void 0;
7
- exports.createConfirmationContext = createConfirmationContext;
8
- var _reactTree = require("./mounter/reactTree");
9
- var _createConfirmation2 = require("./createConfirmation");
10
- function createConfirmationContext(mountNode) {
11
- var mounter = (0, _reactTree.createReactTreeMounter)(mountNode);
12
- var _createConfirmation = (0, _createConfirmation2.createConfirmationCreater)(mounter);
13
- var ConfirmationRoot = (0, _reactTree.createMountPoint)(mounter);
14
- return {
15
- createConfirmation: function createConfirmation(component, unmountDelay) {
16
- return _createConfirmation(component, unmountDelay);
17
- },
18
- ConfirmationRoot: ConfirmationRoot
19
- };
20
- }
21
-
22
- /**
23
- * Context-aware confirmation system for convenient usage
24
- * Use this if you don't need custom mount nodes
25
- */
26
- var ContextAwareConfirmation = exports.ContextAwareConfirmation = createConfirmationContext();
@@ -1,47 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports["default"] = exports.createConfirmationCreater = void 0;
7
- var _domTree = require("./mounter/domTree");
8
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
9
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
10
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
11
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
12
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
13
- function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
14
- var createConfirmationCreater = exports.createConfirmationCreater = function createConfirmationCreater(mounter) {
15
- return function (Component) {
16
- var unmountDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
17
- var mountingNode = arguments.length > 2 ? arguments[2] : undefined;
18
- return function (props) {
19
- var mountId;
20
- var promise = new Promise(function (resolve, reject) {
21
- try {
22
- mountId = mounter.mount(Component, _objectSpread({
23
- reject: reject,
24
- resolve: resolve,
25
- dispose: dispose
26
- }, props), mountingNode);
27
- } catch (e) {
28
- console.error(e);
29
- throw e;
30
- }
31
- });
32
- function dispose() {
33
- setTimeout(function () {
34
- mounter.unmount(mountId);
35
- }, unmountDelay);
36
- }
37
- return promise.then(function (result) {
38
- dispose();
39
- return result;
40
- }, function (result) {
41
- dispose();
42
- return Promise.reject(result);
43
- });
44
- };
45
- };
46
- };
47
- var _default = exports["default"] = createConfirmationCreater((0, _domTree.createDomTreeMounter)());
package/lib/index.js DELETED
@@ -1,61 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "ContextAwareConfirmation", {
8
- enumerable: true,
9
- get: function get() {
10
- return _context.ContextAwareConfirmation;
11
- }
12
- });
13
- Object.defineProperty(exports, "confirmable", {
14
- enumerable: true,
15
- get: function get() {
16
- return _confirmable["default"];
17
- }
18
- });
19
- Object.defineProperty(exports, "createConfirmation", {
20
- enumerable: true,
21
- get: function get() {
22
- return _createConfirmation["default"];
23
- }
24
- });
25
- Object.defineProperty(exports, "createConfirmationContext", {
26
- enumerable: true,
27
- get: function get() {
28
- return _context.createConfirmationContext;
29
- }
30
- });
31
- Object.defineProperty(exports, "createConfirmationCreater", {
32
- enumerable: true,
33
- get: function get() {
34
- return _createConfirmation.createConfirmationCreater;
35
- }
36
- });
37
- Object.defineProperty(exports, "createDomTreeMounter", {
38
- enumerable: true,
39
- get: function get() {
40
- return _domTree.createDomTreeMounter;
41
- }
42
- });
43
- Object.defineProperty(exports, "createMountPoint", {
44
- enumerable: true,
45
- get: function get() {
46
- return _reactTree.createMountPoint;
47
- }
48
- });
49
- Object.defineProperty(exports, "createReactTreeMounter", {
50
- enumerable: true,
51
- get: function get() {
52
- return _reactTree.createReactTreeMounter;
53
- }
54
- });
55
- var _confirmable = _interopRequireDefault(require("./confirmable"));
56
- var _createConfirmation = _interopRequireWildcard(require("./createConfirmation"));
57
- var _domTree = require("./mounter/domTree");
58
- var _reactTree = require("./mounter/reactTree");
59
- var _context = require("./context");
60
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
61
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -1,34 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.createDomTreeMounter = createDomTreeMounter;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _client = require("react-dom/client");
9
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
10
- function createDomTreeMounter(defaultMountNode) {
11
- var confirms = {};
12
- var callbacks = {};
13
- function mount(Component, props, mountNode) {
14
- var key = Math.floor(Math.random() * (1 << 30)).toString(16);
15
- var wrapper = (mountNode || defaultMountNode || document.body).appendChild(document.createElement('div'));
16
- confirms[key] = wrapper;
17
- var root = (0, _client.createRoot)(wrapper);
18
- root.render(/*#__PURE__*/_react["default"].createElement(Component, props));
19
- callbacks.mounted && callbacks.mounted();
20
- return key;
21
- }
22
- function unmount(key) {
23
- var wrapper = confirms[key];
24
- delete confirms[key];
25
- if (wrapper && wrapper.parentNode) {
26
- wrapper.parentNode.removeChild(wrapper);
27
- }
28
- }
29
- return {
30
- mount: mount,
31
- unmount: unmount,
32
- options: {}
33
- };
34
- }
@@ -1,77 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.createMountPoint = createMountPoint;
8
- exports.createReactTreeMounter = createReactTreeMounter;
9
- var _react = _interopRequireWildcard(require("react"));
10
- var _reactDom = require("react-dom");
11
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
12
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
13
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
14
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
15
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
16
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
17
- function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
18
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
19
- 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."); }
20
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
21
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
22
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
23
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
24
- function createReactTreeMounter(mountNode) {
25
- var confirms = {};
26
- var callbacks = {};
27
- function mount(Component, props, _mountNode) {
28
- var key = Math.floor(Math.random() * (1 << 30)).toString(16);
29
- confirms[key] = {
30
- Component: Component,
31
- props: props
32
- };
33
- callbacks.mounted && callbacks.mounted(confirms);
34
- return key;
35
- // _mountNode is ignored - ReactTreeMounter uses options.mountNode instead
36
- }
37
- function unmount(key) {
38
- delete confirms[key];
39
- callbacks.mounted && callbacks.mounted(confirms);
40
- }
41
- function setMountedCallback(func) {
42
- callbacks.mounted = func;
43
- }
44
- return {
45
- mount: mount,
46
- unmount: unmount,
47
- options: {
48
- setMountedCallback: setMountedCallback,
49
- mountNode: mountNode
50
- }
51
- };
52
- }
53
- function createMountPoint(reactTreeMounter) {
54
- return function () {
55
- var _useState = (0, _react.useState)({}),
56
- _useState2 = _slicedToArray(_useState, 2),
57
- confirmComponents = _useState2[0],
58
- setConfirmComponents = _useState2[1];
59
- (0, _react.useEffect)(function () {
60
- return reactTreeMounter.options.setMountedCallback(function (components) {
61
- setConfirmComponents(_objectSpread({}, components));
62
- });
63
- }, []);
64
- var element = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, Object.keys(confirmComponents).map(function (key) {
65
- var _confirmComponents$ke = confirmComponents[key],
66
- Component = _confirmComponents$ke.Component,
67
- props = _confirmComponents$ke.props;
68
- return /*#__PURE__*/_react["default"].createElement(Component, _extends({
69
- key: key
70
- }, props));
71
- }));
72
- if (reactTreeMounter.options.mountNode) {
73
- element = /*#__PURE__*/(0, _reactDom.createPortal)(element, reactTreeMounter.options.mountNode);
74
- }
75
- return element;
76
- };
77
- }
@@ -1,31 +0,0 @@
1
- import React, {useState} from 'react';
2
-
3
- const confirmable = (Component) => ({dispose, reject, resolve, ...other}) => {
4
- const [show, setShow] = useState(true);
5
-
6
- const dismiss = () => {
7
- setShow(false);
8
- dispose()
9
- }
10
-
11
- const cancel = (value) => {
12
- setShow(false)
13
- reject(value);
14
- }
15
-
16
- const proceed = (value) => {
17
- setShow(false)
18
- resolve(value)
19
- }
20
-
21
- return (
22
- <Component
23
- cancel={cancel}
24
- dismiss={dismiss}
25
- proceed={proceed}
26
- show={show}
27
- {...other} />
28
- );
29
- }
30
-
31
- export default confirmable;
package/src/context.js DELETED
@@ -1,20 +0,0 @@
1
- import { createReactTreeMounter, createMountPoint } from './mounter/reactTree';
2
- import { createConfirmationCreater } from './createConfirmation';
3
-
4
- export function createConfirmationContext(mountNode) {
5
- const mounter = createReactTreeMounter(mountNode);
6
- const createConfirmation = createConfirmationCreater(mounter);
7
- const ConfirmationRoot = createMountPoint(mounter);
8
-
9
- return {
10
- createConfirmation: (component, unmountDelay) => createConfirmation(component, unmountDelay),
11
-
12
- ConfirmationRoot
13
- };
14
- }
15
-
16
- /**
17
- * Context-aware confirmation system for convenient usage
18
- * Use this if you don't need custom mount nodes
19
- */
20
- export const ContextAwareConfirmation = createConfirmationContext();
@@ -1,31 +0,0 @@
1
- import { createDomTreeMounter } from './mounter/domTree';
2
-
3
- export const createConfirmationCreater = (mounter) => (Component, unmountDelay = 1000, mountingNode) => {
4
- return (props) => {
5
- let mountId;
6
- const promise = new Promise((resolve, reject) => {
7
- try {
8
- mountId = mounter.mount(Component, { reject, resolve, dispose, ...props}, mountingNode)
9
- } catch (e) {
10
- console.error(e);
11
- throw e;
12
- }
13
- })
14
-
15
- function dispose() {
16
- setTimeout(() => {
17
- mounter.unmount(mountId);
18
- }, unmountDelay);
19
- }
20
-
21
- return promise.then((result) => {
22
- dispose();
23
- return result;
24
- }, (result) => {
25
- dispose();
26
- return Promise.reject(result);
27
- });
28
- }
29
- }
30
-
31
- export default createConfirmationCreater(createDomTreeMounter());
@@ -1,35 +0,0 @@
1
- import React from 'react';
2
- import { createRoot } from 'react-dom/client';
3
-
4
- export function createDomTreeMounter(defaultMountNode) {
5
- const confirms = {};
6
- const callbacks = {};
7
-
8
- function mount(Component, props, mountNode){
9
- const key = Math.floor(Math.random() * (1 << 30)).toString(16);
10
- const wrapper = (mountNode || defaultMountNode || document.body).appendChild(document.createElement('div'));
11
- confirms[key] = wrapper;
12
-
13
- const root = createRoot(wrapper);
14
-
15
- root.render(
16
- <Component
17
- {...props}
18
- />
19
- );
20
- callbacks.mounted && callbacks.mounted();
21
- return key;
22
- }
23
-
24
- function unmount(key) {
25
- const wrapper = confirms[key];
26
- delete confirms[key];
27
-
28
- if (wrapper && wrapper.parentNode) {
29
- wrapper.parentNode.removeChild(wrapper);
30
- }
31
- }
32
- return {
33
- mount, unmount, options: {}
34
- }
35
- }
@@ -1,56 +0,0 @@
1
- import React, { useState, useEffect } from 'react'
2
- import { createPortal } from 'react-dom';
3
-
4
- export function createReactTreeMounter(mountNode) {
5
- const confirms = {};
6
- const callbacks = {};
7
-
8
- function mount(Component, props, _mountNode){
9
- const key = Math.floor(Math.random() * (1 << 30)).toString(16);
10
- confirms[key] = { Component, props};
11
- callbacks.mounted && callbacks.mounted(confirms);
12
- return key;
13
- // _mountNode is ignored - ReactTreeMounter uses options.mountNode instead
14
- }
15
- function unmount(key) {
16
- delete confirms[key];
17
- callbacks.mounted && callbacks.mounted(confirms);
18
- }
19
-
20
- function setMountedCallback(func) {
21
- callbacks.mounted = func;
22
- }
23
-
24
- return {
25
- mount, unmount,
26
- options: {
27
- setMountedCallback, mountNode
28
- }
29
- }
30
- }
31
-
32
- export function createMountPoint(reactTreeMounter) {
33
- return () => {
34
- const [confirmComponents, setConfirmComponents] = useState({});
35
-
36
- useEffect(() => {
37
- return reactTreeMounter.options.setMountedCallback((components) => {
38
- setConfirmComponents({...components});
39
- });
40
- }, []);
41
-
42
- let element = (
43
- <>
44
- {Object.keys(confirmComponents).map((key) => {
45
- const { Component, props } = confirmComponents[key];
46
- return <Component key={key} {...props} />
47
- })}
48
- </>
49
- )
50
- if (reactTreeMounter.options.mountNode) {
51
- element = createPortal(element, reactTreeMounter.options.mountNode);
52
- }
53
-
54
- return element;
55
- }
56
- }