Attempt to have a dynamic SchemaField component

Author: almet

src/components/Form.js

@@ -1,8 +1,7 @@
 import React, { Component, PropTypes } from "react";
 import { Validator } from "jsonschema";
 
-import { getDefaultFormState } from "../utils";
-import SchemaField from "./fields/SchemaField";
+import { getDefaultFormState, getSchemaField } from "../utils";
 import ErrorList from "./ErrorList";
 
 
@@ -31,6 +30,13 @@ export default class Form extends Component {
  };
  }
 
+ getChildContext() {
+ const SchemaField = getSchemaField(this.props);
+ return {
+ schemaField: SchemaField
+ };
+ }
+
  validate(formData) {
  const validator = new Validator();
  return validator.validate(formData, this.props.schema).errors;
@@ -78,6 +84,8 @@ export default class Form extends Component {
  render() {
  const {schema, uiSchema} = this.props;
  const {formData} = this.state;
+ const SchemaField = getSchemaField(this.props, this.context);
+ console.log("THIS IS FORM", SchemaField);
  return (
  <form className="rjsf" onSubmit={this.onSubmit.bind(this)}>
  {this.renderErrors()}
@@ -103,4 +111,8 @@ if (process.env.NODE_ENV !== "production") {
  };
 }
 
+Form.childContextTypes = {
+ schemaField: PropTypes.oneOfType([Component, Function])
+};
+
 export default Form;

src/components/fields/ArrayField.js

@@ -1,7 +1,6 @@
 import React, { Component, PropTypes } from "react";
 
 import { getDefaultFormState } from "../../utils";
-import SchemaField from "./SchemaField";
 
 
 class ArrayField extends Component {
@@ -65,6 +64,8 @@ class ArrayField extends Component {
  const {schema, uiSchema, name} = this.props;
  const title = schema.title || name;
  const {items} = this.state;
+ const SchemaField = this.context.schemaField;
+ console.log("In ArrayField, got", SchemaField);
  return (
  <fieldset
  className={`field field-array field-array-of-${schema.items.type}`}>
@@ -80,7 +81,8 @@ class ArrayField extends Component {
  uiSchema={uiSchema.items}
  formData={items[index]}
  required={this.isItemRequired(schema.items)}
- onChange={this.onChange.bind(this, index)} />
+ onChange={this.onChange.bind(this, index)}
+ schemaField={SchemaField}/>
  <p className="array-item-remove">
  <button type="button"
  onClick={this.onDropClick.bind(this, index)}>-</button></p>
@@ -105,4 +107,8 @@ if (process.env.NODE_ENV !== "production") {
  };
 }
 
+ArrayField.childContextTypes = {
+ schemaField: PropTypes.oneOfType([Component, Function])
+};
+
 export default ArrayField;

src/components/fields/ObjectField.js

@@ -1,7 +1,6 @@
 import React, { Component, PropTypes } from "react";
 
 import { getDefaultFormState } from "../../utils";
-import SchemaField from "./SchemaField";
 
 
 class ObjectField extends Component {
@@ -40,6 +39,7 @@ class ObjectField extends Component {
  render() {
  const {schema, uiSchema, name} = this.props;
  const title = name || schema.title;
+ const SchemaField = this.context.schemaField;
  return (
  <fieldset>
  {title ? <legend>{title}</legend> : null}
@@ -72,4 +72,8 @@ if (process.env.NODE_ENV !== "production") {
  };
 }
 
+ObjectField.childContextTypes = {
+ schemaField: PropTypes.oneOfType([Component, Function])
+};
+
 export default ObjectField;

src/utils.js

@@ -4,6 +4,7 @@ import UpDownWidget from "./components/widgets/UpDownWidget";
 import RangeWidget from "./components/widgets/RangeWidget";
 import SelectWidget from "./components/widgets/SelectWidget";
 import TextareaWidget from "./components/widgets/TextareaWidget";
+import SchemaField from "./components/fields/SchemaField";
 
 
 const altWidgetMap = {
@@ -80,3 +81,10 @@ export function asNumber(value) {
  const valid = typeof n === "number" && !Number.isNaN(n);
  return valid ? n : value;
 }
+
+export function getSchemaField(props, context) {
+ if (props == undefined) {
+ return SchemaField;
+ }
+ return props.hasOwnProperty("schemaField") ? props.schemaField : SchemaField;
+}

test/index_test.js

@@ -1252,7 +1252,7 @@ describe("Form", () => {
  });
 
  describe("array level", () => {
- it("should update form state from new formData prop value", () => {
+ it.only("should update form state from new formData prop value", () => {
  const schema = {
  type: "array",
  items: {