naguvan/react-mst-form

Library for generating React forms from JSON schema using the react, material-ui, mobx and mobx-state-tree.

react-mst-form's Issues

Add Cancel button

Add Cancel button config and onCancel prop on the component.

Error text for enum is not good

Error text for enum select fields includes all the values available in the enum. If we have a select field with 100 values, the error message will be loooong...

Additionally, it uses the values, not option labels. Values are usually some hash IDs that don't have any meaningful value for the user.

Can we just say "should be not empty"?

Make the submit button label configurable

Great project! Just, please, make the submit button label configurable.

[BUG] Number field can't accept value of 0

Number field can't accept value of 0

type: 'number',
value: 0,
maximum: 100,
minimum: 0

[BUG] Select converts to input when no enum options

When there are no enum options, select field fallbacks to input field. Which is not okay (IMHO). This is the line that does this:
const select: boolean = !!type.enum && type.enum.length > 0;

I believe just a check hasOwnProperty('enum') is enough to determine if field should be of select type or input text.

Release 2.0.0

TODO: need to update the progress and changes

1. Non Json-Schema properties to be moved to single complex property called "meta" (non-spec property)

From:

{
 "password": {
    "type": "string",
    "component": "password",
    "minLength": 6,
    "maxLength": 20,
    "sequence": 2
 }
}

To:

{
 "password": {
    "type": "string",
    "minLength": 6,
    "maxLength": 20,
     "meta": {
          "component": "password",
          "sequence": 2
     }
 }
}

2. Type specific "meta" properties with compile time check with typescript and runtime check with "mobx-state-tree"

3. more material-ui component support for type "string". ex: "date", "datetime", "password" etc

Save and Cancel buttons should be at fixed bottom position

Save and Cancel buttons should be at fixed bottom position. Now whenever the form height exceeded the parent container height, buttons are not visible and user needs to scroll to submit.

Make the cancel button conditionally visible

Make the cancel button conditionally visible per form schema. The cancel label could be used for that. For example when a falsy value is supplied to "cancel" property, the Cancel button should not be rendered. A very simple change is needed, just change this:
{onCancel && (
to this:
{onCancel && cancel && (