@lerx/promise-modal 0.0.75 → 0.0.76
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/dist/app/ModalManager.d.ts +4 -1
- package/dist/app/ModalManager.d.ts.map +1 -1
- package/dist/core/node/ModalNode/AbstractNode.d.ts +4 -1
- package/dist/core/node/ModalNode/AbstractNode.d.ts.map +1 -1
- package/dist/core/node/ModalNode/PromptNode.d.ts +1 -1
- package/dist/core/node/ModalNode/PromptNode.d.ts.map +1 -1
- package/dist/index.cjs.js +1 -17
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1 -16
- package/dist/index.esm.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import type { Fn } from '../@aileron/declare';
|
|
2
2
|
import type { Modal } from '../types';
|
|
3
3
|
export declare class ModalManager {
|
|
4
|
-
|
|
4
|
+
private static __active__;
|
|
5
5
|
static activate(): boolean;
|
|
6
|
+
private static __anchor__;
|
|
6
7
|
static anchor(options?: {
|
|
7
8
|
tag?: string;
|
|
8
9
|
prefix?: string;
|
|
9
10
|
root?: HTMLElement;
|
|
10
11
|
}): HTMLElement;
|
|
12
|
+
private static __prerenderList__;
|
|
11
13
|
static get prerender(): Modal[];
|
|
14
|
+
private static __openHandler__;
|
|
12
15
|
static set openHandler(handler: Fn<[Modal], void>);
|
|
13
16
|
static get unanchored(): boolean;
|
|
14
17
|
static reset(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalManager.d.ts","sourceRoot":"","sources":["../../src/app/ModalManager.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,qBAAa,YAAY
|
|
1
|
+
{"version":3,"file":"ModalManager.d.ts","sourceRoot":"","sources":["../../src/app/ModalManager.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,qBAAa,YAAY;IACvB,OAAO,CAAC,MAAM,CAAC,UAAU,CAAS;IAClC,MAAM,CAAC,QAAQ;IAKf,OAAO,CAAC,MAAM,CAAC,UAAU,CAA4B;IACrD,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;QACtB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,WAAW,CAAC;KACpB,GAAG,WAAW;IAiBf,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAAe;IAC/C,MAAM,KAAK,SAAS,YAEnB;IAED,OAAO,CAAC,MAAM,CAAC,eAAe,CACe;IAC7C,MAAM,KAAK,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,EAGhD;IAED,MAAM,KAAK,UAAU,YAEpB;IAED,MAAM,CAAC,KAAK;IAQZ,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK;CAGzB"}
|
|
@@ -3,7 +3,6 @@ import type { Fn } from '../../../@aileron/declare';
|
|
|
3
3
|
import type { BackgroundComponent, BaseModal, ForegroundComponent, ManagedEntity, ModalBackground } from '../../../types';
|
|
4
4
|
type AbstractNodeProps<T, B> = BaseModal<T, B> & ManagedEntity;
|
|
5
5
|
export declare abstract class AbstractNode<T, B> {
|
|
6
|
-
#private;
|
|
7
6
|
readonly id: number;
|
|
8
7
|
readonly initiator: string;
|
|
9
8
|
readonly title?: ReactNode;
|
|
@@ -14,8 +13,12 @@ export declare abstract class AbstractNode<T, B> {
|
|
|
14
13
|
readonly dimmed: boolean;
|
|
15
14
|
readonly ForegroundComponent?: ForegroundComponent;
|
|
16
15
|
readonly BackgroundComponent?: BackgroundComponent;
|
|
16
|
+
private __alive__;
|
|
17
17
|
get alive(): boolean;
|
|
18
|
+
private __visible__;
|
|
18
19
|
get visible(): boolean;
|
|
20
|
+
private __resolve__;
|
|
21
|
+
private __listeners__;
|
|
19
22
|
constructor({ id, initiator, title, subtitle, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }: AbstractNodeProps<T, B>);
|
|
20
23
|
subscribe(listener: Fn): () => void;
|
|
21
24
|
publish(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AbstractNode.d.ts","sourceRoot":"","sources":["../../../../src/core/node/ModalNode/AbstractNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EACT,mBAAmB,EACnB,aAAa,EACb,eAAe,EAChB,MAAM,uBAAuB,CAAC;AAE/B,KAAK,iBAAiB,CAAC,CAAC,EAAE,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,aAAa,CAAC;AAE/D,8BAAsB,YAAY,CAAC,CAAC,EAAE,CAAC
|
|
1
|
+
{"version":3,"file":"AbstractNode.d.ts","sourceRoot":"","sources":["../../../../src/core/node/ModalNode/AbstractNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EACT,mBAAmB,EACnB,aAAa,EACb,eAAe,EAChB,MAAM,uBAAuB,CAAC;AAE/B,KAAK,iBAAiB,CAAC,CAAC,EAAE,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,aAAa,CAAC;AAE/D,8BAAsB,YAAY,CAAC,CAAC,EAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAE3B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAEzC,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,oBAAoB,EAAE,OAAO,CAAC;IACvC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IAEzB,QAAQ,CAAC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IACnD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAEnD,OAAO,CAAC,SAAS,CAAU;IAC3B,IAAI,KAAK,YAER;IACD,OAAO,CAAC,WAAW,CAAU;IAC7B,IAAI,OAAO,YAEV;IAED,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,aAAa,CAAsB;gBAE/B,EACV,EAAE,EACF,SAAS,EACT,KAAK,EACL,QAAQ,EACR,UAAU,EACV,MAAa,EACb,aAAqB,EACrB,oBAA2B,EAC3B,OAAO,EACP,mBAAmB,EACnB,mBAAmB,GACpB,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC;IAmB1B,SAAS,CAAC,QAAQ,EAAE,EAAE;IAMtB,OAAO;IAGP,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI;IAGlC,SAAS;IAKT,MAAM;IAKN,MAAM;IAKN,QAAQ,CAAC,OAAO,IAAI,IAAI;IACxB,QAAQ,CAAC,SAAS,IAAI,IAAI;CAC3B"}
|
|
@@ -3,7 +3,6 @@ import type { FooterOptions, ManagedEntity, PromptContentProps, PromptFooterRend
|
|
|
3
3
|
import { AbstractNode } from './AbstractNode';
|
|
4
4
|
type PromptNodeProps<T, B> = PromptModal<T, B> & ManagedEntity;
|
|
5
5
|
export declare class PromptNode<T, B> extends AbstractNode<T, B> {
|
|
6
|
-
#private;
|
|
7
6
|
readonly type: 'prompt';
|
|
8
7
|
readonly content?: ReactNode | ComponentType<PromptContentProps>;
|
|
9
8
|
readonly defaultValue: T | undefined;
|
|
@@ -11,6 +10,7 @@ export declare class PromptNode<T, B> extends AbstractNode<T, B> {
|
|
|
11
10
|
readonly disabled?: (value: T) => boolean;
|
|
12
11
|
readonly returnOnCancel?: boolean;
|
|
13
12
|
readonly footer?: PromptFooterRender<T> | FooterOptions | false;
|
|
13
|
+
private __value__;
|
|
14
14
|
constructor({ id, initiator, type, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }: PromptNodeProps<T, B>);
|
|
15
15
|
onChange(value: T): void;
|
|
16
16
|
onConfirm(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromptNode.d.ts","sourceRoot":"","sources":["../../../../src/core/node/ModalNode/PromptNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,WAAW,EACZ,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,aAAa,CAAC;AAE/D,qBAAa,UAAU,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"PromptNode.d.ts","sourceRoot":"","sources":["../../../../src/core/node/ModalNode/PromptNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,WAAW,EACZ,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,aAAa,CAAC;AAE/D,qBAAa,UAAU,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC;IACtD,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACjE,QAAQ,CAAC,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IAC1D,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC;IAC1C,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,MAAM,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,KAAK,CAAC;IAChE,OAAO,CAAC,SAAS,CAAgB;gBAErB,EACV,EAAE,EACF,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,cAAc,EACd,MAAM,EACN,UAAU,EACV,MAAM,EACN,aAAa,EACb,oBAAoB,EACpB,OAAO,EACP,mBAAmB,EACnB,mBAAmB,GACpB,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;IAwBxB,QAAQ,CAAC,KAAK,EAAE,CAAC;IAGjB,SAAS;IAGT,OAAO;CAIR"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,18 +1,2 @@
|
|
|
1
|
-
"use strict";var e,n,o,t,r,i,s,a,l,c,u=require("react/jsx-runtime"),d=require("react"),m=require("@winglet/common-utils"),p=require("@winglet/react-utils"),C=require("@emotion/css"),f=require("react-dom");
|
|
2
|
-
/******************************************************************************
|
|
3
|
-
Copyright (c) Microsoft Corporation.
|
|
4
|
-
|
|
5
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
6
|
-
purpose with or without fee is hereby granted.
|
|
7
|
-
|
|
8
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
9
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
10
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
11
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
12
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
13
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
14
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
15
|
-
***************************************************************************** */
|
|
16
|
-
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
17
|
-
function h(e,n,o,t){if("a"===o&&!t)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof n?e!==n||!t:!n.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?t:"a"===o?t.call(e):t?t.value:n.get(e)}function g(e,n,o,t,r){if("m"===t)throw new TypeError("Private method is not writable");if("a"===t&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof n?e!==n||!r:!n.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===t?r.call(e,o):r?r.value=o:n.set(e,o),o}"function"==typeof SuppressedError&&SuppressedError;class b{static activate(){return!h(e,e,"f",n)&&g(e,e,!0,"f",n)}static anchor(n){if(h(e,e,"f",o)){const n=document.getElementById(h(e,e,"f",o).id);if(n)return n}const{tag:t="div",prefix:r="promise-modal",root:i=document.body}=n||{},s=document.createElement(t);return s.setAttribute("id",`${r}-${m.getRandomString(36)}`),i.appendChild(s),g(e,e,s,"f",o),s}static get prerender(){return h(e,e,"f",t)}static set openHandler(n){g(e,e,n,"f",r),g(e,e,[],"f",t)}static get unanchored(){return!h(e,e,"f",o)}static reset(){g(e,e,!1,"f",n),g(e,e,null,"f",o),g(e,e,[],"f",t),g(e,e,(n=>h(e,e,"f",t).push(n)),"f",r)}static open(n){h(e,e,"f",r).call(e,n)}}e=b,n={value:!1},o={value:null},t={value:[]},r={value:n=>h(e,e,"f",t).push(n)};class y{get alive(){return h(this,i,"f")}get visible(){return h(this,s,"f")}constructor({id:e,initiator:n,title:o,subtitle:t,background:r,dimmed:c=!0,manualDestroy:u=!1,closeOnBackdropClick:d=!0,resolve:m,ForegroundComponent:p,BackgroundComponent:C}){i.set(this,void 0),s.set(this,void 0),a.set(this,void 0),l.set(this,new Set),this.id=e,this.initiator=n,this.title=o,this.subtitle=t,this.background=r,this.dimmed=c,this.manualDestroy=u,this.closeOnBackdropClick=d,this.ForegroundComponent=p,this.BackgroundComponent=C,g(this,i,!0,"f"),g(this,s,!0,"f"),g(this,a,m,"f")}subscribe(e){return h(this,l,"f").add(e),()=>{h(this,l,"f").delete(e)}}publish(){for(const e of h(this,l,"f"))e()}resolve(e){h(this,a,"f").call(this,e)}onDestroy(){const e=!0===h(this,i,"f");g(this,i,!1,"f"),this.manualDestroy&&e&&this.publish()}onShow(){const e=!1===h(this,s,"f");g(this,s,!0,"f"),e&&this.publish()}onHide(){const e=!0===h(this,s,"f");g(this,s,!1,"f"),e&&this.publish()}}i=new WeakMap,s=new WeakMap,a=new WeakMap,l=new WeakMap;class v extends y{constructor({id:e,initiator:n,type:o,subtype:t,title:r,subtitle:i,content:s,footer:a,background:l,dimmed:c,manualDestroy:u,closeOnBackdropClick:d,resolve:m,ForegroundComponent:p,BackgroundComponent:C}){super({id:e,initiator:n,title:r,subtitle:i,background:l,dimmed:c,manualDestroy:u,closeOnBackdropClick:d,resolve:m,ForegroundComponent:p,BackgroundComponent:C}),this.type=o,this.subtype=t,this.content=s,this.footer=a}onClose(){this.resolve(null)}onConfirm(){this.resolve(null)}}class x extends y{constructor({id:e,initiator:n,type:o,subtype:t,title:r,subtitle:i,content:s,footer:a,background:l,dimmed:c,manualDestroy:u,closeOnBackdropClick:d,resolve:m,ForegroundComponent:p,BackgroundComponent:C}){super({id:e,initiator:n,title:r,subtitle:i,background:l,dimmed:c,manualDestroy:u,closeOnBackdropClick:d,resolve:m,ForegroundComponent:p,BackgroundComponent:C}),this.type=o,this.subtype=t,this.content=s,this.footer=a}onClose(){this.resolve(!1)}onConfirm(){this.resolve(!0)}}class k extends y{constructor({id:e,initiator:n,type:o,title:t,subtitle:r,content:i,defaultValue:s,Input:a,disabled:l,returnOnCancel:u,footer:d,background:m,dimmed:p,manualDestroy:C,closeOnBackdropClick:f,resolve:h,ForegroundComponent:b,BackgroundComponent:y}){super({id:e,initiator:n,title:t,subtitle:r,background:m,dimmed:p,manualDestroy:C,closeOnBackdropClick:f,resolve:h,ForegroundComponent:b,BackgroundComponent:y}),c.set(this,void 0),this.type=o,this.content=i,this.Input=a,this.defaultValue=s,g(this,c,s,"f"),this.disabled=l,this.returnOnCancel=u,this.footer=d}onChange(e){g(this,c,e,"f")}onConfirm(){this.resolve(h(this,c,"f")??null)}onClose(){this.returnOnCancel?this.resolve(h(this,c,"f")??null):this.resolve(null)}}c=new WeakMap;const j=e=>{switch(e.type){case"alert":return new v(e);case"confirm":return new x(e);case"prompt":return new k(e)}throw new Error(`Unknown modal: ${e.type}`,{modal:e})},w=d.createContext({}),D=d.memo((({usePathname:e,children:n})=>{const o=d.useRef(new Map),[t,r]=d.useState([]),i=p.useReference(t),{pathname:s}=e(),a=d.useRef(s),l=d.useRef(0),c=A(),C=d.useMemo((()=>m.convertMsFromDuration(c.duration)),[c]);p.useOnMountLayout((()=>{const{manualDestroy:e,closeOnBackdropClick:n}=c;for(const t of b.prerender){const i=j({...t,id:l.current++,initiator:a.current,manualDestroy:void 0!==t.manualDestroy?t.manualDestroy:e,closeOnBackdropClick:void 0!==t.closeOnBackdropClick?t.closeOnBackdropClick:n});o.current.set(i.id,i),r((e=>[...e,i.id]))}return b.openHandler=t=>{const i=j({...t,id:l.current++,initiator:a.current,manualDestroy:void 0!==t.manualDestroy?t.manualDestroy:e,closeOnBackdropClick:void 0!==t.closeOnBackdropClick?t.closeOnBackdropClick:n});o.current.set(i.id,i),r((e=>{const n=[];for(let t=0;t<e.length;t++){const r=e[t];o.current.get(r)?.alive?n.push(r):o.current.delete(r)}return[...n,i.id]}))},()=>{b.reset()}})),d.useLayoutEffect((()=>{for(const e of i.current){const n=o.current.get(e);n?.alive&&(n.initiator===s?n.onShow():n.onHide())}a.current=s}),[s]);const f=d.useCallback((e=>o.current.get(e)),[]),h=d.useCallback((e=>{const n=o.current.get(e);n&&(n.onDestroy(),g.current?.())}),[]),g=d.useRef(void 0),y=d.useCallback((e=>{const n=o.current.get(e);n&&(n.onHide(),g.current?.(),n.manualDestroy||setTimeout((()=>{n.onDestroy()}),C))}),[C]),v=d.useCallback(((e,n)=>{const t=o.current.get(e);t&&"prompt"===t.type&&t.onChange(n)}),[]),x=d.useCallback((e=>{const n=o.current.get(e);n&&(n.onConfirm(),y(e))}),[y]),k=d.useCallback((e=>{const n=o.current.get(e);n&&(n.onClose(),y(e))}),[y]),D=d.useCallback((e=>({modal:f(e),onConfirm:()=>x(e),onClose:()=>k(e),onChange:n=>v(e,n),onDestroy:()=>h(e)})),[f,x,k,v,h]),B=d.useMemo((()=>({modalIds:t,getModalNode:f,onChange:v,onConfirm:x,onClose:k,onDestroy:h,getModal:D,setUpdater:e=>{g.current=e}})),[t,D,f,v,x,k,h]);return u.jsx(w.Provider,{value:B,children:n})})),B=()=>d.useContext(w),O=e=>{const{getModal:n}=B();return d.useMemo((()=>n(e)),[e,n])};function F(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}const M=C.css("production"===process.env.NODE_ENV?{name:"131j9g2",styles:"margin:unset"}:{name:"1w3kbco-fallback",styles:"margin:unset;label:fallback;",toString:F}),S=C.css("production"===process.env.NODE_ENV?{name:"1kuk3a3",styles:"display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:white;padding:20px 80px;gap:10px;border:1px solid black"}:{name:"16dbbea-frame",styles:"display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:white;padding:20px 80px;gap:10px;border:1px solid black;label:frame;",toString:F}),E=({children:e})=>u.jsx("h2",{className:M,children:e}),N=({children:e})=>u.jsx("h3",{className:M,children:e}),I=({children:e})=>u.jsx("div",{className:M,children:e}),P=({confirmLabel:e,hideConfirm:n=!1,cancelLabel:o,hideCancel:t=!1,disabled:r,onConfirm:i,onCancel:s})=>u.jsxs("div",{children:[!n&&u.jsx("button",{onClick:i,disabled:r,children:e||"확인"}),!t&&"function"==typeof s&&u.jsx("button",{onClick:s,children:o||"취소"})]}),V=e=>e?.visible,T=(e=V,n=0)=>{const{modalIds:o,getModalNode:t}=B();return d.useMemo((()=>{let n=0;for(const r of o)e(t(r))&&n++;return n}),[t,o,n])},z=d.forwardRef((({id:e,onChangeOrder:n,children:o},t)=>{const r=T(),[i,s]=d.useMemo((()=>{const n=r>1;return[n?Math.floor(e/5)%3*100:0,n?e%5*35:0]}),[r,e]);return u.jsx("div",{ref:t,className:S,onClick:n,style:{marginBottom:`calc(25vh + ${i}px)`,marginLeft:`${i}px`,transform:`translate(${s}px, ${s}px)`},children:o})})),R=d.createContext({}),H=d.memo((({ForegroundComponent:e,BackgroundComponent:n,TitleComponent:o,SubtitleComponent:t,ContentComponent:r,FooterComponent:i,options:s,children:a})=>{const l=d.useMemo((()=>({BackgroundComponent:n,ForegroundComponent:e||z,TitleComponent:o||E,SubtitleComponent:t||N,ContentComponent:d.memo(r||I),FooterComponent:d.memo(i||P),options:{duration:"300ms",backdrop:"rgba(0, 0, 0, 0.5)",closeOnBackdropClick:!0,manualDestroy:!1,...s}})),[e,n,r,i,t,o,s]);return u.jsx(R.Provider,{value:l,children:a})})),q=()=>d.useContext(R),A=()=>d.useContext(R).options,L=d.createContext({}),_=({context:e,children:n})=>{const o=d.useMemo((()=>({context:e||{}})),[e]);return u.jsx(L.Provider,{value:o,children:n})},$=()=>d.useContext(L),W=()=>{const[e,n]=d.useState(window.location.pathname);return d.useLayoutEffect((()=>{let o;const t=()=>{o&&cancelAnimationFrame(o),e!==window.location.pathname?n(window.location.pathname):o=requestAnimationFrame(t)};return o=requestAnimationFrame(t),()=>{o&&cancelAnimationFrame(o)}}),[e]),{pathname:e}};function Y(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}const U=C.css("production"===process.env.NODE_ENV?{name:"u7uu4v",styles:"display:none;position:fixed;inset:0;z-index:-999;pointer-events:none;>*{pointer-events:none;}"}:{name:"coymdj-background",styles:"display:none;position:fixed;inset:0;z-index:-999;pointer-events:none;>*{pointer-events:none;};label:background;",toString:Y}),G=C.css("production"===process.env.NODE_ENV?{name:"n07k1x",styles:"pointer-events:all"}:{name:"1hektcs-active",styles:"pointer-events:all;label:active;",toString:Y}),J=C.css("production"===process.env.NODE_ENV?{name:"1wnowod",styles:"display:flex;align-items:center;justify-content:center"}:{name:"xppew7-visible",styles:"display:flex;align-items:center;justify-content:center;label:visible;",toString:Y}),K=({modalId:e,onChangeOrder:n})=>{const{BackgroundComponent:o}=q(),{context:t}=$(),{modal:r,onClose:i,onChange:s,onConfirm:a,onDestroy:l}=O(e),c=d.useCallback((e=>{r&&r.closeOnBackdropClick&&r.visible&&i(),e.stopPropagation()}),[r,i]),m=d.useMemo((()=>r?.BackgroundComponent||o),[o,r]);return r?u.jsx("div",{className:C.cx(U,{[J]:r.manualDestroy?r.alive:r.visible,[G]:r.closeOnBackdropClick&&r.visible}),onClick:c,children:m&&u.jsx(m,{id:r.id,type:r.type,alive:r.alive,visible:r.visible,initiator:r.initiator,manualDestroy:r.manualDestroy,closeOnBackdropClick:r.closeOnBackdropClick,background:r.background,onChange:s,onConfirm:a,onClose:i,onDestroy:l,onChangeOrder:n,context:t})}):null};function Q(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}const X=C.css("production"===process.env.NODE_ENV?{name:"12g0hx0",styles:"pointer-events:none;display:none;position:fixed;inset:0;z-index:1"}:{name:"1hcczik-foreground",styles:"pointer-events:none;display:none;position:fixed;inset:0;z-index:1;label:foreground;",toString:Q}),Z=C.css("production"===process.env.NODE_ENV?{name:"1g95xyq",styles:">*{pointer-events:all;}"}:{name:"123csva-active",styles:">*{pointer-events:all;};label:active;",toString:Q}),ee=C.css("production"===process.env.NODE_ENV?{name:"1fmljv2",styles:"display:flex!important;justify-content:center;align-items:center"}:{name:"1p4unab-visible",styles:"display:flex!important;justify-content:center;align-items:center;label:visible;",toString:Q}),ne=d.memo((({modal:e,handlers:n})=>{const{title:o,subtitle:t,content:r,footer:i}=d.useMemo((()=>e),[e]),{context:s}=$(),{onConfirm:a}=d.useMemo((()=>n),[n]),l=p.useHandle(a),{TitleComponent:c,SubtitleComponent:C,ContentComponent:f,FooterComponent:h}=q();return u.jsxs(d.Fragment,{children:[o&&(m.isString(o)?u.jsx(c,{context:s,children:o}):o),t&&(m.isString(t)?u.jsx(C,{context:s,children:t}):t),r&&(m.isString(r)?u.jsx(f,{context:s,children:r}):p.renderComponent(r,{onConfirm:l})),!1!==i&&("function"==typeof i?i({onConfirm:l,context:s}):u.jsx(h,{onConfirm:l,confirmLabel:i?.confirm,hideConfirm:i?.hideConfirm,context:s}))]})})),oe=d.memo((({modal:e,handlers:n})=>{const{title:o,subtitle:t,content:r,footer:i}=d.useMemo((()=>e),[e]),{context:s}=$(),{onConfirm:a,onClose:l}=d.useMemo((()=>n),[n]),c=p.useHandle(a),C=p.useHandle(l),{TitleComponent:f,SubtitleComponent:h,ContentComponent:g,FooterComponent:b}=q();return u.jsxs(d.Fragment,{children:[o&&(m.isString(o)?u.jsx(f,{context:s,children:o}):o),t&&(m.isString(t)?u.jsx(h,{context:s,children:t}):t),r&&(m.isString(r)?u.jsx(g,{context:s,children:r}):p.renderComponent(r,{onConfirm:c,onCancel:C,context:s})),!1!==i&&("function"==typeof i?i({onConfirm:c,onCancel:C,context:s}):u.jsx(b,{onConfirm:c,onCancel:C,confirmLabel:i?.confirm,cancelLabel:i?.cancel,hideConfirm:i?.hideConfirm,hideCancel:i?.hideCancel,context:s}))]})})),te=d.memo((({modal:e,handlers:n})=>{const{Input:o,defaultValue:t,disabled:r,title:i,subtitle:s,content:a,footer:l}=d.useMemo((()=>({...e,Input:d.memo(p.withErrorBoundary(e.Input))})),[e]),{context:c}=$(),[C,f]=d.useState(t),{onChange:h,onClose:g,onConfirm:b}=d.useMemo((()=>n),[n]),y=p.useHandle(g),v=p.useHandle((e=>{const n=m.isFunction(e)?e(C):e;f(n),h(n)})),x=d.useCallback((()=>{requestAnimationFrame(b)}),[b]),k=d.useMemo((()=>!!C&&!!r?.(C)),[r,C]),{TitleComponent:j,SubtitleComponent:w,ContentComponent:D,FooterComponent:B}=q();return u.jsxs(d.Fragment,{children:[i&&(m.isString(i)?u.jsx(j,{context:c,children:i}):i),s&&(m.isString(s)?u.jsx(w,{context:c,children:s}):s),a&&(m.isString(a)?u.jsx(D,{context:c,children:a}):p.renderComponent(a,{onConfirm:x,onCancel:y,context:c})),o&&u.jsx(o,{defaultValue:t,value:C,onChange:v,onConfirm:x,onCancel:y,context:c}),!1!==l&&("function"==typeof l?l({value:C,disabled:k,onChange:v,onConfirm:x,onCancel:y,context:c}):u.jsx(B,{disabled:k,onConfirm:x,onCancel:y,confirmLabel:l?.confirm,cancelLabel:l?.cancel,hideConfirm:l?.hideConfirm,hideCancel:l?.hideCancel,context:c}))]})})),re=({modalId:e,onChangeOrder:n})=>{const{ForegroundComponent:o}=q(),{context:t}=$(),{modal:r,onChange:i,onConfirm:s,onClose:a,onDestroy:l}=O(e),c=d.useMemo((()=>r?.ForegroundComponent||o),[o,r]);return r?u.jsx("div",{className:C.cx(X,{[ee]:r.manualDestroy?r.alive:r.visible,[Z]:r.visible}),children:u.jsxs(c,{id:r.id,type:r.type,alive:r.alive,visible:r.visible,initiator:r.initiator,manualDestroy:r.manualDestroy,closeOnBackdropClick:r.closeOnBackdropClick,background:r.background,onChange:i,onConfirm:s,onClose:a,onDestroy:l,onChangeOrder:n,context:t,children:["alert"===r.type&&u.jsx(ne,{modal:r,handlers:{onConfirm:s}}),"confirm"===r.type&&u.jsx(oe,{modal:r,handlers:{onConfirm:s,onClose:a}}),"prompt"===r.type&&u.jsx(te,{modal:r,handlers:{onChange:i,onConfirm:s,onClose:a}})]})}):null},ie=e=>{const[n,o]=p.useVersion();return d.useEffect((()=>{if(e)return e.subscribe(o)}),[e,o]),n},se=C.css("production"===process.env.NODE_ENV?{name:"13dmkf4",styles:"position:fixed;inset:0;pointer-events:none;overflow:hidden"}:{name:"yjeu12-presenter",styles:"position:fixed;inset:0;pointer-events:none;overflow:hidden;label:presenter;",toString:function(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}}),{increment:ae}=m.counterFactory(1),le=d.memo((({modalId:e})=>{const n=d.useRef(null),{modal:o}=O(e);ie(o);const t=p.useHandle((()=>{n.current&&(n.current.style.zIndex=`${ae()}`)}));return u.jsxs("div",{ref:n,className:se,children:[u.jsx(K,{modalId:e,onChangeOrder:t}),u.jsx(re,{modalId:e,onChangeOrder:t})]})})),ce=C.css("production"===process.env.NODE_ENV?{name:"2hpasy",styles:"display:flex;align-items:center;justify-content:center;position:fixed;inset:0;pointer-events:none;z-index:1000;transition:background-color ease-in-out"}:{name:"lhj8co-anchor",styles:"display:flex;align-items:center;justify-content:center;position:fixed;inset:0;pointer-events:none;z-index:1000;transition:background-color ease-in-out;label:anchor;",toString:function(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}}),ue=e=>e?.visible&&e.dimmed,de=d.memo(p.withErrorBoundary((()=>{const[e,n]=p.useVersion(),{modalIds:o,setUpdater:t}=B();d.useEffect((()=>{t(n)}),[t,n]);const r=A(),i=T(ue,e);return u.jsx("div",{className:ce,style:{transitionDuration:r.duration,backgroundColor:i?r.backdrop:"transparent"},children:m.map(o,(e=>u.jsx(le,{modalId:e},e)))})}))),me=({ForegroundComponent:e,BackgroundComponent:n,TitleComponent:o,SubtitleComponent:t,ContentComponent:r,FooterComponent:i,usePathname:s,options:a,context:l,anchor:c})=>f.createPortal(u.jsx(_,{context:l,children:u.jsx(H,{ForegroundComponent:e,BackgroundComponent:n,TitleComponent:o,SubtitleComponent:t,ContentComponent:r,FooterComponent:i,options:a,children:u.jsx(D,{usePathname:s,children:u.jsx(de,{})})})}),c),pe=()=>{const e=d.useRef(b.activate()),n=d.useRef(null),[,o]=p.useVersion(),t=d.useCallback((t=>{e.current?(n.current=b.anchor({root:t}),o()):m.printError("ModalProvider is already initialized",["ModalProvider can only be initialized once.","Nesting ModalProvider will be ignored..."],{info:"Something is wrong with the ModalProvider initialization..."})}),[o]);return{anchorRef:n,handleInitialize:t}},Ce=d.forwardRef((({usePathname:e,ForegroundComponent:n,BackgroundComponent:o,TitleComponent:t,SubtitleComponent:r,ContentComponent:i,FooterComponent:s,options:a,context:l,children:c},m)=>{const C=d.useMemo((()=>e||W),[e]),{anchorRef:f,handleInitialize:h}=pe();return d.useImperativeHandle(m,(()=>({initialize:h})),[h]),p.useOnMount((()=>(null===m&&h(),()=>{f.current&&f.current.remove()}))),u.jsxs(d.Fragment,{children:[c,f.current&&me({ForegroundComponent:n,BackgroundComponent:o,TitleComponent:t,SubtitleComponent:r,ContentComponent:i,FooterComponent:s,usePathname:C,options:a,context:l,anchor:f.current})]})}));exports.ModalProvider=Ce,exports.alert=({subtype:e,title:n,subtitle:o,content:t,background:r,footer:i,dimmed:s,manualDestroy:a,closeOnBackdropClick:l,ForegroundComponent:c,BackgroundComponent:u})=>new Promise(((d,m)=>{try{b.open({type:"alert",subtype:e,resolve:()=>d(),title:n,subtitle:o,content:t,background:r,footer:i,dimmed:s,manualDestroy:a,closeOnBackdropClick:l,ForegroundComponent:c,BackgroundComponent:u})}catch(e){m(e)}})),exports.confirm=({subtype:e,title:n,subtitle:o,content:t,background:r,footer:i,dimmed:s,manualDestroy:a,closeOnBackdropClick:l,ForegroundComponent:c,BackgroundComponent:u})=>new Promise(((d,m)=>{try{b.open({type:"confirm",subtype:e,resolve:e=>d(e??!1),title:n,subtitle:o,content:t,background:r,footer:i,dimmed:s,manualDestroy:a,closeOnBackdropClick:l,ForegroundComponent:c,BackgroundComponent:u})}catch(e){m(e)}})),exports.prompt=({defaultValue:e,title:n,subtitle:o,content:t,Input:r,disabled:i,returnOnCancel:s,background:a,footer:l,dimmed:c,manualDestroy:u,closeOnBackdropClick:d,ForegroundComponent:m,BackgroundComponent:p})=>new Promise(((C,f)=>{try{b.open({type:"prompt",resolve:e=>C(e),title:n,subtitle:o,content:t,Input:r,defaultValue:e,disabled:i,returnOnCancel:s,background:a,footer:l,dimmed:c,manualDestroy:u,closeOnBackdropClick:d,ForegroundComponent:m,BackgroundComponent:p})}catch(e){f(e)}})),exports.useActiveModalCount=T,exports.useDestroyAfter=(e,n)=>{const{modal:o,onDestroy:t}=O(e),r=ie(o),i=d.useRef({modal:o,onDestroy:t,milliseconds:m.isString(n)?m.convertMsFromDuration(n):n});d.useEffect((()=>{const{modal:e,onDestroy:n,milliseconds:o}=i.current;if(!e||e.visible||!e.alive)return;const t=setTimeout((()=>{n()}),o);return()=>{t&&clearTimeout(t)}}),[r])},exports.useInitializeModal=({usePathname:e,ForegroundComponent:n,BackgroundComponent:o,TitleComponent:t,SubtitleComponent:r,ContentComponent:i,FooterComponent:s,options:a,context:l,mode:c="auto"}={})=>{const u=d.useMemo((()=>e||W),[e]),{anchorRef:m,handleInitialize:C}=pe();p.useOnMount((()=>("auto"===c&&C(),()=>{m.current&&m.current.remove()})));const f=d.useCallback((e=>{"manual"===c&&C(e)}),[c,C]);return{portal:m.current&&me({usePathname:u,ForegroundComponent:n,BackgroundComponent:o,TitleComponent:t,SubtitleComponent:r,ContentComponent:i,FooterComponent:s,options:a,context:l,anchor:m.current}),initialize:f}},exports.useModalAnimation=(e,n)=>{const o=d.useRef(n);o.current=n,d.useLayoutEffect((()=>{if(!o.current)return;let n;return n=e?requestAnimationFrame((()=>o.current.onVisible?.())):requestAnimationFrame((()=>o.current.onHidden?.())),()=>{n&&cancelAnimationFrame(n)}}),[e])},exports.useModalBackdrop=()=>A().backdrop,exports.useModalDuration=()=>{const e=A();return{duration:e.duration,milliseconds:m.convertMsFromDuration(e.duration)}},exports.useModalOptions=A,exports.useSubscribeModal=ie;
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),n=require("react"),o=require("@winglet/common-utils"),t=require("@winglet/react-utils"),r=require("@emotion/css"),i=require("react-dom");class s{static activate(){return!s.__active__&&(s.__active__=!0)}static anchor(e){if(s.__anchor__){const e=document.getElementById(s.__anchor__.id);if(e)return e}const{tag:n="div",prefix:t="promise-modal",root:r=document.body}=e||{},i=document.createElement(n);return i.setAttribute("id",`${t}-${o.getRandomString(36)}`),r.appendChild(i),s.__anchor__=i,i}static get prerender(){return s.__prerenderList__}static set openHandler(e){s.__openHandler__=e,s.__prerenderList__=[]}static get unanchored(){return!s.__anchor__}static reset(){s.__active__=!1,s.__anchor__=null,s.__prerenderList__=[],s.__openHandler__=e=>s.__prerenderList__.push(e)}static open(e){s.__openHandler__(e)}}s.__active__=!1,s.__anchor__=null,s.__prerenderList__=[],s.__openHandler__=e=>s.__prerenderList__.push(e);class a{get alive(){return this.__alive__}get visible(){return this.__visible__}constructor({id:e,initiator:n,title:o,subtitle:t,background:r,dimmed:i=!0,manualDestroy:s=!1,closeOnBackdropClick:a=!0,resolve:l,ForegroundComponent:c,BackgroundComponent:u}){this.__listeners__=new Set,this.id=e,this.initiator=n,this.title=o,this.subtitle=t,this.background=r,this.dimmed=i,this.manualDestroy=s,this.closeOnBackdropClick=a,this.ForegroundComponent=c,this.BackgroundComponent=u,this.__alive__=!0,this.__visible__=!0,this.__resolve__=l}subscribe(e){return this.__listeners__.add(e),()=>{this.__listeners__.delete(e)}}publish(){for(const e of this.__listeners__)e()}resolve(e){this.__resolve__(e)}onDestroy(){const e=!0===this.__alive__;this.__alive__=!1,this.manualDestroy&&e&&this.publish()}onShow(){const e=!1===this.__visible__;this.__visible__=!0,e&&this.publish()}onHide(){const e=!0===this.__visible__;this.__visible__=!1,e&&this.publish()}}class l extends a{constructor({id:e,initiator:n,type:o,subtype:t,title:r,subtitle:i,content:s,footer:a,background:l,dimmed:c,manualDestroy:u,closeOnBackdropClick:d,resolve:m,ForegroundComponent:p,BackgroundComponent:C}){super({id:e,initiator:n,title:r,subtitle:i,background:l,dimmed:c,manualDestroy:u,closeOnBackdropClick:d,resolve:m,ForegroundComponent:p,BackgroundComponent:C}),this.type=o,this.subtype=t,this.content=s,this.footer=a}onClose(){this.resolve(null)}onConfirm(){this.resolve(null)}}class c extends a{constructor({id:e,initiator:n,type:o,subtype:t,title:r,subtitle:i,content:s,footer:a,background:l,dimmed:c,manualDestroy:u,closeOnBackdropClick:d,resolve:m,ForegroundComponent:p,BackgroundComponent:C}){super({id:e,initiator:n,title:r,subtitle:i,background:l,dimmed:c,manualDestroy:u,closeOnBackdropClick:d,resolve:m,ForegroundComponent:p,BackgroundComponent:C}),this.type=o,this.subtype=t,this.content=s,this.footer=a}onClose(){this.resolve(!1)}onConfirm(){this.resolve(!0)}}class u extends a{constructor({id:e,initiator:n,type:o,title:t,subtitle:r,content:i,defaultValue:s,Input:a,disabled:l,returnOnCancel:c,footer:u,background:d,dimmed:m,manualDestroy:p,closeOnBackdropClick:C,resolve:h,ForegroundComponent:f,BackgroundComponent:g}){super({id:e,initiator:n,title:t,subtitle:r,background:d,dimmed:m,manualDestroy:p,closeOnBackdropClick:C,resolve:h,ForegroundComponent:f,BackgroundComponent:g}),this.type=o,this.content=i,this.Input=a,this.defaultValue=s,this.__value__=s,this.disabled=l,this.returnOnCancel=c,this.footer=u}onChange(e){this.__value__=e}onConfirm(){this.resolve(this.__value__??null)}onClose(){this.returnOnCancel?this.resolve(this.__value__??null):this.resolve(null)}}const d=e=>{switch(e.type){case"alert":return new l(e);case"confirm":return new c(e);case"prompt":return new u(e)}throw new Error(`Unknown modal: ${e.type}`,{modal:e})},m=n.createContext({}),p=n.memo((({usePathname:r,children:i})=>{const a=n.useRef(new Map),[l,c]=n.useState([]),u=t.useReference(l),{pathname:p}=r(),C=n.useRef(p),h=n.useRef(0),f=M(),g=n.useMemo((()=>o.convertMsFromDuration(f.duration)),[f]);t.useOnMountLayout((()=>{const{manualDestroy:e,closeOnBackdropClick:n}=f;for(const o of s.prerender){const t=d({...o,id:h.current++,initiator:C.current,manualDestroy:void 0!==o.manualDestroy?o.manualDestroy:e,closeOnBackdropClick:void 0!==o.closeOnBackdropClick?o.closeOnBackdropClick:n});a.current.set(t.id,t),c((e=>[...e,t.id]))}return s.openHandler=o=>{const t=d({...o,id:h.current++,initiator:C.current,manualDestroy:void 0!==o.manualDestroy?o.manualDestroy:e,closeOnBackdropClick:void 0!==o.closeOnBackdropClick?o.closeOnBackdropClick:n});a.current.set(t.id,t),c((e=>{const n=[];for(let o=0;o<e.length;o++){const t=e[o];a.current.get(t)?.alive?n.push(t):a.current.delete(t)}return[...n,t.id]}))},()=>{s.reset()}})),n.useLayoutEffect((()=>{for(const e of u.current){const n=a.current.get(e);n?.alive&&(n.initiator===p?n.onShow():n.onHide())}C.current=p}),[p]);const _=n.useCallback((e=>a.current.get(e)),[]),b=n.useCallback((e=>{const n=a.current.get(e);n&&(n.onDestroy(),v.current?.())}),[]),v=n.useRef(void 0),y=n.useCallback((e=>{const n=a.current.get(e);n&&(n.onHide(),v.current?.(),n.manualDestroy||setTimeout((()=>{n.onDestroy()}),g))}),[g]),x=n.useCallback(((e,n)=>{const o=a.current.get(e);o&&"prompt"===o.type&&o.onChange(n)}),[]),k=n.useCallback((e=>{const n=a.current.get(e);n&&(n.onConfirm(),y(e))}),[y]),j=n.useCallback((e=>{const n=a.current.get(e);n&&(n.onClose(),y(e))}),[y]),D=n.useCallback((e=>({modal:_(e),onConfirm:()=>k(e),onClose:()=>j(e),onChange:n=>x(e,n),onDestroy:()=>b(e)})),[_,k,j,x,b]),B=n.useMemo((()=>({modalIds:l,getModalNode:_,onChange:x,onConfirm:k,onClose:j,onDestroy:b,getModal:D,setUpdater:e=>{v.current=e}})),[l,D,_,x,k,j,b]);return e.jsx(m.Provider,{value:B,children:i})})),C=()=>n.useContext(m),h=e=>{const{getModal:o}=C();return n.useMemo((()=>o(e)),[e,o])};function f(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}const g=r.css("production"===process.env.NODE_ENV?{name:"131j9g2",styles:"margin:unset"}:{name:"1w3kbco-fallback",styles:"margin:unset;label:fallback;",toString:f}),_=r.css("production"===process.env.NODE_ENV?{name:"1kuk3a3",styles:"display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:white;padding:20px 80px;gap:10px;border:1px solid black"}:{name:"16dbbea-frame",styles:"display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:white;padding:20px 80px;gap:10px;border:1px solid black;label:frame;",toString:f}),b=({children:n})=>e.jsx("h2",{className:g,children:n}),v=({children:n})=>e.jsx("h3",{className:g,children:n}),y=({children:n})=>e.jsx("div",{className:g,children:n}),x=({confirmLabel:n,hideConfirm:o=!1,cancelLabel:t,hideCancel:r=!1,disabled:i,onConfirm:s,onCancel:a})=>e.jsxs("div",{children:[!o&&e.jsx("button",{onClick:s,disabled:i,children:n||"확인"}),!r&&"function"==typeof a&&e.jsx("button",{onClick:a,children:t||"취소"})]}),k=e=>e?.visible,j=(e=k,o=0)=>{const{modalIds:t,getModalNode:r}=C();return n.useMemo((()=>{let n=0;for(const o of t)e(r(o))&&n++;return n}),[r,t,o])},D=n.forwardRef((({id:o,onChangeOrder:t,children:r},i)=>{const s=j(),[a,l]=n.useMemo((()=>{const e=s>1;return[e?Math.floor(o/5)%3*100:0,e?o%5*35:0]}),[s,o]);return e.jsx("div",{ref:i,className:_,onClick:t,style:{marginBottom:`calc(25vh + ${a}px)`,marginLeft:`${a}px`,transform:`translate(${l}px, ${l}px)`},children:r})})),B=n.createContext({}),O=n.memo((({ForegroundComponent:o,BackgroundComponent:t,TitleComponent:r,SubtitleComponent:i,ContentComponent:s,FooterComponent:a,options:l,children:c})=>{const u=n.useMemo((()=>({BackgroundComponent:t,ForegroundComponent:o||D,TitleComponent:r||b,SubtitleComponent:i||v,ContentComponent:n.memo(s||y),FooterComponent:n.memo(a||x),options:{duration:"300ms",backdrop:"rgba(0, 0, 0, 0.5)",closeOnBackdropClick:!0,manualDestroy:!1,...l}})),[o,t,s,a,i,r,l]);return e.jsx(B.Provider,{value:u,children:c})})),F=()=>n.useContext(B),M=()=>n.useContext(B).options,S=n.createContext({}),w=({context:o,children:t})=>{const r=n.useMemo((()=>({context:o||{}})),[o]);return e.jsx(S.Provider,{value:r,children:t})},N=()=>n.useContext(S),E=()=>{const[e,o]=n.useState(window.location.pathname);return n.useLayoutEffect((()=>{let n;const t=()=>{n&&cancelAnimationFrame(n),e!==window.location.pathname?o(window.location.pathname):n=requestAnimationFrame(t)};return n=requestAnimationFrame(t),()=>{n&&cancelAnimationFrame(n)}}),[e]),{pathname:e}};function I(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}const P=r.css("production"===process.env.NODE_ENV?{name:"u7uu4v",styles:"display:none;position:fixed;inset:0;z-index:-999;pointer-events:none;>*{pointer-events:none;}"}:{name:"coymdj-background",styles:"display:none;position:fixed;inset:0;z-index:-999;pointer-events:none;>*{pointer-events:none;};label:background;",toString:I}),V=r.css("production"===process.env.NODE_ENV?{name:"n07k1x",styles:"pointer-events:all"}:{name:"1hektcs-active",styles:"pointer-events:all;label:active;",toString:I}),L=r.css("production"===process.env.NODE_ENV?{name:"1wnowod",styles:"display:flex;align-items:center;justify-content:center"}:{name:"xppew7-visible",styles:"display:flex;align-items:center;justify-content:center;label:visible;",toString:I}),z=({modalId:o,onChangeOrder:t})=>{const{BackgroundComponent:i}=F(),{context:s}=N(),{modal:a,onClose:l,onChange:c,onConfirm:u,onDestroy:d}=h(o),m=n.useCallback((e=>{a&&a.closeOnBackdropClick&&a.visible&&l(),e.stopPropagation()}),[a,l]),p=n.useMemo((()=>a?.BackgroundComponent||i),[i,a]);return a?e.jsx("div",{className:r.cx(P,{[L]:a.manualDestroy?a.alive:a.visible,[V]:a.closeOnBackdropClick&&a.visible}),onClick:m,children:p&&e.jsx(p,{id:a.id,type:a.type,alive:a.alive,visible:a.visible,initiator:a.initiator,manualDestroy:a.manualDestroy,closeOnBackdropClick:a.closeOnBackdropClick,background:a.background,onChange:c,onConfirm:u,onClose:l,onDestroy:d,onChangeOrder:t,context:s})}):null};function H(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}const R=r.css("production"===process.env.NODE_ENV?{name:"12g0hx0",styles:"pointer-events:none;display:none;position:fixed;inset:0;z-index:1"}:{name:"1hcczik-foreground",styles:"pointer-events:none;display:none;position:fixed;inset:0;z-index:1;label:foreground;",toString:H}),T=r.css("production"===process.env.NODE_ENV?{name:"1g95xyq",styles:">*{pointer-events:all;}"}:{name:"123csva-active",styles:">*{pointer-events:all;};label:active;",toString:H}),q=r.css("production"===process.env.NODE_ENV?{name:"1fmljv2",styles:"display:flex!important;justify-content:center;align-items:center"}:{name:"1p4unab-visible",styles:"display:flex!important;justify-content:center;align-items:center;label:visible;",toString:H}),A=n.memo((({modal:r,handlers:i})=>{const{title:s,subtitle:a,content:l,footer:c}=n.useMemo((()=>r),[r]),{context:u}=N(),{onConfirm:d}=n.useMemo((()=>i),[i]),m=t.useHandle(d),{TitleComponent:p,SubtitleComponent:C,ContentComponent:h,FooterComponent:f}=F();return e.jsxs(n.Fragment,{children:[s&&(o.isString(s)?e.jsx(p,{context:u,children:s}):s),a&&(o.isString(a)?e.jsx(C,{context:u,children:a}):a),l&&(o.isString(l)?e.jsx(h,{context:u,children:l}):t.renderComponent(l,{onConfirm:m})),!1!==c&&("function"==typeof c?c({onConfirm:m,context:u}):e.jsx(f,{onConfirm:m,confirmLabel:c?.confirm,hideConfirm:c?.hideConfirm,context:u}))]})})),$=n.memo((({modal:r,handlers:i})=>{const{title:s,subtitle:a,content:l,footer:c}=n.useMemo((()=>r),[r]),{context:u}=N(),{onConfirm:d,onClose:m}=n.useMemo((()=>i),[i]),p=t.useHandle(d),C=t.useHandle(m),{TitleComponent:h,SubtitleComponent:f,ContentComponent:g,FooterComponent:_}=F();return e.jsxs(n.Fragment,{children:[s&&(o.isString(s)?e.jsx(h,{context:u,children:s}):s),a&&(o.isString(a)?e.jsx(f,{context:u,children:a}):a),l&&(o.isString(l)?e.jsx(g,{context:u,children:l}):t.renderComponent(l,{onConfirm:p,onCancel:C,context:u})),!1!==c&&("function"==typeof c?c({onConfirm:p,onCancel:C,context:u}):e.jsx(_,{onConfirm:p,onCancel:C,confirmLabel:c?.confirm,cancelLabel:c?.cancel,hideConfirm:c?.hideConfirm,hideCancel:c?.hideCancel,context:u}))]})})),Y=n.memo((({modal:r,handlers:i})=>{const{Input:s,defaultValue:a,disabled:l,title:c,subtitle:u,content:d,footer:m}=n.useMemo((()=>({...r,Input:n.memo(t.withErrorBoundary(r.Input))})),[r]),{context:p}=N(),[C,h]=n.useState(a),{onChange:f,onClose:g,onConfirm:_}=n.useMemo((()=>i),[i]),b=t.useHandle(g),v=t.useHandle((e=>{const n=o.isFunction(e)?e(C):e;h(n),f(n)})),y=n.useCallback((()=>{requestAnimationFrame(_)}),[_]),x=n.useMemo((()=>!!C&&!!l?.(C)),[l,C]),{TitleComponent:k,SubtitleComponent:j,ContentComponent:D,FooterComponent:B}=F();return e.jsxs(n.Fragment,{children:[c&&(o.isString(c)?e.jsx(k,{context:p,children:c}):c),u&&(o.isString(u)?e.jsx(j,{context:p,children:u}):u),d&&(o.isString(d)?e.jsx(D,{context:p,children:d}):t.renderComponent(d,{onConfirm:y,onCancel:b,context:p})),s&&e.jsx(s,{defaultValue:a,value:C,onChange:v,onConfirm:y,onCancel:b,context:p}),!1!==m&&("function"==typeof m?m({value:C,disabled:x,onChange:v,onConfirm:y,onCancel:b,context:p}):e.jsx(B,{disabled:x,onConfirm:y,onCancel:b,confirmLabel:m?.confirm,cancelLabel:m?.cancel,hideConfirm:m?.hideConfirm,hideCancel:m?.hideCancel,context:p}))]})})),U=({modalId:o,onChangeOrder:t})=>{const{ForegroundComponent:i}=F(),{context:s}=N(),{modal:a,onChange:l,onConfirm:c,onClose:u,onDestroy:d}=h(o),m=n.useMemo((()=>a?.ForegroundComponent||i),[i,a]);return a?e.jsx("div",{className:r.cx(R,{[q]:a.manualDestroy?a.alive:a.visible,[T]:a.visible}),children:e.jsxs(m,{id:a.id,type:a.type,alive:a.alive,visible:a.visible,initiator:a.initiator,manualDestroy:a.manualDestroy,closeOnBackdropClick:a.closeOnBackdropClick,background:a.background,onChange:l,onConfirm:c,onClose:u,onDestroy:d,onChangeOrder:t,context:s,children:["alert"===a.type&&e.jsx(A,{modal:a,handlers:{onConfirm:c}}),"confirm"===a.type&&e.jsx($,{modal:a,handlers:{onConfirm:c,onClose:u}}),"prompt"===a.type&&e.jsx(Y,{modal:a,handlers:{onChange:l,onConfirm:c,onClose:u}})]})}):null},G=e=>{const[o,r]=t.useVersion();return n.useEffect((()=>{if(e)return e.subscribe(r)}),[e,r]),o},J=r.css("production"===process.env.NODE_ENV?{name:"13dmkf4",styles:"position:fixed;inset:0;pointer-events:none;overflow:hidden"}:{name:"yjeu12-presenter",styles:"position:fixed;inset:0;pointer-events:none;overflow:hidden;label:presenter;",toString:function(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}}),{increment:K}=o.counterFactory(1),Q=n.memo((({modalId:o})=>{const r=n.useRef(null),{modal:i}=h(o);G(i);const s=t.useHandle((()=>{r.current&&(r.current.style.zIndex=`${K()}`)}));return e.jsxs("div",{ref:r,className:J,children:[e.jsx(z,{modalId:o,onChangeOrder:s}),e.jsx(U,{modalId:o,onChangeOrder:s})]})})),W=r.css("production"===process.env.NODE_ENV?{name:"2hpasy",styles:"display:flex;align-items:center;justify-content:center;position:fixed;inset:0;pointer-events:none;z-index:1000;transition:background-color ease-in-out"}:{name:"lhj8co-anchor",styles:"display:flex;align-items:center;justify-content:center;position:fixed;inset:0;pointer-events:none;z-index:1000;transition:background-color ease-in-out;label:anchor;",toString:function(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}}),X=e=>e?.visible&&e.dimmed,Z=n.memo(t.withErrorBoundary((()=>{const[r,i]=t.useVersion(),{modalIds:s,setUpdater:a}=C();n.useEffect((()=>{a(i)}),[a,i]);const l=M(),c=j(X,r);return e.jsx("div",{className:W,style:{transitionDuration:l.duration,backgroundColor:c?l.backdrop:"transparent"},children:o.map(s,(n=>e.jsx(Q,{modalId:n},n)))})}))),ee=({ForegroundComponent:n,BackgroundComponent:o,TitleComponent:t,SubtitleComponent:r,ContentComponent:s,FooterComponent:a,usePathname:l,options:c,context:u,anchor:d})=>i.createPortal(e.jsx(w,{context:u,children:e.jsx(O,{ForegroundComponent:n,BackgroundComponent:o,TitleComponent:t,SubtitleComponent:r,ContentComponent:s,FooterComponent:a,options:c,children:e.jsx(p,{usePathname:l,children:e.jsx(Z,{})})})}),d),ne=()=>{const e=n.useRef(s.activate()),r=n.useRef(null),[,i]=t.useVersion(),a=n.useCallback((n=>{e.current?(r.current=s.anchor({root:n}),i()):o.printError("ModalProvider is already initialized",["ModalProvider can only be initialized once.","Nesting ModalProvider will be ignored..."],{info:"Something is wrong with the ModalProvider initialization..."})}),[i]);return{anchorRef:r,handleInitialize:a}},oe=n.forwardRef((({usePathname:o,ForegroundComponent:r,BackgroundComponent:i,TitleComponent:s,SubtitleComponent:a,ContentComponent:l,FooterComponent:c,options:u,context:d,children:m},p)=>{const C=n.useMemo((()=>o||E),[o]),{anchorRef:h,handleInitialize:f}=ne();return n.useImperativeHandle(p,(()=>({initialize:f})),[f]),t.useOnMount((()=>(null===p&&f(),()=>{h.current&&h.current.remove()}))),e.jsxs(n.Fragment,{children:[m,h.current&&ee({ForegroundComponent:r,BackgroundComponent:i,TitleComponent:s,SubtitleComponent:a,ContentComponent:l,FooterComponent:c,usePathname:C,options:u,context:d,anchor:h.current})]})}));exports.ModalProvider=oe,exports.alert=({subtype:e,title:n,subtitle:o,content:t,background:r,footer:i,dimmed:a,manualDestroy:l,closeOnBackdropClick:c,ForegroundComponent:u,BackgroundComponent:d})=>new Promise(((m,p)=>{try{s.open({type:"alert",subtype:e,resolve:()=>m(),title:n,subtitle:o,content:t,background:r,footer:i,dimmed:a,manualDestroy:l,closeOnBackdropClick:c,ForegroundComponent:u,BackgroundComponent:d})}catch(e){p(e)}})),exports.confirm=({subtype:e,title:n,subtitle:o,content:t,background:r,footer:i,dimmed:a,manualDestroy:l,closeOnBackdropClick:c,ForegroundComponent:u,BackgroundComponent:d})=>new Promise(((m,p)=>{try{s.open({type:"confirm",subtype:e,resolve:e=>m(e??!1),title:n,subtitle:o,content:t,background:r,footer:i,dimmed:a,manualDestroy:l,closeOnBackdropClick:c,ForegroundComponent:u,BackgroundComponent:d})}catch(e){p(e)}})),exports.prompt=({defaultValue:e,title:n,subtitle:o,content:t,Input:r,disabled:i,returnOnCancel:a,background:l,footer:c,dimmed:u,manualDestroy:d,closeOnBackdropClick:m,ForegroundComponent:p,BackgroundComponent:C})=>new Promise(((h,f)=>{try{s.open({type:"prompt",resolve:e=>h(e),title:n,subtitle:o,content:t,Input:r,defaultValue:e,disabled:i,returnOnCancel:a,background:l,footer:c,dimmed:u,manualDestroy:d,closeOnBackdropClick:m,ForegroundComponent:p,BackgroundComponent:C})}catch(e){f(e)}})),exports.useActiveModalCount=j,exports.useDestroyAfter=(e,t)=>{const{modal:r,onDestroy:i}=h(e),s=G(r),a=n.useRef({modal:r,onDestroy:i,milliseconds:o.isString(t)?o.convertMsFromDuration(t):t});n.useEffect((()=>{const{modal:e,onDestroy:n,milliseconds:o}=a.current;if(!e||e.visible||!e.alive)return;const t=setTimeout((()=>{n()}),o);return()=>{t&&clearTimeout(t)}}),[s])},exports.useInitializeModal=({usePathname:e,ForegroundComponent:o,BackgroundComponent:r,TitleComponent:i,SubtitleComponent:s,ContentComponent:a,FooterComponent:l,options:c,context:u,mode:d="auto"}={})=>{const m=n.useMemo((()=>e||E),[e]),{anchorRef:p,handleInitialize:C}=ne();t.useOnMount((()=>("auto"===d&&C(),()=>{p.current&&p.current.remove()})));const h=n.useCallback((e=>{"manual"===d&&C(e)}),[d,C]);return{portal:p.current&&ee({usePathname:m,ForegroundComponent:o,BackgroundComponent:r,TitleComponent:i,SubtitleComponent:s,ContentComponent:a,FooterComponent:l,options:c,context:u,anchor:p.current}),initialize:h}},exports.useModalAnimation=(e,o)=>{const t=n.useRef(o);t.current=o,n.useLayoutEffect((()=>{if(!t.current)return;let n;return n=e?requestAnimationFrame((()=>t.current.onVisible?.())):requestAnimationFrame((()=>t.current.onHidden?.())),()=>{n&&cancelAnimationFrame(n)}}),[e])},exports.useModalBackdrop=()=>M().backdrop,exports.useModalDuration=()=>{const e=M();return{duration:e.duration,milliseconds:o.convertMsFromDuration(e.duration)}},exports.useModalOptions=M,exports.useSubscribeModal=G;
|
|
18
2
|
//# sourceMappingURL=index.cjs.js.map
|