Skip to content

Enable Arrays to be marked as required, and fixes for strings marked as required #442

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.

Sign up for GitHub

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

Merged
n1k0 merged 15 commits into from
Jan 20, 2017
+51 −3
Merged

Enable Arrays to be marked as required, and fixes for strings marked as required #442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c30f5b4
Enable the required field on arrays
Nov 24, 2016
cc91fa2
Update documentation
Nov 24, 2016
8ecafc2
Pass empty string text input in as undefined.
Nov 24, 2016
5091525
Typos in documentation.
Jan 18, 2017
8e2ecf1
Make code cleaner
Jan 18, 2017
e0fe72e
Make code cleaner
Jan 18, 2017
b826fc8
Make code cleaner
Jan 18, 2017
2e3c712
Make code cleaner
Jan 18, 2017
477d7de
Make code cleaner
Jan 18, 2017
ea934ed
Revert documentation for marking arrays are requried.
Jan 19, 2017
fe28e93
Change var to const
Jan 19, 2017
5f15775
Revert mandatory changes to arrays.
Jan 20, 2017
7e7a925
Update documentation to make it clear how to achieve the same result …
Jan 20, 2017
4026366
Fix documentation to (hopefully) make clear the distinction between r…
Jan 20, 2017
0e05f7b
Tests for converting empty string to undefined on Text and TextareaWi…
Jan 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -547,6 +547,23 @@ const uiSchema = {
};
```

Care should be taken when using the `required` property with arrays. An empty array is sufficient to pass that validation check. If you wish to ensure the user populates the array, you can specify the minimum number of items the user must select with the `minItems` property.
Copy link
Copy Markdown
Collaborator

@n1k0 n1k0 Jan 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is perfect 👍

Copy link
Copy Markdown
Collaborator Author

@crumblix crumblix Jan 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent :)
I'll have to get to the tests over the weekend. It's a part of the code base I haven't been into yet.

Copy link
Copy Markdown
Collaborator Author

@crumblix crumblix Jan 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately there wasn't a text area widget section that I could see so I created one .... but it isn't right. I will have to look at it over the weekend.

What's checked in is passing, but it's not using the widget.

I've tried the change:

const uiSchema = {"ui:widget": "textarea"};

it("should handle an empty string change event", () => {
  const {comp, node} = createFormComponent({schema: {
    type: "string",
  }, uiSchema});

... which seems to me like it should work but that fails for reasons that currently escape me. I'll need to look at it over the weekend. Got to head off now though!


Example:

```js
const schema = {
type: "array",
minItems: 2,
title: "A multiple choices list",
items: {
type: "string",
enum: ["foo", "bar", "fuzz", "qux"],
},
uniqueItems: true
};
```

By default, checkboxes are stacked but if you prefer them inline:

```js
Expand Down
6 changes: 4 additions & 2 deletions src/components/widgets/BaseInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,23 @@ function BaseInput(props) {
value,
readonly,
autofocus,
onChange,
options, // eslint-disable-line
schema, // eslint-disable-line
formContext, // eslint-disable-line
registry, // eslint-disable-line
...inputProps
} = props;
const _onChange = ({target: {value}}) => {
return props.onChange(value === "" ? undefined : value);
};
return (
<input
{...inputProps}
className="form-control"
readOnly={readonly}
autoFocus={autofocus}
value={typeof value === "undefined" ? "" : value}
onChange={(event) => onChange(event.target.value)}/>
onChange={_onChange} />
);
}

Expand Down
5 changes: 4 additions & 1 deletion src/components/widgets/TextareaWidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ function TextareaWidget({
autofocus,
onChange
}) {
const _onChange = ({target: {value}}) => {
return onChange(value === "" ? undefined : value);
};
return (
<textarea
id={id}
Expand All @@ -22,7 +25,7 @@ function TextareaWidget({
disabled={disabled}
readOnly={readonly}
autoFocus={autofocus}
onChange={(event) => onChange(event.target.value)}/>
onChange={_onChange} />
);
}

Expand Down
26 changes: 26 additions & 0 deletions test/StringField_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,18 @@ describe("StringField", () => {
expect(comp.state.formData).eql("yo");
});

it("should handle an empty string change event", () => {
const {comp, node} = createFormComponent({schema: {
type: "string",
}});

Simulate.change(node.querySelector("input"), {
target: {value: ""}
});

expect(comp.state.formData).eql(undefined);
});

it("should fill field with data", () => {
const {node} = createFormComponent({schema: {
type: "string",
Expand Down Expand Up @@ -203,6 +215,20 @@ describe("StringField", () => {
});
});

describe("TextareaWidget", () => {
it("should handle an empty string change event", () => {
const {comp, node} = createFormComponent({schema: {
type: "string",
}});

Simulate.change(node.querySelector("input"), {
target: {value: ""}
});

expect(comp.state.formData).eql(undefined);
});
});

describe("DateTimeWidget", () => {
it("should render an datetime-local field", () => {
const {node} = createFormComponent({schema: {
Expand Down