Field with control

[danyhiol]

What is the best way to wrap fields in a Col using SimpleSchema2 and the uniforms property?
Right now the form is displayed in rows of full-width column layout. I want to control the width of each column. I manage to make AutoFields display its content as a Row using the element property. Now I want to use the uniforms property in SimpleSchema2 to control the width of the field.
my first try was to create a custom field that just wraps the field in a Col.

function CustomCol(props) {
  ...
     return (<Col className="gutter-row" {...props.layout}>
        <AutoField name="" />
      </Col>);
}
export const CustomColField = connectField(CustomCol);
export default CustomColField;

Usage:

firstName: {
    type: String,
    uniforms: {
      component: CustomColField,
      layout: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
    },
  },

As a result, the UI is breaking. The form keeps re-rendering. Is there something wrong with my approach? Or is there a better way to achieve this?
I am using antd in the UI.

[radekmie]

Hi @danyhiol. I think it may be a perfect case for overriding AutoField. You could create a custom AutoField, that wouldn't return the original AntD components, but rather wrap them in a higher-order component rendering the wrapping component.

[danyhiol]

Any news on this? Or a simple way to wrap fields in columns? I personally think it would be a big+ to do that because we rarely define forms with full width (at least on big forms). So many other devs may have this same issue.

[radekmie]

Hi @danyhiol, sorry for the delay. I've prepared this demo that bases on the idea I've posted above. You can safely use hooks in the component returned from withLayoutImpl, including useField.

We'll think about making a better/easier API for that in the future.

[danyhiol]

Hi @radekmie, after testing, this is indeed working as long as the schema doesn't contain the component: SomeComponent field. Once this field is added to the schema, the component is rendered without passing through the provider. Thus not applying the layout.

uniforms: {
  component: LongTextField,
  ...
}

[radekmie]

Yep, that's expected. However, if you already have a custom AutoField, you can stop using component in favor of your own field, e.g., componentName (or anything else), and derive the component based on that.

[danyhiol]

@radekmie fantastic

uniforms: {
      componentName: SelectField,
      layout: { xs: 24, md: 24 },
},

function withLayoutWrapper(
  props: GuaranteedProps<unknown> & Record<string, any>,
  uniforms: Context<unknown>,
) {
  if (props.componentName) {
    const DataFieldWrapper: React.FC = () => (
      <Col className="gutter-row" {...props.layout}>
        {React.createElement(props.componentName, props) }
      </Col>
    );

    return DataFieldWrapper;
  }
  return withLayout(AutoField.defaultComponentDetector(props, uniforms));
}