generated from rhdeck/ts-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
124 lines (123 loc) · 3.46 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import React, {
FC,
createContext,
useContext,
useCallback,
useMemo,
useState,
} from "react";
interface DeferredType<T> {
resolve?: (arg?: T) => void;
reject?: (reason?: any) => void;
promise?: Promise<T>;
}
function makeDeferred<T>() {
const o: DeferredType<T> = {};
o.promise = new Promise<T>((_resolve, _reject) => {
o.resolve = _resolve;
o.reject = _reject;
});
return o;
}
interface BaseType {}
interface ContextType<PromiseType> extends BaseType {
isOpen: boolean;
setIsOpen: (isOpen: boolean) => void;
deferred?: DeferredType<PromiseType>;
setDeferred?: (deferred: DeferredType<PromiseType>) => void;
}
function makeDialog<PromiseType, ArgsType extends BaseType, T = any>({
Dialog,
useSetValue,
useSetContext = ({}) => {},
}: {
Dialog: FC<
ArgsType &
ContextType<PromiseType> & {
resolve?: (arg?: PromiseType) => void;
reject?: (reason?: any) => void;
}
>;
useSetValue: () => ArgsType;
useSetContext: (
args: Partial<ArgsType>,
baseContext: ContextType<PromiseType> & ArgsType
) => void;
}): [
FC,
() => [
(arg: Partial<ArgsType>) => Promise<PromiseType | undefined>,
(arg?: PromiseType) => void
],
(C: FC<T>) => FC<T>
] {
const context = createContext<
(ContextType<PromiseType> & ArgsType) | undefined
>(undefined);
const Provider = context.Provider;
const WrappedProvider: FC = ({ children }) => {
const [isOpen, setIsOpen] = useState<boolean>(false);
const [deferred, setDeferred] = useState<DeferredType<PromiseType>>();
const contextValue = useSetValue();
const value = useMemo(
() => ({ ...contextValue, isOpen, setIsOpen, deferred, setDeferred }),
[contextValue, isOpen, setIsOpen, deferred, setDeferred]
);
const resolve = useCallback(
(arg?: PromiseType) => {
setIsOpen(false);
value.deferred?.resolve!(arg);
},
[value.deferred?.resolve]
);
const reject = useCallback(
(reason?: any) => {
setIsOpen(false);
value.deferred?.reject!(reason);
},
[value.deferred?.reject]
);
return (
<Provider value={value}>
{children}
<Dialog {...value} resolve={resolve} reject={reject} isOpen={isOpen} />
</Provider>
);
};
const useShowDialog: () => [
(args: Partial<ArgsType>) => Promise<PromiseType | undefined>,
(arg?: PromiseType) => void
] = () => {
const myContext = useContext(context);
const showDialog = useCallback(
async (args: Partial<ArgsType>): Promise<PromiseType> => {
if (!myContext) {
throw new Error(
"Context not set - is this hook being used outside of the WrappedDialog tree?"
);
}
const deferred = makeDeferred<PromiseType>();
myContext.setDeferred!(deferred);
myContext.setIsOpen(true);
useSetContext(args, myContext);
return deferred.promise!;
},
myContext ? Object.values(myContext) : []
);
const resolve = useCallback<(arg?: PromiseType) => void>(
(arg: PromiseType | undefined) => {
myContext!.setIsOpen(false);
if (myContext && myContext.deferred) myContext.deferred.resolve!(arg);
},
[myContext]
);
return [showDialog, resolve];
};
const withProvider = (C: FC<T>): FC<T> => (props: T) => (
<WrappedProvider>
<C {...props} />
</WrappedProvider>
);
return [WrappedProvider, useShowDialog, withProvider];
}
export default makeDialog;