CODEWITHSUNDEEP
reactjsmeteorsemantic-uimeteor-autoformsimple-schema
Max Mikhaylov
Max Mikhaylov

Reputation: 792

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?

Upvotes: 1

Views: 931

Answers (1)

rooch84
rooch84

Reputation: 654

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

Upvotes: 2

Related Questions