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.
- package/README.md +4 -6
- package/dist/confirmable.d.ts +3 -0
- package/dist/confirmable.js +46 -0
- package/dist/context.d.ts +3 -0
- package/dist/context.js +18 -0
- package/dist/createConfirmation.d.ts +4 -0
- package/dist/createConfirmation.js +48 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +52 -0
- package/dist/mounter/domTree.d.ts +2 -0
- package/dist/mounter/domTree.js +43 -0
- package/dist/mounter/reactTree.d.ts +3 -0
- package/dist/mounter/reactTree.js +62 -0
- package/dist/types.d.ts +43 -0
- package/dist/types.js +6 -0
- package/package.json +34 -18
- package/src/confirmable.tsx +35 -0
- package/src/context.ts +17 -0
- package/src/createConfirmation.ts +43 -0
- package/src/{index.js → index.ts} +9 -0
- package/src/mounter/domTree.tsx +36 -0
- package/src/mounter/reactTree.tsx +62 -0
- package/src/types.ts +59 -0
- package/lib/confirmable.js +0 -50
- package/lib/context.js +0 -26
- package/lib/createConfirmation.js +0 -47
- package/lib/index.js +0 -61
- package/lib/mounter/domTree.js +0 -34
- package/lib/mounter/reactTree.js +0 -77
- package/src/confirmable.js +0 -31
- package/src/context.js +0 -20
- package/src/createConfirmation.js +0 -31
- package/src/mounter/domTree.js +0 -35
- package/src/mounter/reactTree.js +0 -56
- package/typescript/index.d.ts +0 -86
|
@@ -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;
|
package/lib/confirmable.js
DELETED
|
@@ -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 }; }
|
package/lib/mounter/domTree.js
DELETED
|
@@ -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
|
-
}
|
package/lib/mounter/reactTree.js
DELETED
|
@@ -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
|
-
}
|
package/src/confirmable.js
DELETED
|
@@ -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());
|
package/src/mounter/domTree.js
DELETED
|
@@ -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
|
-
}
|
package/src/mounter/reactTree.js
DELETED
|
@@ -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
|
-
}
|