@linzjs/windows 3.6.1 → 3.7.0
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/LuiModalAsync/LuiModalAsyncContext.tsx +13 -1
- package/dist/LuiModalAsync/LuiModalAsyncContextProvider.tsx +21 -5
- package/dist/LuiModalAsync/useLuiModalPrefab.tsx +11 -2
- package/dist/LuiModalAsync/useShowAsyncModal.ts +8 -7
- package/dist/panel/OpenPanelButton.tsx +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,15 @@
|
|
|
1
|
-
import { ComponentProps, MutableRefObject, ReactElement, createContext } from "react";
|
|
1
|
+
import { ComponentProps, MutableRefObject, ReactElement, createContext, createRef } from "react";
|
|
2
|
+
|
|
3
|
+
export const openModalOnAllWindows = createRef<HTMLDivElement>();
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @param showOnAllWindows If true this modal will show on all windows opened from main window including main window.
|
|
7
|
+
* @param
|
|
8
|
+
*/
|
|
9
|
+
export interface ShowModalProps {
|
|
10
|
+
showOnAllWindows?: boolean;
|
|
11
|
+
polledCloseCondition?: () => boolean;
|
|
12
|
+
}
|
|
2
13
|
|
|
3
14
|
export type ComponentType = (props: any) => ReactElement<any, any>;
|
|
4
15
|
|
|
@@ -27,6 +38,7 @@ export interface LuiModalAsyncContextType {
|
|
|
27
38
|
ownerRef: MutableRefObject<OR>,
|
|
28
39
|
component: CT,
|
|
29
40
|
args: Omit<ComponentProps<CT>, "resolve" | "close">,
|
|
41
|
+
showModalProps?: ShowModalProps,
|
|
30
42
|
) => PromiseWithResolve<RT>;
|
|
31
43
|
}
|
|
32
44
|
|
|
@@ -1,7 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
ComponentType,
|
|
3
|
+
LuiModalAsyncContext,
|
|
4
|
+
openModalOnAllWindows,
|
|
5
|
+
PromiseWithResolve,
|
|
6
|
+
ShowModalProps,
|
|
7
|
+
} from "./LuiModalAsyncContext";
|
|
2
8
|
import { LuiModalAsyncInstanceContext } from "./LuiModalAsyncInstanceContext";
|
|
3
9
|
import React, {
|
|
4
|
-
createRef,
|
|
5
10
|
MutableRefObject,
|
|
6
11
|
PropsWithChildren,
|
|
7
12
|
ReactElement,
|
|
@@ -14,13 +19,12 @@ import { createPortal } from "react-dom";
|
|
|
14
19
|
import { useInterval } from "usehooks-ts";
|
|
15
20
|
import { v4 as makeUuid } from "uuid";
|
|
16
21
|
|
|
17
|
-
export const openModalOnAllWindows = createRef<HTMLDivElement>();
|
|
18
|
-
|
|
19
22
|
export interface LuiModalAsyncInstance {
|
|
20
23
|
uuid: string;
|
|
21
24
|
ownerRef: MutableRefObject<HTMLElement | null>;
|
|
22
25
|
componentInstance: ReactElement;
|
|
23
26
|
resolve: (result: any) => void;
|
|
27
|
+
showModalProps?: ShowModalProps;
|
|
24
28
|
}
|
|
25
29
|
|
|
26
30
|
/**
|
|
@@ -97,7 +101,12 @@ export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unk
|
|
|
97
101
|
* @param args Arguments for react component.
|
|
98
102
|
*/
|
|
99
103
|
const showModal = useCallback(
|
|
100
|
-
(
|
|
104
|
+
(
|
|
105
|
+
ownerRef: MutableRefObject<HTMLElement | null>,
|
|
106
|
+
Component: ComponentType,
|
|
107
|
+
args: any,
|
|
108
|
+
showModalProps?: ShowModalProps,
|
|
109
|
+
): PromiseWithResolve<any> => {
|
|
101
110
|
const uuid = makeUuid();
|
|
102
111
|
let extResolve: PromiseWithResolve<any>["resolve"];
|
|
103
112
|
const promise = new Promise((resolve) => {
|
|
@@ -111,6 +120,7 @@ export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unk
|
|
|
111
120
|
ownerRef,
|
|
112
121
|
componentInstance: <Component {...args} resolve={resolve} close={() => resolve(undefined)} />,
|
|
113
122
|
resolve,
|
|
123
|
+
showModalProps,
|
|
114
124
|
},
|
|
115
125
|
]);
|
|
116
126
|
} catch (e) {
|
|
@@ -154,6 +164,12 @@ export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unk
|
|
|
154
164
|
newModals.length !== modals.length && setModals(newModals);
|
|
155
165
|
// We could do this with window close listeners, but they are unreliable
|
|
156
166
|
openWindowsRef.current = openWindowsRef.current.filter((w) => !w.closed);
|
|
167
|
+
|
|
168
|
+
newModals.forEach((modalInstance) => {
|
|
169
|
+
if (modalInstance.showModalProps?.polledCloseCondition?.()) {
|
|
170
|
+
modalInstance.resolve(undefined);
|
|
171
|
+
}
|
|
172
|
+
});
|
|
157
173
|
}, 500);
|
|
158
174
|
|
|
159
175
|
const portalOwners = (modalInstance: LuiModalAsyncInstance) =>
|
|
@@ -12,6 +12,7 @@ import React, { PropsWithChildren, ReactElement, useCallback, useMemo, useState
|
|
|
12
12
|
import { LuiButton, LuiCheckboxInput, LuiMiniSpinner } from "@linzjs/lui";
|
|
13
13
|
import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
|
|
14
14
|
import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
|
|
15
|
+
import { omit, pick } from "lodash-es";
|
|
15
16
|
|
|
16
17
|
export type PrefabType = "success" | "info" | "warning" | "error" | "progress" | "blocked";
|
|
17
18
|
|
|
@@ -30,6 +31,7 @@ export interface useLuiModalPrefabProps<RT extends any = string> extends LuiModa
|
|
|
30
31
|
onHelpClick?: () => void;
|
|
31
32
|
buttons?: LuiModalAsyncPrefabButton<RT>[];
|
|
32
33
|
dontShowAgainSessionKey?: string;
|
|
34
|
+
polledCloseCondition?: () => boolean;
|
|
33
35
|
}
|
|
34
36
|
|
|
35
37
|
export interface LuiModalAsyncPrefabProps<RT> extends useLuiModalPrefabProps<RT>, LuiModalAsyncCallback<RT> {
|
|
@@ -186,13 +188,20 @@ export const useLuiModalPrefab = () => {
|
|
|
186
188
|
const split = props.children.split("\n");
|
|
187
189
|
props.children = flatMap(split.map((part, i) => (i !== split.length - 1 ? [part, <br key={i} />] : part)));
|
|
188
190
|
}
|
|
189
|
-
if (
|
|
191
|
+
if (
|
|
192
|
+
(props.dontShowAgainSessionKey && LuiModalDontShowSessionCheck(props.dontShowAgainSessionKey)) ||
|
|
193
|
+
(props.polledCloseCondition && props.polledCloseCondition())
|
|
194
|
+
) {
|
|
190
195
|
// Add resolve method to make the signature of showPrefabModal consistent
|
|
191
196
|
const prom = Promise.resolve(undefined) as PromiseWithResolve<RT>;
|
|
192
197
|
prom.resolve = (_val: RT | undefined) => {};
|
|
193
198
|
return prom;
|
|
194
199
|
}
|
|
195
|
-
return showModal(
|
|
200
|
+
return showModal(
|
|
201
|
+
LuiModalPrefab,
|
|
202
|
+
omit(props, ["showOnAllWindows", "polledCloseCondition"]),
|
|
203
|
+
pick(props, ["showOnAllWindows", "polledCloseCondition"]),
|
|
204
|
+
) as PromiseWithResolve<RT>;
|
|
196
205
|
},
|
|
197
206
|
[showModal],
|
|
198
207
|
);
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
ComponentType,
|
|
3
|
+
LuiModalAsyncContext,
|
|
4
|
+
openModalOnAllWindows,
|
|
5
|
+
PromiseWithResolve,
|
|
6
|
+
ShowModalProps,
|
|
7
|
+
} from "./LuiModalAsyncContext";
|
|
2
8
|
import { ComponentProps, useCallback, useContext, useMemo, useRef } from "react";
|
|
3
|
-
import { openModalOnAllWindows } from "./LuiModalAsyncContextProvider";
|
|
4
|
-
|
|
5
|
-
export interface ShowModalProps {
|
|
6
|
-
showOnAllWindows?: boolean;
|
|
7
|
-
}
|
|
8
9
|
|
|
9
10
|
export const useShowAsyncModal = () => {
|
|
10
11
|
const { showModal } = useContext(LuiModalAsyncContext);
|
|
@@ -17,7 +18,7 @@ export const useShowAsyncModal = () => {
|
|
|
17
18
|
args: Omit<ComponentProps<CT>, "resolve" | "close">,
|
|
18
19
|
props?: ShowModalProps,
|
|
19
20
|
): PromiseWithResolve<Parameters<ComponentProps<CT>["resolve"]>[0]> =>
|
|
20
|
-
showModal(props?.showOnAllWindows ? openModalOnAllWindows : modalOwnerRef, component, args),
|
|
21
|
+
showModal(props?.showOnAllWindows ? openModalOnAllWindows : modalOwnerRef, component, args, props),
|
|
21
22
|
[showModal],
|
|
22
23
|
);
|
|
23
24
|
|
|
@@ -11,7 +11,7 @@ export const OpenPanelButton = ({ buttonText, component }: OpenPanelButtonProps)
|
|
|
11
11
|
const { openPanel, openPanels } = useContext(PanelsContext);
|
|
12
12
|
|
|
13
13
|
return (
|
|
14
|
-
<button onClick={() => openPanel(buttonText, component)}>
|
|
14
|
+
<button onClick={() => openPanel({ uniqueId: buttonText, componentFn: component })}>
|
|
15
15
|
Show {buttonText} {openPanels.has(buttonText) ? "(Open)" : ""}
|
|
16
16
|
</button>
|
|
17
17
|
);
|