@kaliber/forms 1.1.1 → 2.1.0

package/index.js

@@ -1,3 +1,5 @@
+import * as snapshot from './src/snapshot'
+export { snapshot }
 export {
   useForm,
   useFormField,

package/package.json

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

package/readme.md

@@ -132,6 +132,7 @@ const {
   initialValues, // (optional) initial form values
   validate, // (optional) validation for the complete form
   onSubmit, // called when the form is submitted
+  formId, // (optional) a custom id, can be useful when multiple forms are placed on the same page
 })
 ```
 
@@ -312,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.
@@ -360,7 +395,7 @@ import { ... } from '@kaliber/forms/validation'
 
 ### Components
 
-When you want to conditionally render or set some props based on your current form state, you should avoid the use of `useFormFieldSnapshot` or `useFormFieldValue` in your form root, since that will re-render your entire form with each change. Rather you should create a specialised component and make the values available through a render prop. 
+When you want to conditionally render or set some props based on your current form state, you should avoid the use of `useFormFieldSnapshot` or `useFormFieldValue` in your form root, since that will re-render your entire form with each change. Rather you should create a specialised component and make the values available through a render prop.
 
 Because this is such a common usecase, we provide several of these components.
 

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,
@@ -65,6 +67,8 @@ export function createObjectFormField({ name = '', initialValue = {}, field }) {
 
 function createArrayFormField({ name, initialValue = [], field }) {
 
+  let index = 0
+
   const initialChildren = initialValue.map(createFormField)
   const initialState = deriveFormFieldState({
     children: initialChildren,
@@ -72,8 +76,6 @@ function createArrayFormField({ name, initialValue = [], field }) {
   const internalState = createState(initialState)
   const validate = bindValidate(field.validate, internalState)
 
-  let index = 0
-
   const value = {
     get() {
       const { children } = internalState.get()
@@ -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

@@ -7,10 +7,9 @@ let formCounter = 0 // This will stop working when we need a number greater than
 function useFormId() { return React.useMemo(() => `form${++formCounter}`, []) }
 
 
-export function useForm({ initialValues = undefined, fields, validate = undefined, onSubmit }) {
+export function useForm({ initialValues = undefined, fields, validate = undefined, onSubmit, formId = useFormId() }) {
   const initialValuesRef = React.useRef(null)
   const formRef = React.useRef(null)
-  const formId = useFormId()
 
   if (!isEqual(initialValuesRef.current, initialValues)) {
     initialValuesRef.current = initialValues
@@ -37,7 +36,6 @@ export function useForm({ initialValues = undefined, fields, validate = undefine
 
   function handleReset() {
     formRef.current.reset()
-    formRef.current.validate({ form: initialValues, parents: [] })
   }
 }
 

package/src/snapshot.js

@@ -9,6 +9,10 @@ export function get(field) {
 }
 
 export function subscribe(field, f) {
+  return subscribeToFieldState(field, x => f(get(x)))
+}
+
+export function subscribeToFieldState(field, f) {
   return {
     'object': subscribeForObject,
     'array': subscribeForArray,
@@ -65,7 +69,7 @@ function getForBasic(field) {
 function subscribeForObject(field, f) {
   return subscribeToChildren({
     children: Object.values(field.fields),
-    notify: _ => f(getForObject(field)),
+    notify: _ => f(field),
     subscribeToChild: subscribe,
   })
 }
@@ -74,11 +78,11 @@ function subscribeForArray(field, f) {
   return subscribeToAll({
     state: field.state,
     childrenFromState: x => x.children,
-    notify: _ => f(getForArray(field)),
+    notify: _ => f(field),
     subscribeToChild: subscribe,
   })
 }
 
 function subscribeForBasic(field, f) {
-  return field.state.subscribe(({ value, error, invalid }) => f({ value, error, invalid }))
+  return field.state.subscribe(_ => f(field))
 }