Form: Expose all return values from useForm (#34380)

This commit is contained in:
Alex Khomenko
2021-05-24 15:09:33 +03:00
committed by GitHub
parent 247bdc2f9b
commit e9e438ee2f
5 changed files with 10 additions and 11 deletions

View File

@@ -24,7 +24,7 @@ export function Form<T>({
maxWidth = 600, maxWidth = 600,
...htmlProps ...htmlProps
}: FormProps<T>) { }: FormProps<T>) {
const { handleSubmit, register, control, trigger, getValues, formState, watch, setValue } = useForm<T>({ const { handleSubmit, trigger, formState, ...rest } = useForm<T>({
mode: validateOn, mode: validateOn,
defaultValues, defaultValues,
}); });
@@ -45,7 +45,7 @@ export function Form<T>({
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
{...htmlProps} {...htmlProps}
> >
{children({ register, errors: formState.errors, control, getValues, formState, watch, setValue })} {children({ errors: formState.errors, formState, ...rest })}
</form> </form>
); );
} }

View File

@@ -1,10 +1,7 @@
import { UseFormReturn, FieldValues, FieldErrors } from 'react-hook-form'; import { UseFormReturn, FieldValues, FieldErrors } from 'react-hook-form';
export { SubmitHandler as FormsOnSubmit, FieldErrors as FormFieldErrors } from 'react-hook-form'; export { SubmitHandler as FormsOnSubmit, FieldErrors as FormFieldErrors } from 'react-hook-form';
export type FormAPI<T> = Pick< export type FormAPI<T> = Omit<UseFormReturn<T>, 'trigger' | 'handleSubmit'> & {
UseFormReturn<T>,
'register' | 'control' | 'formState' | 'getValues' | 'watch' | 'setValue'
> & {
errors: FieldErrors<T>; errors: FieldErrors<T>;
}; };

View File

@@ -9,7 +9,8 @@ import { ChannelSettings } from './ChannelSettings';
import config from 'app/core/config'; import config from 'app/core/config';
interface Props extends Omit<FormAPI<NotificationChannelDTO>, 'formState' | 'setValue'> { interface Props
extends Pick<FormAPI<NotificationChannelDTO>, 'control' | 'errors' | 'register' | 'watch' | 'getValues'> {
selectableChannels: Array<SelectableValue<string>>; selectableChannels: Array<SelectableValue<string>>;
selectedChannel?: NotificationChannelType; selectedChannel?: NotificationChannelType;
imageRendererAvailable: boolean; imageRendererAvailable: boolean;
@@ -19,7 +20,7 @@ interface Props extends Omit<FormAPI<NotificationChannelDTO>, 'formState' | 'set
} }
export interface NotificationSettingsProps export interface NotificationSettingsProps
extends Omit<FormAPI<NotificationChannelDTO>, 'formState' | 'watch' | 'getValues' | 'setValue'> { extends Pick<FormAPI<NotificationChannelDTO>, 'control' | 'errors' | 'register'> {
currentFormValues: NotificationChannelDTO; currentFormValues: NotificationChannelDTO;
} }

View File

@@ -1,10 +1,11 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { Button, Checkbox, Field, FormAPI, Input } from '@grafana/ui'; import { Button, Checkbox, Field, Input } from '@grafana/ui';
import { OptionElement } from './OptionElement'; import { OptionElement } from './OptionElement';
import { NotificationChannelDTO, NotificationChannelOption, NotificationChannelSecureFields } from '../../../types'; import { NotificationChannelDTO, NotificationChannelOption, NotificationChannelSecureFields } from '../../../types';
import { NotificationSettingsProps } from './NotificationChannelForm';
interface Props extends Omit<FormAPI<NotificationChannelDTO>, 'formState' | 'getValues' | 'watch' | 'setValue'> { interface Props extends NotificationSettingsProps {
selectedChannelOptions: NotificationChannelOption[]; selectedChannelOptions: NotificationChannelOption[];
currentFormValues: NotificationChannelDTO; currentFormValues: NotificationChannelDTO;
secureFields: NotificationChannelSecureFields; secureFields: NotificationChannelSecureFields;

View File

@@ -15,7 +15,7 @@ import { FolderPicker } from 'app/core/components/Select/FolderPicker';
import { DashboardInput, DashboardInputs, DataSourceInput, ImportDashboardDTO } from '../state/reducers'; import { DashboardInput, DashboardInputs, DataSourceInput, ImportDashboardDTO } from '../state/reducers';
import { validateTitle, validateUid } from '../utils/validation'; import { validateTitle, validateUid } from '../utils/validation';
interface Props extends Omit<FormAPI<ImportDashboardDTO>, 'formState' | 'setValue'> { interface Props extends Pick<FormAPI<ImportDashboardDTO>, 'register' | 'errors' | 'control' | 'getValues' | 'watch'> {
uidReset: boolean; uidReset: boolean;
inputs: DashboardInputs; inputs: DashboardInputs;
initialFolderId: number; initialFolderId: number;