Add support for form context (rjsf-team#285)

Author: olzraiti

README.md

@@ -50,6 +50,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [Custom field components](#custom-field-components)
  - [Field props](#field-props)
  - [The registry object](#the-registry-object)
+ - [The formContext object](#the-formcontext-object)
  - [Custom SchemaField](#custom-schemafield)
  - [Custom titles](#custom-titles)
  - [Custom descriptions](#custom-descriptions)
@@ -592,6 +593,7 @@ The following props are passed to a custom field template component:
 - `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.
+- `formContext`: The `formContext` object that you passed to Form.
 
 > 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](#custom-field-components) instead.
 
@@ -643,6 +645,7 @@ The following props are passed to custom widget components:
 - `readonly`: `true` if the widget is read-only;
 - `onChange`: The value change event handler; call it with the new value everytime it changes;
 - `options`: A map of options passed as a prop to the component (see [Custom widget options](#custom-widget-options)).
+- `formContext`: The `formContext` object that you passed to Form.
 
 > Note: Prior to v0.35.0, the `options` prop contained the list of options (`label` and `value`) for `enum` fields. Since v0.35.0, it now exposes this list as the `enumOptions` property within the `options` object.
 
@@ -769,7 +772,7 @@ render((
 ), document.getElementById("app"));
 ```
 
-> Note: Registered fields can be reused accross the entire schema.
+> Note: Registered fields can be reused across the entire schema.
 
 #### Field props
 
@@ -781,6 +784,7 @@ A field component will always be passed the following props:
  - `formData`: The data for this field;
  - `errorSchema`: The tree of errors for this field and its children;
  - `registry`: A [registry](#the-registry-object) object (read next).
+ - `formContext`: A [formContext](#the-formcontext-object) object (read next next).
 
 #### The `registry` object
 
@@ -789,9 +793,14 @@ The `registry` is an object containing the registered custom fields and widgets
  - `fields`: The [custom registered fields](#custom-field-components). By default this object contains the standard `SchemaField`, `TitleField` and `DescriptionField` components;
  - `widgets`: The [custom registered widgets](#custom-widget-components), if any;
  - `definitions`: The root schema [definitions](#schema-definitions-and-references), if any.
+ - `formContext`: The [formContext](#the-formcontext-object) object.
 
 The registry is passed down the component tree, so you can access it from your custom field and `SchemaField` components.
 
+#### The `formContext` object
+
+You can provide a `formContext` object to the Form, which is passed down to all fields and widgets (including [TitleField](#custom-titles) and [DescriptionField](#custom-descriptions)). Useful for implementing context aware fields and widgets.
+
 ### Custom SchemaField
 
 **Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.

src/components/Form.js

@@ -132,6 +132,7 @@ export default class Form extends Component {
  FieldTemplate: this.props.FieldTemplate,
  widgets: this.props.widgets || {},
  definitions: this.props.schema.definitions || {},
+ formContext: this.props.formContext || {},
  };
  }
 
@@ -211,7 +212,6 @@ if (process.env.NODE_ENV !== "production") {
  noValidate: PropTypes.bool,
  liveValidate: PropTypes.bool,
  safeRenderCompletion: PropTypes.bool,
+ formContext: PropTypes.object,
  };
 }
-
-export default Form;

src/components/fields/ArrayField.js

@@ -410,7 +410,8 @@ if (process.env.NODE_ENV !== "production") {
  ])).isRequired,
  fields: PropTypes.objectOf(PropTypes.func).isRequired,
  definitions: PropTypes.object.isRequired,
- })
+ formContext: PropTypes.object.isRequired
+ }),
  };
 }
 

src/components/fields/BooleanField.js

@@ -32,7 +32,7 @@ function BooleanField(props) {
  onChange
  } = props;
  const {title} = schema;
- const {widgets} = registry;
+ const {widgets, formContext} = registry;
  const widget = uiSchema["ui:widget"];
  const commonProps = {
  schema,
@@ -43,6 +43,8 @@ function BooleanField(props) {
  required,
  disabled,
  readonly,
+ registry,
+ formContext,
  };
  if (widget) {
  const Widget = getAlternativeWidget(schema, widget, widgets);
@@ -68,6 +70,7 @@ if (process.env.NODE_ENV !== "production") {
  ])).isRequired,
  fields: PropTypes.objectOf(PropTypes.func).isRequired,
  definitions: PropTypes.object.isRequired,
+ formContext: PropTypes.object.isRequired,
  })
  };
 }

src/components/fields/DescriptionField.js

@@ -18,7 +18,7 @@ if (process.env.NODE_ENV !== "production") {
  description: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.element,
- ]),
+ ])
  };
 }
 

src/components/fields/NumberField.js

@@ -18,6 +18,7 @@ if (process.env.NODE_ENV !== "production") {
  onChange: PropTypes.func.isRequired,
  formData: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  required: PropTypes.bool,
+ formContext: PropTypes.object.isRequired,
  };
 }
 

src/components/fields/ObjectField.js

@@ -93,7 +93,7 @@ class ObjectField extends Component {
  disabled,
  readonly
  } = this.props;
- const {definitions, fields} = this.props.registry;
+ const {definitions, fields, formContext} = this.props.registry;
  const {SchemaField, TitleField, DescriptionField} = fields;
  const schema = retrieveSchema(this.props.schema, definitions);
  const title = schema.title || name;
@@ -117,12 +117,13 @@ class ObjectField extends Component {
  {title ? <TitleField
  id={`${idSchema.$id}__title`}
  title={title}
- required={required} /> : null}
+ required={required}
+ formContext={formContext}/> : null}
  {schema.description ?
  <DescriptionField
  id={`${idSchema.$id}__description`}
  description={schema.description}
- /> : null}
+  formContext={formContext} /> : null}
  {
  orderedProperties.map((name, index) => {
  return (
@@ -163,6 +164,7 @@ if (process.env.NODE_ENV !== "production") {
  ])).isRequired,
  fields: PropTypes.objectOf(PropTypes.func).isRequired,
  definitions: PropTypes.object.isRequired,
+ formContext: PropTypes.object.isRequired,
  })
  };
 }

src/components/fields/SchemaField.js

@@ -115,6 +115,7 @@ if (process.env.NODE_ENV !== "production") {
  required: PropTypes.bool,
  readonly: PropTypes.bool,
  displayLabel: PropTypes.bool,
+ formContext: PropTypes.object,
  };
 }
 
@@ -127,7 +128,7 @@ DefaultTemplate.defaultProps = {
 
 function SchemaField(props) {
  const {uiSchema, errorSchema, idSchema, name, required, registry} = props;
- const {definitions, fields, FieldTemplate = DefaultTemplate} = registry;
+ const {definitions, fields, formContext, FieldTemplate = DefaultTemplate} = registry;
  const schema = retrieveSchema(props.schema, definitions);
  const FieldComponent = getFieldComponent(schema, uiSchema, fields);
  const {DescriptionField} = fields;
@@ -156,7 +157,8 @@ function SchemaField(props) {
  <FieldComponent {...props}
  schema={schema}
  disabled={disabled}
- readonly={readonly} />
+ readonly={readonly}
+ formContext={formContext} />
  );
 
  const {type} = schema;
@@ -175,7 +177,9 @@ function SchemaField(props) {
  ].join(" ").trim();
 
  const fieldProps = {
- description: <DescriptionField id={id + "__description"} description={description} />,
+ description: <DescriptionField id={id + "__description"}
+ description={description}
+ formContext={formContext} />,
  help: <Help help={help} />,
  errors: <ErrorList errors={errors} />,
  id,
@@ -185,6 +189,7 @@ function SchemaField(props) {
  readonly,
  displayLabel,
  classNames,
+ formContext,
  };
 
  return <FieldTemplate {...fieldProps}>{field}</FieldTemplate>;
@@ -214,6 +219,7 @@ if (process.env.NODE_ENV !== "production") {
  fields: PropTypes.objectOf(PropTypes.func).isRequired,
  definitions: PropTypes.object.isRequired,
  FieldTemplate: PropTypes.func,
+ formContext: PropTypes.object.isRequired,
  })
  };
 }

src/components/fields/StringField.js

@@ -24,7 +24,7 @@ function StringField(props) {
  onChange
  } = props;
  const {title} = schema;
- const {widgets} = registry;
+ const {widgets, formContext} = registry;
  const widget = uiSchema["ui:widget"] || schema.format;
  const placeholder = uiSchema["ui:placeholder"] || "";
  const commonProps = {
@@ -36,6 +36,7 @@ function StringField(props) {
  required,
  disabled,
  readonly,
+ formContext,
  };
  if (Array.isArray(schema.enum)) {
  const enumOptions = optionsList(schema);
@@ -69,7 +70,9 @@ if (process.env.NODE_ENV !== "production") {
  ])).isRequired,
  fields: PropTypes.objectOf(PropTypes.func).isRequired,
  definitions: PropTypes.object.isRequired,
+ formContext: PropTypes.object.isRequired,
  }),
+ formContext: PropTypes.object.isRequired,
  required: PropTypes.bool,
  disabled: PropTypes.bool,
  readonly: PropTypes.bool,

src/components/widgets/BaseInput.js

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