Removable and addable options for array items #373

maartenth · 2016-11-03T15:44:10Z

Reasons for making this change

There are cases where you don't want an add button or a remove button for array items, even though the schema allows it. Just like with the recent orderable option. The array items in my current case come from another resource and I fill the array in the background on initial form load; the user should not be able to reorder, add or remove the items via the form. I think this is a common use case.

I refactored the code a little bit to align all variable names (orderable, addable and removable for uiSchema settings, and canMoveUp, canMoveDown, canDelete for application logic).

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
I'm adding or updating code
- I've added and/or updated tests
- I've updated docs if needed
I'm adding a new feature
- I've updated the playground with an example use of the feature

n1k0

Some early thoughts.

n1k0 · 2016-11-04T08:56:07Z

README.md

@@ -427,6 +433,30 @@ const uiSchema = {
 };
 ```

+#### `addable` option
+
+if either `items` or `additionalItems` contains a schema object, an add button for new items is shown by default. You can turn this off with the `addable` option in `uiSchema`:


I feel like this is trying to fix a misused json schema; If you want a fixed size array, your schema should reflect that intent, and the lib should render the form appropriately. Have a look at the fixedItemsList sample in the playground.

I understand that this would add more flexibility, but on the other hand I feel like providing features to help people fixing their schemas is an endless rabbit hole we're not really wanting to start exploring... Thoughts? Did you know about support for fixed size arrays?

Thank you for your reply. I knew about fixed arrays, I even added a fixed sized array example with 2 unremovable additionalItems in the playground. :)

The use case I have, is that the items are addable, reorderable and removable, but not via this form. Another user may add items in another form, but this user may not add items in this form. So the items in the array are really part of the data, not part of the schema. If I'm not mistaken, a fixed array in the schema would not be a right representation of the data. Then every instance of this particular data type should have their own schema, which would undermine the purpose of json schema.

In angular-schema-form, which appears to be maintained by the same organisation as JSON Schema, the api for this is as follows (a uiSchema is called a form in angular-schema-form):

To suppress add and remove buttons set add to null and remove to null.

function FormCtrl($scope) { $scope.form = [ { key: "subforms", add: null, remove: null, style: { add: "btn-success" }, items: [ "subforms[].nick", "subforms[].name", "subforms[].emails", ], } ]; }

This makes a lot of sense, I get the point. Also I realize that people may want to alter the UI according to some user ACLs, and your patch allows dealing with this in a very convenient fashion.

Scratch my concerns, this is valid.

n1k0

A few nits, a rebase and we land this. Thanks 👍

n1k0 · 2016-11-04T09:47:03Z

src/components/fields/ArrayField.js

-          onClick={this.onAddClick} disabled={disabled || readonly}/>
+        {addable ? <AddButton
+                   onClick={this.onAddClick}
+                   disabled={disabled || readonly}/> : null}


Nit: indent props with 2 spaces

n1k0 · 2016-11-04T09:47:41Z

src/components/fields/ArrayField.js

+      addable: true,
+      ...uiSchema["ui:options"]
+    };
+    const hasAdd = addable && additionalSchema;


how about canAdd for consistency?

n1k0 · 2016-11-04T09:50:19Z

src/components/fields/ArrayField.js

+      moveDown: orderable && canMoveDown,
+      remove: removable && canRemove
+    };
+    has.toolbar = Object.keys(has).map(key => has[key]).includes(true);


Object.keys(has).some(key => has[key]);

maartenth · 2016-11-04T13:15:32Z

Updated those 3 things and rebased. :)

n1k0 · 2016-11-04T13:44:48Z

Woops, I've landed #375 meanwhile which makes your patch conflicting again. I can take over the next rebase if you're bored ;)

…he orderable option; add corresponding tests, README info and playground examples

maartenth · 2016-11-04T14:01:07Z

Re-rebased. :)

n1k0 · 2016-11-04T14:03:31Z

Perfect, thank you so much!

pablen · 2016-11-08T17:14:05Z

Thanks, this is a great addition!
I think the documentation is visible in the README but the feature is not released yet. Am I wrong?

n1k0 · 2016-11-08T19:53:47Z

You're not, we'll release a new version very soon now.

@olzraiti

This release has been made possible by the combined work of @olzraiti, @maartenth, @vinhlh, @tiemevanveen , @dehli, @enjoylife, @pabloen, @israelshirk, @sjhewitt and @rom10. Thank you folks! Breaking changes ---------------- Support for passing `DescriptionField`, `TitleField` and `SchemaField` as `Form` props as been dropped in this release. You now have to always pass them through the `fields` prop. Deprecations ------------ * Leverage `ui:options` everywhere (fix #370) (#378) There's now a unique recommended way to specify options for widgets in uiSchema, which is the `ui:options` directive. Previous ways are still supported, but you'll get a warning in the console if you use them. New features ------------ * Allow overriding the default fields/widgets (#371) * Pass data to `FieldTemplate` as strings instead of as React components (#341) * Pass `schema` & `uiSchema` to the field template component (#379) * Add `ui:order` wildcard feature and improve error messages (#368) * Add support for widget autofocus (#288) * Array field optional sortability (#345) * Radio widget support for integers and numbers (#325) * Add support for inline radios and checkboxes. (fix #346) (#348) * Added ref to `FileWidget`. (#355) * Added `removable` and `addable` options for array items (#373) * Enable Windows development (#320) Enhancements and bugfixes ------------------------- * Fix `minimum/maximum==0` for `UpDownWidget` and `RangeWidget` (#344) * Handle numbers requiring trailing zeros with more grace (#334) * Pass empty title to `TitleField` instead of name (#311) * `asNumber`: return `undefined` when value is empty string (#369) * Use [glyphicons](http://getbootstrap.com/components/#glyphicons) for buttons by default. (fix #337) (#375) * Support old versions of React (#312)

n1k0 · 2016-11-09T13:32:24Z

Released in v0.41.0.

n1k0 reviewed Nov 4, 2016

View reviewed changes

maartenth force-pushed the removable-and-addable branch from ca7e8d6 to 2169084 Compare November 4, 2016 13:12

maartenth added 4 commits November 4, 2016 14:57

Add addable and removable options for array items, in accordance to t…

bc390b6

…he orderable option; add corresponding tests, README info and playground examples

Fix typos in README

6e90ce6

Fix another typo in README

6bdcf14

Process requested changes

37439bc

maartenth force-pushed the removable-and-addable branch from 2169084 to 37439bc Compare November 4, 2016 13:58

n1k0 merged commit 2908af5 into rjsf-team:master Nov 4, 2016

maartenth deleted the removable-and-addable branch November 8, 2016 21:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Removable and addable options for array items #373

Removable and addable options for array items #373

maartenth commented Nov 3, 2016 •

edited

Loading

n1k0 left a comment

n1k0 Nov 4, 2016 •

edited

Loading

maartenth Nov 4, 2016

n1k0 Nov 4, 2016

n1k0 left a comment

n1k0 Nov 4, 2016

n1k0 Nov 4, 2016

n1k0 Nov 4, 2016

maartenth commented Nov 4, 2016

n1k0 commented Nov 4, 2016 •

edited

Loading

maartenth commented Nov 4, 2016

n1k0 commented Nov 4, 2016

pablen commented Nov 8, 2016

n1k0 commented Nov 8, 2016

n1k0 commented Nov 9, 2016

Removable and addable options for array items #373

Removable and addable options for array items #373

Conversation

maartenth commented Nov 3, 2016 • edited Loading

Reasons for making this change

Checklist

n1k0 left a comment

Choose a reason for hiding this comment

n1k0 Nov 4, 2016 • edited Loading

Choose a reason for hiding this comment

maartenth Nov 4, 2016

Choose a reason for hiding this comment

n1k0 Nov 4, 2016

Choose a reason for hiding this comment

n1k0 left a comment

Choose a reason for hiding this comment

n1k0 Nov 4, 2016

Choose a reason for hiding this comment

n1k0 Nov 4, 2016

Choose a reason for hiding this comment

n1k0 Nov 4, 2016

Choose a reason for hiding this comment

maartenth commented Nov 4, 2016

n1k0 commented Nov 4, 2016 • edited Loading

maartenth commented Nov 4, 2016

n1k0 commented Nov 4, 2016

pablen commented Nov 8, 2016

n1k0 commented Nov 8, 2016

n1k0 commented Nov 9, 2016

maartenth commented Nov 3, 2016 •

edited

Loading

n1k0 Nov 4, 2016 •

edited

Loading

n1k0 commented Nov 4, 2016 •

edited

Loading