opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-24 07:04:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Grafana/ui: Add deprecation notice to the Form component (#81068)

Browse Source 
* Grafana/ui: Add deprecation notice to the Form component

* Fix notice

* Deprecate types
This commit is contained in:
Alex Khomenko
2024-01-24 15:13:24 +01:00
committed by GitHub
parent d528d93b02
commit 41de0b4311
6 changed files with 20 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/Forms/FieldArray.mdx
View File

@ -7,6 +7,8 @@ import { FieldArray } from './FieldArray';
`FieldArray` provides a way to render a list of dynamic inputs. It exposes the functionality of `useFieldArray` in [react-hook-form](https://react-hook-form.com/advanced-usage/#FieldArrays). `FieldArray` must be wrapped at some level by a `<Form>` element. `FieldArray` provides a way to render a list of dynamic inputs. It exposes the functionality of `useFieldArray` in [react-hook-form](https://react-hook-form.com/advanced-usage/#FieldArrays). `FieldArray` must be wrapped at some level by a `<Form>` element.
**Note: This component is deprecated and will be removed in the future versions of grafana/ui. Use the `useFieldArray` hook from react-hook-form instead.**
### Usage ### Usage
```jsx ```jsx

3
packages/grafana-ui/src/components/Forms/FieldArray.tsx
View File

@ -7,6 +7,9 @@ export interface FieldArrayProps extends UseFieldArrayProps {
children: (api: FieldArrayApi) => JSX.Element; children: (api: FieldArrayApi) => JSX.Element;
} }
/**
* @deprecated use the `useFieldArray` hook from react-hook-form instead
*/
export const FieldArray: FC<FieldArrayProps> = ({ name, control, children, ...rest }) => { export const FieldArray: FC<FieldArrayProps> = ({ name, control, children, ...rest }) => {
const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({ const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
control, control,

2
packages/grafana-ui/src/components/Forms/Form.mdx
View File

@ -7,6 +7,8 @@ import { Form } from './Form';
Form component provides a way to build simple forms at Grafana. It is built on top of [react-hook-form](https://react-hook-form.com/) library and incorporates the same concepts while adjusting the API slightly. Form component provides a way to build simple forms at Grafana. It is built on top of [react-hook-form](https://react-hook-form.com/) library and incorporates the same concepts while adjusting the API slightly.
**Note: This component is deprecated and will be removed in the future versions of grafana/ui. Use the `useForm` hook from react-hook-form instead.**
## Usage ## Usage
```tsx ```tsx

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

@ -15,6 +15,9 @@ interface FormProps<T extends FieldValues> extends Omit<HTMLProps<HTMLFormElemen
maxWidth?: number | 'none'; maxWidth?: number | 'none';
} }
/**
* @deprecated use the `useForm` hook from react-hook-form instead
*/
export function Form<T extends FieldValues>({ export function Form<T extends FieldValues>({
defaultValues, defaultValues,
onSubmit, onSubmit,

4
packages/grafana-ui/src/components/InputControl.tsx
View File

@ -2,4 +2,8 @@
* Rollup does not support renamed exports so do not change this to export { Controller as InputControl } ... * Rollup does not support renamed exports so do not change this to export { Controller as InputControl } ...
*/ */
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
/**
* @deprecated use the `Controller` component from react-hook-form instead
*/
export const InputControl = Controller; export const InputControl = Controller;

6
packages/grafana-ui/src/types/forms.ts
View File

@ -1,12 +1,18 @@
import { UseFormReturn, FieldValues, FieldErrors, FieldArrayMethodProps } from 'react-hook-form'; import { UseFormReturn, FieldValues, FieldErrors, FieldArrayMethodProps } from 'react-hook-form';
export type { SubmitHandler as FormsOnSubmit, FieldErrors as FormFieldErrors } from 'react-hook-form'; export type { SubmitHandler as FormsOnSubmit, FieldErrors as FormFieldErrors } from 'react-hook-form';
/**
* @deprecated use the types from react-hook-form instead
*/
export type FormAPI<T extends FieldValues> = Omit<UseFormReturn<T>, 'handleSubmit'> & { export type FormAPI<T extends FieldValues> = Omit<UseFormReturn<T>, 'handleSubmit'> & {
errors: FieldErrors<T>; errors: FieldErrors<T>;
}; };
type FieldArrayValue = Partial<FieldValues> | Array<Partial<FieldValues>>; type FieldArrayValue = Partial<FieldValues> | Array<Partial<FieldValues>>;
/**
* @deprecated use the types from react-hook-form instead
*/
export interface FieldArrayApi { export interface FieldArrayApi {
fields: Array<Record<string, any>>; fields: Array<Record<string, any>>;
append: (value: FieldArrayValue, options?: FieldArrayMethodProps) => void; append: (value: FieldArrayValue, options?: FieldArrayMethodProps) => void;