Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added ui:enumDisabled to RadioWidget.js #1028

Merged
merged 3 commits into from
Sep 27, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/components/widgets/RadioWidget.js
Expand Up @@ -13,14 +13,17 @@ function RadioWidget(props) {
} = props;
// Generating a unique field name to identify this set of radio buttons
const name = Math.random().toString();
const { enumOptions, inline } = options;
const { enumOptions, enumDisabled, inline } = options;
// checked={checked} has been moved above name={name}, As mentioned in #349;
// this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
return (
<div className="field-radio-group">
{enumOptions.map((option, i) => {
const checked = option.value === value;
const disabledCls = disabled || readonly ? "disabled" : "";
const itemDisabled =
enumDisabled && enumDisabled.indexOf(option.value) != -1;
const disabledCls =
disabled || itemDisabled || readonly ? "disabled" : "";
const radio = (
<span>
<input
Expand All @@ -29,7 +32,7 @@ function RadioWidget(props) {
name={name}
required={required}
value={option.value}
disabled={disabled || readonly}
disabled={disabled || itemDisabled || readonly}
autoFocus={autofocus && i === 0}
onChange={_ => onChange(option.value)}
/>
Expand Down
33 changes: 33 additions & 0 deletions test/uiSchema_test.js
Expand Up @@ -2,6 +2,7 @@ import { expect } from "chai";
import React from "react";
import { Simulate } from "react-addons-test-utils";
import SelectWidget from "../src/components/widgets/SelectWidget";
import RadioWidget from "../src/components/widgets/RadioWidget";
import { createFormComponent, createSandbox } from "./test_utils";

describe("uiSchema", () => {
Expand Down Expand Up @@ -439,6 +440,38 @@ describe("uiSchema", () => {
);
});
});

describe("enum fields disabled radio options", () => {
const schema = {
type: "object",
properties: {
field: {
type: "string",
enum: ["foo", "bar"],
},
},
};
const uiSchema = {
field: {
"ui:widget": RadioWidget,
"ui:options": {
className: "custom",
},
"ui:enumDisabled": ["foo"],
},
};
it("should have atleast one radio option disabled", () => {
const { node } = createFormComponent({ schema, uiSchema });
const disabledOptionsLen = uiSchema.field["ui:enumDisabled"].length;
expect(node.querySelectorAll("input:disabled")).to.have.length.of(
disabledOptionsLen
);
expect(node.querySelectorAll("input:enabled")).to.have.length.of(
// Two options, one disabled, plus the placeholder
2 - disabledOptionsLen
);
});
});
});

describe("ui:help", () => {
Expand Down