React Final Forms is the best Form library and uhh... how do you sort Field Arrays before and after adding elements???

tn3rb commented 4 years ago

Been trying all kinds of things to have my FieldArray elements sort when there are updates. I created an example using the Simple Example (see: Sandbox Link below)

Basically just added an existing array of customers that is used as the initial data for the form. The data is intentionally out of order, but that is beside the point. When you add a NEW customer, I would like them to get inserted into the "correct" location, ie: displayed in alphabetical order according to their last name.

I've imported some utilities from Ramda to perform the sorting, and you can uncomment the console logging to see that the data IS getting sorted correctly, but uhhh... the list does not appear that way.

Are you submitting a bug report or a feature request?

might be a bug report but might also just be a cry for help? But it could also be a feature request for adding the ability to pass a custom sorting function that would be used at the optimum time to sort the data being displayed.

What is the current behavior?

can not figure out how to get FieldArray elements to sort both on initial render and when new elements are added

What is the expected behavior?

that the list would sort upon render even after new data is added

Sandbox Link

https://codesandbox.io/s/react-final-form-field-arrays-thp3q

What's your environment?

temperate rainforest (British Columbia, Canada) as well as W10, PhpStorm

Other information

Thanks for making the best form library out there!

tn3rb commented 4 years ago

Figured this out (enough for current needs)

I was doing this for my mutator:

sort: (args, state, tools) => {
    const prices = tools.getIn(state, 'formState.values.prices') || [];
    const sortedPrices = sortByPriceOrderIdAsc(prices);
    tools.setIn(state, 'formState.values.prices', sortedPrices)
},

and incorrectly assumed that tools.setIn() was also updating the state by reference, but it is not mutating the original state, which means that I had to do so by doing this :

    const newState = tools.setIn(state, 'formState.values.prices', sortedPrices)
    Object.assign(state, newState );

Would still prefer a more clear and direct way to update the state without having to do so via reference (maybe a new tool?).

As well, some kind of dedicated sortingPredicate prop for the FieldArray component that operated on the list at the optimum time would be amazing, so if you want to keep this as a feature request, them plz do so.

IF I get time (ha ha ha ha) I might try and whip up a pull request for that

il421 commented 4 years ago

I did my custom sort mutator too, but can not understand how to add the new mutator type for Mutators. I meant I cann add it locally for FieldArray.

But is there a way to add it for my form?

      <FieldArray name={this.nameOf("content")}>
        {(
          props: FieldArrayRenderProps<ListItem, HTMLElement> & {
            fields: {
              sortArray: (compareFn: (a: any, b: any) => number) => void;
            };
          }
        ) => {

final-form / react-final-form-arrays