IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana-UI: Form - inherit HTMLFormElement props (#27227)

Browse Source
This commit is contained in:
Alex Khomenko 2020-08-26 16:29:01 +03:00 committed by GitHub
parent a1e6090008
commit ff1a931f6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/Forms/Form.tsx
View File

@ -1,9 +1,9 @@
import React, { useEffect } from 'react'; import React, { HTMLProps, useEffect } from 'react';
import { useForm, Mode, OnSubmit, DeepPartial } from 'react-hook-form'; import { useForm, Mode, OnSubmit, DeepPartial } from 'react-hook-form';
import { FormAPI } from '../../types'; import { FormAPI } from '../../types';
import { css } from 'emotion'; import { css } from 'emotion';
interface FormProps<T> { interface FormProps<T> extends Omit<HTMLProps<HTMLFormElement>, 'onSubmit'> {
validateOn?: Mode; validateOn?: Mode;
validateOnMount?: boolean; validateOnMount?: boolean;
validateFieldsOnMount?: string[]; validateFieldsOnMount?: string[];
@ -22,6 +22,7 @@ export function Form<T>({
children, children,
validateOn = 'onSubmit', validateOn = 'onSubmit',
maxWidth = 400, maxWidth = 400,
...htmlProps
}: FormProps<T>) { }: FormProps<T>) {
const { handleSubmit, register, errors, control, triggerValidation, getValues, formState, watch } = useForm<T>({ const { handleSubmit, register, errors, control, triggerValidation, getValues, formState, watch } = useForm<T>({
mode: validateOn, mode: validateOn,
@ -41,6 +42,7 @@ export function Form<T>({
width: 100%; width: 100%;
`} `}
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
{...htmlProps}
> >
{children({ register, errors, control, getValues, formState, watch })} {children({ register, errors, control, getValues, formState, watch })}
</form> </form>