Fixes #9: Default object field property labels.

Author: n1k0

src/components/fields/ArrayField.js

@@ -62,12 +62,12 @@ class ArrayField extends Component {
   }
 
   render() {
-    const {schema, uiSchema} = this.props;
+    const {schema, uiSchema, name} = this.props;
     const {items} = this.state;
     return (
       <fieldset
         className={`field field-array field-array-of-${schema.items.type}`}>
-        <legend>{schema.title}</legend>
+        <legend>{schema.title || name}</legend>
         {schema.description ? <div>{schema.description}</div> : null}
         <div className="array-item-list">{
           items.map((item, index) => {

src/components/fields/BooleanField.js

@@ -3,13 +3,13 @@ import React, { PropTypes } from "react";
 import { defaultFieldValue, getAlternativeWidget } from "../../utils";
 import CheckboxField from "./../widgets/CheckboxWidget";
 
-function BooleanField({schema, uiSchema, formData, required, onChange}) {
+function BooleanField({schema, name, uiSchema, formData, required, onChange}) {
   const {title, description} = schema;
   const {widget} = uiSchema;
   const commonProps = {
     type: schema.type,
     onChange,
-    label: title,
+    label: title || name,
     placeholder: description,
     defaultValue: schema.default,
     value: defaultFieldValue(formData, schema),

src/components/fields/StringField.js

@@ -5,12 +5,12 @@ import TextWidget from "./../widgets/TextWidget";
 import SelectWidget from "./../widgets/SelectWidget";
 
 
-function StringField({schema, uiSchema, formData, required, onChange}) {
+function StringField({schema, name, uiSchema, formData, required, onChange}) {
   const {type, title, description} = schema;
   const {widget} = uiSchema;
   const commonProps = {
     type: type,
-    label: title,
+    label: title || name,
     placeholder: description,
     onChange,
     value: defaultFieldValue(formData, schema),

test/index_test.js

@@ -433,7 +433,7 @@ describe("Form", () => {
       },
       properties: {
         foo: {
-          title: "foo",
+          title: "Foo",
           type: "string",
         },
         bar: {
@@ -442,20 +442,27 @@ describe("Form", () => {
       }
     };
 
-    it("should render an fieldset", () => {
+    it("should render a fieldset", () => {
       const {node} = createComponent({schema});
 
       expect(node.querySelectorAll("fieldset"))
         .to.have.length.of(1);
     });
 
-    it("should render an fieldset legend", () => {
+    it("should render a fieldset legend", () => {
       const {node} = createComponent({schema});
 
       expect(node.querySelector("fieldset > legend").textContent)
         .eql("my object");
     });
 
+    it("should render a default property label", () => {
+      const {node} = createComponent({schema});
+
+      expect(node.querySelector(".field-boolean label > span").textContent)
+        .eql("bar");
+    });
+
     it("should render a string property", () => {
       const {node} = createComponent({schema});
 
@@ -486,7 +493,7 @@ describe("Form", () => {
       expect(node.querySelector("input[type=text]").getAttribute("required"))
         .eql("");
       expect(node.querySelector(".field label").textContent)
-        .eql("foo*");
+        .eql("Foo*");
     });
 
     it("should fill fields with form data", () => {
@@ -638,8 +645,10 @@ describe("Form", () => {
 
         it("should render boolean option labels", () => {
           const {node} = createComponent({schema, uiSchema});
-          const labels = [].map.call(node.querySelectorAll("label span"),
-                                     node => node.textContent);
+          const labels = [].map.call(
+            node.querySelectorAll(".field-radio-group label > span"),
+            node => node.textContent);
+
           expect(labels)
             .eql(["true", "false"]);
         });