uala / uala-react-forms

Official Form binding developed by UALA© frontend team.
https://uala.github.io/uala-react-forms
2 stars 1 forks source link

Implement connectFormArray HOC and FormArray component #26

Open MaurizioVacca opened 5 years ago

slv commented 5 years ago

children renderProp inside FieldArray provides array helpers, and FieldArrayMap is already an array mapper, and it provides a Context so you can implement Field like any other top level field:

<FieldArray name="friends">
  {({ add }) => (
    <div>
      <FieldArrayMap>
        {({ index, values, emitChange, removeArrayItem })=> (
          <div key={index}>
            <Field
              name="first_name"
              value={values.first_name}
              onChange={e => emitChange('first_name', e.target.value)} />
            <button onClick={removeArrayItem}>Remove</button>
          </div>
        )}
      </FieldArrayMap>
      <button onClick={add}>Add Friend</button>
    </div>
  )}
</FieldArray>
MaurizioVacca commented 5 years ago

When doing this with HOC approach (assuming we want to support it), we would need two HOC fieldArrayHOC and fieldArrayMapHOC.

The fieldArrayHOC will have a signature similar to connectForm:

const FieldArray = fieldArrayHOC(myArray)(myComponent)

while the mapper will probably need only the target Component:

const FieldArrayMap = fieldArrayMapHOC(myComponent)

nesting order when using this approach needs to be documented in details, otherwise I'm afraid that using the "HOC-way" may results confusing. What do you think?