ArrayFieldTemplate by dehli · Pull Request #437 · rjsf-team/react-jsonschema-form

dehli · 2017-01-04T20:16:58Z

Reasons for making this change

Hello again! I've decided to create a new PR since I changed how the custom arrays were implemented based on feedback on my last PR (#395). Sorry it took a while!

With this change, you can customize how your arrays are rendered by passing an ArrayFieldTemplate object, very similar to the FieldTemplate.

I'd love some feedback! My initial thoughts are that I'd rather pass removeItem, moveItemDown, and moveItemUp to each item in the array (so that you don't need to pass the index to the functions). The root array could then store the existing functions that take indices.

This PR is related to #354 and will make the library much more flexible.

Here's the playground so you can see what it looks like!

Thanks!

~~Edit: I'll get that test passing. Forgot to run that!~~

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

Merge

…ropriate props passed into it).

Update fork.

olzraiti · 2017-01-12T15:54:25Z

Great work! Thanks for the rewrite, this looks really good. 👍

dehli · 2017-01-12T16:25:54Z

Thanks @olzraiti! 😄

n1k0

This looks great, thank you!

Would you mind adding a few tests covering the custom array field template case?

n1k0 · 2017-01-17T16:10:10Z

README.md

     - [Form attributes](#form-attributes)
  - [Advanced customization](#advanced-customization)
     - [Field template](#field-template)
+     - [Array template](#array-template)


Nit: Array field template maybe

n1k0 · 2017-01-17T16:14:48Z

README.md

+- `index`: number
+- `onDropIndexClick`: (index) => void
+- `onReorderClick`: (index, newIndex) => void
+- `readonly`: boolean


General remark for these two lists: it would be nice to have English sentences describing the purpose of each property, for consistency with the rest of the docs :)

Good idea! I'll improve the docs I wrote a bit!

n1k0 · 2017-01-17T16:17:57Z

playground/samples/customArray.js

@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+
+const ArrayFieldTemplate = props => (


Please use a regular function declaration here, for consistency with the rest of the code in this project.

Sounds good 👍

n1k0 · 2017-01-17T16:18:51Z

playground/samples/index.js

-};
+  Single: single,
+  "Custom Array": customArray
+};


Nit: all files need an empty line at EOF.

n1k0 · 2017-01-17T16:21:36Z

src/components/fields/ArrayField.js

+        <div className="field-description" key={`field-description-${props.idSchema.$id}`}>
+          {props.schema.description}
+        </div>
+      ) : null}


Nit: We're using either the foo && <Bar/> or foo ? <Bar/> : null checks, we should decide for one single style and use it consistently across the project. I don't have a strong opinion on which one is better, though I like the concision of the && version.

Note that if we go with the latter, this will have to be submitted in a followup PR to avoid cluttering this one, which is large enough already.

I also prefer using && for brevity. I'll hold off on this change though, like you said.

n1k0 · 2017-01-17T16:23:06Z

src/components/fields/ArrayField.js

+
+      <div className="row array-item-list"
+        key={`array-item-list-${props.idSchema.$id}`}>
+        {props.items && props.items.map(p => DefaultArrayItem(p))}


Nit: I'm curious as to if props.items.map(DefaultArrayItem) would work here.

Good catch! That should work. I'll test it out, and update accordingly.

n1k0 · 2017-01-17T16:25:28Z

src/components/fields/ArrayField.js

+      if (event) {
+        event.preventDefault();
+        event.target.blur();
+      }


I'm curious as to why this is needed? Test env?

I added this so that you could programmatically call the onDropIndexClick()() without a MouseEvent argument.

dehli · 2017-01-17T18:04:08Z

Thanks for the comments! I'll get those changes in, plus those tests :)

dehli · 2017-01-17T19:15:58Z

Hey @n1k0, I just addressed the comments you made. Let me know if there's anything else you'd like changed! Thanks!

n1k0

A few nits in tests and we're good to go.

n1k0 · 2017-01-17T21:11:50Z

test/ArrayFieldTemplate_test.js

+        items: {type: "string"}
+      };
+
+      const {node} = createFormComponent({


Please move this to a beforeEach statement, so the element is not created as soon as the describe call is executed. Created troubles in the past. Please refer to existing tests to see how it's done.

n1k0 · 2017-01-17T21:12:13Z

test/ArrayFieldTemplate_test.js

+        ArrayFieldTemplate,
+        formData,
+        schema
+      });


n1k0

👍

dehli · 2017-01-17T21:35:55Z

Appreciate the feedback @n1k0 👍

n1k0 · 2017-01-17T21:36:28Z

This is a very nice feature, thanks for the great work on this.

dehli · 2017-01-17T21:38:48Z

Of course! Thanks to you and your team for a great library!

Breaking changes When a text input is emptied by the user, it's value is now reset to `undefined` instead of being set to `""` (empty string) as previously. This better matches traditional HTML forms behavior. New features * Add an array field template component (#437) * Wrap radio and checkbox labels into span to enable styling. (#428) * Reset text inputs value when emptied (#442) * Add transform hook for changing errors from json schema validation (#432) * Add a noHtml5Validate prop (#448) * Add support for a onBlur event handler (#431) * Allow empty option for enum fields (#451) Bugfixes * Fix #452: Support recursively referenced definitions. (#453) * Fix #454: Document what master actually is, suffix its version with -dev.

n1k0 · 2017-01-28T23:35:31Z

Released in v0.42.0.

GoodVaibz · 2017-07-27T19:24:04Z

@dehli Any chance you can rehost the playground. I am not 100% sure this is the functionality I am looking for

dehli · 2017-07-27T21:06:40Z

Hey @Vaibhav430, the official playground contains what I had hosted. Just click on Custom Array!

dehli and others added 20 commits November 15, 2016 11:32

Merge pull request #1 from mozilla-services/master

3196e4f

Merge

Created generic function that constructs each array item (and has app…

ad691de

…ropriate props passed into it).

Created generic functions for arrays that have additional UI to render.

1f5a139

Added customArray playground.

00c1f29

Renaming some properties.

832b675

Made it so default HTML is the same as before changes.

d02e94d

Some cleanups in ArrayField.js

02b5ed5

Updated README.

0204e38

Linting issues.

7a2ada7

Make sure that event is not null in array callbacks.

7d3448b

Merge pull request #2 from mozilla-services/master

1947a79

Update fork.

Made it so you can just customize the array field itself.

0fea21b

Made it so rendering custom array items is possible.

5cbc3a1

Updated README.md

71782f5

Fixed some styling/typos

47533df

Updated README toc

1e464e2

Fixed case where items is undefined

3f380cc

Fixed bug with ArrayField

1a865b8

Linting issue.

20e1828

Reset ArrayFieldTemplate on swapping data in playground.

7bed3d4

olzraiti mentioned this pull request Jan 13, 2017

formContext not passed to the multiselect and the file array #441

Closed

n1k0 reviewed Jan 17, 2017

View reviewed changes

Addressed PR comments.

b45a81b

n1k0 reviewed Jan 17, 2017

View reviewed changes

Moved createFormComponent into beforeEach.

e54dcfb

n1k0 approved these changes Jan 17, 2017

View reviewed changes

n1k0 merged commit 97f30d3 into rjsf-team:master Jan 17, 2017

n1k0 mentioned this pull request Feb 13, 2017

Refactoring ideas regarding the template field, fields and widgets #354

Closed

		@@ -0,0 +1,38 @@
		import React, { Component } from "react";

		const ArrayFieldTemplate = props => (

Uh oh!

Conversation

dehli commented Jan 4, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reasons for making this change

Checklist

Uh oh!

olzraiti commented Jan 12, 2017

Uh oh!

dehli commented Jan 12, 2017

Uh oh!

n1k0 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

n1k0 Jan 17, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

n1k0 Jan 17, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dehli commented Jan 17, 2017

Uh oh!

dehli commented Jan 17, 2017

Uh oh!

n1k0 left a comment

Choose a reason for hiding this comment

Uh oh!

n1k0 Jan 17, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

n1k0 left a comment

Choose a reason for hiding this comment

Uh oh!

dehli commented Jan 17, 2017

Uh oh!

n1k0 commented Jan 17, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dehli commented Jan 17, 2017

Uh oh!

n1k0 commented Jan 28, 2017

Uh oh!

GoodVaibz commented Jul 27, 2017

Uh oh!

dehli commented Jul 27, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

dehli commented Jan 4, 2017 •

edited

Loading

n1k0 Jan 17, 2017 •

edited

Loading

n1k0 Jan 17, 2017 •

edited

Loading

n1k0 Jan 17, 2017 •

edited

Loading

n1k0 commented Jan 17, 2017 •

edited

Loading

dehli commented Jul 27, 2017 •

edited

Loading