by

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
    @danyhiol Which version exactly? Can you reproduce it on https://codesandbox.io/s/github/vazco/uniforms/tree/master/reproductions?
    amineredditdev
    @amineDaouma

    Hello @radekmie,

    I can not find in the docs the corresponding cancel button for Autoform. The only field found is SelectField .. is there a way to add a cancel button beside the submit button of an Autoform ?

    Thank you

    Radosław Miernik
    @radekmie
    @amineDaouma - what such a button is supposed to do? There's no ongoing operation (besides async validation and/or submission) that one could cancel, and I can't see a usecase to cancel these.
    amineredditdev
    @amineDaouma
    @radekmie , Sorry I was talking about an embedded form in a modal. I resolved my issue thank you.
    amineredditdev
    @amineDaouma

    @radekmie ,
    I have a form with a schema of type JSONSCHEMAand I have at the root of the schema a field of type array that contains itself a list of fields (let's name a field of those SnapId). I want to replace SnapId which is a string type by a <SelectField/> but when I omit that SnapId and replace it by a <SelectField name="snapId" options ={opts}/> the console js throws an error ..(snapId not known in the schema because I think it's because this field is not at the root of the schema so he can't recognize a subfield of an array type .. I don't know how to point to SnapId as a field of an array type that itself is at the root of the schema KNOWING <SelecField /> require the prop name.. I don't know if you get my point ..

    Thank you

    Radosław Miernik
    @radekmie
    @amineDaouma I can't see the exact problem. Could you share the schema? A reproduction would be even better.
    amineredditdev
    @amineDaouma

    @radekmie,
    here is the schema :

     const schema = {
        CreateImage: {
          properties: {
            Architecture: {
              description: 'the architecture',
              type: 'string',
            },
            BlockMappings: {
              description: 'One or more block  mappings.',
              items: {
                description: 'One or more parameters .',
                properties: {
                  Tpu: {
                    description: 'Information about the Tpu',
                    properties: {
                      deleteTpu: {
                        description: 'Set to `true` by default',
                        type: 'boolean',
                      },
                      Ips: {
                        description:
                          'The number of  operations per second',
                        type: 'integer',
                      },
                      SnapId: {
                        description:
                          'The ID of the snap ',
                        type: 'string',
                      },
                      VolumeSize: {
                        description:
                          'The size of the volume',
                        type: 'integer',
                      },
                      VolumeType: {
                        description:
                          'The type of the volume',
                        type: 'string',
                      },
                    },
                    type: 'object',
                  },
                  DeviceName: {
                    description: 'The name of the device.',
                    type: 'string',
                  },
                  VirtualDeviceName: {
                    description: 'The name of the virtual device ',
                    type: 'string',
                  },
                },
                type: 'object',
              },
              type: 'array',
            },
            SourceImageId: {
              description: 'The ID of the image ',
              type: 'string',
            },
            VmId: {
              description:
                'The ID of vm - the image.',
              type: 'string',
            },
          },
          type: 'object',
        },
      };

    As you see, CreateImageis the schemaused to display the corresponding form. This schema hasBlockMappingsthat is an array that contains many items. Each item has many fields (Tpu, Ips, snapId etc.) and my goal is to replace all fields ending with Id of type stringby a <SelectedField name="snapId" /> by omiting for example snapId and replacing it by <SelectedField name="snapId" /> . However, as this field snapId is not at the root of the schema (like sourceImageId), this name field is not recognized by JsonSchemaBridge and throw the error : snapId is not found in the schema. I don't know how to point out to snapIdbased on that schema ... is there a way to do something like <SelectField name='BlockMappings.items.properties.Tpu.SnapId' />but I know this one does not work ...

    Radosław Miernik
    @radekmie

    Your try was very close; try BlockMappings.$.Tpu.SnapId. We do use $ to name any array element. However, this won't work as there's no information about the number of them. In this case, you could do BlockMappings.0.Tpu.SnapId to render only the first one (or 1 for the second, etc.). This can be combined with ListField, which will replace $ for each element.

    Another way would be to specify the component in the schema, using uniforms: { component: SelectField }, which will be used by default AutoField.

    amineredditdev
    @amineDaouma
    @radekmie, thank you for the answer. I could not use uniforms: { component: SelectField } in the schema, can you pls give me an example of it in my schema above. Also, I don't know how to use ListField combined with BlockMappings.0.Tpu.SnapId ? Sorry, I'm confused with all these options ..
    Radosław Miernik
    @radekmie
    1. SnapId: { description: 'The ID of the snap ', type: 'string', component: SelectField },
    2. Something like:
      <ListField name="BlockMappings">
       <ListItemField name="$">
         <SelectField name="Tpu.SnapId" />
       </ListItemField>
      </ListField>
    amineredditdev
    @amineDaouma

    @radekmie, I used the 2nd option then when I click on the button add (+) of BlockMappings array the console throws this error :

    Uncaught TypeError: Cannot read property 'map' of undefined
        at renderSelect (SelectField.js:16)
        at Select (SelectField.js:23)

    What is happening here ? Thank you.

    Radosław Miernik
    @radekmie
    I guess it's because no options (allowedValues) were provided.
    amineredditdev
    @amineDaouma

    @radekmie cool it's working Thank you ! however, when I followed

    <ListField name="BlockMappings">
     <ListItemField name="$">
       <Autofield name ="Tpu.Ips" />
       <Autofield name ="Tpu.VolumeSize" />
       <SelectField name="Tpu.SnapId" />
     </ListItemField>
    </ListField>

    The labels of those fields are not anymore displayed, but only the fields. I don't know why ..

    Radosław Miernik
    @radekmie
    Could you check in the React DevTools if the label is in X for each XField(e.g. Select for SelectField)? Or better, could you reproduce it using the link above? It'd make things faster.
    amineredditdev
    @amineDaouma

    @radekmie when I went to SelectField and AutoField I found this in react dev toolsprops :

    {
      "label": null,
      "name": "BlockMappings.0.Tpu.SnaptId",
    }
    {
      "name": "BlockDeviceMappings.0.Bsu.Ips",
      "label": null
    }
    etc.

    label is always null

    amineredditdev
    @amineDaouma

    @radekmie , if you are talking about this link :

    SnapId: { description: 'The ID of the snap ', type: 'string', component: SelectField },

    as I have my base schema as a json file, When I add SelectField it is not recognized .. So I added quotes to SelectField :

    SnapId: { description: 'The ID of the snap ', type: 'string', component: 'SelectField' },

    to bypass the error. After then, I've got an error something like : <SelectField /> should be in camelCase .. seems like Autofield does not recognize this as a uniforms field
    that's why I didn't go further with this solution .. if there is a workaround it'd be better

    amineredditdev
    @amineDaouma
    @radekmie, those console warnings prevent SelectField to be displayed in the form so it is hidden in the form when I add component property to the schema of SnapId
    index.js:1 Warning: The tag <SelectField> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    index.js:1 Warning: <SelectField /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
        in SelectField (created by AutoField)
        in AutoField (created by Nest)
    Radosław Miernik
    @radekmie
    It has to be an actual component, therefore component: SelectField (with a corresponding import above), not component: 'SelectField'. And by link I meant https://codesandbox.io/s/github/vazco/uniforms/tree/master/reproductions.
    amineredditdev
    @amineDaouma

    @radekmie; here here the link of reproductions :
    https://codesandbox.io/live/2gVP1
    or
    https://codesandbox.io/s/boring-hellman-17txv

    Same behavior of not showing labels on BlockMappings fields ..

    Radosław Miernik
    @radekmie
    OK, I forgot about it. By default, ListItemField removes label of its children - usually it is a number (index). Wrap it in NestField:
              <NestField name="Tpu">
                <AutoField name="deleteTpu" />
                <AutoField name="Ips" />
                <SelectField name="SnapId" options={choices} />
                <AutoField name="VolumeSize" />
                <AutoField name="VolumeType" />
              </NestField>
    amineredditdev
    @amineDaouma
    @radekmie, thank you 👌🏻
    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