rjsf-team · mplis-jetsetter · Aug 5, 2016 · Aug 15, 2016
diff --git a/playground/app.js b/playground/app.js
@@ -7,6 +7,8 @@ import { shouldRender } from "../src/utils";
 import { samples } from "./samples";
 import Form from "../src";
 
+import SchemaField from "../src/components/fields/SchemaField"
+
 // Import a few CodeMirror themes; these are used to match alternative
 // bootstrap ones.
 import "codemirror/lib/codemirror.css";
@@ -161,6 +163,51 @@ class GeoPosition extends Component {
   }
 }
 
+class MultiArray extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {items: [], formData: props.formData};
+  }
+
+  onClick = (e) => {
+    let value = e.target.value;
+    let selectedSchema = this.props.schema.items.oneOf.find(i => i.title === value);
+
+    let newItems = this.state.items;
+    newItems.push(selectedSchema);
+    this.setState({items: newItems});
+  }
+
+  renderOptions() {
+    return this.props.schema.items.oneOf.map(option => <button key={option.title} onClick={this.onClick} type="button" value={option.title} className="list-group-item">{option.title}</button>)
+  }
+
+  renderWidgets() {
+    let schema = {
+      type: 'array',
+      items: this.state.items
+    };
+    let {idSchema, registry, formData, onChange, errorSchema} = this.props;
+    return <SchemaField errorSchema={errorSchema} formData={formData} schema={schema} onChange={onChange} idSchema={idSchema} registry={this.props.registry}/>
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderWidgets()}
+        <div className="btn-group">
+          <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Add Widget <span className="caret"></span>
+          </button>
+          <ul className="dropdown-menu list-group" style={{padding: 0, margin: 0, border: 0}}>
+            {this.renderOptions()}
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
 class Editor extends Component {
   constructor(props) {
     super(props);
@@ -357,7 +404,7 @@ class App extends Component {
               uiSchema={uiSchema}
               formData={formData}
               onChange={this.onFormDataChange}
-              fields={{geo: GeoPosition}}
+              fields={{geo: GeoPosition, multiArray: MultiArray}}
               validate={validate}
               onError={log("errors")} />}
         </div>

diff --git a/playground/index.html b/playground/index.html
@@ -6,6 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>react-jsonschema-form playground</title>
   <link rel="stylesheet" id="theme" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
   <script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
 </head>
 <body>

diff --git a/playground/samples/index.js b/playground/samples/index.js
@@ -11,6 +11,7 @@ import large from "./large";
 import date from "./date";
 import validation from "./validation";
 import files from "./files";
+import oneOf from "./oneOf";
 
 export const samples = {
   Simple: simple,
@@ -26,4 +27,5 @@ export const samples = {
   "Date & time": date,
   Validation: validation,
   Files: files,
+  OneOf: oneOf
 };
diff --git a/playground/samples/oneOf.js b/playground/samples/oneOf.js
@@ -0,0 +1,39 @@
+module.exports = {
+  schema: {
+    "type": "object",
+    "properties": {
+      "multiArray": {
+        "type": "array",
+        "title": "OneOf Array",
+        "items": {
+          "oneOf": [
+            {
+              "type": "string",
+              "title": "String"
+            },
+            {
+              "type": "number",
+              "title": "Number"
+            },
+            {
+              "type": "object",
+              "title": "Object",
+              "properties": {
+                "number": {
+                  "type": "number",
+                  "title": "Number"
+                },
+                "boolean": {
+                  "type": "boolean",
+                  "title": "boolean"
+                }
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  uiSchema: {multiArray: {"ui:field": "multiArray"}},
+  formData: {}
+};