Decorator for ๐ Final Form that allows you to define calculations that happen between fields, i.e. "When field X changes, update field Y."
npm install --save final-form-calculate
or
yarn add final-form-calculate
import { createForm, getIn } from 'final-form'
import createDecorator from 'final-form-calculate'
// Create Form
const form = createForm({ onSubmit })
// Create Decorator
const decorator = createDecorator(
// Calculations:
{
field: 'foo', // when the value of foo changes...
updates: {
// ...set field "doubleFoo" to twice the value of foo
doubleFoo: (fooValue, allValues) => fooValue * 2
}
},
{
field: /items\[\d+\]/, // when a field matching this pattern changes...
updates: {
// ...sets field "total" to the sum of all items
total: (itemValue, allValues) =>
(allValues.items || []).reduce((sum, value) => sum + value, 0)
}
},
{
field: /\.timeFrom/, // when a deeper field matching this pattern changes...
updates: (value, name, allValues) => {
const toField = name.replace('timeFrom', 'timeTo')
const toValue = getIn(allValues, toField)
if (toValue && value > toValue) {
return {
[toField]: value
}
}
return {}
}
}
)
// Decorate form
const undecorate = decorator(form)
// Use form as normal
Example using ๐ React Final Form.
A function that takes a set of calculations and returns a ๐ Final Form
Decorator
.
A calculation to perform, with an optional isEqual
predicate to determine if a value has really changed (defaults to ===
).
A pattern to match a field with.
Either an object of updater functions or a function that generates updates for multiple fields.
Updater functions for each calculated field.
Takes the value and name of the field that just changed, as well as all the values, and returns an object of fields and new values.