use select widget to render oneOf / anyOf control (#1220)

* use select widget to render oneOf / anyOf control * pass more props to widget * change schema type to number * get uiOptions to pass to widget * do not pass props to custom widget in test * update tests to actually pass custom widget
rjsf-team · Apr 5, 2019 · f8d0d45 · f8d0d45
1 parent 73b1458
commit f8d0d45
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 15 deletions.
diff --git a/src/components/fields/MultiSchemaField.js b/src/components/fields/MultiSchemaField.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import * as types from "../../types";
-import { guessType } from "../../utils";
+import { getUiOptions, getWidget, guessType } from "../../utils";
 import { isValid } from "../../validate";
 
 class AnyOfField extends Component {
@@ -85,8 +85,8 @@ class AnyOfField extends Component {
     return 0;
   }
 
-  onOptionChange = event => {
-    const selectedOption = parseInt(event.target.value, 10);
+  onOptionChange = option => {
+    const selectedOption = parseInt(option, 10);
     const { formData, onChange, options } = this.props;
 
     const newOption = options[selectedOption];
@@ -119,7 +119,7 @@ class AnyOfField extends Component {
     }
 
     this.setState({
-      selectedOption: parseInt(event.target.value, 10),
+      selectedOption: parseInt(option, 10),
     });
   };
 
@@ -141,7 +141,10 @@ class AnyOfField extends Component {
     } = this.props;
 
     const _SchemaField = registry.fields.SchemaField;
+    const { widgets } = registry;
     const { selectedOption } = this.state;
+    const { widget = "select", ...uiOptions } = getUiOptions(uiSchema);
+    const Widget = getWidget({ type: "number" }, widget, widgets);
 
     const option = options[selectedOption] || null;
     let optionSchema;
@@ -154,22 +157,24 @@ class AnyOfField extends Component {
         : Object.assign({}, option, { type: baseType });
     }
 
+    const enumOptions = options.map((option, index) => ({
+      label: option.title || `Option ${index + 1}`,
+      value: index,
+    }));
+
     return (
       <div className="panel panel-default panel-body">
         <div className="form-group">
-          <select
-            className="form-control"
+          <Widget
+            id={`${idSchema.$id}_anyof_select`}
+            schema={{ type: "number", default: 0 }}
             onChange={this.onOptionChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
             value={selectedOption}
-            id={`${idSchema.$id}_anyof_select`}>
-            {options.map((option, index) => {
-              return (
-                <option key={index} value={index}>
-                  {option.title || `Option ${index + 1}`}
-                </option>
-              );
-            })}
-          </select>
+            options={{ enumOptions }}
+            {...uiOptions}
+          />
         </div>
 
         {option !== null && (

diff --git a/test/anyOf_test.js b/test/anyOf_test.js
@@ -54,6 +54,36 @@ describe("anyOf", () => {
     expect(node.querySelectorAll("select")).to.have.length.of(1);
   });
 
+  it("should render a custom widget", () => {
+    const schema = {
+      type: "object",
+      anyOf: [
+        {
+          properties: {
+            foo: { type: "string" },
+          },
+        },
+        {
+          properties: {
+            bar: { type: "string" },
+          },
+        },
+      ],
+    };
+    const widgets = {
+      SelectWidget: () => {
+        return <section id="CustomSelect">Custom Widget</section>;
+      },
+    };
+
+    const { node } = createFormComponent({
+      schema,
+      widgets,
+    });
+
+    expect(node.querySelector("#CustomSelect")).to.exist;
+  });
+
   it("should change the rendered form when the select value is changed", () => {
     const schema = {
       type: "object",

diff --git a/test/oneOf_test.js b/test/oneOf_test.js
@@ -54,6 +54,36 @@ describe("oneOf", () => {
     expect(node.querySelectorAll("select")).to.have.length.of(1);
   });
 
+  it("should render a custom widget", () => {
+    const schema = {
+      type: "object",
+      oneOf: [
+        {
+          properties: {
+            foo: { type: "string" },
+          },
+        },
+        {
+          properties: {
+            bar: { type: "string" },
+          },
+        },
+      ],
+    };
+    const widgets = {
+      SelectWidget: () => {
+        return <section id="CustomSelect">Custom Widget</section>;
+      },
+    };
+
+    const { node } = createFormComponent({
+      schema,
+      widgets,
+    });
+
+    expect(node.querySelector("#CustomSelect")).to.exist;
+  });
+
   it("should change the rendered form when the select value is changed", () => {
     const schema = {
       type: "object",