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.

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

Jump to bottom

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

Merged
merged 15 commits into from
Jan 20, 2017
Merged

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

Show file tree
Hide file tree
Changes from 13 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 = {
};
```

Unlike other types, array's do not support the `required` property. You can however instead specify the minimum number of items the user must select with the `minItems` property.
Copy link
Collaborator

Choose a reason for hiding this comment

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

It actually supports the required property, it only checks that an array property value is provided, which may or may not be empty. Put another way, for

schema = {
  type: "object",
  required: ["foo"],
  properties: {
    foo: {type: "array"}
  }
}

{foo: []} is valid against this schema while {} is not.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

No problem! While it's true supports the required property, I suspect that it doesn't operate in the fashion most UI builders would expect, at the very least it's a potential source of confusion. I'd try and update the documentation to be clear in that regard. :)

And yes to the tests as well! :)

Copy link
Collaborator

@n1k0 n1k0 Jan 20, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

I suspect that it doesn't operate in the fashion most UI builders would expect

I think we need to stay true to the jsonschema spec as much as possible, as it's our data model layer behind our form views. One of the goal of this lib is also to make forms and their underlying data model more robust and consistent. I wouldn't want to bring regular web forms flakiness to jsonschema, which would kind of defeat its purpose if you ask me :)

The best patch for preventing confusion is good documentation.


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