Allow overriding the default fields/widgets (rjsf-team#371)

Author: olzraiti

README.md

@@ -59,6 +59,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [The formContext object](#the-formcontext-object)
  - [Custom array field buttons](#custom-array-field-buttons)
  - [Custom SchemaField](#custom-schemafield)
+ - [Customizing the fields and widgets](#customizing-the-default-fields-and-widgets)
  - [Custom titles](#custom-titles)
  - [Custom descriptions](#custom-descriptions)
  - [Form data validation](#form-data-validation)
@@ -952,6 +953,49 @@ If you're curious how this could ever be useful, have a look at the [Kinto formb
 
 Props passed to a custom SchemaField are the same as [the ones passed to a custom field](#field-props).
 
+### Customizing the default fields and widgets
+
+You can override any default field and widget, including the internal widgets like the `CheckboxWidget` that `ObjectField` renders for boolean values. You can override any field and widget just by providing the customized fields/widgets in the `fields` and `widgets` props:
+
+```jsx
+
+const CustomCheckbox = function(props) {
+ return (
+ <button id="custom" className={props.value ? "checked" : "unchecked"} onClick={props.onChange(!props.value)}>
+	{props.value}
+ </button>
+ );
+};
+
+const widgets = {
+ CheckboxWidget: CustomCheckbox
+};
+
+render((
+ <Form schema={schema}
+ uiSchema={uiSchema}
+ formData={formData}
+ widgets={widgets} />
+), document.getElementById("app"));
+```
+
+This allows you to create a reusable customized form class with your custom fields and widgets:
+
+```jsx
+const customFields = {StringField: CustomString};
+const customWidgets = {CheckboxWidget: CustomCheckbox};
+
+function MyForm(props) {
+ return <Form fields={customFields} widgets={customWidgets} {...props} />;
+}
+
+render((
+ <MyForm schema={schema}
+ uiSchema={uiSchema}
+ formData={formData} />
+), document.getElementById("app"));
+```
+
 ### Custom titles
 
 You can provide your own implementation of the `TitleField` base React component for rendering any title. This is useful when you want to augment how titles are handled.

src/components/Form.js

@@ -1,15 +1,12 @@
 import React, {Component, PropTypes} from "react";
 
-import SchemaField from "./fields/SchemaField";
-import TitleField from "./fields/TitleField";
-import DescriptionField from "./fields/DescriptionField";
-
 import ErrorList from "./ErrorList";
 import {
  getDefaultFormState,
  shouldRender,
  toIdSchema,
  setState,
+ getDefaultRegistry,
 } from "../utils";
 import validateFormData from "../validate";
 
@@ -118,19 +115,11 @@ export default class Form extends Component {
  getRegistry() {
  // For BC, accept passed SchemaField and TitleField props and pass them to
  // the "fields" registry one.
- const _SchemaField = this.props.SchemaField || SchemaField;
- const _TitleField = this.props.TitleField || TitleField;
- const _DescriptionField = this.props.DescriptionField || DescriptionField;
-
- const fields = Object.assign({
- SchemaField: _SchemaField,
- TitleField: _TitleField,
- DescriptionField: _DescriptionField,
- }, this.props.fields);
+ const {fields, widgets} = getDefaultRegistry();
  return {
- fields,
+ fields: {...fields, ...this.props.fields},
+ widgets: {...widgets, ...this.props.widgets},
  FieldTemplate: this.props.FieldTemplate,
- widgets: this.props.widgets || {},
  definitions: this.props.schema.definitions || {},
  formContext: this.props.formContext || {},
  };

src/components/fields/ArrayField.js

@@ -14,8 +14,6 @@ import {
  getDefaultRegistry,
  setState
 } from "../../utils";
-import FileWidget from "./../widgets/FileWidget";
-
 
 function ArrayFieldTitle({TitleField, idSchema, title, required}) {
  if (!title) {
@@ -251,6 +249,7 @@ class ArrayField extends Component {
  const {schema, idSchema, name, disabled, readonly, autofocus} = this.props;
  const title = schema.title || name;
  const {items} = this.state;
+ const {FileWidget} = this.props.registry.widgets;
  return (
  <FileWidget
  id={idSchema && idSchema.$id}

src/components/fields/BooleanField.js

@@ -7,7 +7,6 @@ import {
  getDefaultRegistry,
  isObject,
 } from "../../utils";
-import CheckboxWidget from "./../widgets/CheckboxWidget";
 
 
 function buildOptions(schema, uiWidget) {
@@ -58,6 +57,7 @@ function BooleanField(props) {
  const Widget = getAlternativeWidget(schema, widget, widgets);
  return <Widget options={buildOptions(schema, uiSchema["ui:widget"])} {...commonProps}/>;
  }
+ const {CheckboxWidget} = registry.widgets;
  return <CheckboxWidget {...commonProps}/>;
 }
 

src/components/fields/NumberField.js

@@ -1,9 +1,9 @@
 import React, {PropTypes} from "react";
 
 import {asNumber} from "../../utils";
-import StringField from "./StringField";
 
 function NumberField(props) {
+ const {StringField} = props.registry.fields;
  return (
  <StringField {...props}
  onChange={(value) => props.onChange(asNumber(value))}/>

src/components/fields/SchemaField.js

@@ -6,21 +6,16 @@ import {
  getDefaultRegistry,
  isFilesArray
 } from "../../utils";
-import ArrayField from "./ArrayField";
-import BooleanField from "./BooleanField";
-import NumberField from "./NumberField";
-import ObjectField from "./ObjectField";
-import StringField from "./StringField";
 import UnsupportedField from "./UnsupportedField";
 
 const REQUIRED_FIELD_SYMBOL = "*";
 const COMPONENT_TYPES = {
- array: ArrayField,
- boolean: BooleanField,
- integer: NumberField,
- number: NumberField,
- object: ObjectField,
- string: StringField,
+ array: "ArrayField",
+ boolean: "BooleanField",
+ integer: "NumberField",
+ number: "NumberField",
+ object: "ObjectField",
+ string: "StringField",
 };
 
 function getFieldComponent(schema, uiSchema, fields) {
@@ -31,7 +26,8 @@ function getFieldComponent(schema, uiSchema, fields) {
  if (typeof field === "string" && field in fields) {
  return fields[field];
  }
- return COMPONENT_TYPES[schema.type] || UnsupportedField;
+ const componentName = COMPONENT_TYPES[schema.type];
+ return componentName in fields ? fields[componentName] : UnsupportedField;
 }
 
 function Label(props) {

src/components/fields/StringField.js

@@ -6,8 +6,6 @@ import {
  optionsList,
  getDefaultRegistry
 } from "../../utils";
-import TextWidget from "../widgets/TextWidget";
-import SelectWidget from "../widgets/SelectWidget";
 
 
 function StringField(props) {
@@ -39,7 +37,11 @@ function StringField(props) {
  readonly,
  formContext,
  autofocus,
+ registry,
  };
+
+ const {TextWidget, SelectWidget} = widgets;
+
  if (Array.isArray(schema.enum)) {
  const enumOptions = optionsList(schema);
  if (widget) {

src/components/widgets/AltDateTimeWidget.js

@@ -1,9 +1,8 @@
 import React, {PropTypes} from "react";
 
-import AltDateWidget from "./AltDateWidget";
-
 
 function AltDateTimeWidget(props) {
+ const {AltDateWidget} = props.registry.widgets;
  return <AltDateWidget time {...props}/>;
 }
 

src/components/widgets/AltDateWidget.js

@@ -1,7 +1,6 @@
 import React, {Component, PropTypes} from "react";
 
 import {shouldRender, parseDateString, toDateString, pad} from "../../utils";
-import SelectWidget from "../widgets/SelectWidget";
 
 
 function rangeOptions(type, start, stop) {
@@ -17,8 +16,9 @@ function readyForChange(state) {
 }
 
 function DateElement(props) {
- const {type, range, value, select, rootId, disabled, readonly, autofocus} = props;
+ const {type, range, value, select, rootId, disabled, readonly, autofocus, registry} = props;
  const id = rootId + "_" + type;
+ const {SelectWidget} = registry.widgets;
  return (
  <SelectWidget
  schema={{type: "integer"}}
@@ -101,7 +101,7 @@ class AltDateWidget extends Component {
  }
 
  render() {
- const {id, disabled, readonly, autofocus} = this.props;
+ const {id, disabled, readonly, autofocus, registry} = this.props;
  return (
  <ul className="list-inline">{
  this.dateElementProps.map((elemProps, i) => (
@@ -112,6 +112,7 @@ class AltDateWidget extends Component {
  {...elemProps}
  disabled= {disabled}
  readonly={readonly}
+ registry={registry}
  autofocus={autofocus && i === 0}/>
  </li>
  ))

src/components/widgets/BaseInput.js

@@ -12,6 +12,7 @@ function BaseInput(props) {
  options, // eslint-disable-line
  schema, // eslint-disable-line
  formContext, // eslint-disable-line
+ registry, // eslint-disable-line
  ...inputProps
  } = props;
  return (