fix: Pass disabled prop to FieldTemplate. (rjsf-team#741)

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.

README.md

@@ -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.

src/components/fields/SchemaField.js

@@ -244,6 +244,7 @@ function SchemaFieldRender(props) {
     label,
     hidden,
     required,
+    disabled,
     readonly,
     displayLabel,
     classNames,

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);
+    });
+  });
+});