From 5e599147badcaefc5902c3716b24fffe3ebef885 Mon Sep 17 00:00:00 2001
From: Fabio Bonelli <fb@fabiobonelli.it>
Date: Fri, 15 Nov 2019 20:40:42 +0100
Subject: [PATCH] WIP: Pre-add items to arrays fields when they are mandatory.

Fix #108
---
 src/app/form/widgets/ArrayWidget.js | 21 +++++++++++++++++----
 src/test/rf.test.js                 |  2 +-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/app/form/widgets/ArrayWidget.js b/src/app/form/widgets/ArrayWidget.js
index 92d934c6..5f9d02cd 100644
--- a/src/app/form/widgets/ArrayWidget.js
+++ b/src/app/form/widgets/ArrayWidget.js
@@ -15,7 +15,8 @@ const renderArrayFields = (
   fieldName,
   remove,
   context,
-  swap
+  swap,
+  required,
 ) => {
   const prefix = fieldName + ".";
 
@@ -26,16 +27,22 @@ const renderArrayFields = (
         isSummary = true;
       }
       schema.isSummary = isSummary;
+
+      // We always show the button for removing the field unless
+      // it's the first field of a required array field (ie. we don't allow its
+      // removal).
+      const show_close_button = (required && idx > 0) || !required;
+
       return (
         <div key={idx}>
-          <div className="float-right">
+          {show_close_button && <div className="float-right">
             <CloseButton
               onClick={e => {
                 e.preventDefault();
                 remove(idx);
               }}
             />
-          </div>
+          </div>}
           {renderField(
             { ...schema, showLabel: false },
             idx.toString(),
@@ -57,6 +64,11 @@ const renderInput = field => {
     { "has-error": field.meta.submitFailed && field.meta.error }
   ]);
 
+  /* Pre-add a field if the array field is required. */
+  if (field.fields.length == 0 && field.schema.required) {
+    field.fields.push();
+  }
+
   return (
     <div className={className}>
       {field.showLabel && (
@@ -74,7 +86,8 @@ const renderInput = field => {
         field.context,
         (a, b) => {
           field.fields.swap(a, b);
-        }
+        },
+        field.schema.required,
       )}
       <div>
         <a href="#" className="link" onClick={() => field.fields.push()}>
diff --git a/src/test/rf.test.js b/src/test/rf.test.js
index 37eb9ab2..988acd9e 100644
--- a/src/test/rf.test.js
+++ b/src/test/rf.test.js
@@ -61,5 +61,5 @@ it('editorForm renders correctly', async () => {
     </Provider>);
 
   const inputs = wrapper.find('input');
-  expect(inputs.length).toBe(54);
+  expect(inputs.length).toBe(55);
 })