Question about the syntax (checkboxes)

[metamn]

In #549 we have a working example for checkboxes:

{
    "type": "object",
    "properties": {
        "impact": {
            "type": "array",
            "title": "Select impacts:",
            "items": {
                "type": "string"
            },
            "options": [
                {
                    "label": "Impact One",
                    "value": "Impact One"
                },
                {
                    "label": "Impact Two",
                    "value": "Impact Two"
                },
                {
                    "label": "Impact Three",
                    "value": "Impact Three"
                },
            ],
            "uniforms": {
                "checkboxes": true
            }
        }
    }
 }

A question would be about options: They are not part of the array JSON Schema specification (https://json-schema.org/understanding-json-schema/reference/array.html) so they have to come from uniforms. Why they don't go then under uniforms in the schema, like:

{
    "type": "object",
    "properties": {
        "impact": {
            "type": "array",
            "title": "Select impacts:",
            "items": {
                "type": "string"
            },
            "uniforms": {
                "checkboxes": true,
"options": [
                {
                    "label": "Impact One",
                    "value": "Impact One"
                },
                {
                    "label": "Impact Two",
                    "value": "Impact Two"
                },
                {
                    "label": "Impact Three",
                    "value": "Impact Three"
                },
            ],
            }
        }
    }
 }

That would be a clear separation of concerns. Easier to debug, easier to learn.

Another question would be about the Autofield algorithm: https://uniforms.tools/docs/uth-autofield-algorithm

let component = props.component;
if (component === undefined) {
  if (props.allowedValues) {
    if (props.checkboxes && props.fieldType !== Array) {
      component = RadioField;
    } else {
      component = SelectField;
    }
  } else {
    switch (props.fieldType) {
      case Date:
        component = DateField;
        break;
      case Array:
        component = ListField;
        break;
      case Number:
        component = NumField;
        break;
      case Object:
        component = NestField;
        break;
      case String:
        component = TextField;
        break;
      case Boolean:
        component = BoolField;
        break;
    }
    invariant(
      component,
      'Unsupported field type: %s',
      props.fieldType.toString()
    );
  }
}

Since we don't have allowedValues defined in the schema and the property type is array it should display a ListField component which has no options support: https://uniforms.tools/docs/api-fields/#listfield

How then options is understood and displayed well? It looks like only the SelectField can understand options (https://uniforms.tools/docs/api-fields/#selectfield) which is displayed only when props.allowedValues is true.

Checking out the description for options clears up the picture: options are allowedValues

Options. It is optional and using options will override transform and allowedValues. It can be either an object or an array (or a function, that returns it).

Do you think one should go deep down this route to understand how to display a few checkboxes? Personally I find it discouraging.

[radekmie]

Hi @metamn.

Both of the schemas you've shown work in the same way. It's because by default the JSONSchemaBridge merges whole uniforms property to the props. Of course, the latter is preferred to separate the concerns - just as you've said. We cannot ban the first option though, as we are not willing to keep track of all possible JSON schema options and therefore we do let the components handle them (that's also a partial answer to #669).

About the second part. It's a little more complicated, as AutoField is a part of the theme and the bridges are completely separated. That's why the fields are not aware of such a concept of options. Bridges may handle it (and they do) by translating them into allowedValues and transform function. You can provide these two independently and stop using options at all. That's why options are not allowedValues. Does it make sense? Sometimes yes, e.g. when the values are dynamic (from an API, etc.) but the transform is static (like capitalization or slugify).

Do you think one should go deep down this route to understand how to display a few checkboxes? Personally I find it discouraging.

And you are not the only one, I assume. The thing is that I don't really know, how hard doing something with uniforms may be as I know the package too well. The same goes with other people maintaining it. That's why I'm very glad to see such issues and I answer them as in-depth as possible. I really encourage anyone to file an issue or PR with documentation changes if you think that something isn't clear or hard to find.

[radekmie]

No comment so far, I'm closing. Feel free to comment anyway.