Add custom widget Array even without enums props

[Paul-Vandell]

Prerequisites

• I have read the documentation;
• I will extends this talk Array of strings using custom widget? #774.

Version

"react-jsonschema-form": "^1.0.3"

Description

Hey there and THX .... no a really big thx for this package.
I would like talking about adding component Widget that manage itself Array item string | number | ...
But keep the json-schema validate future data like `["foo", "bar"]. All this things without specified enum data cause :

• They are too much (Dates)
• They are not yet know maybe. (Async Data)

Actual behavior

Take this simple example :
I use this package to get an Array of string representing some dates :
FlatPickr
so a simple schema will be :

const schema = {
  DateArray: {
      type: "array",
      minItems: 1,
      uniqueItems: true,
      items: { type: "string" }
    }
}
const uiSchema = {
  DateArray: {
    "ui-widget": "DateArrayWidget",
  }
}

But this will create a multiline DateField with (+) and (-) button... I'm not expected this. As you can see, even if i specified the uniqueItems property to true.

Expected behavior

I expected only one DateComponent where i can select multiple date Right ? Even if items props contain only the type props;

Personal Solution Found

So the only solution that i found is to Customize the ArrayField if enum property is empty and if uniqueItems is specified. It is maybe not the right way but i share for anyone get this issue:

import * as React from "react";
import { widgets } from "../autoform/widgets";
const ArrayField = require("react-jsonschema-form/lib/components/fields/ArrayField")
  .default;

const MyArrayField = props => {
  const { schema, idSchema, uiSchema, formData } = props;
  if (!schema.items.enum && schema.uniqueItems) {
    const Widget = widgets[uiSchema["ui-widget"]];
    const options = widgets[uiSchema["ui-options"]];
    if (Widget)
      return (
        <Widget
          id={idSchema && idSchema.$id}
          multiple={true}
          options={options}
          value={formData}
          {...props}
        />
      );
  }
  return <ArrayField {...props} />;
};
const fields =  {"ArrayField": MyArrayField}
*** Some where ...
<JsonForm ... ... fields={fields} />

It is the much cleaner way that i Found but maybe i wrong. But at this time it is working for my needs...

Question & Suggestion

Can we have a simplest way to handle this type of component in your code ?
Do you have a better solution for this request ?
And then, add it to the documentation to avoid frustation development... because this package is great. Ajv is fast & json-schema should be ( for me ) the must used verification for front & back end development.

[epicfaace]

@Vandell63 can you provide a JSFiddle / Codepen demonstrating how you would like the field to look like?

[epicfaace]

I think #1010 will solve this issue