Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Alexander 'Alex' Perez
    @alexanderlperez
    graphql@14 did the trick. Thanks for the heads up :+1: I'll drop an issue on the repo
    Jeff Kinley
    @jkinley

    Hi everyone, somewhat new to Gitter and Uniforms, but I will do my best. I am using jsonSchema and Material. I have an array of nested fields, but they don't obey the fullWidth property when nested.

    "additionalFields": {
                "type": "array",
                "items": {
                    "type": "object",
                    "properties": {
                        "name": { 
                            "type": "string",
                            "uniforms": {
                                "margin": "normal",
                                "variant": "outlined",
                                "fullWidth": "true",
                                "InputLabelProps": {
                                    "shrink": "true"
                                }
                            }
                        },
                        "type": { 
                            "type": "string",
                            "options": [
                                {
                                    "label": "Text Input",
                                    "value": "text-input"
                                },
                                {
                                    "label": "Textarea",
                                    "value": "textarea"
                                },
                                {
                                    "label": "Select",
                                    "value": "select"
                                }
                            ],
                            "uniforms": {
                                "margin": "normal",
                                "variant": "outlined",
                                "fullWidth": true,
                                "InputLabelProps": {
                                    "shrink": true
                                }
                            },
                        },

    The layout is inline vs block for the name and type fields. Am I doing something silly? Thanks!

    Jeff Kinley
    @jkinley

    Hey gang. So I just tried something and seem to have resolved the issue myself. Posting here so maybe it helps someone else. Originally, I had my JSX like this:

    <ListField name="additionalFields">
        <ListItemField name={'$'}>
            <AutoField name="name" />
            <AutoField name="type" />
        </ListItemField>
    </ListField>

    so I changed it to this:

    <ListField name="additionalFields">
        <ListItemField name={'$'}>
            <AutoField name="name" />
        </ListItemField>
        <ListItemField name={'$'}>
            <AutoField name="type" />
        </ListItemField>
    </ListField>

    and now it is working correctly. Thanks!

    Screen Shot 2020-10-28 at 10.14.54 AM.png
    Jeff Kinley
    @jkinley
    That actually did not completely resolve the issue bc now there are multiple delete items on the right hand side. Let me know if you have any ideas.
    Jeff Kinley
    @jkinley
    So I have done lots and lots of testing and compared my code with the code on the playground and I don't get it. For some reason, as soon as I use a ListField and ListItemField those fields are displayed inline. In the playground they are not. I don't have any custom CSS that is doing this. Anyone, have any idea why this would happen?
    Screen Shot 2020-10-28 at 9.16.12 PM.png
    Radosław Miernik
    @radekmie
    Hi @jkinley. I saw you've already filed it in an issue and actually solved it.
    I'm not the most frequent Gitter user :|
    Avi Muchnick
    @jaxomlotus

    Hi there! Thanks for making this amazing component. I'm running into a weird issue, though maybe my use case isn't supported: I'm trying to allow users of my app to build their own forms, and am letting them customize their own schema in JSON, which then gets saved to a MySQL database as a string. I then try to pull that string out of the database and convert it back into a usable object in javascript / react (Nextjs) using JSON.parse, but for whatever reason it's still being treated as a string or erroring out.

    Is there a way to accomplish my goal in uniforms, or is reading the schema from an outside source like a DB not really doable?

    Radosław Miernik
    @radekmie
    @jaxomlotus Hi there! Of course, it is possible. The question is, what kind of schema are you using? If it's JSON Schema, then it should just work - create a bridge instance and pass it to form. If it's not working, could you post your code sample and the error here?
    Avi Muchnick
    @jaxomlotus

    Thanks @radekmie. It does use JSON Schema.

    It's the same Guest Schema code sample from the tutorials posted on your official website. The only difference is that the schema itself comes from a string stored in MySQL. What seems to be happening are some kind of invisible characters being added during the journey when it's stored and retrieved in MySQL. The result is that the JSON from the MySQL db query is always treated like a string by the browser - even when run through JSON.parse(JSON.stringify(schema)).

    Code:

    Sample schema stored in db field
    (shortened some fields just to fit in this window):

    {
          title: 'Guest',
          type: 'object',
          properties: {
            lastName: { type: 'string' },
            workExperience: {
              description: 'Work experience in years',
              type: 'integer',
              minimum: 0,
              maximum: 100,
            },
            profession: {
              type: 'string',
              options: [
                {
                  label: 'Developer',
                  value: 'developer',
                },
                {
                  label: 'Tester',
                  value: 'tester',
                },
              ],
            },
            additionalInfo: {
              type: 'string',
              uniforms: { component: LongTextField },
            },
          },
          required: ['lastName'],
        };

    //Code from pages/[pageurl].tsx

    function createValidator(schema: object) {
      const validator = ajv.compile(schema);
    
      return (model: object) => {
        validator(model);
        return validator.errors?.length ? { details: validator.errors } : null;
      };
    }
    
    let res = await fetch(`/api/formbuilder?id=${id}`, { method: 'GET' });
    let json = await res.json();
    
    //this is the schema being returned from the MySQL query
    var s = json[0][0].schema;
    
    // remove hidden, non-printable and other non-valid JSON chars
    s = s.replace(/\\n/g, "\\n") ;
    .replace(/\\'/g, "\\'");
     .replace(/\\"/g, '\\"');
    .replace(/\\&/g, "\\&");
     .replace(/\\r/g, "\\r");
     .replace(/\\t/g, "\\t");
    .replace(/\\b/g, "\\b");
    .replace(/\\f/g, "\\f");
    s = s.replace(/[\u0000-\u0019]+/g,""); 
    
    const ajv = new Ajv({ strict: false, allErrors: false, useDefaults: true });
    
    s = JSON.parse(JSON.stringify(s));
    
    const schemaValidator = createValidator(s);
    
    const schema = new JSONSchemaBridge(s, schemaValidator);

    Resulting console log:
    alt
    https://ibb.co/H4MVgcw

    • top is the database response pasted from above (interpretted like a String)
    • bottom is the same schema when explicitly called within react (interpretted like an Object)
    Radosław Miernik
    @radekmie
    Could you post the whole code? You've attached screens of console.log but there are no console.logs in the code. Also, could you post the error you encountered?
    Alec Sibilia
    @asibilia

    Hey everyone! Would someone mind posting an example of a schema with a NestField?
    I've tried something like

    {
        type: "object",
        properties: {
            "name.firstName": {
                label: "First Name",
                fieldType: String
            },
           "name.lastName": {
                label: "First Name",
                fieldType: String
            },
          name: {
            fieldType: Object,
            fields: ["firstName", "lastName"]
          }
    }

    but still get this error: Field not found in schema: "name.firstName"

    Thanks in advance!

    Radosław Miernik
    @radekmie
    Hi @asibilia! I'm a little confused by the fieldType, but I guess it meant to be a JSON schema. This should do the job:
    {
      type: 'object',
      properties: {
        name: {
          type: 'object',
          properties: {
            firstName: {
              label: 'First Name',
              type: 'string'
            },
            lastName: {
              label: 'First Name',
              type: 'string'
            }
          }
        }
      }
    }
    Alec Sibilia
    @asibilia
    @radekmie ah, okay that does seem to be working -- thank you. I was looking at the autofield algorithm and saw the switch looking for the props.fieldType
    JerryDiemsee
    @JerryDiemsee

    Hi everyone, and thanks @radekmie and other people that made Uniforms as awesome as it is ! ;)
    Sorry to ask if it has already been answered or, worse, if it is in the doc, but can't find it.

    Is there a way to specify the Field to use in a ListField ?

    Example :

    // Schema declarations
    const productSimpleSchema: SimpleSchema = new SimpleSchema({
        name: { type: String },
        description: { type: String, optional: true },
        unitPrice: { type: Number },
        quantity: { type: SimpleSchema.Integer, min: 1 },
        tax: { type: Number, max: 100 }
    });
    
    const quoteSimpleSchema: SimpleSchema = new SimpleSchema({
        title: { type: String }
        products: { type: Array },
        'products.$': { type: productSimpleSchema }
    });
    
    // Composite Field declaration
    const ProductField = connectField(() => (
            <>
                <AutoField name="name" label="My product: " />
                <AutoField name="description" label="Description: " />
                <AutoField name="unitPrice" label="Unit Price: " />
                <AutoField name="quantity" label="Quantity:  " />
                <AutoField name="tax" label="Tax (%): " />
            </>
        ));
    
    // Form declaration
    <AutoForm
            model={quote}
            schema={quoteAutoFormSchema}
        onSubmit={(quoteFormResult: QuoteSchema) => onQuoteSubmit(quoteFormResult)}
    >
        <AutoField name="title"/>
    
            // Here, I would like to be able to use a ProductField for each item in the ListField
        <ListField name="products" initialCount={1} />
        <ErrorsField />
        <SubmitField />
    </AutoForm>
    JerryDiemsee
    @JerryDiemsee

    Ok. Following issues I've found on the Git repo, I was able to find a way to do it like so:

    <ListField name="products" initialCount={1}>
        <ListItemField name="$">
            <ProductField name="" />
        </ListItemField>
    </ListField>

    Is it the right way to do it ?
    Or is there a simpler way, without having to define my own ListItemField ?
    Maybe passing something to itemProps (not sure how to use this)

    Radosław Miernik
    @radekmie
    Hi @JerryDiemsee. I see you've found one of the solutions. Another one, maybe a better one for your case, would be to define ProductField in the schema, like this:
    'products.$': { type: productSimpleSchema, uniforms: ProductField }
    JerryDiemsee
    @JerryDiemsee

    Thanks for the answer.
    Actually, I already tried that, but couldn't figure out how it works.
    I'm using Typescript and I got the following error :

    Object literal may only specify known properties, and 'uniforms' does not exist in type
    'RegExp | SimpleSchema | SchemaDefinition | BooleanConstructor | StringConstructor | NumberConstructor | DateConstructor | ArrayConstructor'.

    Also, can you tell me why it may be a better solution ? I tend to believe it is not so great because it forces me to mix the schema and the ProductField that is related to the UI.
    But I'm all ears because I'm totally new to the web community, and maybe this is something common and good.

    Radosław Miernik
    @radekmie
    1. Yes, uniforms are not extending SimpleSchema types. You can do it in your app, by explicitly extending the SchemaDefinition interface, according to your needs.
    2. The uniforms are schema-driven, thus it's common to do it within a schema. True, it's mixing the domains, but (a) often a client-friendly variant of a server-side schema is already there (b) you can extend shared schemas on client-side only (c) all uniforms-related data is within one uniforms property so it's at least encapsulated.
    JerryDiemsee
    @JerryDiemsee
    All clear to me now. Thanks mate !
    danyhiol
    @danyhiol

    Hi guys, I have a main form component that handles much of my form with fields and is defined by SimpleSchema2.
    Now I want to wrap the content of the form with some components. The useForm hook is quite interesting but is missing the children Element that one could just use in a function, wrap and return. Below is my aim. Note that no fields are defined inside the form. The form is completely auto-generated.

    <AutoForm schema={bridge} ... > <SomeWrapper><SomeComponent>{children}</SomeComponent></SomeWrapper><AutoForm>

    As an alternative, I could just extends the AutoForm. But looking at the source code, there are some mixin goind on making AutoForm a function and not a class. So if this is the only possible solution, how can I extends AutoForm to wrap it's content as described above?

    bmartin1134
    @bmartin1134
    hey all, i want to make sure im not reinventing the wheel. the question is this, am i able to indicate the form layout through a schema property? for instance, is there something like:new SimpleSchema({ name: { type: String , uniforms: { position: 1}}
    Radosław Miernik
    @radekmie
    Hi @danyhiol. There's no need to create a subclass - you can use AutoFields+ErrorsField+SubmitField directly.
    @bmartin1134: no, there's nothing like that. You can create either use AutoFields component (the fields prop) or create a custom AutoFields-like component, that knows the order.
    bmartin1134
    @bmartin1134
    @radekmie Thanks for answering. For AutoFields, it looks like it maps over the list of fields i provide, I think that will work for what I need.
    bmartin1134
    @bmartin1134
    @radekmie How would I use <AutoFields/>? Like this?
    <AutoForm
      validate="onChange"
      validator={validatorOptions}
      schema={schema}
      onSubmit={onSubmit}
    ><AutoFields fields={something}/>
    </AutoForm>
    Radosław Miernik
    @radekmie
    @bmartin1134: Exactly.
    JerryDiemsee
    @JerryDiemsee

    Hi,
    Sorry for the duplicate with the issue, but I don't know where I should have posted this

    I'm using the following code to display a ListField with some CustomField:

    <ListField name="products" label="Products: " initialCount={1}>
        <ListItemField name="$">
            <ProductSelectFieldUnstyled name="name" label="Product: " />
        </ListItemField>
    </ListField>

    And my ProductSelectFieldUnstyled returns:

    return (
        <SelectField
            name={name}
            label={label}
            allowedValues={productIdsAndTitles}
            transform={(value: any) => value.title}
            disabled={disabled}
        />
    );

    This works fine, and I got my products displayed, but if I try to select one item, it always selects the first one and in the console, I got the following warning:
    Warning: Encountered two children with the same key, `[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

    I guess I have to set the key in the ProductSelectFieldUnstyled, but I don't know how I can get it.
    Using useField ? or passing a property from the ListItemField ?

    danyhiol
    @danyhiol

    Hi @danyhiol. There's no need to create a subclass - you can use AutoFields+ErrorsField+SubmitField directly.

    Fantastic... Still wondering how i could miss that...AutoFields

    Radosław Miernik
    @radekmie
    @JerryDiemsee: sorry, we have some delay in answering issues.
    @danyhiol: :rocket:
    Paul Ramos
    @pdramos1

    Hello @radekmie , first thank you for an amazing tool. Second thank you for your previous answer to my question some time ago. I do have another question. Right now I'm passing formRef into a sub component but it doesn't seem to be passing correctly. Have you seen this? Below is a somewhat simplified version .

    <AutoForm
                   ref={(ref) =>
                     (this.formRef = ref) &
                      (this.state.formRef || this.setState({ formRef: this.formRef }))
                   }
    <ListField
    formref={this.formRef}
    />>
    </AutoForm>

    This previously did work. I'm currently using uniforms 2.6.6 and react 16.14.0. Not sure if there is a conflict with those two packages.

    Radosław Miernik
    @radekmie
    @pdramos1: No, it looks correct, except the & (bitwise AND) instead of && (logical AND). Anyway, try to use React.createRef instead and let me know whether it works.
    Paul Ramos
    @pdramos1
    Unfortunately that did not work. :( Throwing in some console.logs I can see where it's set in the outer component. But then in the inner component it is when I throw a console.log it's undefined. Do you have any other suggestions?
    Radosław Miernik
    @radekmie
    It depends on the usage, but do check when the ref is being used - it’s not going to be present before the first render is finished.
    Paul Ramos
    @pdramos1
    The ref is used on a change event. Where I manually call formref.change when a user takes an action . This throws an undefined error. Hence me trying to figure out why formref is undefined. In the outer AutoForm componenent it is definitely defined, but in the inner, it's gone.
    Radosław Miernik
    @radekmie
    Well, I don't know then. If you could provide a minimal reproduction, e.g., using CodeSandbox, it'd be great.
    bmartin1134
    @bmartin1134
    is it possible with antd do have items on the same line visually? how would i accomplish that?
    Radosław Miernik
    @radekmie
    Hi @bmartin1134 - there's an issue for that already: vazco/uniforms#861.
    Victor
    @Krypt0r7
    Hi @radekmie - I'm trying to make a custom ListItemField that puts items inline, wrap or any way I would want. Copied the code from material package and tried to just add a Box with flex to wrap the children. No dice. Any ideas to how you could achieve this?
    Radosław Miernik
    @radekmie
    Hi @Krypt0r7. Could you post your code somewhere? Or even create a reproduction using our template? It's hard to guess, what went wrong.
    Victor
    @Krypt0r7
    Hi again @radekmie. I've created a sandbox. The sandbox is not working, it's just so you can see the code. The problem as far as I can see, is that the items I want to flex are a level too deep in the Html structure. So maybe the name children is a little of... https://codesandbox.io/s/uniforms-listitemfield-xr9sh
    Radosław Miernik
    @radekmie
    OK, thanks @Krypt0r7. I'll need more time to set it up and test, but you can use our template (https://codesandbox.io/s/github/vazco/uniforms/tree/master/reproductions) to provide a complete reproduction - it'll be much faster then. Thanks!
    Victor
    @Krypt0r7
    @radekmie Forked your sandbox and tried to create an equal representation of what I'm trying to achieve. Linking directly to the file in question. Also note that I've modded to graphqlschema. https://codesandbox.io/s/listitemfieldtest-5kkku?file=/Custom/ListItemField.js
    Radosław Miernik
    @radekmie
    @Krypt0r7 OK, so the thing is that you wrap the NestField into a Box and not its contents. Now, if you want to have a flex list, then you'd have to change the ListField instead (visually two rows of N inputs). However, if you'd like to display the object items inline, then you'd have to adjust NestField (visually N rows of two inputs).
    Victor
    @Krypt0r7
    Thanks @radekmie! That worked perfectly!
    Radosław Miernik
    @radekmie
    Hi there! We've decided to stop using Gitter in favor of GitHub discussions. You are more than welcome to join us there!
    https://github.com/vazco/uniforms/discussions
    bmartin1134
    @bmartin1134
    what is the best way to setup a [Save][Cancel] button at the bottom of the autoform?
    bmartin1134
    @bmartin1134
    also, is there an alternative way to create custom fields without using 'type'
    Aditya Negi
    @aditya314e
    hi