• Stars
    star
    113
  • Rank 310,115 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Decorator for calculating field values based on other field values in 🏁 Final Form

🏁 Final Form Calculate

NPM Version NPM Downloads Build Status codecov.io styled with prettier

Decorator for 🏁 Final Form that allows you to define calculations that happen between fields, i.e. "When field X changes, update field Y."


Installation

npm install --save final-form-calculate

or

yarn add final-form-calculate

Usage

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: 'bar', // when the value of bar changes...
    updates: {
      // ...set field "foo" to previous value of bar
      foo: (fooValue, allValues, prevValues) => prevValues.bar
    }
  },
  {
    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: 'foo', // when the value of foo changes...
    updates: {
      // ...asynchronously set field "doubleFoo" to twice the value using a promise
      doubleFoo: (fooValue, allValues) =>
        new Promise(resolve => {
          setTimeout(() => resolve(fooValue * 2), 100)
        })
    }
  },
  {
    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

Table of Contents

Example

Calculated Fields Example

Example using 🏁 React Final Form.

API

createDecorator: (...calculations: Calculation[]) => Decorator

A function that takes a set of calculations and returns a 🏁 Final Form Decorator.

Types

Calculation: { field: FieldPattern, isEqual?: (any, any) => boolean, updates: Updates }

A calculation to perform, with an optional isEqual predicate to determine if a value has really changed (defaults to ===).

FieldName: string

FieldPattern: FieldName | RegExp | (FieldName | RegExp)[]

A pattern to match a field with.

Updates: UpdatesByName | UpdatesForAll

Either an object of updater functions or a function that generates updates for multiple fields.

UpdatesByName: { [FieldName]: (value: any, allValues: Object, prevValues: Object) => Promise | any }

Updater functions for each calculated field.

UpdatesForAll: (value: any, field: string, allValues: Object, prevValues: Object) => Promise | { [FieldName]: any }

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.

More Repositories

1

react-final-form

🏁 High performance subscription-based form state management for React
JavaScript
7,376
star
2

final-form

🏁 Framework agnostic, high performance, subscription-based form state management
JavaScript
2,992
star
3

react-final-form-hooks

React Hooks to bind to 🏁 Final Form's high performance subscription-based form state management engine
JavaScript
471
star
4

react-final-form-arrays

A component for rendering and editing arrays 🏁 React Final Form
JavaScript
204
star
5

react-final-form-listeners

A collection of components to listen to 🏁 React Final Form fields
JavaScript
93
star
6

final-form-focus

🏁 Final Form "decorator" that will attempt to apply focus to the first field with an error upon an attempted form submission
JavaScript
83
star
7

rff-cli-example

An example of how to use 🏁 React Final Form in a CLI application with Ink
JavaScript
77
star
8

final-form-arrays

Array Mutators for 🏁 Final Form
JavaScript
70
star
9

react-final-form-html5-validation

A swap-in replacement for 🏁 React Final Form's <Field> component to provide HTML5 Validation
JavaScript
57
star
10

final-form-set-field-data

Mutator for setting arbitrary metadata on fields in 🏁 Final Form
JavaScript
39
star
11

builder-demo

A demonstration of how one form can be used to build another in realtime
SCSS
18
star
12

final-form-set-field-touched

Mutator for setting a field as "touched" in 🏁 Final Form
JavaScript
17
star
13

final-form-submit-listener

🏁 Final Form decorator that provides callback hooks for submitting
JavaScript
11
star