mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
be5d032e8e
* withStoryContainer: removes addon-knobs since we've migrated to controls * refactored withStoryContainer utility so that users can be able to resize story * Layout: added ability to resize story (#35824) * Layout: added ability to resize story * removes the knobs-disable config since its already been applied globally * FieldArray: refactors story to use controls and ability to resize story (#35820) * FieldArray: refactors story to use controls and ability to resize story * added much better argTypes changed story name to capital case * updates the FieldArray.mdx with the new usage examples * fixes incorrect naming of the args
41 lines
1.4 KiB
Plaintext
41 lines
1.4 KiB
Plaintext
import { Meta, Props } from '@storybook/addon-docs/blocks';
|
|
import { FieldArray } from './FieldArray';
|
|
|
|
<Meta title="MDX|FieldArray" component={FieldArray} />
|
|
|
|
# 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.
|
|
|
|
### Usage
|
|
|
|
```jsx
|
|
import { Form, FieldArray } from '@grafana/ui';
|
|
|
|
<Form onSubmit={() => console.log('form submitted')}>
|
|
({control, register}) => (
|
|
<FieldArray control={control} name="People">
|
|
{({ fields, append }) => (
|
|
<div>
|
|
{fields.map((field, index) => (
|
|
<div key={field.id}>
|
|
<Input key={index} {...register(`people[${index}].firstName` as const)} value={field.firstName} />
|
|
<Input {...register(`people[${index}].lastName` as const)} value={field.lastName} />
|
|
</div>
|
|
))}
|
|
<Button onClick={() => append({firstName: 'Roger', lastName: 'Waters'})}>Append</Button>
|
|
</div>
|
|
)}
|
|
</FieldArray>
|
|
)
|
|
</Form>;
|
|
```
|
|
|
|
### FieldArray API
|
|
|
|
The `FieldArray` component exposes its API via render prop. Properties exposed are: `fields`, `append`, `prepend`, `remove`, `swap`, `move`, `insert`
|
|
|
|
### Props
|
|
|
|
<Props of={FieldArray} />
|