v0.42.0

Breaking changes

1. When a text input is emptied by the user, it's value is now reset to undefined instead of being set to "" (empty string) as previously, to better match traditional text input behavior.
2. Enum widgets don't automatically select the first item by default when required anymore, so that a user interaction is needed to pick a value.

New features

• Add an array field template component (#437)
• Wrap radio and checkbox labels into span to enable styling. (#428)
• Reset text inputs value when emptied (#442)
• Add transform hook for changing errors from json schema validation (#432)
• Add a noHtml5Validate prop (#448)
• Add support for a onBlur event handler (#431)
• Allow empty option for enum fields (#451)

Bugfixes

• Fix #452: Support recursively referenced definitions. (#453)
• Fix #454: Document what master actually is, suffix its version with -dev.

v0.41.2

• Update dependencies to their latest versions. (#386)
• Fix #385: Avoid dynamic requires. (#387)
• Fix #365: Tab stop for Add button + (#392)
• Add a single field form example in the playground (#390)
• Allow using field names containing a dot character (#397)
• Updated eslint config.
• Improve checkbox and radio button styles (#403)
• Add missing proptype for disabled (#416)
• Temporary fix for #349 and facebook/react#7630 radio widget bug (#423)

v0.41.1

• Refs #341: More flexible propTypes for tpl help/description.
• Updated table of contents in the README.

v0.41.0

This release has been made possible by the combined work of @olzraiti, @maartenth, @vinhlh, @tiemevanveen , @dehli, @enjoylife, @PabloEn, @israelshirk, @sjhewitt and @rom10. Thank you folks!

Breaking changes

Support for passing DescriptionField, TitleField and SchemaField as Form props as been dropped in this release. You now have to always pass them through the fields prop.

Deprecations

• Leverage ui:options everywhere (fix #370) (#378)

There's now a unique recommended way to specify options for widgets in uiSchema, which is the ui:options directive. Previous ways are still supported, but you'll get a warning in the console if you use them.

New features

• Allow overriding the default fields/widgets (#371)
• Pass data to FieldTemplate as strings instead of as React components (#341)
• Pass schema & uiSchema to the field template component (#379)
• Add ui:order wildcard feature and improve error messages (#368)
• Add support for widget autofocus (#288)
• Array field optional sortability (#345)
• Radio widget support for integers and numbers (#325)
• Add support for inline radios and checkboxes. (fix #346) (#348)
• Added ref to FileWidget. (#355)
• Added removable and addable options for array items (#373)
• Enable Windows development (#320)

Bugfixes, enhancements

• Fix minimum/maximum==0 for UpDownWidget and RangeWidget (#344)
• Handle numbers requiring trailing zeros with more grace (#334)
• Pass empty title to TitleField instead of name (#311)
• asNumber: return undefined when value is empty string (#369)
• Use glyphicons for buttons by default. (fix #337) (#375)
• Support old versions of React (#312)

v0.40.0

• Add support for form context (#285)

The formContext object

You can provide a formContext object to the Form, which is passed down to all fields and widgets (including TitleField and DescriptionField). Useful for implementing context aware fields and widgets.

v0.39.0

• Fix #284: Introduce a field template API. (#304)

Field template

To take control over the inner organization of each field (each form row), you can define a field template for your form.

A field template is basically a React stateless component being passed field-related props so you can structure your form row as you like:

function CustomFieldTemplate(props) {
  const {id, classNames, label, help, required, description, errors, children} = props;
  return (
    <div className={classNames}>
      <label htmlFor={id}>{label}{required ? "*" : null}</label>
      {description}
      {children}
      {errors}
      {help}
    </div>
  );
}

render((
  <Form schema={schema}
        FieldTemplate={CustomFieldTemplate} />,
), document.getElementById("app"));

The following props are passed to a custom field template component:

• id: The id of the field in the hierarchy. You can use it to render a label targetting the wrapped widget;
• classNames: A string containing the base bootstrap CSS classes merged with any custom ones defined in your uiSchema;
• label: The computed label for this field, as a string;
• description: A component instance rendering the field description, if any defined (this will use any custom DescriptionField defined);
• children: The field or widget component instance for this field row;
• errors: A component instance listing any encountered errors for this field;
• help: A component instance rendering any ui:help uiSchema directive defined;
• hidden: A boolean value stating if the field should be hidden;
• required: A boolean value stating if the field is required;
• readonly: A boolean value stating if the field is read-only;
• displayLabel: A boolean value stating if the label should be rendered or not. This is useful for nested fields in arrays where you don't want to clutter the UI.

Note: you can only define a single field template for a form. If you need many, it's probably time to look for custom fields instead.

v0.38.1

• Remove obsolete mention of the custom widget placeholder prop.
• Fix HiddenWidget error when value is undefined (#277)
• Fix SchemaField to support customized DescriptionField (#292)
• Ensure arrays of numbers are properly propagated to formData (#298)
• Fix #300: Properly reset a date widget value. (#303)

v0.38.0

• Introduce the showErrorList prop for hiding the top error list (#269)

Error List Display

To disable rendering of the error list at the top of the form, you can set the showErrorList prop to false. Doing so will still validate the form, but only the inline display will show.

render((
  <Form schema={schema}
        showErrorList={false}/>
), document.getElementById("app"));

v0.37.0

• Fix #266: Introduce the ui:placeholder uiSchema directive. (#267)

Breaking change

We were previsouly using the description schema property to fill the placeholder attribute of text inputs; this is no more the case, you'll have to use the newly introduced ui:placeholder uiSchema directive instead.

Placeholders

Text fields can benefit from placeholders by using the ui:placeholder uiSchema directive:

const schema = {type: "string", format: "uri"};
const uiSchema = {
  "ui:placeholder": "http://"
};

v0.36.1

• Fix duplicate descriptions. (#265)