Robin Malfait
7bb89871ba
* implement `objetToFormEntries` functionality
If we are working with more complex data structures then we have to
encode those data structures into a syntax that the HTML can understand.
This means that we have to use `<input type="hidden" name="..." value="...">` syntax.
To convert a simple array we can use the following syntax:
```js
// Assuming we have a `name` of `person`
let input = ['Alice', 'Bob', 'Charlie']
```
Results in:
```html
<input type="hidden" name="person[]" value="Alice" />
<input type="hidden" name="person[]" value="Bob" />
<input type="hidden" name="person[]" value="Charlie" />
```
Note: the additional `[]` in the name attribute.
---
A more complex object (even deeply nested) can be encoded like this:
```js
// Assuming we have a `name` of `person`
let input = {
id: 1,
name: {
first: 'Jane',
last: 'Doe'
}
}
```
Results in:
```html
<input type="hidden" name="person[id]" value="1" />
<input type="hidden" name="person[name][first]" value="Jane" />
<input type="hidden" name="person[name][last]" value="Doe" />
```
* implement VisuallyHidden component
* implement and export some extra helper utilities
* implement form element for Switch
* implement form element for Combobox
* implement form element for RadioGroup
* implement form element for Listbox
* add combined forms example to the playground
* update changelog
* enable support for iterators
* ensure to compile dom iterables
* remove unused imports
26 lines
579 B
TypeScript
26 lines
579 B
TypeScript
import { objectToFormEntries } from './form'
|
|
|
|
it.each([
|
|
[{ a: 'b' }, [['a', 'b']]],
|
|
[
|
|
[1, 2, 3],
|
|
[
|
|
['0', '1'],
|
|
['1', '2'],
|
|
['2', '3'],
|
|
],
|
|
],
|
|
[
|
|
{ id: 1, admin: true, name: { first: 'Jane', last: 'Doe', nickname: { preferred: 'JDoe' } } },
|
|
[
|
|
['id', '1'],
|
|
['admin', '1'],
|
|
['name[first]', 'Jane'],
|
|
['name[last]', 'Doe'],
|
|
['name[nickname][preferred]', 'JDoe'],
|
|
],
|
|
],
|
|
])('should encode an input of %j to an form data output', (input, output) => {
|
|
expect(objectToFormEntries(input)).toEqual(output)
|
|
})
|