diff --git a/README.md b/README.md index 2cb2af3a8d..0d27e1af81 100644 --- a/README.md +++ b/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; diff --git a/src/components/fields/BooleanField.js b/src/components/fields/BooleanField.js index 4e0f43bdf3..3f6715f8af 100644 --- a/src/components/fields/BooleanField.js +++ b/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 ; + return ; } return ; } diff --git a/test/BooleanField_test.js b/test/BooleanField_test.js index 7b82a8b95d..6aa319ac6f 100644 --- a/test/BooleanField_test.js +++ b/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"]); + }); });