From 526e06f23bf40eadcb5ffa60c5f127baeb42f0ab Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Sat, 9 Jan 2016 17:48:05 +0100
Subject: [PATCH] Renamed uiSchema widget to ui:widget to avoid name
 collisions.

---
 README.md                             |  6 +++---
 playground/samples/nested.js          |  2 +-
 playground/samples/numbers.js         |  6 +++---
 playground/samples/ordering.js        |  6 +++---
 playground/samples/simple.js          |  6 +++---
 playground/samples/widgets.js         |  6 +++---
 src/components/fields/BooleanField.js |  2 +-
 src/components/fields/StringField.js  |  2 +-
 test/index_test.js                    | 20 ++++++++++----------
 9 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index 1fa83157fd..fc136556bb 100644
--- a/README.md
+++ b/README.md
@@ -75,14 +75,14 @@ That should give something like this (if you use the default stylesheet):
 
 ### Alternative widgets
 
-JSONSchema is limited for describing how a given data type should be rendered as an input component, that's why this lib introduces the concept of *UI schema*. A UI schema is basically an object literal describing which UI widget should be used to render a certain field.
+JSONSchema is limited for describing how a given data type should be rendered as an input component, that's why this lib introduces the concept of *UI schema*. A UI schema is basically an object literal describing how the form should be rendered, eg. which UI widget should be used to render a certain field thanks to the `ui:widget` property:
 
 Example:
 
 ```jsx
 const uiSchema =  {
   done: {
-    widget: "radio" // could also be "select"
+    "ui:widget": "radio" // could also be "select"
   }
 };
 
@@ -176,7 +176,7 @@ const schema = {
 };
 
 const uiSchema = {
-  widget: (props) => {
+  "ui:widget": (props) => {
     return (
       <input type="text"
         className="custom"
diff --git a/playground/samples/nested.js b/playground/samples/nested.js
index 8bce1dff8b..89c1a201a5 100644
--- a/playground/samples/nested.js
+++ b/playground/samples/nested.js
@@ -39,7 +39,7 @@ module.exports = {
     tasks: {
       items: {
         details: {
-          widget: "textarea"
+          "ui:widget": "textarea"
         }
       }
     }
diff --git a/playground/samples/numbers.js b/playground/samples/numbers.js
index b7d57d5841..35997ba385 100644
--- a/playground/samples/numbers.js
+++ b/playground/samples/numbers.js
@@ -33,13 +33,13 @@ module.exports = {
   },
   uiSchema: {
     integer: {
-      widget: "updown"
+      "ui:widget": "updown"
     },
     integerRange: {
-      widget: "range"
+      "ui:widget": "range"
     },
     integerRangeSteps: {
-      widget: "range"
+      "ui:widget": "range"
     }
   },
   formData: {
diff --git a/playground/samples/ordering.js b/playground/samples/ordering.js
index b070b88a98..179db688b2 100644
--- a/playground/samples/ordering.js
+++ b/playground/samples/ordering.js
@@ -29,13 +29,13 @@ module.exports = {
   uiSchema: {
     "ui:order": ["firstName", "lastName", "age", "bio", "password"],
     age: {
-      widget: "updown"
+      "ui:widget": "updown"
     },
     bio: {
-      widget: "textarea"
+      "ui:widget": "textarea"
     },
     password: {
-      widget: "password"
+      "ui:widget": "password"
     }
   },
   formData: {
diff --git a/playground/samples/simple.js b/playground/samples/simple.js
index 3ebb047ff6..32c6a1779f 100644
--- a/playground/samples/simple.js
+++ b/playground/samples/simple.js
@@ -28,13 +28,13 @@ module.exports = {
   },
   uiSchema: {
     age: {
-      widget: "updown"
+      "ui:widget": "updown"
     },
     bio: {
-      widget: "textarea"
+      "ui:widget": "textarea"
     },
     password: {
-      widget: "password"
+      "ui:widget": "password"
     }
   },
   formData: {
diff --git a/playground/samples/widgets.js b/playground/samples/widgets.js
index 49d52f97b7..82786c327f 100644
--- a/playground/samples/widgets.js
+++ b/playground/samples/widgets.js
@@ -40,15 +40,15 @@ module.exports = {
   uiSchema: {
     boolean: {
       radio: {
-        widget: "radio"
+        "ui:widget": "radio"
       },
       select: {
-        widget: "select"
+        "ui:widget": "select"
       }
     },
     string: {
       textarea: {
-        widget: "textarea"
+        "ui:widget": "textarea"
       }
     }
   },
diff --git a/src/components/fields/BooleanField.js b/src/components/fields/BooleanField.js
index 8a20ed7292..b0dfaa0508 100644
--- a/src/components/fields/BooleanField.js
+++ b/src/components/fields/BooleanField.js
@@ -5,7 +5,7 @@ import CheckboxWidget from "./../widgets/CheckboxWidget";
 
 function BooleanField({schema, name, uiSchema, formData, required, onChange}) {
   const {title, description} = schema;
-  const {widget} = uiSchema;
+  const widget = uiSchema["ui:widget"];
   const commonProps = {
     schema,
     onChange,
diff --git a/src/components/fields/StringField.js b/src/components/fields/StringField.js
index 6e4ef9650f..9ce2ef2b0b 100644
--- a/src/components/fields/StringField.js
+++ b/src/components/fields/StringField.js
@@ -7,7 +7,7 @@ import SelectWidget from "./../widgets/SelectWidget";
 
 function StringField({schema, name, uiSchema, formData, required, onChange}) {
   const {title, description} = schema;
-  const {widget} = uiSchema;
+  const widget = uiSchema["ui:widget"];
   const commonProps = {
     schema,
     label: title || name,
diff --git a/test/index_test.js b/test/index_test.js
index e00fc0a88e..ecc3ddd09e 100644
--- a/test/index_test.js
+++ b/test/index_test.js
@@ -605,7 +605,7 @@ describe("Form", () => {
       };
 
       const uiSchema = {
-        widget: (props) => {
+        "ui:widget": (props) => {
           return (
             <input type="text"
               className="custom"
@@ -637,7 +637,7 @@ describe("Form", () => {
       describe("textarea", () => {
         const uiSchema = {
           foo: {
-            widget: "textarea"
+            "ui:widget": "textarea"
           }
         };
 
@@ -673,7 +673,7 @@ describe("Form", () => {
       describe("password", () => {
         const uiSchema = {
           foo: {
-            widget: "password"
+            "ui:widget": "password"
           }
         };
 
@@ -721,7 +721,7 @@ describe("Form", () => {
       describe("radio", () => {
         const uiSchema = {
           foo: {
-            widget: "radio"
+            "ui:widget": "radio"
           }
         };
 
@@ -768,7 +768,7 @@ describe("Form", () => {
       describe("updown", () => {
         const uiSchema = {
           foo: {
-            widget: "updown"
+            "ui:widget": "updown"
           }
         };
 
@@ -804,7 +804,7 @@ describe("Form", () => {
       describe("range", () => {
         const uiSchema = {
           foo: {
-            widget: "range"
+            "ui:widget": "range"
           }
         };
 
@@ -851,7 +851,7 @@ describe("Form", () => {
       describe("updown", () => {
         const uiSchema = {
           foo: {
-            widget: "updown"
+            "ui:widget": "updown"
           }
         };
 
@@ -887,7 +887,7 @@ describe("Form", () => {
       describe("range", () => {
         const uiSchema = {
           foo: {
-            widget: "range"
+            "ui:widget": "range"
           }
         };
 
@@ -934,7 +934,7 @@ describe("Form", () => {
       describe("radio", () => {
         const uiSchema = {
           foo: {
-            widget: "radio"
+            "ui:widget": "radio"
           }
         };
 
@@ -996,7 +996,7 @@ describe("Form", () => {
       describe("select", () => {
         const uiSchema = {
           foo: {
-            widget: "select"
+            "ui:widget": "select"
           }
         };