Repository: mozilla-services/react-jsonschema-form
Pull request #741 (2017-10-26 04:36:28)

fix: Pass `disabled` prop to `FieldTemplate`.
If you want to change how your FieldTemplate is rendered based on
ui:disabled, you currently have to check `uiSchema["ui:disabled"]`,
which is unlike the pattern for `readonly` and other known `ui:*`
settings.

### Reasons for making this change

`ui:readonly -> props.readonly` in `FieldTemplate`, but `ui:disabled` does not. This changes that.

### Checklist

* [ ] **I'm updating documentation**
  - [ ] I've checked the rendering of the Markdown text I've added
  - [ ] If I'm adding a new section, I've updated the Table of Content
* [x] **I'm adding or updating code**
  - [x] I've added and/or updated tests
  - [x] I've updated docs if needed
  - [x] I've run `npm run cs-format` on my branch to conform my code to [prettier](https://github.com/prettier/prettier) coding style
* [ ] **I'm adding a new feature**
  - [ ] I've updated the playground with an example use of the feature



Patch:
diff --git a/README.md b/README.md
index b0faf4d32..ecf859c25 100644
--- a/README.md
+++ b/README.md
@@ -86,7 +86,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
   - [Property dependencies](#property-dependencies)
     - [Unidirectional](#unidirectional)
     - [Bidirectional](#bidirectional)
-  - [Schema dependencies](#schema-depdencies)
+  - [Schema dependencies](#schema-dependencies)
     - [Conditional](#conditional)
     - [Dynamic](#dynamic)
   - [JSON Schema supporting status](#json-schema-supporting-status)
@@ -201,7 +201,7 @@ WARNING: If you have situations where your parent component can re-render, make
 You can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted and its data are valid. It will be passed a result object having a `formData` attribute, which is the valid form data you're usually after:
 
 ```js
-const onSubmit = ({formData}) => console.log("yay I'm valid!");
+const onSubmit = ({form}) => console.log("Data submitted: "+form.formData);
 
 render((
   <Form schema={schema}
@@ -849,6 +849,7 @@ The following props are passed to a custom field template component:
 - `hidden`: A boolean value stating if the field should be hidden.
 - `required`: A boolean value stating if the field is required.
 - `readonly`: A boolean value stating if the field is read-only.
+- `disabled`: A boolean value stating if the field is disabled.
 - `displayLabel`: A boolean value stating if the label should be rendered or not. This is useful for nested fields in arrays where you don't want to clutter the UI.
 - `fields`: An array containing all Form's fields including your [custom fields](#custom-field-components) and the built-in fields.
 - `schema`: The schema object for this field.
@@ -1671,7 +1672,7 @@ This component follows [JSON Schema](http://json-schema.org/documentation.html)
     This keyword works when `items` is an array. `additionalItems: true` is not supported because there's no widget to represent an item of any type. In this case it will be treated as no additional items allowed. `additionalItems` being a valid schema is supported.
 * `anyOf`, `allOf`, and `oneOf`, or multiple `types` (i.e. `"type": ["string", "array"]`
     Nobody yet has come up with a PR that adds this feature with a simple and easy-to-understand UX.
-    You can use `oneOf` with [schema dependencies](#schema-depdencies) to dynamically add schema properties based on input data but this feature does not bring general support for `oneOf` elsewhere in a schema.
+    You can use `oneOf` with [schema dependencies](#schema-dependencies) to dynamically add schema properties based on input data but this feature does not bring general support for `oneOf` elsewhere in a schema.
 
 ## Tips and tricks
 
@@ -1743,7 +1744,7 @@ $ git push --tags origin
 
 ### Q: Does rjsf support `oneOf`, `anyOf`, multiple types in an array, etc.?
 
-A: Not yet (except for a special case where you can use `oneOf` in [schema dependencies](#schema-depdencies)), but perhaps you will be the person whose PR will finally add the feature in a way that gets merged. For inspiration, see [#329](https://github.com/mozilla-services/react-jsonschema-form/pull/329) or [#417](https://github.com/mozilla-services/react-jsonschema-form/pull/417). See also: [#52](https://github.com/mozilla-services/react-jsonschema-form/issues/52), [#151](https://github.com/mozilla-services/react-jsonschema-form/issues/151), [#171](https://github.com/mozilla-services/react-jsonschema-form/issues/171), [#200](https://github.com/mozilla-services/react-jsonschema-form/issues/200), [#282](https://github.com/mozilla-services/react-jsonschema-form/issues/282), [#302](https://github.com/mozilla-services/react-jsonschema-form/pull/302), [#330](https://github.com/mozilla-services/react-jsonschema-form/issues/330), [#430](https://github.com/mozilla-services/react-jsonschema-form/issues/430), [#522](https://github.com/mozilla-services/react-jsonschema-form/issues/522), [#538](https://github.com/mozilla-services/react-jsonschema-form/issues/538), [#551](https://github.com/mozilla-services/react-jsonschema-form/issues/551), [#552](https://github.com/mozilla-services/react-jsonschema-form/issues/552), or [#648](https://github.com/mozilla-services/react-jsonschema-form/issues/648).
+A: Not yet (except for a special case where you can use `oneOf` in [schema dependencies](#schema-dependencies)), but perhaps you will be the person whose PR will finally add the feature in a way that gets merged. For inspiration, see [#329](https://github.com/mozilla-services/react-jsonschema-form/pull/329) or [#417](https://github.com/mozilla-services/react-jsonschema-form/pull/417). See also: [#52](https://github.com/mozilla-services/react-jsonschema-form/issues/52), [#151](https://github.com/mozilla-services/react-jsonschema-form/issues/151), [#171](https://github.com/mozilla-services/react-jsonschema-form/issues/171), [#200](https://github.com/mozilla-services/react-jsonschema-form/issues/200), [#282](https://github.com/mozilla-services/react-jsonschema-form/issues/282), [#302](https://github.com/mozilla-services/react-jsonschema-form/pull/302), [#330](https://github.com/mozilla-services/react-jsonschema-form/issues/330), [#430](https://github.com/mozilla-services/react-jsonschema-form/issues/430), [#522](https://github.com/mozilla-services/react-jsonschema-form/issues/522), [#538](https://github.com/mozilla-services/react-jsonschema-form/issues/538), [#551](https://github.com/mozilla-services/react-jsonschema-form/issues/551), [#552](https://github.com/mozilla-services/react-jsonschema-form/issues/552), or [#648](https://github.com/mozilla-services/react-jsonschema-form/issues/648).
 
 ### Q: Will react-jsonschema-form support Material, Ant-Design, Foundation, or [some other specific widget library or frontend style]?
 
diff --git a/package.json b/package.json
index f18bddfef..3a868df3e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-jsonschema-form",
-  "version": "0.51.0",
+  "version": "1.0.0",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "build:readme": "toctoc README.md -w",
@@ -78,7 +78,7 @@
     "json-loader": "^0.5.7",
     "lint-staged": "^3.3.1",
     "mocha": "^2.5.3",
-    "prettier": "^1.7.2",
+    "prettier": "^1.8.2",
     "react": "^15.5.0",
     "react-addons-test-utils": "^15.3.2",
     "react-codemirror2": "^2.0.2",
diff --git a/playground/app.js b/playground/app.js
index af7e54a55..e7fd1ccc8 100644
--- a/playground/app.js
+++ b/playground/app.js
@@ -460,13 +460,16 @@ class App extends Component {
               formData={formData}
               onChange={this.onFormDataChange}
               onSubmit={({ formData }) =>
-                console.log("submitted formData", formData)}
+                console.log("submitted formData", formData)
+              }
               fields={{ geo: GeoPosition }}
               validate={validate}
               onBlur={(id, value) =>
-                console.log(`Touched ${id} with value ${value}`)}
+                console.log(`Touched ${id} with value ${value}`)
+              }
               onFocus={(id, value) =>
-                console.log(`Focused ${id} with value ${value}`)}
+                console.log(`Focused ${id} with value ${value}`)
+              }
               transformErrors={transformErrors}
               onError={log("errors")}>
               <div className="row">
diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js
index 6ab79bb66..4c9b109cb 100644
--- a/src/components/fields/SchemaField.js
+++ b/src/components/fields/SchemaField.js
@@ -244,6 +244,7 @@ function SchemaFieldRender(props) {
     label,
     hidden,
     required,
+    disabled,
     readonly,
     displayLabel,
     classNames,
diff --git a/webpack.config.dist.js b/webpack.config.dist.js
index 3f9d4d9b9..6ee503b56 100644
--- a/webpack.config.dist.js
+++ b/webpack.config.dist.js
@@ -1,3 +1,4 @@
+var path = require("path");
 var webpack = require("webpack");
 
 module.exports = {
@@ -32,6 +33,15 @@ module.exports = {
       {
         test: /\.js$/,
         loaders: ["babel"],
+      },
+      {
+        test: /\.json$/,
+        loader:"json-loader",
+        include: [
+          path.join(__dirname, "css"),
+          path.join(__dirname, "playground"),
+          path.join(__dirname, "node_modules"),
+        ],
       }
     ]
   }


Test patch:
diff --git a/test/FieldTemplate_test.js b/test/FieldTemplate_test.js
new file mode 100644
index 000000000..cd6d288b5
--- /dev/null
+++ b/test/FieldTemplate_test.js
@@ -0,0 +1,40 @@
+import React from "react";
+
+import { expect } from "chai";
+import { createFormComponent, createSandbox } from "./test_utils";
+
+describe("FieldTemplate", () => {
+  let sandbox;
+
+  beforeEach(() => {
+    sandbox = createSandbox();
+  });
+
+  afterEach(() => {
+    sandbox.restore();
+  });
+
+  describe("Custom FieldTemplate for disabled property", () => {
+    function FieldTemplate(props) {
+      return <div className={props.disabled ? "disabled" : "foo"} />;
+    }
+
+    it("should render with disabled when ui:disabled is truthy", () => {
+      const { node } = createFormComponent({
+        schema: { type: "string" },
+        uiSchema: { "ui:disabled": true },
+        FieldTemplate,
+      });
+      expect(node.querySelectorAll(".disabled")).to.have.length.of(1);
+    });
+
+    it("should render with disabled when ui:disabled is falsey", () => {
+      const { node } = createFormComponent({
+        schema: { type: "string" },
+        uiSchema: { "ui:disabled": false },
+        FieldTemplate,
+      });
+      expect(node.querySelectorAll(".disabled")).to.have.length.of(0);
+    });
+  });
+});
diff --git a/test/performance_test.js b/test/performance_test.js
index 64e36b5dd..db482f4ac 100644
--- a/test/performance_test.js
+++ b/test/performance_test.js
@@ -60,14 +60,13 @@ describe("Rendering performance optimizations", () => {
         formData: { const: "0", var: "0" },
       });
 
-      const fields = scryRenderedComponentsWithType(
-        comp,
-        SchemaField
-      ).reduce((fields, fieldComp) => {
-        sandbox.stub(fieldComp, "render").returns(<div />);
-        fields[fieldComp.props.idSchema.$id] = fieldComp;
-        return fields;
-      });
+      const fields = scryRenderedComponentsWithType(comp, SchemaField).reduce(
+        (fields, fieldComp) => {
+          sandbox.stub(fieldComp, "render").returns(<div />);
+          fields[fieldComp.props.idSchema.$id] = fieldComp;
+          return fields;
+        }
+      );
 
       setProps(comp, { schema, formData: { const: "0", var: "1" } });
 
@@ -86,14 +85,13 @@ describe("Rendering performance optimizations", () => {
         formData: ["const", "var0"],
       });
 
-      const fields = scryRenderedComponentsWithType(
-        comp,
-        SchemaField
-      ).reduce((fields, fieldComp) => {
-        sandbox.stub(fieldComp, "render").returns(<div />);
-        fields[fieldComp.props.idSchema.$id] = fieldComp;
-        return fields;
-      });
+      const fields = scryRenderedComponentsWithType(comp, SchemaField).reduce(
+        (fields, fieldComp) => {
+          sandbox.stub(fieldComp, "render").returns(<div />);
+          fields[fieldComp.props.idSchema.$id] = fieldComp;
+          return fields;
+        }
+      );
 
       setProps(comp, { schema, formData: ["const", "var1"] });