@fullkekw/popup 2.0.2 → 2.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.
- package/README.md +22 -23
- package/dist/Interfaces.d.ts +1 -1
- package/dist/Package.d.ts +1 -1
- package/dist/index.es.js +137 -137
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +8 -8
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +66 -66
package/README.md
CHANGED
|
@@ -12,26 +12,37 @@ $ yarn add @fullkekw/popup
|
|
|
12
12
|
Usage
|
|
13
13
|
```tsx
|
|
14
14
|
import { FC } from 'react';
|
|
15
|
+
import { PopupLayer, PopupWindow, PopupButton} from '@fullkekw/popup'
|
|
15
16
|
import '@fullkekw/popup/css'; // Basic styles
|
|
16
17
|
|
|
17
18
|
const Page: FC = (props) => {
|
|
18
19
|
const popupId1 = 'popupId1'
|
|
19
20
|
const popupId2 = 'popupId2'
|
|
20
21
|
|
|
21
|
-
return <
|
|
22
|
-
{/* Must be inside <body> tag */}
|
|
22
|
+
return <body>
|
|
23
23
|
<PopupLayer>
|
|
24
24
|
<PopupWindow id={popupId1}>
|
|
25
|
-
Popup Content
|
|
25
|
+
Popup Content 1
|
|
26
26
|
|
|
27
27
|
<PopupButton popupId={popupId1}>
|
|
28
|
-
Close popup
|
|
28
|
+
Close popup 1
|
|
29
29
|
</PopupButton>
|
|
30
30
|
|
|
31
31
|
<PopupButton popupId={popupId2}>
|
|
32
32
|
Open popup 2
|
|
33
33
|
</PopupButton>
|
|
34
34
|
</PopupWindow>
|
|
35
|
+
|
|
36
|
+
{/* Nested window always will be on top of the stacking context */}
|
|
37
|
+
<div>
|
|
38
|
+
<PopupWindow id={popupId2}>
|
|
39
|
+
Popup Content 2
|
|
40
|
+
|
|
41
|
+
<PopupButton popupId={popupId2}>
|
|
42
|
+
Close popup 2
|
|
43
|
+
</PopupButton>
|
|
44
|
+
</PopupWindow>
|
|
45
|
+
</div>
|
|
35
46
|
</PopupLayer>
|
|
36
47
|
</div>
|
|
37
48
|
}
|
|
@@ -55,6 +66,7 @@ export default Page;
|
|
|
55
66
|
Synthetic state handle. Will be opened by default
|
|
56
67
|
```tsx
|
|
57
68
|
import { FC, useState } from 'react';
|
|
69
|
+
import { PopupLayer, PopupWindow, PopupButton} from '@fullkekw/popup'
|
|
58
70
|
import '@fullkekw/popup/css';
|
|
59
71
|
|
|
60
72
|
const Page: FC = (props) => {
|
|
@@ -62,7 +74,7 @@ const Page: FC = (props) => {
|
|
|
62
74
|
|
|
63
75
|
const [state, setState] = useState(true)
|
|
64
76
|
|
|
65
|
-
return <
|
|
77
|
+
return <body>
|
|
66
78
|
<PopupLayer>
|
|
67
79
|
<PopupWindow id={popupId1} isOpen={state} setIsOpen={setState}>
|
|
68
80
|
Popup Content
|
|
@@ -72,7 +84,7 @@ const Page: FC = (props) => {
|
|
|
72
84
|
</PopupButton>
|
|
73
85
|
</PopupWindow>
|
|
74
86
|
</PopupLayer>
|
|
75
|
-
</
|
|
87
|
+
</body>
|
|
76
88
|
}
|
|
77
89
|
|
|
78
90
|
export default Page;
|
|
@@ -80,13 +92,14 @@ export default Page;
|
|
|
80
92
|
|
|
81
93
|
Disable exit on layer & escape
|
|
82
94
|
```tsx
|
|
83
|
-
import { FC
|
|
95
|
+
import { FC } from 'react';
|
|
96
|
+
import { PopupLayer, PopupWindow, PopupButton} from '@fullkekw/popup'
|
|
84
97
|
import '@fullkekw/popup/css';
|
|
85
98
|
|
|
86
99
|
const Page: FC = (props) => {
|
|
87
100
|
const popupId1 = 'popupId1'
|
|
88
101
|
|
|
89
|
-
return <
|
|
102
|
+
return <body>
|
|
90
103
|
<PopupLayer>
|
|
91
104
|
<PopupWindow id={popupId1} settings={{exitOnLayer: false, exitOnDocument: false}}>
|
|
92
105
|
Popup Content
|
|
@@ -96,7 +109,7 @@ const Page: FC = (props) => {
|
|
|
96
109
|
</PopupButton>
|
|
97
110
|
</PopupWindow>
|
|
98
111
|
</PopupLayer>
|
|
99
|
-
</
|
|
112
|
+
</body>
|
|
100
113
|
}
|
|
101
114
|
|
|
102
115
|
export default Page;
|
|
@@ -132,20 +145,6 @@ export interface PopupSettings {
|
|
|
132
145
|
disableScroll?: boolean
|
|
133
146
|
}
|
|
134
147
|
|
|
135
|
-
export interface PopupNode {
|
|
136
|
-
id: string
|
|
137
|
-
open: boolean
|
|
138
|
-
zIndex: number
|
|
139
|
-
settings: PopupSettings
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
export interface PopupContextProps {
|
|
143
|
-
nodes: PopupNode[]
|
|
144
|
-
toggleNode(id: string, state?: boolean): void
|
|
145
|
-
registerNode(node: PopupNode): void
|
|
146
|
-
toggleDocument(id: string, e: React.MouseEvent): void
|
|
147
|
-
}
|
|
148
|
-
|
|
149
148
|
|
|
150
149
|
|
|
151
150
|
export interface PopupLayerProps {
|
package/dist/Interfaces.d.ts
CHANGED
|
@@ -30,7 +30,7 @@ export interface PopupNode {
|
|
|
30
30
|
}
|
|
31
31
|
export interface PopupContextProps {
|
|
32
32
|
nodes: PopupNode[];
|
|
33
|
-
toggleNode(
|
|
33
|
+
toggleNode(node: string | PopupNode, state?: boolean): void;
|
|
34
34
|
registerNode(node: PopupNode): void;
|
|
35
35
|
toggleDocument(id: string, e: React.MouseEvent): void;
|
|
36
36
|
}
|
package/dist/Package.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { PopupButtonProps, PopupLayerProps, PopupWindowProps } from './Interfaces';
|
|
3
3
|
/**
|
|
4
|
-
* Popup
|
|
4
|
+
* Popup context provider. Must be inside body tag and in client environment (NextJS)
|
|
5
5
|
*/
|
|
6
6
|
export declare const PopupLayer: FC<PopupLayerProps>;
|
|
7
7
|
/**
|