Add submithooks to the providers section of the settings page

This commit is contained in:
LASER-Yi 2022-10-26 20:52:21 +08:00
parent 1766ceeabc
commit f60449aad5
1 changed files with 43 additions and 32 deletions

View File

@ -28,6 +28,10 @@ import {
useStagedValues, useStagedValues,
} from "../utilities/FormValues"; } from "../utilities/FormValues";
import { useSettingValue } from "../utilities/hooks"; import { useSettingValue } from "../utilities/hooks";
import {
SubmitHooksProvider,
useSubmitHooksSource,
} from "../utilities/HooksProvider";
import { SettingsProvider, useSettings } from "../utilities/SettingsProvider"; import { SettingsProvider, useSettings } from "../utilities/SettingsProvider";
import { ProviderInfo, ProviderList } from "./list"; import { ProviderInfo, ProviderList } from "./list";
@ -129,6 +133,8 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
}, },
}); });
const submitHooks = useSubmitHooksSource();
const deletePayload = useCallback(() => { const deletePayload = useCallback(() => {
if (payload && enabledProviders) { if (payload && enabledProviders) {
const idx = enabledProviders.findIndex((v) => v === payload.key); const idx = enabledProviders.findIndex((v) => v === payload.key);
@ -152,11 +158,14 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
changes[ProviderKey] = newProviders; changes[ProviderKey] = newProviders;
} }
// Apply submit hooks
submitHooks.invoke(changes);
onChangeRef.current(changes); onChangeRef.current(changes);
modals.closeAll(); modals.closeAll();
} }
}, },
[info, enabledProviders, modals] [info, enabledProviders, submitHooks, modals]
); );
const canSave = info !== null; const canSave = info !== null;
@ -249,38 +258,40 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({
return ( return (
<SettingsProvider value={settings}> <SettingsProvider value={settings}>
<FormContext.Provider value={form}> <FormContext.Provider value={form}>
<Stack> <SubmitHooksProvider value={submitHooks}>
<Stack spacing="xs"> <Stack>
<Selector <Stack spacing="xs">
searchable <Selector
placeholder="Click to Select a Provider" searchable
itemComponent={SelectItem} placeholder="Click to Select a Provider"
disabled={payload !== null} itemComponent={SelectItem}
{...options} disabled={payload !== null}
value={info} {...options}
onChange={onSelect} value={info}
></Selector> onChange={onSelect}
<Message>{info?.description}</Message> ></Selector>
{inputs} <Message>{info?.description}</Message>
<div hidden={info?.message === undefined}> {inputs}
<Message>{info?.message}</Message> <div hidden={info?.message === undefined}>
</div> <Message>{info?.message}</Message>
</div>
</Stack>
<Divider></Divider>
<Group position="right">
<Button hidden={!payload} color="red" onClick={deletePayload}>
Delete
</Button>
<Button
disabled={!canSave}
onClick={() => {
submit(form.values);
}}
>
Save
</Button>
</Group>
</Stack> </Stack>
<Divider></Divider> </SubmitHooksProvider>
<Group position="right">
<Button hidden={!payload} color="red" onClick={deletePayload}>
Delete
</Button>
<Button
disabled={!canSave}
onClick={() => {
submit(form.values);
}}
>
Save
</Button>
</Group>
</Stack>
</FormContext.Provider> </FormContext.Provider>
</SettingsProvider> </SettingsProvider>
); );