@kaliber/forms 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaliber/forms",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "sideEffects": false,
   "publishConfig": {

package/readme.md

@@ -313,6 +313,40 @@ array(validation, fields)
 array(fields)
 ```
 
+If you want to use heterogeneous arrays (different types) you can use a `function` instead of a `fields` object:
+
+```js
+array(initialValue => ({
+  _type: required,
+  ...(
+    initialValue._type === 'content' ? { text: required } :
+    initialValue._type === 'image' ? { image: required } :
+    null
+  )
+}))
+```
+
+When rendering the `array` field you can render a different component based on the value of the field:
+
+```jsx
+const { state: { children }, helpers } = useArrayFormField(field)
+
+return (
+  <>
+    {children.map(field => {
+      const { _type } = field.value.get()
+      return (
+        _type === 'content' ? <ContentForm key={field.name} {...{ field }} /> :
+        _type === 'image' ? <ImageForm key={field.name} {...{ field }} /> :
+        null
+      )
+    })}
+    <button type='button' onClick={_ => helpers.add({ _type: 'content' })}>Add content</button>
+    <button type='button' onClick={_ => helpers.add({ _type: 'image' })}>Add image</button>
+  </>
+)
+```
+
 #### object
 
 Used to create an object form field.

package/src/fields.js

@@ -130,10 +130,11 @@ function createArrayFormField({ name, initialValue = [], field }) {
 
   function createFormField(initialValue) {
     const fullName = `${name}[${index++}]`
+    const fields = typeof field.fields == 'function' ? field.fields(initialValue) : field.fields
     return createObjectFormField({
       name: fullName,
       initialValue,
-      field: normalize({ type: 'object', fields: field.fields }, fullName),
+      field: normalize({ type: 'object', fields }, fullName),
     })
   }
 }