Are you submitting a bug report or a feature request?

I guess feature request.

What is the current behavior?

Hi, thanks for making this handy form package :)
I have a component that makes initialValue from API and also I'm using final form calculate to change some field values. in the initial loading after data fetched calculate function make the form to dirty.

What is the expected behavior?

I expected when initalValues change by final form calculate in this situation my form don't be dirty

Sandbox Link

https://codesandbox.io/s/38rorvr8kq

What's your environment?

"react-final-form": "^4.1.0",
"react-final-form-arrays": "^2.0.3",
"final-form": "^4.12.0",
"final-form-arrays": "^1.1.2",
"final-form-calculate": "^1.3.1",

Are you submitting a bug report or a feature request?

Documentation Bug

What is the current behavior?

FieldPattern allows a string, a RegExp, or an array of either. The documentation and typings suggest that a provided array can only contain strings.

What is the expected behavior?

Documentation and typings accurately reflect accepted types.

Sandbox Link

https://codesandbox.io/s/react-typescript-h4dyg

The decorator works as expected, but "field" is reported as having the wrong type.

What's your environment?

"final-form": "4.18.5",
"final-form-calculate": "1.3.1",
"react": "^16.2.0",
"react-final-form": "6.3.0",

Hi...everyone
I don't understand about field matching pattern in final-form calculate. May be someone can help me.
I have a case like picture below. and i want my form can calculate every time user input quantity and price/unit and the result display in total price. And in the last row can display total of the total price.

here is part of my code
<Table.Body> <FieldArray name="items"> {({ fields }) => fields.map((item, index) => ( <Table.Row key={index}> <Table.Cell textAlign="center"> {index + 1} </Table.Cell> <Table.Cell> <Field placeholder="Name" name={${item}.name} validate={required} component={TextInput} /> </Table.Cell> <Table.Cell> <Field placeholder="Quantity" name={${item}.quantity} validate={required} component={NumberInput} /> </Table.Cell> <Table.Cell textAlign="left"> <Field placeholder="Unit" name={${item}.unit} validate={required} component={TextInput} /> </Table.Cell> <Table.Cell textAlign="right"> <Field placeholder="Price Per Unit" name={${item}.pricePerUnit} validate={required} component={NumberInput} /> </Table.Cell> <Table.Cell textAlign="right"> <Field placeholder="Total price" name={${item}.totalPrice} validate={required} component={NumberInput} /> </Table.Cell> <Table.Cell> <Button floated="right" icon color="red" labelPosition="left" size="small" type="button" onClick={() => pop("items")} > <Icon name="minus" /> Remove </Button> </Table.Cell> </Table.Row> )) } </FieldArray> <Table.Row> <Table.Cell colSpan="5" textAlign="right"> <strong>TOTAL</strong> </Table.Cell> <Table.Cell colSpan="2" textAlign="right"> <Field name="amountBeforeTax" placeholder="Amount Before Tax" value={purchase.amountBeforeTax} component={NominalInput} /> </Table.Cell> </Table.Row> </Table.Body>

Are you submitting a bug report or a feature request?

bug report/feature request/feature missing that shouldn't be missing?

What is the current behavior?

TypeScript types for createDecorator in v1.3.2 are missing the FormValues generic argument introduced by #39 . I can confirm that they're present when downloading the source bundle from the release on github, but downloading the package bundle from NPM shows them to be missing. The tag in github is correct, so I'm not sure how NPM didn't pick them up...

This is a frustrating issue right now, since the typings of react-final-form reject the unparameterised decorator's types as being incompatible with the parameterised Form's types, so we can't just use the typings as they stand (without suppressing the error).

What is the expected behavior?

The types introduced in #39 should have been in v1.3.2, as noted in the PR and the release notes.

At this point, I think the only path forwards is to tag a new release v1.3.3 that actually includes the types...

Sandbox Link

https://codesandbox.io/s/bold-bogdan-j4qh6?file=/src/App.tsx

What's your environment?

final-form-calculate: 1.3.2
final-form: 4.20.1

Other information

You can confirm that the types are not updated in the package published on NPM by grabbing its url like so:

$ npm view [email protected]

[email protected] | MIT | deps: none | versions: 9
Decorator for calculating field values based on other field values in 🏁 Final Form
https://github.com/final-form/final-form-calculate#readme

dist
.tarball: https://registry.npmjs.org/final-form-calculate/-/final-form-calculate-1.3.2.tgz
.shasum: a5e1908d1aa34eeec6faccdba3fd9516e7fd3d4f
.integrity: sha512-pon2K9yNbyqmF8UTpDvxwhk+Hvqpl8Fm3qgwkHniNAmCQe+6YxB1aw4cBAHzmRc39jGl2bYsvKyabQOIWLtrPg==
.unpackedSize: 23.6 kB

maintainers:
- erikras <[email protected]>

dist-tags:
latest: 1.3.2

published 5 months ago by erikras <[email protected]>

Download the tarball, decompress it and view pacakge/dist/index.d.ts line 26, which lacks the generic type parameter:

export default function createDecorator(
  ...calculations: Calculation[]
): Decorator

Or by viewing the file on unpkg here: https://unpkg.com/browse/[email protected]/dist/index.d.ts

Hello,

This is not a bug report, but more of a general question to this module.

I am currently rewriting my app to use React hooks and at this occasion I'm simplifying much of my code.

My calculate functions are very crowded because I keep them outside my component but they need data from my redux store. So i fetch this data inside my component and then pass it to the functions.

To prevent this I tried another approach:
I created a FormSpy component which does nothing but retrieve the data from my store and my form state, then calculates what I need and then updates the form in a useEffect hook, when the calculated stuff changes.

When looking at this I realized, that I could rebuild all my calculate stuff with these "SubscriberComponents". This makes my code much cleaner.

My first thought was that these data fetching and calculating methods might occur unneccesary often, but I can wrap the calculation in useMemo with the used values from the form state in my dependency array.

Am I missing something else? Is there something I can do with this module that I can't do with my SubscriberComponents?

Would it be possible to access the previous value of the changed input? This would allow for swapping values around.

For example:

  {
    field: 'opt1',
    updates: {
      opt2: (opt1Value, allValues, prevOpt1Value) => prevOpt1Value
    }
  }

Are you submitting a bug report or a feature request?

Bug Report

What is the current behavior?

When the field to watch for is an object, the calculation does not fire, when the fieldname is provided as a string in an array.
It does work, when the name is provided as a string without the array or when it's provided as a regex in an array.

What is the expected behavior?

It should also fire when the fieldname is a string in an array.

Sandbox Link

https://codesandbox.io/s/001kqmlm30

What's your environment?

"final-form": "4.12.0",
"final-form-calculate": "1.3.1",

See the sandbox.

I recently got the use case where i have to subscribe to values but only trigger the calculation when the User is done (eg. leaving the input).
Is it possible to only trigger certain calculates only onBlur events?

If FormValues type in typescript is specified for a Form, then type 'Decorator' is not assignable to type 'Decorator'

Are you submitting a bug report or a feature request?

Feature request

What is the current behavior?

The example shows computations using top level fields.

What is the expected behavior?

Can you please provide an example that computes using nested fields? For example, I need to compute a date object (startTime), based on date and time fields (datePart and timePart) that are nested in a meeting object.

<Field
    name="meeting.datePart"
    component={TextField}
    type="text"
    label="Start Date"
/>
<Field
    name="meeting.timePart"
    component={TextField}
    type="text"
    label="Time"
/>
<Field
    name="meeting.startTime"
    component={TextField}
    type="text"
    label="Start Time"
/>

What is the current behavior?

the final-form-calculate v1.2.0 package, when installed via yarn or npm, does not include typescript typings.

What is the expected behavior?

Typings should be included in 1.2.0 as per PR #12

Other information

$ curl -s https://registry.yarnpkg.com/final-form-calculate/-/final-form-calculate-1.2.0.tgz  | tar ztv
-rw-r--r-- 0/0            2467 1985-10-26 09:15 package/package.json
-rw-r--r-- 0/0            1071 1985-10-26 09:15 package/LICENSE
-rw-r--r-- 0/0            4719 1985-10-26 09:15 package/README.md
-rw-r--r-- 0/0            3794 1985-10-26 09:15 package/dist/final-form-calculate.cjs.js
-rw-r--r-- 0/0             192 1985-10-26 09:15 package/dist/final-form-calculate.cjs.js.flow
-rw-r--r-- 0/0            3712 1985-10-26 09:15 package/dist/final-form-calculate.es.js
-rw-r--r-- 0/0             192 1985-10-26 09:15 package/dist/final-form-calculate.es.js.flow
-rw-r--r-- 0/0            4342 1985-10-26 09:15 package/dist/final-form-calculate.umd.js
-rw-r--r-- 0/0             242 1985-10-26 09:15 package/dist/final-form-calculate.umd.js.map
-rw-r--r-- 0/0            1728 1985-10-26 09:15 package/dist/final-form-calculate.umd.min.js
-rw-r--r-- 0/0             112 1985-10-26 09:15 package/dist/final-form-calculate.umd.min.js.map
-rw-r--r-- 0/0             192 1985-10-26 09:15 package/dist/index.js.flow
-rw-r--r-- 0/0             448 1985-10-26 09:15 package/dist/types.js.flow

• no package/dist/index.d.ts

Building locally seems to include the dist/index.d.ts file as expected.

The package.json file says that it is "version": "1.2.0", but other files (e.g. dist/final-form-calculate.umd.js seem different to what's in master at the moment - in fact they look very similar (identical?) to v1.1.0

Are you submitting a bug report or a feature request?

bug

What is the current behavior?

I have many working <Form /> components in a react-native (v0.60) app - as soon as I add decorators prop to Form, i get this error, "update is not a function":

decorators={[
            createDecorator({
              field: 'department', // when the value of department changes...
              updates: {
                // ...set field value
                subDepartment: -1,
              },
            }),
          ]}

What is the expected behavior?

For the decorators to work as expected.

What's your environment?

"final-form": "^4.18.1",
"final-form-calculate": "^1.3.1",
"final-form": "^4.18.1",
"final-form-calculate": "^1.3.1",

Other information

Looks to be the culprit here, but not sure why:

The stack trace only points to the line where <Form /> is declared in the error:

Here is a simple reproducible code snippet one could paste into the App.js file with a new react-native init rffDemo project from the cli:

import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';
import createDecorator from 'final-form-calculate';
import { Field, Form } from 'react-final-form';

export default class App extends Component {
  render() {
    return (
      <Form
        onSubmit={() => {}}
        decorators={[
          createDecorator({
            field: 'name', // when the value of department changes...
            updates: {
              // ...set field value
              last: 'something',
            },
          }),
        ]}
        render={({ handleSubmit }) => (
          <View>
            <Field
              name="name"
              render={({ input }) => (
                <TextInput value={input.value} onChangeText={input.onChange} />
              )}
            />
          </View>
        )}
      />
    );
  }
}

Are you submitting a bug report or a feature request?

Not sure if it's a bug or a if it works as intended

What is the current behavior?

Updates are triggered once when then the form is rendered, i.e. even though no changes have been made to the form values.

See https://codesandbox.io/s/0ml4k745x0

What is the expected behavior?

I would expect updates to be triggered only on updates, not by the initial values.

What's your environment?

    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-final-form": "^4.0.2",
    "final-form": "^4.11.0",
    "final-form-calculate": "^1.3.0"

Final-form-calculate doesn't work with fieldArray for the initial calculation on first load.

When field is updated by user then calculation gets correctly processed.

Tested Final-form-calculate on regular non-array fields and it correctly executes initial calculation on first load.

That said, I believe the issue is only for fieldArray.

Need help.
I got compiler error, want to calculate sum of array field using typescript.

Property 'items' does not exist on type 'Object'. TS2339

                   field: /items\[\d+\].totalPrice/,
151 |           updates:  {
152 |             total: (ignoredValue, allValues) =>

153 | (allValues!.items || [])
| ^
154 | .reduce((sum: any, value: any) => sum + Number(value || 0), 0)

Are you submitting a bug report or a feature request?

I'm submitting a bug report

What is the current behavior?

When you reset a form that has calculations and none of the fields that trigger the calculations is dirty, calculated fields are lost

What is the expected behavior?

I would expect calculated fields to be calculated again like when rendering the form for first time

Sandbox Link

CodeSandbox

What's your environment?

All affected

Other information

Are you submitting a bug report or a feature request?

Thanks a lot for making react-final-form, it is making my life so much easier.
i want to submit a maybe bug report, but its is definitely a feature request.

What is the current behavior?

currently Updates function will update the value of target field

What is the expected behavior?

i would like to update some other field too via meta, like on action on one field if would like to selectively disable another field

Sandbox Link

n/a

What's your environment?

n/a

Other information

n/a

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

FormSpy gets an old value

What is the expected behavior?

I expect that I can handle calculated fields with FormSpy. An onChange should be triggered after calculation.

Sandbox Link

Set "Minimum" to 10 and compare the values with json:
https://codesandbox.io/s/23l5vol95j

What's your environment?

"final-form": "^4.2.0",
"final-form-calculate": "^1.0.2",
"react-final-form": "^3.1.0",

Other information

I have field with parse and format function, so when its updates by createDecorator, only format function is triggered. Is there any solution how to also trigger parse function when field is updated by createDecorator?

Are you submitting a bug report or a feature request?

Feature Request

What is the current behavior?

Right now when combined with final-form-arrays there is no possibility of changing fields in the same index position as the one which is matched. Based on the online example I tried the following:

const calculator = createDecorator(
    {
      field: /timeFrom/, // when minimum changes...
      updates: {
        // ...update maximum to the result of this function
        maximum: (timeFrom, allValues) => {
            return Math.max(timeFrom || 0, allValues.timeTo || 0);
        }
      }
    }
);

What I need instead of allValues.timeTo would be something like allValues.someField[2].timeTo. All I need for this I need the fieldName of the field matched by the decorator.

What about passing this to the methods in "updates"? This would definitely change the semantics/signature. I would suggest that this should work:

const calculator = createDecorator(
    {
      field: /timeFrom/, // when minimum changes...
      updates: (fieldValue, fieldName, allValues) => {
        const targetField = fieldName.replace("timeFrom", "timeTo");
        const toFieldValue = get(targetField, allValues);
        set(targetField, allValues, Math.max(fieldValue, toFieldValue));
      }
    }
);

So additionally to having a static map of updates, there is also the possibility to update fields based on the incoming field name.

What is the expected behavior?

Sandbox Link

What's your environment?

grep final package.json
"final-form": "^4.2.1",
"final-form-arrays": "^1.0.4",
"final-form-calculate": "^1.0.2",
"react-final-form": "^3.1.2",
"react-final-form-arrays": "^1.0.4",

npm --version
5.7.1

node --version
v9.6.1

Are you submitting a bug report or a feature request?

Feature Request

What is the current behavior?

I have following use case in my form:

Fields:
currencyPair - defines pair of fromCurrency and toCurrency
fromCurrency - source currency to get exchangeRate for
toCurrency - desination currency to get exchangeRate for
exchangeRate - the exchange rate fromCurrency to toCurrency

With following calculation rules:

• When currencyPair changes - fill fromCurrency and toCurrency from currencyPair and fetch exchangeRate
• When fromCurrency changes, fetch echangeRate
• When toCurrency changes fetch exchangeRate

When i define the decorator like so:

createDecorator(
  {
    field: "currencyPair",
    updates: (currencyPair) => {
      "fromCurrency": currencyPair.fromCurrency,
      "toCurrency": currencyPair.toCurrency,
      "exchangeRate": fetchRate(currencyPair.fromCurrency, currencyPair.toCurrency)
    },
  },
  {
    field: "fromCurrency",
    updates: {
      "exchangeRate": (fromCurrency, allValues) => fetchRate(fromCurrency, allValues.toCurrency)
    },
  },
  {
    field: "toCurrency",
    updates: {
      "exchangeRate": (toCurrency, allValues) => fetchRate(allValues.fromCurrency, toCurrency)
    },
  },
)

The problem is when currencyPair field is changed, exchangeRate is unnecessarily fetched three times.

What is the expected behavior?

I'd love a way to configure field update blocks on chained field updates. For example:

createDecorator(
  {
    field: "currencyPair",
    updates: (currencyPair) => {
      "fromCurrency": currencyPair.fromCurrency,
      "toCurrency": currencyPair.toCurrency,
      "exchangeRate": fetchRate(currencyPair.fromCurrency, currencyPair.toCurrency)
    },
    blockUpdates: ["exchangeRate"]
  },
  {
    field: "fromCurrency",
    updates: {
      "exchangeRate": (fromCurrency, allValues) => fetchRate(fromCurrency, allValues.toCurrency)
    },
  },
  {
    field: "toCurrency",
    updates: {
      "exchangeRate": (toCurrency, allValues) => fetchRate(allValues.fromCurrency, toCurrency)
    },
  },
)

This way when currencyPair changes, the exchangeRate will be fetched only once, but still will be fetched when either fromCurrency or toCurrency changes.

Any other proposals on how to tackle this issue welcomed.

Hi...everyone
I don't understand about field matching pattern in final-form calculate. May be someone can help me.
I have a case like picture below. and i want my form can calculate every time user input quantity and price/unit and the result display in total price. And in the last row can display total of the total price.

here is part of my code
<Table.Body> <FieldArray name="items"> {({ fields }) => fields.map((item, index) => ( <Table.Row key={index}> <Table.Cell textAlign="center"> {index + 1} </Table.Cell> <Table.Cell> <Field placeholder="Name" name={${item}.name} validate={required} component={TextInput} /> </Table.Cell> <Table.Cell> <Field placeholder="Quantity" name={${item}.quantity} validate={required} component={NumberInput} /> </Table.Cell> <Table.Cell textAlign="left"> <Field placeholder="Unit" name={${item}.unit} validate={required} component={TextInput} /> </Table.Cell> <Table.Cell textAlign="right"> <Field placeholder="Price Per Unit" name={${item}.pricePerUnit} validate={required} component={NumberInput} /> </Table.Cell> <Table.Cell textAlign="right"> <Field placeholder="Total price" name={${item}.totalPrice} validate={required} component={NumberInput} /> </Table.Cell> <Table.Cell> <Button floated="right" icon color="red" labelPosition="left" size="small" type="button" onClick={() => pop("items")} > <Icon name="minus" /> Remove </Button> </Table.Cell> </Table.Row> )) } </FieldArray> <Table.Row> <Table.Cell colSpan="5" textAlign="right"> <strong>TOTAL</strong> </Table.Cell> <Table.Cell colSpan="2" textAlign="right"> <Field name="amountBeforeTax" placeholder="Amount Before Tax" value={purchase.amountBeforeTax} component={NominalInput} /> </Table.Cell> </Table.Row> </Table.Body>

Are you submitting a bug report or a feature request?

Feature request

What is the current behavior?

Currently, there is no debouncing done on any calculations

What is the expected behavior?

I have a bigger form and I can see that calculations are just a tad sluggish and as I don't really need the calculationas to run until the user has actually finished changing the value and not as the value changes.

So I'm just thinking that maybe this is the most common scenario and we could add debouncing by default on the calculations?

What is the current behavior?

If a hook make the component re-render, then the prevValues will be an empty object and the "updates" function are triggered even if the values did not change

What is the expected behavior?

The "update" function should probably not be triggered, but they are probably because the prevValues is an empty object, which should not happen either

Sandbox Link

My current fix

const decorator = createDecorator({
  field: 'foo',
  updates:  (fieldValue, fieldName, allValues, prevValues) => {
    if (typeof prevValues[fieldName] === 'undefined') {
      return {};
    }

    // do real stuff
  }
})

Extracted from the final-form-calculate example: https://codesandbox.io/s/react-final-form-calculated-fields-forked-wpm4f?file=/index.js

What's your environment?

• final-form: 4.12.0
• final-form-calculate: 1.3.2
• react-final-form: 5.0.1

Hello there, is this package still alive?

Are you submitting a bug report or a feature request?

Feature request.

What is the current behavior?

Currently, you used a strict equality to know if you need to calculate a new value of the field.

if (next !== previous) {
  …
  form.change(…

What is the expected behavior?

For some of my fields, the value is a javascript object returned by a graphQL request. The deep value of the object is the same, but the reference is not. The function is therefore executed.

Would it be possible to pass the previous values in order to reinforce the validation of the status change of the field value?

if (next !== previous) {
  …
  form.change(destField, update(next, values, previousValues))

feature request

What is the current behavior?

UpdatesByName and UpdatesForAll functions don't handle Promises as return values.

What is the expected behavior?

I'd love to be able to handle asynchronous updates using Promises inside updates functions.

Other information

I already experimented a little bit with the code, and I'm quite happy with the result. I'm ready to create a PR if you're willing to accept this feature !

Are you submitting a bug report or a feature request?

A feature request

What is the current behavior?

Currently you can pass a field name as string or a regex.

What is the expected behavior?

It would be nice to have array support as well.

Are you submitting a bug report or a feature request?

I'm not sure if this is a bug or a new feature, I'm leaning towards new feature...

What is the current behavior?

I have a situation where I have async zipcode validation/pre-fill in a wizard style form, the zipcode question of the form comes early in the question set and then upon the user entering a valid zip (which gets validated against an api endpoint) it returns the city and state that needs to get prefilled for the registration portion of the form (on another not yet rendered/mounted page)... it seems like this is not currently supported functionality, or I'm doing something totally wrong.

What is the expected behavior?

The form values i want to prefill will be prefilled in final form state and rendered with value when the user gets to the page that renders those fields.

Sandbox Link

I created this very quick and dirty example to demonstrate how it works when both fields are rendered but does not work when you hide the second zipCode field... https://codesandbox.io/s/lyk398lmll

What's your environment?

[email protected]
[email protected]