Array field optional sortability #345

olzraiti · 2016-10-18T14:00:54Z

In a complex form the sortability makes the form a bit cluttered and is often not needed.

I added a whole new object ui:options to the ArrayField's uiSchema for flexibility in case we add other options to ArrayField in the future.

… descriptions & titles.

…onschema-form

…onschema-form into arrayFieldOptionalSortability

leplatrem

Excellent!

That's indeed interesting since forms can look bloated when order does not matter (we have use-cases!)

Also, I think (but I'm not native english) that the term is more orderable than sortable.

I highlighted a few things, and once we define the best way to specifiy the options, we're good to go!

Thank you for this contribution!

leplatrem · 2016-10-18T21:02:18Z

test/ArrayField_test.js

+      const moveDownBtns = node.querySelector(".array-item-move-down");
+
+      expect(moveUpBtns).to.be.null;
+      expect(moveDownBtns).to.be.null;


leplatrem · 2016-10-18T21:02:46Z

test/ArrayField_test.js

@@ -157,6 +157,15 @@ describe("ArrayField", () => {
      expect(moveDownBtns[1].disabled).eql(true);
    });

+    it("should not be sortable when uiSchema[\"ui:options\"].sortable === false", () => {


should not show move up/down buttons is sortable is false

leplatrem · 2016-10-18T21:04:28Z

README.md

@@ -399,6 +400,24 @@ render((
        uiSchema={uiSchema} />
 ), document.getElementById("app"));
 ```
+### Array items ordering
+
+Array items are sortable by default. The `uiSchema` object spec allows you to disable ordering:


are orderable by default, and react-jsonschema-form renders move up/down buttons along them.

I would probably say "alongside" :)

leplatrem · 2016-10-18T21:08:40Z

README.md

+const uiSchema = {
+  "ui:options":  {
+    sortable: false
+  }


I think that @n1k0 took a different approach in #346 in order to introduce widget options:

const uiSchema = { "ui:widget": { component: "checkboxes", options: { inline: true } } };

I think that both approaches are valid :) I'll let you figure out pros and cons for each ;)

Having the same approach as widgets would be more consistent, but the ui:options -style makes updating a uiSchema simpler (if you want to add an option to an existing uiSchema field, you don't replace any lines, just add new ones).

I actually like the ui:options approach, definitely less verbose and more flexible. Too bad I've just landed #346 which leverages the widget options approach, which is making your approach inconsistent.

Don't rush reverting though, I may actually just switch to using your ui:options thing instead :)

leplatrem · 2016-10-18T21:10:43Z

src/components/fields/ArrayField.js

-    const {disabled, readonly} = this.props;
+    const {disabled, readonly, uiSchema} = this.props;
+
+    const sortable = uiSchema["ui:options"] ? uiSchema["ui:options"].sortable : true;


What If options is defined but sortable is left undefined?

Got me there! Fixed. I added also a PropType for safety. Now the only weird thing that could happen would be when orderable is set specifically to undefined:

... "ui:options": { orderable: undefined } ...

The PropType won't catch undefined, so we interpret it as false. It's unclear what the user would mean with undefined - I think false is a safe bet since it's a falsy value.

olzraiti · 2016-10-19T07:44:36Z

I renamed the option to 'orderable'.

n1k0

Nice work! A few minor changes required though :)

n1k0 · 2016-10-19T09:04:17Z

src/components/fields/ArrayField.js

+    const options = uiSchema["ui:options"];
+    if (options && options.hasOwnProperty("orderable")) {
+      orderable = !!options.orderable;
+    }


How about

const options = {orderable: true, ...uiSchema["ui:options"]}

n1k0 · 2016-10-19T09:04:54Z

src/components/fields/ArrayField.js

+      orderable = !!options.orderable;
+    }
+    if (!orderable) {
+      canMoveUp = false;


As a general good practice, I'd rather not mutate passed arguments at all.

n1k0 · 2016-10-19T09:07:36Z

src/components/fields/ArrayField.js

+    if (!orderable) {
+      canMoveUp = false;
+      canMoveDown = false;
+    }
    const hasToolbar = removable || canMoveUp || canMoveDown;


Actually the same could be achieved by this (I think):

const {orderable} = {orderable: true, ...uiSchema["ui:options"]}; const hasToolbar = orderable && (removable || canMoveUp || canMoveDown);

n1k0 · 2016-10-20T07:54:30Z

Thank you! 👍

@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:31:59Z

Released in v0.41.0.

olzraiti added 27 commits July 12, 2016 15:28

fix HiddenWidget error when value is undefined

251974c

add context prop

8e69465

Replace tabs with spaces and add context PropType to Form.

7ae018c

Pass context to FieldTemplate

1217215

Fix passing context to SchemaField

4136956

Replace tabs with spaces

f8158b9

replace context with formContext

9eeaf75

Don't pass formContext to fields that don't use it

39fb8c3

Remove duplicate default export from Form

7ada187

Add tests for formContext

6ab8b12

Fix formContext tests lint issues

933f808

FormContext is passed internally inside registry. Pass formContext to…

b7670f4

… descriptions & titles.

update README

770f761

fix lint and package.json

295e572

fix tests. FormContext must be and object.

7bc5952

Fix minor style issues

90c0bd8

Update README

2861c92

Merge branch 'master' of https://github.com/mozilla-services/react-js…

9e0caac

…onschema-form

Use empty title instead of name

9c158ed

Use empty label instead of name

4974362

Add tests for passing titles/labels

8d120e4

fix lint issues

a919ae1

ArrayField sorting can be disabled

e936e07

replace tabs with spaces

0d2f33f

update README

0283a95

Merge branch 'master' of https://github.com/mozilla-services/react-js…

4c68350

…onschema-form into arrayFieldOptionalSortability

Remove empty line

b7465cf

leplatrem reviewed Oct 18, 2016

View reviewed changes

Rename ArrayField options 'sortable' to 'orderable' & minor changes

32c77e7

fix lint issues

a7e917e

n1k0 suggested changes Oct 19, 2016

View reviewed changes

olzraiti added 3 commits October 19, 2016 12:32

Some code style improvement

f16c111

replace tabs with spaces

b8adc95

Update README

b34235f

n1k0 approved these changes Oct 20, 2016

View reviewed changes

n1k0 merged commit 503fb1f into rjsf-team:master Oct 20, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Array field optional sortability #345

Array field optional sortability #345

olzraiti commented Oct 18, 2016

leplatrem left a comment

leplatrem Oct 18, 2016

leplatrem Oct 18, 2016

leplatrem Oct 18, 2016

glasserc Oct 19, 2016

leplatrem Oct 18, 2016

olzraiti Oct 19, 2016

n1k0 Oct 19, 2016

leplatrem Oct 18, 2016

olzraiti Oct 19, 2016

olzraiti commented Oct 19, 2016

n1k0 left a comment

n1k0 Oct 19, 2016

n1k0 Oct 19, 2016

n1k0 Oct 19, 2016

n1k0 commented Oct 20, 2016

n1k0 commented Nov 9, 2016

Array field optional sortability #345

Array field optional sortability #345

Conversation

olzraiti commented Oct 18, 2016

leplatrem left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

olzraiti commented Oct 19, 2016

n1k0 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

n1k0 commented Oct 20, 2016

n1k0 commented Nov 9, 2016