[RFR] Add Reference many input

[fzaninotto]

• Rebase and squash the code from Add ReferenceManyInput #484
• Rename components to Array, to be consistent with feat: add ReferenceArrayField #596
• Add <ReferenceArrayInput>
• Add <SelectArrayInput>
• Use the new components in the blog example (for tags)
• Add documentation
• Translate options by default on <SelectArrayInput>, except when in a <ReferenceArrayInput>

Supersedes #484, closes #45

[leesei]

One question on Many vs Array, will AOR use Many for field filters and Array for id filters?

[fzaninotto]

@leesei I don't understand your question

[leesei]

I see the task "Rename components to Array", so was wondering AOR's rule for using Many vs Array.

[fzaninotto]

Here it's Array because we expect the value to be an array. But in the perpective of many-to-many relationships via a hash table (not yet implemented), then it'll be a Many.

[fzaninotto]

Switching to Ready For Review. @kimkha, as you can see, there was a lot to do to make your PR mergeable.

[kimkha]

You're awesome! 😍

So, how about the test?

[fzaninotto]

I should add somewhere that <CheckboxGroupInput> is also available for this component.

[jpetitcolas]

Looks awesome!

Yet, I don't see any tests. :/

[jpetitcolas]

s/component:/component/

[blindsteal]

Regarding your FIXME with the ids instead of values on first draw: I've worked on this problem before, it is due to the datasource not being populated at that point. The solution is calling resolveValues again when it does get populated.

Here is my code, few things to note:

• getChoices has been renamed to formatChoices, since it now takes the choices as an argument. Don't forget to replace in render.
• Don't ask me how I arrived at the guard condition for componentWillReceiveProps, I don't remember but this is the one that worked for all cases (coming from the list view, directly loading the edit view, various input lengths etc).

    resolveValues = (values, choices) => {
        if (!values || !Array.isArray(values)) {
            throw Error('Value of SelectArrayInput should be an array');
        }

        if (choices && choices.length > 0) {
            return this.formatChoices(choices).filter(choice => values.includes(choice.value));
        }
        return values.map(value => ({
            value, text: value,
        }));
    };

    formatChoices = (choices) => {
        const {
            optionText,
            optionValue,
            translate,
            translateChoice,
        } = this.props;
        return choices.map(choice => ({
            value: choice[optionValue],
            text: translateChoice ? translate(choice[optionText], { _: choice[optionText] }) : choice[optionText],
        }));
    }

    componentWillReceiveProps = nextProps => {
      if (
        this.props.choices.length !== nextProps.choices.length ||
        this.props.input.value.length < nextProps.input.value.length
      ) {
        this.setState({
          values: this.resolveValues(nextProps.input.value, nextProps.choices)
        });
      }
    };

[blindsteal]

Apparently I did not catch every case... We also need to resolve in componentWillMount (in case choices and input are already populated but the constructor is not called... i.e. when visiting the edit page for the second time without reloading).

  componentWillMount = () => {
    this.setState({
      values: this.resolveValues(this.props.input.value, this.props.choices)
    });
  }

[fzaninotto]

Now really green and ready for merge

[djhi]

Nice work !

[djhi]

Aren't you mutating the current state here ? It would probably be safer to initialize possibleValues from state with Array.from

[fzaninotto]

you're right - even if that was the case before that PR, too.

[fzaninotto]

Thanks @kimkha!

[rchoffar]

Has this input method been deprecated ? @fzaninotto

[fzaninotto]

@fr0Xy <ReferenceArrayInput> and <SelectArrayInput> are still there. What do you mean?