Idea: Flexible component mapping

[macrozone]

You can currently implement your own AutoField and do whatever you want there, which is nice. You can also define a property universe.component to pass a react-component directly.

However, if you want to share schemas between server and client, you usually put the schemas in a shared location. But importing components there looks like the wrong place (it's also not possible if your componets resides in /client).

One solution is to simply extend the schema in a container, where you add the universe.component-property, but there is a better solution:

Having something like a mapping function, that can be provided to Autoforms or Autofields would be a good solution:

import {connectField, defaultComponentMapping}  from 'uniforms';
import {createElement} from 'react';

const Auto = ({component = null, componentMapping = defaultComponentMapping, ...props}) => {
    if (!component) {
       component = componentMapping(props);
    }
    return createElement(component, props);
};

export default connectField(Auto, {includeInChain: false});

( i sketched the above code here, so it may contain errors)

defaultComponentMapping could be what we currently have in the AutoField (switch on props.fieldType, etc.)

You could then introduce your own properties on the schema, e.g. simply allow component to be a string:

export default new SimpleSchema({
   file: {
      type: String, // will be an url, .e.g from slingshot
      uniforms: {
        component: "SlingshotFileUploadField" // why not allow strings as well and map somewhere else the real component
      }
   }
});

and in your mappingFunction (somewhere in your client where its fine to import Components):

const myMappingFunction = (props) => {
   switch(props.component) {
     case 'TextField': return MyTextField;
     (...)
    case 'SlingshotFileUploadField': return SlingshotFileUploadField
    default: return defaultComponentMapping(props);
  }
}

Thoughts?

[radekmie]

I don't know, if this suits your needs, but there's autoField prop on QuickForm (and so AutoForm) - you can use it like this:

const CustomAuto = props => {
    const Component = myMappingFunction(props) || AutoField;

    return (
        <Component {...props} />
    );
};

const CustomAutoField = connectField(CustomAuto, {includeInChain: false});

// Then...

<AutoForm schema={schema} autoField={CustomAutoField} />

[macrozone]

Yes, this also looks good.

Maybe we put that pattern in the readme?

[radekmie]

Yes, README is still under heavy development. I don't have much spare time right now - either create a PR or give me some time.

[radekmie]

Custom AutoField
Would you be my reviewer, @macrozone?