IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 02:40:26 -06: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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 20 additions and 0 deletions
Show Stats 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.
**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
```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;
}
/**
* @deprecated use the `useFieldArray` hook from react-hook-form instead
*/
export const FieldArray: FC<FieldArrayProps> = ({ name, control, children, ...rest }) => {
const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
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.
**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
```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';
}
/**
* @deprecated use the `useForm` hook from react-hook-form instead
*/
export function Form<T extends FieldValues>({
defaultValues,
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 } ...
*/
import { Controller } from 'react-hook-form';
/**
* @deprecated use the `Controller` component from react-hook-form instead
*/
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';
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'> & {
errors: FieldErrors<T>;
};
type FieldArrayValue = Partial<FieldValues> | Array<Partial<FieldValues>>;
/**
* @deprecated use the types from react-hook-form instead
*/
export interface FieldArrayApi {
fields: Array<Record<string, any>>;
append: (value: FieldArrayValue, options?: FieldArrayMethodProps) => void;