How to write a material-ui replacer?

[zsolt-dev]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

Hi, I have read the docu and all the issues about replacing bootstrap with something else. I am willing to write the code that will use replace bootstrap syntax with material-ui components.

What would be the best way to approach it?

One "dirty" idea is to install the npm package and then just replace some files, like src/components/widgets/BaseInput.js and load it on top of the npm package... Would it be the best way? If yes, how to do it?

Another idea is to use the "Customizing the default fields and widgets"... would this be better way?

Thank you

[zsolt-dev]

I have started working on it. I used the method that provides the widgets and fields props, but It seems I cannot get rid of the <Label component, which should be removed since now it is twice.

The label component is rendered in DefaultTemplate and SchemaFieldRender functions inside the SchemaField.js.

So it seems like react-jsonschema-form is not ready for custom UIs yet. It would be nice if all components (like <Label etc) would be in the Field or widget, so they could be accessed.

But it may be that I am wrong, so I would appreciate any help. Thank you

[llamamoray]

@joesanta555 I've done something very similar which has worked quite well.

I have a custom Form component that wraps the react-jsonschema-form and passes in all my custom fields and widgets like so:

fields = {
    TitleField: CustomTitleComponent,
    ObjectField: CustomObjectFieldComponent,
  };

  widgets = {
    TextWidget: CustomTextWidget,
    CheckboxWidget: CustomCheckboxWidget,
  };

  render() {
    return (
      <Form
        {...this.props}
        uiSchema={this.props.uiSchema}
        widgets={this.widgets}
        FieldTemplate={CusomFieldTemplate}
        ArrayFieldTemplate={CustomArrayFieldTemplate}
        formData={this.state.formData}
        fields={this.fields}
        showErrorList={false}
        liveValidate
      />
      </Form >
    );
  }

Note that you can also replace Field and Array field templates to restyle the entire form.

[zsolt-dev]

@llamamoray This is actually very good solution to wrap it. Thank you

I just spent couple of days trying to come up with the combination of fields and widgets to pass to <Form to change the design to material-ui including errors and live validation but I am stuck on these:

1. There is no global way to disable <Label (material-ui uses its own, so there are duplicate labels for everything)
   The only partial solution is to pass ui:options -> label -> false for each field, which is not great.

2. liveValidate does not validate only the currently edited fields... So if you start editing any field, you end up getting many errors for all fields...

3. Error styling -> I cannot figure out how use the material-ui error style.

[llamamoray]

1 - I achieved this by implementing my own ObjectFieldTemplate and passing it into the FieldTemplate prop of Form. You can omit the title field in this component. To give you an idea of what this looks like these are the props types for my custom implementation:

FieldTemplate.propTypes = {
  children: PropTypes.node.isRequired,
  rawDescription: PropTypes.string,
  rawErrors: PropTypes.arrayOf(PropTypes.string),
  help: PropTypes.element,
  hidden: PropTypes.bool,
  rawDescription: PropTypes.string,
};

FieldTemplate.defaultProps = {
  rawErrors: [],
  help: <div />,
  hidden: false,
  rawDescription: null,
};

2 - This would require a code change to the project I believe.

3 - PR #826 will cover this for you, I'm waiting for another review of this.

[llamamoray]

@joesanta555 with version 1.0.1 the raw errors are passed down to custom controls so you'll be able to achieve point 3.

[glasserc]

What I'd like to see is for each frontend library (bootstrap, material-ui, foundation, etc.) have its own react-jsonschema-form-foo package which provides the components and widgets that rjsf can use to render itself according to that frontend library style. I'm sure there are lots of places where we don't quite support everything we need in order to make this work. For example, maybe we should allow overriding <Label> directly rather than forcing a user to override ObjectField. (But then, maybe not -- maybe a frontend framework needs to do something complicated for ObjectFields already.) Maybe rjsf should take a gui prop that specifies all these fields and widgets, or maybe those libraries should expose a <Form> entry point that wraps the rjsf one and users should call that directly. I'm open to PRs that make this process easier.

See also #899. I think Bootstrap 4 is going to make this issue be more important.

[mehrdad-shokri]

@llamamoray

3 - PR #826 will cover this for you, I'm waiting for another review of this.

Thanks for your pr, I have now access to the raw errors prop.
But rjsf automatically renders errors under the field. How can I disable that?

[llamamoray]

@mehrdaad https://github.com/mozilla-services/react-jsonschema-form#error-list-display

[mehrdad-shokri]

@llamamoray the link you mentioned removes errors list for the form, which is rendered upon components.
I'm asking for removal of the list which is rendered just beneath the field custom component

[glasserc]

@mehrdaad It seems like defining your own FieldTemplate should be enough to let you decide how to handle errors. Is your problem related to the rest of this issue, titled "How to write a material-ui replacer?" If not, consider maybe a separate issue.

[mehrdad-shokri]

I'm doing as you mentioned right now, but I thought maybe rjsf would have a more automatic way of displaying errors for a field.
I'm accessing error from props.schema.errorschema right now.

[epicfaace]

This was added in https://github.com/cybertec-postgresql/rjsf-material-ui, so I'm closing this issue.

Also see #1222.