@kaliber/forms 1.2.1 → 2.1.1

package/index.js

@@ -9,6 +9,7 @@ export {
   useObjectFormField,
   useFormFieldSnapshot,
   useFormFieldValue,
+  useFormFieldsValues,
 } from './src/hooks'
 export {
   array, object,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaliber/forms",
-  "version": "1.2.1",
+  "version": "2.1.1",
   "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

@@ -41,7 +41,9 @@ export function createObjectFormField({ name = '', initialValue = {}, field }) {
       children.forEach(x => x.setSubmitted(isSubmitted))
     },
     reset() {
-      internalState.update(x => updateState(x, initialState))
+      internalState.update(x =>
+        updateState(x, pick(initialState, ['isSubmitted']))
+      )
       children.forEach(x => x.reset())
     },
     value,
@@ -103,7 +105,9 @@ function createArrayFormField({ name, initialValue = [], field }) {
       children.forEach(x => x.setSubmitted(isSubmitted))
     },
     reset() {
-      const { children } = internalState.update(x => initialState)
+      const { children } = internalState.update(x =>
+        updateState(x, pick(initialState, ['children', 'isSubmitted']))
+      )
       children.forEach(x => x.reset())
     },
     value,
@@ -126,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),
     })
   }
 }
@@ -160,7 +165,9 @@ function createBasicFormField({ name, initialValue, field }) {
       internalState.update(x => updateState(x, { isSubmitted }))
     },
     reset() {
-      internalState.update(x => initialFormFieldState)
+      internalState.update(x =>
+        updateState(x, pick(initialFormFieldState, ['value', 'isSubmitted', 'isVisited']))
+      )
     },
     value,
     state: { get: internalState.get, subscribe: internalState.subscribe },
@@ -186,6 +193,13 @@ function updateState(formFieldState, update) {
   return deriveFormFieldState({ ...formFieldState, ...update })
 }
 
+function pick(o, properties) {
+  return properties.reduce(
+    (result, property) => ({ ...result, [property]: o[property] }),
+    {}
+  )
+}
+
 function deriveFormFieldState({
   error = false,
   isSubmitted = false,

package/src/hooks.js

@@ -36,7 +36,6 @@ export function useForm({ initialValues = undefined, fields, validate = undefine
 
   function handleReset() {
     formRef.current.reset()
-    formRef.current.validate({ form: initialValues, parents: [] })
   }
 }