reactjsmeteorsemantic-uimeteor-autoformsimple-schema

Uniforms: Creating custom field


I have the following Simple Schema defined:

import SimpleSchema from 'simpl-schema';

export const Comments = new Mongo.Collection("comments");

export const CommentsSchema = new SimpleSchema({
  comments: Array,
  "comments.$": Object,
  "comments.$.author": String
  "comments.$.text": String
})

And I have a component with AutoForm to view/edit this comments array:

import {ErrorsField, SubmitField, ListField} from "uniforms-semantic";
import AutoForm from 'uniforms-semantic/AutoForm';

<AutoForm schema={CommentsSchema} onSubmit={comments => this.updateRequest(comments)} model={this.props.comments}>
  <ListField name={"comments"}/>
  <ErrorsField/>
  <SubmitField/>
</AutoForm>

this.updateRequest(...) is a function that calls Meteor backend function that updates Mongo collection.

I would like to customize ListField so that for each comment the "comments.$.text" TextField is displayed as a bigger text box with newlines allowed.

It's currently just a single line string:Current ListField

I considered rewriting a custom version of ListField but that seemed unnecessarily complicated for a small change like that. What is the best way to do add small customization like this using uniforms API?


Solution

  • Looking at the docs, it appears you can specify the inner workings of ListField. This is untested, but I would guess something along these lines:

    <ListField name="comments">
        <ListItemField name="$">
            <NestField name="">
                <TextField name="author" />
                 <LongTextField name="text" />
            </NestField>
        </ListItemField>
    </ListField>

    https://github.com/vazco/uniforms/blob/master/INTRODUCTION.md#props-propagation