Merge pull request #81 from mozilla-services/boolean-labels

[Experiment] Ref #80: Add support for enumNames to boolean widgets.

README.md

@@ -165,6 +165,8 @@ Here's a list of supported alternative widgets for different JSONSchema data typ
   * `select`: a select box with `true` and `false` as options;
   * by default, a checkbox is used
 
+> Note: To set the labels for a boolean field, instead of using `true` and `false` you can set `enumNames` in your schema. Note that `enumNames` belongs in your `schema`, not the `uiSchema`, and the order is always `[true, false]`.
+
 #### For `string` fields
 
   * `textarea`: a `textarea` element;

src/components/fields/BooleanField.js

@@ -3,6 +3,14 @@ import React, { PropTypes } from "react";
 import { defaultFieldValue, getAlternativeWidget, optionsList } from "../../utils";
 import CheckboxWidget from "./../widgets/CheckboxWidget";
 
+
+function buildOptions(schema) {
+  return optionsList(Object.assign({
+    enumNames: ["true", "false"],
+    enum: [true, false]
+  }, {enumNames: schema.enumNames}));
+}
+
 function BooleanField(props) {
   const {schema, name, uiSchema, formData, widgets, required, onChange} = props;
   const {title, description} = schema;
@@ -18,7 +26,7 @@ function BooleanField(props) {
   };
   if (widget) {
     const Widget = getAlternativeWidget(schema.type, widget, widgets);
-    return <Widget options={optionsList({enum: [true, false]})} {... commonProps} />;
+    return <Widget options={buildOptions(schema)} {... commonProps} />;
   }
   return <CheckboxWidget {...commonProps} />;
 }

test/BooleanField_test.js

@@ -54,4 +54,26 @@ describe("BooleanField", () => {
     expect(node.querySelector(".field input").checked)
       .eql(true);
   });
+
+  it("should support enumNames for radio widgets", () => {
+    const {node} = createFormComponent({schema: {
+      type: "boolean",
+      enumNames: ["Yes", "No"],
+    }, formData: true, uiSchema: {"ui:widget": "radio"}});
+
+    const labels = [].map.call(node.querySelectorAll(".field-radio-group label"),
+                               label => label.textContent);
+    expect(labels).eql(["Yes", "No"]);
+  });
+
+  it("should support enumNames for select", () => {
+    const {node} = createFormComponent({schema: {
+      type: "boolean",
+      enumNames: ["Yes", "No"],
+    }, formData: true, uiSchema: {"ui:widget": "select"}});
+
+    const labels = [].map.call(node.querySelectorAll(".field option"),
+                               label => label.textContent);
+    expect(labels).eql(["Yes", "No"]);
+  });
 });