Uniforms: Creating custom field

Question

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:

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?

@ZackNewsham `TextField` that is generated by default for Strings doesn't allow newlines AFAIK, so I doubt that simply editing CSS would work. — Max Mikhaylov, Aug 09 '18 at 13:21
I misunderstood the question, my appologies. Thought it was about styling. — Zack Newsham, Aug 09 '18 at 13:46

score 2 · Accepted Answer · answered Aug 09 '18 at 09:21

2

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

answered Aug 09 '18 at 09:21

rooch84

624
5
13

I saw the section you referred to, but for some reason thought it doesn't apply in my case and went on looking for more complicated solution... This snippet works great for me! – Max Mikhaylov Aug 09 '18 at 13:18

Uniforms: Creating custom field

1 Answers1