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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 11 deletions

View File

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

View File

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

View File

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

View File

@ -1,10 +1,11 @@
import React, { FC } from 'react';
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 { 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[];
currentFormValues: NotificationChannelDTO;
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 { 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;
inputs: DashboardInputs;
initialFolderId: number;