Refactor settings submit hooks, try to fix issue #1924
LASER-Yi
2 years ago
parent
1e4ffe9c60
commit
30f04feae6
@ -1,119 +0,0 @@
|
|||||||
import { LOG } from "@/utilities/console";
|
|
||||||
import {
|
|
||||||
createContext,
|
|
||||||
FunctionComponent,
|
|
||||||
useCallback,
|
|
||||||
useContext,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useRef,
|
|
||||||
useState,
|
|
||||||
} from "react";
|
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
||||||
type HookType = (value: any) => unknown;
|
|
||||||
|
|
||||||
export type SubmitHookType = {
|
|
||||||
[key: string]: HookType;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type SubmitHookModifierType = {
|
|
||||||
add: (key: string, fn: HookType) => void;
|
|
||||||
remove: (key: string) => void;
|
|
||||||
invoke: (settings: LooseObject) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const SubmitHooksContext = createContext<SubmitHookModifierType | null>(null);
|
|
||||||
|
|
||||||
type SubmitHooksProviderProps = {
|
|
||||||
value: SubmitHookModifierType;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const SubmitHooksProvider: FunctionComponent<
|
|
||||||
SubmitHooksProviderProps
|
|
||||||
> = ({ value, children }) => {
|
|
||||||
return (
|
|
||||||
<SubmitHooksContext.Provider value={value}>
|
|
||||||
{children}
|
|
||||||
</SubmitHooksContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export function useSubmitHooks() {
|
|
||||||
const context = useContext(SubmitHooksContext);
|
|
||||||
|
|
||||||
if (context === null) {
|
|
||||||
throw new Error(
|
|
||||||
"useSubmitHooksModifier must be used within a SubmitHooksProvider"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return context;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useSubmitHookWith(key: string, fn?: HookType) {
|
|
||||||
const fnRef = useRef(fn);
|
|
||||||
fnRef.current = fn;
|
|
||||||
|
|
||||||
const hooks = useSubmitHooks();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const currentFn = fnRef.current;
|
|
||||||
if (currentFn) {
|
|
||||||
LOG("info", "Adding submit hook for", key);
|
|
||||||
hooks.add(key, currentFn);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
LOG("info", "Removing submit hook for", key);
|
|
||||||
hooks.remove(key);
|
|
||||||
};
|
|
||||||
}, [key, hooks]);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useSubmitHooksSource(): SubmitHookModifierType {
|
|
||||||
const [submitHooks, setSubmitHooks] = useState<SubmitHookType>({});
|
|
||||||
const hooksRef = useRef(submitHooks);
|
|
||||||
hooksRef.current = submitHooks;
|
|
||||||
|
|
||||||
const invokeHooks = useCallback((settings: LooseObject) => {
|
|
||||||
const hooks = hooksRef.current;
|
|
||||||
for (const key in settings) {
|
|
||||||
if (key in hooks) {
|
|
||||||
LOG("info", "Running submit hook for", key, settings[key]);
|
|
||||||
const value = settings[key];
|
|
||||||
const fn = hooks[key];
|
|
||||||
settings[key] = fn(value);
|
|
||||||
LOG("info", "Finish submit hook", key, settings[key]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const addHook = useCallback(
|
|
||||||
(key: string, fn: (value: unknown) => unknown) => {
|
|
||||||
setSubmitHooks((hooks) => ({ ...hooks, [key]: fn }));
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const removeHook = useCallback((key: string) => {
|
|
||||||
setSubmitHooks((hooks) => {
|
|
||||||
const newHooks = { ...hooks };
|
|
||||||
|
|
||||||
if (key in newHooks) {
|
|
||||||
delete newHooks[key];
|
|
||||||
}
|
|
||||||
|
|
||||||
return newHooks;
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return useMemo(
|
|
||||||
() => ({
|
|
||||||
add: addHook,
|
|
||||||
remove: removeHook,
|
|
||||||
invoke: invokeHooks,
|
|
||||||
}),
|
|
||||||
[addHook, invokeHooks, removeHook]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue