Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Radosław Miernik
    @radekmie
    @amineDaouma Hope it all works now - those conversations took way longer than I thought.
    amineredditdev
    @amineDaouma
    @radekmie yes I know now that I have 2 ways of doing it, that makes me comfortable in my development. hahah yes way longer that thought either but it deserves it (unless for me). Thank you very much
    Radosław Miernik
    @radekmie
    :rocket:
    danyhiol
    @danyhiol

    @danyhiol Which version exactly? Can you reproduce it on https://codesandbox.io/s/github/vazco/uniforms/tree/master/reproductions?

    I finally solved the issue just after posting the question. I forgot to return the model in modelTransform

    danyhiol
    @danyhiol
    But I'm facing a strange issue. In my app, I pass the modelTransform along from the parent component to the (third) child which is the form.
    So my app look like this: Parent(modelTransform defined) > FirstChild(modelTransform passed) > Form(modelTransform used). So the Parent defined the function, and pass it to the first child which then pass it to the Form.
    In the parent component, I make use of the React context API which works well inside the parent component. When used inside the modelTransform function defined in the parent, the values are changed inside the modeltransform, but not globally. I tried different mean but realized that any global change made inside the parent modelTransform to a global constant, does not take effect. I may be mising something here, but i just can't understand why this is happening.
    function parent() {
      const { value, setValue } = useContext(SomeContext);
      ...
      const modelTransform = (mode, model) => {
        if (mode === 'form') {
          ... 
          setValue(model.somefield);  <- this does not work.
        }
      }
      ...
      return ( <FirstChild handleModelTransform={modelTransform} ... /> )
    }
    Radosław Miernik
    @radekmie
    Setting model in modelTransform sounds odd and indeed, may lead to a bunch of issues. Why are you doing that?
    danyhiol
    @danyhiol
    I need to transforme the model each time a certain field change. Like calculating the total amount of an invoice based on the taxes field and the cost.
    Radosław Miernik
    @radekmie
    Then you should use onChange and store the model manually. modelTransform lets you don't store it at all, but override only during render or for submission. Overall, modelTransform should return the model and that's all - no side effects make sense there.
    William Prioriello
    @1337micro
    Greetings. I have a parent element that has its own submit button. This parent element contains numerous child Uniform AutoForms. The child AutoForms have no submit button. What I'd like to accomplish: when the user presses on the submit button in the parent element, I want to be able to detect if there are any validation issues in the child AutoForms. As of right now, pressing my own submit button allows me to submit the form even though there are validation issues in the child AutoForms.
    Radosław Miernik
    @radekmie
    Hi @1337micro. You can call formRef.submit(). It will return a promise that will resolve after the submission succedeed. Or just use formRef.validate().
    William Prioriello
    @1337micro
    @radekmie thanks for your response. Yeah I saw that I can access the ref as a prop of the AutoForm itself, but I'm not sure exactly how I can propogate those form refs upwards to the parent so that I can call ref methods from the parent element (I hope I am making sense)
    Radosław Miernik
    @radekmie
    You can create ref objects (or callbacks) and pass them as low (in the tree) as needed. Or use forwardRef - it depends on your case. https://reactjs.org/docs/refs-and-the-dom.html
    William Prioriello
    @1337micro
    @radekmie thanks a lot. It works with forwardrefs
    Philip Johnson
    @philipmjohnson
    Hi, I want to migrate from Uniforms 2.6.5 to the latest 3.0 RC. Is there documentation somewhere that overviews the issues that might arise during migration? I spent a few minutes searching and didn't come up with anything. Sorry if it's obvious and I missed it!
    Radosław Miernik
    @radekmie
    @philipmjohnson Everything you need is in the changelog.
    You'd have to check each 3.0.0-X version though.
    Philip Johnson
    @philipmjohnson
    @radekmie OK, thanks, I'm looking at it now!
    Philip Johnson
    @philipmjohnson
    Screen Shot 2020-07-30 at 4.30.43 PM.png
    @radekmie OK, I've looked through the changelog, and didn't notice anything amiss for my code. So, I updated my package.json to the latest 3.0 RC, and got an error when I tried to load a simple page with an AutoForm (see above)

    The master branch contains the working code under 2.6.5:
    https://github.com/ics-software-engineering/meteor-application-template-react

    The uniforms-3.0 branch contains the broken code. The only difference is app/package.json:
    https://github.com/ics-software-engineering/meteor-application-template-react/tree/uniforms-3.0

    Thanks for any help you can provide to point me in the right direction

    Radosław Miernik
    @radekmie

    @philipmjohnson I'll have to emphase it in the changelog, but it's one of v3.0.0-alpha.3 changes:

    Breaking: Removed createSchemaBridge. This includes removal of BaseForm.state.bridge, check on all bridges, and the automatic bridge creation for SimpleSchema. For motivation and more insigths see vazco/uniforms#718.

    In short, passing SimpleSchema instance to a form is no longer accepted - you have to to new SimpleSchema2Bridge(schema) manually.
    Philip Johnson
    @philipmjohnson
    @radekmie Thanks, that fixed it! I also updated https://ics-software-engineering.github.io/meteor-example-form-react/ to use Uniforms 3.0.
    Alexander 'Alex' Perez
    @alexanderlperez
    Hi, I'm trying to get a basic example running on codesandbox (https://codesandbox.io/s/agitated-rgb-3vlrr?file=/src/App.js) using the graphql bridge, but am getting Unsupported field type: String! for the single field in the schema. Funny thing is that the example works in the uniforms playground.
    playground sample
    new GraphQLBridge(buildASTSchema(parse(`
    type Log {
        title:   String!
    }
    
    type Query { anything: ID }
    `)).getType('Log'), function (model) {}, {})
    I'm not sure if I'm understanding how to use the bridge correctly with <AutoForm>
    Radosław Miernik
    @radekmie
    Hi @alexanderlperez. As I quickly checked, the playground you've created is using graphql@15 but uniforms are not yet updated. I mean, it'll for 99.9% just work, but due to the way how npm resolves modules, your type (got from getType) is not an instance of the same type in uniforms, because uniforms import a separate copy of graphql@14. Please file an issue and we'll take care of it in the following week.
    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?