react-confirm 0.4.0 → 0.5.0-4

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.
@@ -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());
package/src/index.js DELETED
@@ -1,19 +0,0 @@
1
- import confirmable from './confirmable';
2
- import createConfirmation, { createConfirmationCreater } from './createConfirmation';
3
- import { createDomTreeMounter } from './mounter/domTree';
4
- import { createReactTreeMounter, createMountPoint } from './mounter/reactTree';
5
- import {
6
- createConfirmationContext,
7
- ContextAwareConfirmation
8
- } from './context';
9
-
10
- export {
11
- confirmable,
12
- createConfirmation,
13
- createConfirmationCreater,
14
- createDomTreeMounter,
15
- createReactTreeMounter,
16
- createMountPoint,
17
- createConfirmationContext,
18
- ContextAwareConfirmation
19
- };
@@ -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
- }
@@ -1,86 +0,0 @@
1
- import * as React from 'react';
2
-
3
- type ConfirmableProps<P, R> = {
4
- dispose: () => void;
5
- resolve: (value: R | PromiseLike<R>) => void;
6
- reject: (reason?: any) => void;
7
- } & P;
8
-
9
- type ConfirmableDialog<P, R> = React.ComponentType<ConfirmableProps<P, R>>;
10
-
11
- export type ConfirmDialogProps<P, R> = {
12
- /** Dismiss dialog without resolving the promise. */
13
- dismiss: () => void;
14
- /** Resolve the promise with the given value. */
15
- proceed: (value: R) => void;
16
- /** Reject the promise with the given value. */
17
- cancel: (value?: any) => void;
18
- /** Indicates if the dialog should be shown aka. someone is waiting for a promise. */
19
- show: boolean;
20
- } & P;
21
-
22
- export type ConfirmDialog<P, R> = React.ComponentType<ConfirmDialogProps<P, R>> ;
23
-
24
- export declare function confirmable<P, R>(
25
- component: ConfirmDialog<P, R>
26
- ): ConfirmableDialog<P, R>;
27
-
28
- export declare function createConfirmation<P, R>(
29
- component: ConfirmableDialog<P, R>,
30
- unmountDelay?: number,
31
- mountingNode?: HTMLElement,
32
- ): (props: P) => Promise<R>;
33
-
34
- type Mounter = {
35
- mount: (component: React.ComponentType, props: any, mountNode?: HTMLElement) => string
36
- unmount: (key: string) => void
37
- }
38
-
39
- type TreeMounter = {
40
- options: {
41
- setMountedCallback: (callback: (components: any) => void) => void
42
- mountNode?: Element | DocumentFragment | HTMLElement
43
- }
44
- } & Mounter
45
-
46
- export declare function createReactTreeMounter(mountNode?: Element | DocumentFragment | HTMLElement): TreeMounter;
47
- export declare function createMountPoint(mounter: TreeMounter): React.ComponentType;
48
- export declare function createDomTreeMounter(defaultMountNode?: Element | DocumentFragment | HTMLElement): Mounter;
49
- export declare function createConfirmationCreater(mounter: Mounter): typeof createConfirmation;
50
-
51
- // Context-aware confirmation system
52
- export interface ConfirmationContext {
53
- /**
54
- * Creates a confirmation function for a given component
55
- * @param component - The confirmable component
56
- * @param unmountDelay - Delay before unmounting the component (default: 1000ms)
57
- * @returns Confirmation function that returns a Promise
58
- */
59
- createConfirmation: <P, R>(
60
- component: ConfirmableDialog<P, R>,
61
- unmountDelay?: number
62
- ) => (props: P) => Promise<R>;
63
-
64
- /**
65
- * React component that must be rendered in your app to display confirmations
66
- * Place this component at the root level of your app or where you want confirmations to appear
67
- */
68
- ConfirmationRoot: React.ComponentType;
69
- }
70
-
71
- /**
72
- * Creates a React context-aware confirmation system.
73
- * This provides a simple interface for using confirmations within React component tree.
74
- *
75
- * @param mountNode - Optional DOM node to mount dialogs in
76
- * @returns Object containing createConfirmation function and ConfirmationRoot component
77
- */
78
- export declare function createConfirmationContext(
79
- mountNode?: Element | DocumentFragment | HTMLElement
80
- ): ConfirmationContext;
81
-
82
- /**
83
- * Context-aware confirmation system for convenient usage
84
- * Use this if you don't need custom mount nodes
85
- */
86
- export declare const ContextAwareConfirmation: ConfirmationContext;