mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Form: Expose all return values from useForm (#34380)
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user