aio-popup 4.2.1 → 4.2.3
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/index.d.ts +154 -154
- package/index.js +7 -7
- package/package.json +3 -2
package/index.d.ts
CHANGED
|
@@ -1,154 +1,154 @@
|
|
|
1
|
-
import React, { FC, ReactNode } from 'react';
|
|
2
|
-
import './index.css';
|
|
3
|
-
export type AP_props = {
|
|
4
|
-
rtl?: boolean;
|
|
5
|
-
id?: string;
|
|
6
|
-
};
|
|
7
|
-
export type AP_position = 'fullscreen' | 'center' | 'popover' | 'left' | 'right' | 'top' | 'bottom';
|
|
8
|
-
export type AP_attrsKey = 'backdrop' | 'modal' | 'header' | 'body' | 'footer';
|
|
9
|
-
export type AP_header = ((p: {
|
|
10
|
-
close: () => void;
|
|
11
|
-
state: any;
|
|
12
|
-
setState: any;
|
|
13
|
-
}) => ReactNode) | {
|
|
14
|
-
title?: string;
|
|
15
|
-
subtitle?: string;
|
|
16
|
-
before?: ReactNode;
|
|
17
|
-
after?: ReactNode;
|
|
18
|
-
onClose?: boolean | ((p: {
|
|
19
|
-
state: any;
|
|
20
|
-
setState: (state: any) => void;
|
|
21
|
-
}) => void);
|
|
22
|
-
attrs?: any;
|
|
23
|
-
};
|
|
24
|
-
export type AP_body = (p: {
|
|
25
|
-
close: () => void;
|
|
26
|
-
state?: any;
|
|
27
|
-
setState?: (state: any) => void;
|
|
28
|
-
}) => ReactNode;
|
|
29
|
-
export type AP_footer = (p: {
|
|
30
|
-
state: any;
|
|
31
|
-
setState: (v: any) => void;
|
|
32
|
-
close: () => void;
|
|
33
|
-
}) => ReactNode;
|
|
34
|
-
type AP_setAttrs = (mode: AP_attrsKey) => any;
|
|
35
|
-
export type AP_modal = {
|
|
36
|
-
getTarget?: () => any;
|
|
37
|
-
pageSelector?: string;
|
|
38
|
-
limitTo?: string;
|
|
39
|
-
maxHeight?: number | 'string';
|
|
40
|
-
fixStyle?: (o: any, p: {
|
|
41
|
-
targetLimit: any;
|
|
42
|
-
pageLimit: any;
|
|
43
|
-
}) => any;
|
|
44
|
-
fitTo?: string;
|
|
45
|
-
rtl?: boolean;
|
|
46
|
-
id?: string;
|
|
47
|
-
onClose?: boolean | (() => void);
|
|
48
|
-
position?: AP_position;
|
|
49
|
-
header?: AP_header;
|
|
50
|
-
state?: any;
|
|
51
|
-
footer?: AP_footer;
|
|
52
|
-
body?: AP_body;
|
|
53
|
-
animate?: boolean;
|
|
54
|
-
fitHorizontal?: boolean;
|
|
55
|
-
setAttrs?: AP_setAttrs;
|
|
56
|
-
};
|
|
57
|
-
export type AP_alert = {
|
|
58
|
-
icon?: false | ReactNode;
|
|
59
|
-
position?: AP_position;
|
|
60
|
-
type: 'success' | 'error' | 'warning' | 'info';
|
|
61
|
-
text?: ReactNode;
|
|
62
|
-
subtext?: string;
|
|
63
|
-
time?: number;
|
|
64
|
-
className?: string;
|
|
65
|
-
closeText?: string;
|
|
66
|
-
animate?: boolean;
|
|
67
|
-
onClose?: boolean | (() => void);
|
|
68
|
-
};
|
|
69
|
-
export type AP_snackebar = {
|
|
70
|
-
id?: string;
|
|
71
|
-
text: string;
|
|
72
|
-
subtext?: string;
|
|
73
|
-
icon?: ReactNode;
|
|
74
|
-
time?: number;
|
|
75
|
-
action?: {
|
|
76
|
-
text: string;
|
|
77
|
-
onClick: () => void;
|
|
78
|
-
};
|
|
79
|
-
type: 'success' | 'error' | 'warning' | 'info';
|
|
80
|
-
verticalAlign?: 'start' | 'end';
|
|
81
|
-
horizontalAlign?: 'start' | 'center' | 'end';
|
|
82
|
-
onClose?: boolean | (() => void);
|
|
83
|
-
attrs?: any;
|
|
84
|
-
};
|
|
85
|
-
export type AP_highlight = {
|
|
86
|
-
dom: any;
|
|
87
|
-
html: ReactNode;
|
|
88
|
-
onClick?: () => void;
|
|
89
|
-
mouseAccess?: boolean;
|
|
90
|
-
attrs?: any;
|
|
91
|
-
padding?: number;
|
|
92
|
-
easing?: number | AP_easing;
|
|
93
|
-
duration?: number;
|
|
94
|
-
};
|
|
95
|
-
export type AP_confirm = {
|
|
96
|
-
title?: string;
|
|
97
|
-
subtitle?: string;
|
|
98
|
-
text?: ReactNode;
|
|
99
|
-
submitText?: string;
|
|
100
|
-
canselText?: string;
|
|
101
|
-
onSubmit?: () => Promise<boolean>;
|
|
102
|
-
onCansel?: () => void;
|
|
103
|
-
setAttrs?: AP_setAttrs;
|
|
104
|
-
};
|
|
105
|
-
export type AP_prompt = {
|
|
106
|
-
title?: string;
|
|
107
|
-
subtitle?: string;
|
|
108
|
-
text?: string;
|
|
109
|
-
submitText?: string;
|
|
110
|
-
canselText?: string;
|
|
111
|
-
onSubmit?: (text: string) => Promise<boolean>;
|
|
112
|
-
onCansel?: () => void;
|
|
113
|
-
setAttrs?: AP_setAttrs;
|
|
114
|
-
};
|
|
115
|
-
export type AP_Snackebar = {
|
|
116
|
-
getActions: (p: {
|
|
117
|
-
add: (item: AP_snackebar) => void;
|
|
118
|
-
}) => void;
|
|
119
|
-
rtl: boolean;
|
|
120
|
-
};
|
|
121
|
-
export type AP_SnackebarItem = {
|
|
122
|
-
item: AP_snackebar;
|
|
123
|
-
onRemove: (id: string) => void;
|
|
124
|
-
index: number;
|
|
125
|
-
rtl: boolean;
|
|
126
|
-
};
|
|
127
|
-
export default class AIOPopup {
|
|
128
|
-
rtl?: boolean;
|
|
129
|
-
render: () => ReactNode;
|
|
130
|
-
addModal: (p: AP_modal) => void;
|
|
131
|
-
addHighlight: (p: AP_highlight) => void;
|
|
132
|
-
removeHighlight: () => void;
|
|
133
|
-
addAlert: (p: AP_alert) => void;
|
|
134
|
-
removeModal: (arg?: string) => void;
|
|
135
|
-
addSnackebar: (p: AP_snackebar) => void;
|
|
136
|
-
getModals: () => AP_modal[];
|
|
137
|
-
addConfirm: (p: AP_confirm) => void;
|
|
138
|
-
addPrompt: (p: AP_prompt) => void;
|
|
139
|
-
popupId?: string;
|
|
140
|
-
popupsRef: React.RefObject<typeof Popups>;
|
|
141
|
-
highlightRef: React.RefObject<typeof Highlight>;
|
|
142
|
-
constructor(obj?: AP_props);
|
|
143
|
-
}
|
|
144
|
-
type AP_Popups = {
|
|
145
|
-
ref: any;
|
|
146
|
-
rtl: boolean;
|
|
147
|
-
};
|
|
148
|
-
declare const Popups: FC<AP_Popups>;
|
|
149
|
-
type AP_easing = 'linear' | 'easeInQuad' | 'easeInCubic' | 'easeInQuart' | 'easeInQuint' | 'easeInSine' | 'easeInExpo' | 'easeInCirc' | 'easeInBack' | 'easeOutQuad' | 'easeOutCubic' | 'easeOutQuart' | 'easeOutQuint' | 'easeOutSine' | 'easeOutExpo' | 'easeOutCirc' | 'easeOutBack' | 'easeInBounce' | 'easeInOutQuad' | 'easeInOutCubic' | 'easeInOutQuart' | 'easeInOutQuint' | 'easeInOutSine' | 'easeInOutExpo' | 'easeInOutCirc' | 'easeInOutBack' | 'easeInOutBounce' | 'easeOutBounce' | 'easeOutInQuad' | 'easeOutInCubic' | 'easeOutInQuart' | 'easeOutInQuint' | 'easeOutInSine' | 'easeOutInExpo' | 'easeOutInCirc' | 'easeOutInBack' | 'easeOutInBounce';
|
|
150
|
-
type AP_Highlight = {
|
|
151
|
-
ref: any;
|
|
152
|
-
};
|
|
153
|
-
declare const Highlight: FC<AP_Highlight>;
|
|
154
|
-
export {};
|
|
1
|
+
import React, { FC, ReactNode } from 'react';
|
|
2
|
+
import './index.css';
|
|
3
|
+
export type AP_props = {
|
|
4
|
+
rtl?: boolean;
|
|
5
|
+
id?: string;
|
|
6
|
+
};
|
|
7
|
+
export type AP_position = 'fullscreen' | 'center' | 'popover' | 'left' | 'right' | 'top' | 'bottom';
|
|
8
|
+
export type AP_attrsKey = 'backdrop' | 'modal' | 'header' | 'body' | 'footer';
|
|
9
|
+
export type AP_header = ((p: {
|
|
10
|
+
close: () => void;
|
|
11
|
+
state: any;
|
|
12
|
+
setState: any;
|
|
13
|
+
}) => ReactNode) | {
|
|
14
|
+
title?: string;
|
|
15
|
+
subtitle?: string;
|
|
16
|
+
before?: ReactNode;
|
|
17
|
+
after?: ReactNode;
|
|
18
|
+
onClose?: boolean | ((p: {
|
|
19
|
+
state: any;
|
|
20
|
+
setState: (state: any) => void;
|
|
21
|
+
}) => void);
|
|
22
|
+
attrs?: any;
|
|
23
|
+
};
|
|
24
|
+
export type AP_body = (p: {
|
|
25
|
+
close: () => void;
|
|
26
|
+
state?: any;
|
|
27
|
+
setState?: (state: any) => void;
|
|
28
|
+
}) => ReactNode;
|
|
29
|
+
export type AP_footer = (p: {
|
|
30
|
+
state: any;
|
|
31
|
+
setState: (v: any) => void;
|
|
32
|
+
close: () => void;
|
|
33
|
+
}) => ReactNode;
|
|
34
|
+
type AP_setAttrs = (mode: AP_attrsKey) => any;
|
|
35
|
+
export type AP_modal = {
|
|
36
|
+
getTarget?: () => any;
|
|
37
|
+
pageSelector?: string;
|
|
38
|
+
limitTo?: string;
|
|
39
|
+
maxHeight?: number | 'string';
|
|
40
|
+
fixStyle?: (o: any, p: {
|
|
41
|
+
targetLimit: any;
|
|
42
|
+
pageLimit: any;
|
|
43
|
+
}) => any;
|
|
44
|
+
fitTo?: string;
|
|
45
|
+
rtl?: boolean;
|
|
46
|
+
id?: string;
|
|
47
|
+
onClose?: boolean | (() => void);
|
|
48
|
+
position?: AP_position;
|
|
49
|
+
header?: AP_header;
|
|
50
|
+
state?: any;
|
|
51
|
+
footer?: AP_footer;
|
|
52
|
+
body?: AP_body;
|
|
53
|
+
animate?: boolean;
|
|
54
|
+
fitHorizontal?: boolean;
|
|
55
|
+
setAttrs?: AP_setAttrs;
|
|
56
|
+
};
|
|
57
|
+
export type AP_alert = {
|
|
58
|
+
icon?: false | ReactNode;
|
|
59
|
+
position?: AP_position;
|
|
60
|
+
type: 'success' | 'error' | 'warning' | 'info';
|
|
61
|
+
text?: ReactNode;
|
|
62
|
+
subtext?: string;
|
|
63
|
+
time?: number;
|
|
64
|
+
className?: string;
|
|
65
|
+
closeText?: string;
|
|
66
|
+
animate?: boolean;
|
|
67
|
+
onClose?: boolean | (() => void);
|
|
68
|
+
};
|
|
69
|
+
export type AP_snackebar = {
|
|
70
|
+
id?: string;
|
|
71
|
+
text: string;
|
|
72
|
+
subtext?: string;
|
|
73
|
+
icon?: ReactNode;
|
|
74
|
+
time?: number;
|
|
75
|
+
action?: {
|
|
76
|
+
text: string;
|
|
77
|
+
onClick: () => void;
|
|
78
|
+
};
|
|
79
|
+
type: 'success' | 'error' | 'warning' | 'info';
|
|
80
|
+
verticalAlign?: 'start' | 'end';
|
|
81
|
+
horizontalAlign?: 'start' | 'center' | 'end';
|
|
82
|
+
onClose?: boolean | (() => void);
|
|
83
|
+
attrs?: any;
|
|
84
|
+
};
|
|
85
|
+
export type AP_highlight = {
|
|
86
|
+
dom: any;
|
|
87
|
+
html: ReactNode;
|
|
88
|
+
onClick?: () => void;
|
|
89
|
+
mouseAccess?: boolean;
|
|
90
|
+
attrs?: any;
|
|
91
|
+
padding?: number;
|
|
92
|
+
easing?: number | AP_easing;
|
|
93
|
+
duration?: number;
|
|
94
|
+
};
|
|
95
|
+
export type AP_confirm = {
|
|
96
|
+
title?: string;
|
|
97
|
+
subtitle?: string;
|
|
98
|
+
text?: ReactNode;
|
|
99
|
+
submitText?: string;
|
|
100
|
+
canselText?: string;
|
|
101
|
+
onSubmit?: () => Promise<boolean>;
|
|
102
|
+
onCansel?: () => void;
|
|
103
|
+
setAttrs?: AP_setAttrs;
|
|
104
|
+
};
|
|
105
|
+
export type AP_prompt = {
|
|
106
|
+
title?: string;
|
|
107
|
+
subtitle?: string;
|
|
108
|
+
text?: string;
|
|
109
|
+
submitText?: string;
|
|
110
|
+
canselText?: string;
|
|
111
|
+
onSubmit?: (text: string) => Promise<boolean>;
|
|
112
|
+
onCansel?: () => void;
|
|
113
|
+
setAttrs?: AP_setAttrs;
|
|
114
|
+
};
|
|
115
|
+
export type AP_Snackebar = {
|
|
116
|
+
getActions: (p: {
|
|
117
|
+
add: (item: AP_snackebar) => void;
|
|
118
|
+
}) => void;
|
|
119
|
+
rtl: boolean;
|
|
120
|
+
};
|
|
121
|
+
export type AP_SnackebarItem = {
|
|
122
|
+
item: AP_snackebar;
|
|
123
|
+
onRemove: (id: string) => void;
|
|
124
|
+
index: number;
|
|
125
|
+
rtl: boolean;
|
|
126
|
+
};
|
|
127
|
+
export default class AIOPopup {
|
|
128
|
+
rtl?: boolean;
|
|
129
|
+
render: () => ReactNode;
|
|
130
|
+
addModal: (p: AP_modal) => void;
|
|
131
|
+
addHighlight: (p: AP_highlight) => void;
|
|
132
|
+
removeHighlight: () => void;
|
|
133
|
+
addAlert: (p: AP_alert) => void;
|
|
134
|
+
removeModal: (arg?: string) => void;
|
|
135
|
+
addSnackebar: (p: AP_snackebar) => void;
|
|
136
|
+
getModals: () => AP_modal[];
|
|
137
|
+
addConfirm: (p: AP_confirm) => void;
|
|
138
|
+
addPrompt: (p: AP_prompt) => void;
|
|
139
|
+
popupId?: string;
|
|
140
|
+
popupsRef: React.RefObject<typeof Popups>;
|
|
141
|
+
highlightRef: React.RefObject<typeof Highlight>;
|
|
142
|
+
constructor(obj?: AP_props);
|
|
143
|
+
}
|
|
144
|
+
type AP_Popups = {
|
|
145
|
+
ref: any;
|
|
146
|
+
rtl: boolean;
|
|
147
|
+
};
|
|
148
|
+
declare const Popups: FC<AP_Popups>;
|
|
149
|
+
type AP_easing = 'linear' | 'easeInQuad' | 'easeInCubic' | 'easeInQuart' | 'easeInQuint' | 'easeInSine' | 'easeInExpo' | 'easeInCirc' | 'easeInBack' | 'easeOutQuad' | 'easeOutCubic' | 'easeOutQuart' | 'easeOutQuint' | 'easeOutSine' | 'easeOutExpo' | 'easeOutCirc' | 'easeOutBack' | 'easeInBounce' | 'easeInOutQuad' | 'easeInOutCubic' | 'easeInOutQuart' | 'easeInOutQuint' | 'easeInOutSine' | 'easeInOutExpo' | 'easeInOutCirc' | 'easeInOutBack' | 'easeInOutBounce' | 'easeOutBounce' | 'easeOutInQuad' | 'easeOutInCubic' | 'easeOutInQuart' | 'easeOutInQuint' | 'easeOutInSine' | 'easeOutInExpo' | 'easeOutInCirc' | 'easeOutInBack' | 'easeOutInBounce';
|
|
150
|
+
type AP_Highlight = {
|
|
151
|
+
ref: any;
|
|
152
|
+
};
|
|
153
|
+
declare const Highlight: FC<AP_Highlight>;
|
|
154
|
+
export {};
|
package/index.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import t,{Component as e,createRef as i,useEffect as o,useState as r,createContext as n,useContext as a,useRef as l,forwardRef as d,useImperativeHandle as s}from"react";import*as
|
|
2
|
-
<div class='aio-popup-alert-container not-mounted ${
|
|
1
|
+
import t,{Component as e,createRef as i,useEffect as o,useState as r,createContext as n,useContext as a,useRef as l,forwardRef as d,useImperativeHandle as s,createElement as p}from"react";import*as c from"react-dom/server";import{Icon as h}from"@mdi/react";import{mdiClose as u}from"@mdi/js";import $ from"jquery";import"./index.css";import{AddToAttrs as _}from"aio-utils";import m from"animejs/lib/anime.es.js";import{jsx as f,Fragment as g,jsxs as v}from"react/jsx-runtime";function _defineProperty(t,e,i){return(e=_toPropertyKey(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function _toPropertyKey(t){var e=_toPrimitive(t,"string");return"symbol"==typeof e?e:e+""}function _toPrimitive(t,e){if("object"!=typeof t||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,e||"default");if("object"!=typeof o)return o;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}export default class b{constructor(t){_defineProperty(this,"rtl",void 0),_defineProperty(this,"render",void 0),_defineProperty(this,"addModal",void 0),_defineProperty(this,"addHighlight",void 0),_defineProperty(this,"removeHighlight",void 0),_defineProperty(this,"addAlert",void 0),_defineProperty(this,"removeModal",void 0),_defineProperty(this,"addSnackebar",void 0),_defineProperty(this,"getModals",void 0),_defineProperty(this,"addConfirm",void 0),_defineProperty(this,"addPrompt",void 0),_defineProperty(this,"popupId",void 0),_defineProperty(this,"popupsRef",void 0),_defineProperty(this,"highlightRef",void 0);let{rtl:e=!1}=t||{};this.rtl=e,this.addSnackebar=()=>{},this.popupsRef=i(),this.highlightRef=i(),this.getModals=()=>{let t=this.popupsRef.current;return null===t?[]:t.getModals()||[]},this.addModal=t=>{let e=this.popupsRef.current;null!==e&&e.addModal(t)},this.addHighlight=t=>{let e=this.highlightRef.current;null!==e&&e.addHighlight(t)},this.removeModal=t=>{let e=this.popupsRef.current;null!==e&&e.removeModal(t)},this.removeHighlight=()=>{let t=this.highlightRef.current;null!==t&&t.removeHighlight()},this.render=()=>{let t={rtl:e,getActions:({add:t})=>this.addSnackebar=t};return v(g,{children:[f(Popups,{rtl:e,ref:this.popupsRef}),f(Snackebar,{...t}),f(Highlight,{ref:this.highlightRef})]})},this.addAlert=t=>Alert(t),this.addConfirm=t=>{let{title:e,subtitle:i,text:o,submitText:r="Yes",canselText:n="No",onSubmit:a,onCansel:l=()=>{},setAttrs:d=()=>({})}=t,s={position:"center",setAttrs(t){let e=d(t);return"modal"===t?_(e,{className:"aio-popup-confirm"}):e},header:{title:e,subtitle:i},body:()=>o,footer:()=>v(g,{children:[f("button",{type:"button",onClick:()=>{l(),this.removeModal()},children:n}),f("button",{type:"button",className:"active",onClick:async()=>{if(a)!1!==await a()&&this.removeModal()},children:r})]})};this.addModal(s)},this.addPrompt=t=>{let{title:e,subtitle:i,text:o,submitText:r="Submit",canselText:n="close",onSubmit:a,onCansel:l=()=>{},setAttrs:d=()=>({})}=t,s={position:"center",setAttrs(t){let e=d(t);return"modal"===t?_(e,{className:"aio-popup-prompt"}):e},state:{temp:""},header:{title:e,subtitle:i},body:({state:t,setState:e})=>f("textarea",{placeholder:o,value:t.temp,onChange(t){e&&e({temp:t.target.value})}}),footer:({state:t,setState:e})=>v(g,{children:[f("button",{type:"button",onClick:()=>{l(),this.removeModal()},children:n}),f("button",{type:"button",className:"active",onClick:async()=>{if(a)!1!==await a(t.temp)?this.removeModal():e({temp:""})},disabled:!t.temp,children:r})]})};this.addModal(s)}}};let Popups=d((t,e)=>{let[i,o]=r([]),n=l(i);n.current=i;let{rtl:a}=t;function d(t){void 0===t.id&&(t.id="popup"+Math.round(1e6*Math.random()));let e=t;o(i=>[...i.filter(({id:e})=>e!==t.id),e])}async function p(t="last"){if("all"===t){o([]);return}if(!n.current.length)return;"last"===t&&(t=n.current[n.current.length-1].id);let e=n.current.find(e=>e.id===t);e&&($(`[data-id=${t}]`).addClass("not-mounted"),setTimeout(()=>{"function"==typeof e.onClose&&e.onClose(),o(e=>e.filter(e=>e.id!==t))},300))}function c(){return n.current.map((t,e)=>f(Popup,{modal:t,rtl:a,isLast:e===n.current.length-1,onClose:()=>p(t.id)},t.id))}s(e,()=>({addModal:d,removeModal:p,getModals:()=>n.current}));let h=c();return h.length?f(g,{children:h}):null}),CTX=n({});function Popup(t){let{modal:e,rtl:n,onClose:a,isLast:d}=t,{setAttrs:s=()=>({}),id:p,position:c="fullscreen",body:h,getTarget:u,maxHeight:m,fixStyle:g=t=>t,fitTo:b}=e,[y]=r({dom:i(),backdropDom:i(),dui:void 0,isDown:!1}),[k,C]=r({}),[L,w]=r(e.state),M=s("modal")||{},N=s("backdrop")||{},x=l(!1);async function H(){a()}function P(t){if(!y.dui)return;let e=$(t.target);"popover"===c&&e.attr("data-id")!==y.dui&&!e.parents(`[data-id=${y.dui}]`).length&&H()}o(()=>()=>{$(window).unbind("click",P)}),o(()=>{let t="popover"===c?function t(){if(!u)return{};let i=u();if(!i||!i.length)return{};let o={dom:$(y.dom.current),target:i,fitHorizontal:e.fitHorizontal,fixStyle:g,pageSelector:e.pageSelector,limitTo:e.limitTo,fitTo:b,attrs:M,rtl:n},r={...Align(o),position:"absolute"};return m&&(r.maxHeight=m),r}():{};if(console.log("updatedStyle.top",t.top),C(t),u){y.dui="a"+Math.round(1e7*Math.random());u().attr("data-id",y.dui)}setTimeout(()=>{let t=$(y.dom.current);t.removeClass("not-mounted"),$(y.backdropDom.current).removeClass("not-mounted"),t.focus()},0),$(window).unbind("click",P),$(window).bind("click",P)},[]);function S(t){if(d)27===t.keyCode&&a()}function A(){setTimeout(()=>y.isDown=!1,0)}let T,B,R,I;return f(CTX.Provider,{value:{close:H,state:L,setState:w},children:f("div",{...(T="aio-popup-backdrop",T+=` aio-popup-position-${c}`,T+=n?" rtl":" ltr",x&&(T+=" not-mounted"),_(N,{className:T,attrs:{ref:y.backdropDom,onKeyDown:S,tabIndex:0,"data-id":p,onClick:N.onClick?N.onClick:function t(e){if(!y.isDown){e.stopPropagation();$(e.target).hasClass("aio-popup-backdrop")&&H()}}}})),children:v("div",{...(B={...k,...M.style},R="ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown",{...M,ref:y.dom,"data-id":e.id,tabIndex:0,onKeyDown:S,[R]:function t(e){$(window).unbind("mouseup",A),$(window).bind("mouseup",A),y.isDown=!0},className:(I="aio-popup",I+=n?" rtl":" ltr",x&&(I+=" not-mounted"),M.className&&(I+=" "+M.className),I),style:{...B}}),children:[!!e.header&&f(ModalHeader,{modal:e}),f(ModalBody,{modal:e}),!!e.footer&&f("div",{..._(s("footer"),{className:"aio-popup-footer"}),children:e.footer({state:L,setState:w,close:H})})]})})})}let ModalHeader=t=>{let e=a(CTX),{modal:i}=t,{state:o,setState:r}=e,{setAttrs:n=()=>({})}=i,l=n("header")||{};if("function"==typeof i.header)return i.header({close:e.close,state:o,setState:r});if("object"!=typeof i.header)return null;let d="aio-popup-header",{title:s,subtitle:p,onClose:c,before:$,after:m}=i.header;function g(t){t.stopPropagation(),t.preventDefault(),"function"==typeof c?c({state:o,setState:r}):e.close()}function b(){return p?v("div",{className:`${d}-text`,children:[f("div",{className:`${d}-title`,children:s}),f("div",{className:`${d}-subtitle`,children:p})]}):f("div",{className:`${d}-title`,style:{display:"flex",alignItems:"center",flex:1},children:s})}return v("div",{..._(l,{className:d}),children:[void 0!==$&&f("div",{className:`${d}-before`,onClick:t=>g(t),children:$}),!!s&&b(),void 0!==m&&f("div",{className:`${d}-after`,onClick:t=>g(t),children:m}),!1!==c&&f("div",{className:`${d}-close-button`,onClick:t=>g(t),children:f(h,{path:u,size:.8})})]})},ModalBody=t=>{let{state:e,setState:i,close:o}=a(CTX),{modal:r}=t,{body:n=()=>null,setAttrs:l=()=>({})}=r,d=l("body")||{},s=n({close:o,state:e,setState:i});return s&&null!==s?f("div",{..._(d,{className:"aio-popup-body aio-popup-scroll"}),children:s}):null};function Alert(t){let{icon:e,type:i="",text:o="",subtext:r="",time:n=10,className:a,closeText:l="بستن",position:d="center",onClose:s}=t,p={id:"",time:0,getId:()=>"aa"+Math.round(1e8*Math.random()),getBarRender:()=>`<div class='aio-popup-time-bar' style="width:${p.time}%;"></div>`,updateBarRender(){$(`.aio-popup-alert-container.${p.id} .aio-popup-time`).html(p.getBarRender())},getRender:()=>`
|
|
2
|
+
<div class='aio-popup-alert-container not-mounted ${p.id} aio-popup-alert-container-${d}${a?` ${a}`:""}'>
|
|
3
3
|
<div class='aio-popup-alert aio-popup-alert-${i}'>
|
|
4
|
-
<div class='aio-popup-alert-header'>${
|
|
4
|
+
<div class='aio-popup-alert-header'>${p.getIcon()}</div>
|
|
5
5
|
<div class='aio-popup-alert-body aio-popup-scroll'>
|
|
6
|
-
<div class='aio-popup-alert-text'>${
|
|
6
|
+
<div class='aio-popup-alert-text'>${c.renderToStaticMarkup(o)}</div>
|
|
7
7
|
<div class='aio-popup-alert-subtext'>${r}</div>
|
|
8
8
|
</div>
|
|
9
9
|
<div class='aio-popup-alert-footer'>
|
|
10
|
-
<button class='aio-popup-alert-close ${
|
|
10
|
+
<button class='aio-popup-alert-close ${p.id}'>${l}</button>
|
|
11
11
|
</div>
|
|
12
12
|
<div class='aio-popup-time'></div>
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
|
-
`,close(){
|
|
15
|
+
`,close(){p.toggleClass(!1),setTimeout(()=>{"function"==typeof s&&s(),!1!==s&&$("."+p.id).remove()},200)},getIcon:()=>!1===e?"":e||({error:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>',warning:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></svg>',info:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"></path></svg>',success:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"></path></svg>'})[i]||"",startTimer(){setTimeout(()=>{if(p.time>=100){p.time=100,p.close();return}p.time+=2,p.updateBarRender(),p.startTimer()},n/50*1e3)},toggleClass(t){let e=$(`.${p.id}`);t?setTimeout(()=>e.removeClass("not-mounted"),0):e.addClass("not-mounted")},render(){$("body").append(p.getRender()),$("button."+p.id).off("click",p.close),$("button."+p.id).on("click",p.close),p.toggleClass(!0)}};p.id=p.getId(),p.render(),n&&p.startTimer()}class Snackebar extends e{constructor(t){super(t),this.state={items:[]},t.getActions({add:this.add.bind(this)})}add(t){let{items:e}=this.state,i=[...e,{...t,id:"a"+Math.round(1e9*Math.random())}];this.setState({items:i})}remove(t,e){if(!1===e)return;let{items:i}=this.state,o=i.filter((e,i)=>e.id!==t);this.setState({items:o}),"function"==typeof e&&e()}render(){let{items:t}=this.state,{rtl:e}=this.props;return f(g,{children:t.map((t,i)=>p(SnackebarItem,{rtl:e,item:t,index:i,onRemove:e=>this.remove(e,t.onClose),key:t.id}))})}}function SnackebarItem(t){var e;let{item:i,onRemove:n,index:a,rtl:l}=t,{time:d=8,id:s,text:p,type:c,subtext:h,action:u,onClose:_,verticalAlign:m="end",horizontalAlign:g="center",icon:b,attrs:y={}}=i;"start"!==m&&"end"!==m&&(m="end",console.error('aio-popup error => snackebar item .verticalAlign should be "start" or "end"')),"start"!==g&&"end"!==g&&"center"!==g&&(g="center",console.error('aio-popup error => snackebar item .horizontalAlign should be "start" or "end" or "center"'));let[k,C]=r(!1);function L(){C(!1),setTimeout(()=>{n(s)},200)}o(()=>{setTimeout(()=>C(!0),0),setTimeout(()=>L(),1e3*d)},[]);let w,M,N,x;return w="aio-popup-snackebar-item-container",w+=` aio-popup-snackebar-item-container-horizontal-align-${g}`,k&&(w+=" mounted"),l&&(w+=" rtl"),M=function t(e){let i=$(".aio-popup-snackebar-item-container"),o={start:12,end:12};for(let r=0;r<e;r++){let n=i.eq(r),a=n.height()+6,l=n.attr("data-vertical-align");o[l]+=a}return{["start"===m?"top":"bottom"]:o[m]}}(a),N={"data-vertical-align":m,className:w,style:M,onClick:!1===_?void 0:()=>L()},f("div",{...N,children:(x="aio-popup-snackebar-item",x+=` aio-popup-snackebar-item-${c}`,y.className&&(x+=` ${y.className}`),v("div",{...{...y,className:x,style:y.style},children:[f("div",{className:"aio-popup-snackebar-item-icon",children:b||("error"===(e=c)||"warning"===e||"info"===e?f("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:f("path",{d:"M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z",style:{fill:"currentcolor"}})}):f("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:f("path",{d:"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z",style:{fill:"currentcolor"}})}))})," ",v("div",{className:"aio-popup-snackebar-item-text",children:[f("div",{className:"aio-popup-snackebar-item-uptext",children:p}),!!h&&f("div",{className:"aio-popup-snackebar-item-subtext",children:h})]})," ",u&&u.text?f("button",{className:"aio-popup-snackebar-item-action",onClick(t){t.stopPropagation(),u.onClick(),L()},children:u.text}):null," ",f("div",{className:"aio-popup-snackebar-bar",style:{transition:`${d}s linear`}})," "]}))})}function Align(t){let{dom:e,target:i,fitHorizontal:o,fixStyle:r=t=>t,attrs:n={},fitTo:a,pageSelector:l,rtl:d,limitTo:s}=t,p={getDomLimit(t,e){if(a&&"popover"===e){let i=t.parents(a);if(i.length){let{left:o,top:r}=i.offset(),n=i.width(),d=i.height();return{left:o,top:r,right:o+n,bottom:r+d,width:n,height:d}}}let s=t.offset(),p=s.left-window.pageXOffset,c=s.top-window.pageYOffset;if(l&&"page"!==e){let h=$(l);try{let{left:u,top:_}=h.offset()||{left:0,top:0};p-=u,c-=_}catch{}}let m=t.outerWidth(),f=t.outerHeight(),g=p+m,v=c+f;return{left:p,top:c,right:g,bottom:v,width:m,height:f}},getPageLimit(){let t=l?$(l):void 0;t=Array.isArray(t)&&0===t.length?void 0:t;let e=window.innerWidth,i=window.innerHeight,o=t?p.getDomLimit(t,"page"):{left:0,top:0,right:e,bottom:i};return o.left<0&&(o.left=0),o.right>e&&(o.right=e),o.top<0&&(o.top=0),o.bottom>i&&(o.bottom=i),o},getRelatedToLmit(){if(!s)return;let t=e.parents(s);if(!t.length)return;let i=t.offset(),o=i.left-window.pageXOffset,r=i.top-window.pageYOffset,n=t.outerWidth(),a=t.outerHeight();return{left:o,top:r,right:o+n,bottom:r+a,width:n,height:a}},align(){let t=p.getPageLimit(),l=p.getDomLimit(i,"target"),s=p.getDomLimit(e,"popover"),c;if(!a){if(s.top=l.bottom,s.bottom=s.top+s.height,o)s.width=l.width,s.left=l.left,s.right=l.left+l.width;else{let h=p.getRelatedToLmit()||t;d?(s.right=l.right,s.left=s.right-s.width,s.left<h.left&&(s.left=h.left)):(s.left=l.left,s.right=s.left+s.width,s.right>h.right&&(s.left=h.right-s.width))}s.bottom>t.bottom?s.height>l.top-t.top?s.top=t.bottom-s.height:s.top=l.top-s.height:s.top=l.bottom,s.height>t.bottom-t.top&&(s.top=6,s.bottom=void 0,s.height=t.bottom-t.top-12,c="auto")}let u;return r({left:s.left,top:s.top,width:s.width,height:a?s.height:void 0,overflowY:c,...n.style},{targetLimit:l,pageLimit:t})}};return p.align()}let Highlight=d((t,e)=>{let[i,o]=r(!1),[n,a]=r({Left:0,Top:0,Width:0,Height:0,TopSpace:0,BottomSpace:0}),d=l(),p=d.current,c=l(n);function h(t){let e=L("padding",6),i=t.offset(),o=i.left-window.pageXOffset,r=i.top-window.pageYOffset,n=window.innerHeight,a=t.outerWidth(),l=t.outerHeight();return{Left:o-1*e,Top:r-1*e,Width:a+2*e,Height:l+2*e,TopSpace:r,BottomSpace:n-(r+l)}}function u(){let t=L("easing",void 0);var e=["linear","easeInQuad","easeInSine","easeInCirc","easeInBack","easeOutQuad","easeOutSine","easeOutCirc","easeInOutQuad","easeInOutSine","easeInOutBack","easeOutBounce"];return"number"==typeof t?e[t]||e[0]:t}function $(){a({Left:0,Top:0,Width:0,Height:0,TopSpace:0,BottomSpace:0}),o(!1)}function b(t){let{dom:e}=t;d.current=t,o(!0),setTimeout(()=>{try{let t=L("duration",1200);e[0].scrollIntoView();let i=h(e),o=u(),r={...i,targets:[{...c.current}],duration:t,update(t){let{animatables:e}=t;a({...e[0].target})}};o&&(r.easing=o),m(r)}catch{alert(`
|
|
16
16
|
aio-highlighter error => connot find dom
|
|
17
|
-
`)}},0)}function y(t){return
|
|
17
|
+
`)}},0)}function y(t){return f("svg",{version:"1.1",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 512 512",...t,children:v("g",{children:[f("path",{d:"M242.1,45.2c7.7-7.7,20.2-7.7,27.8-0.1l0.1,0.1l236.3,236.3c7.7,7.7,7.7,20.2,0,27.9c-7.7,7.7-20.2,7.7-27.9,0 L256,86.9L33.7,309.3c-7.7,7.7-20.2,7.7-27.9,0c-7.7-7.7-7.7-20.2,0-27.9L242.1,45.2z"}),f("path",{d:"M242.1,202.7c7.7-7.7,20.2-7.7,27.8-0.1l0.1,0.1L506.2,439c7.7,7.7,7.7,20.2,0,27.9c-7.7,7.7-20.2,7.7-27.9,0 L256,244.5L33.7,466.9c-7.7,7.7-20.2,7.7-27.9,0c-7.7-7.7-7.7-20.2,0-27.9L242.1,202.7z"})]})})}function k(t,e,i){return f("div",{className:"aio-popup-highlight-arrow",children:y({width:24,height:24,style:{position:"absolute",height:24,width:24,left:e+i/2-12},className:`aio-popup-highlight-arrow-${t}`})})}function C(t){if(!p||!p.html)return"";let e,i=p.html||"",o=f("div",{className:"aio-popup-highlight-space"}),r=f("div",{className:"aio-popup-highlight-html",children:i}),n=k(t,c.current.Left,c.current.Width);return e="top"===t?v(g,{children:[o,r,n]}):v(g,{children:[n,r,o]}),f("div",{className:"aio-popup-highlight-html-container",children:e})}function L(t,e){if(!p||null===p)return e;let i=p[t];return void 0===i?e:i}function w(){!L("mouseAccess",!1)&&null!=p&&p.onClick&&p.onClick()}function M(t){let e="",i=0,o="aio-popup-highlight-mask",r=c.current;return"top"===t?(i=r.Top,r.TopSpace>r.BottomSpace&&(e=C("top"))):"bottom"===t?(o+=" aio-popup-highlight-mask-flex",r.TopSpace<=r.BottomSpace&&(e=C("bottom"))):"left"===t?i=r.Left:o+=" aio-popup-highlight-mask-flex",f("div",{className:o,style:{["top"===t||"bottom"===t?"height":"width"]:i},onClick:()=>w(),children:e})}function N(){let t=L("mouseAccess",!1);return f("div",{style:{width:n.Width},className:"aio-popup-highlight-focus-container",onClick:t?void 0:()=>w(),children:f("div",{className:"aio-popup-highlight-focus"})})}function x(){return v("div",{className:"aio-popup-highlight-main",style:{height:n.Height},children:[M("left"),N(),M("right")]})}if(c.current=n,s(e,()=>({addHighlight:b,removeHighlight:$})),!i)return null;function H(){let t=L("mouseAccess",!1);return{pointerEvents:t?"none":"all"}}let P=_(L("attrs",{}),{className:"aio-popup-highlight",style:H()});return v("div",{...P,children:[M("top"),x(),M("bottom")]})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "aio-popup",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.3",
|
|
4
4
|
"description": "handle all types of popup and modals in react",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@mdi/js": "^7.0.96",
|
|
16
16
|
"@mdi/react": "^1.6.1",
|
|
17
|
-
"jquery": "^3.6.1"
|
|
17
|
+
"jquery": "^3.6.1",
|
|
18
|
+
"animejs": "^3.2.1"
|
|
18
19
|
},
|
|
19
20
|
"keywords": [
|
|
20
21
|
"popup",
|