Uniforms: Example for an Array field with ListField

[Vandell63]

Hey there, I would like to create my custom array field with the uniform-unstyled. If i take your example :

'friends': {
    type: Array,
    minCount: 1,
},
'friends.$': {
    type: Object,
},
'friends.$.name': {
    type: String,
    min: 3,
},
'friends.$.age': {
    type: Number,
    min: 0,
    max: 150,
},

What will be the AutoForm ?I saw that ListField generate all
But I would like to have separetely the ListDel and List Add and the Friends.Name and Friends.Age Field inside to customize the button, etc...

<AutoForm schema={AccountSchema} onSubmit={(values) => this.createAccount2(values)} ref={(submit) => this.submitForm = submit}>

    {/* <ListField name='friends'/> */}
    <ListField name='friends' >
                <ListAddField..../>
        <ListItemField name='name'/>
        <ListItemField name='Age'/>
                <ListDelField ..../>
    </ListField>

</AutoForm>

Simple example with BaseForm or ValidateForm will be must appreciated
https://uniforms.tools/ is really great.
Thx in advance.

[radekmie]

Hello, @Vandell63! There's an example in the INTRODUCTION.md _(in a completely different section though...)_:

 // If it's an object
<ListField name="authors">
    <ListItemField name="$">
        <NestField>
            <TextField name="name" />
            <NumField  name="age" />
        </NestField>
    </ListItemField>
</ListField>

 // If it's a simple type
<ListField name="authors">
    <TextField name="$" />
</ListField>

Let me know, if something is still not clear.

[Vandell63]

Oh I'm sorry, did'nt see. No it is perfectly clear it make sense thx you ! Just an example for the ListAddField and ListDelField particularly for the name ? And How can i customize the add icon for the Add and Del Field for an unstyled uniform ?

const ListAdd = ({
    disabled,
    parent,
    value,
    ...props
}) => {
    const limitNotReached = !disabled && !(parent.maxCount <= value.length);

    return (
        <span
            {...filterDOMProps(props)}
            onClick={() => limitNotReached && parent.onChange(parent.value.concat([value]))}
        >
            +
        </span>
    );
};

export default connectField(ListAdd, {includeParent: true, initialValue: false});

I saw that the 'plus' was not dynamic in this case. alternative ?

[radekmie]

There's no much to customize in uniforms-unstyled. The best way is to create own ListAddField: simply copy the default one and customize up to your needs. Anyway: for more questions like this I encourage you to join us on Gitter.