arrayField: move label outside field

* closes zenodo/who-rdm#89

Author: jrcastro2

src/lib/forms/ArrayField.js

@@ -8,7 +8,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { getIn, FieldArray } from "formik";
-import { Form, Icon } from "semantic-ui-react";
+import { Form, Icon, Button } from "semantic-ui-react";
 import _isEmpty from "lodash/isEmpty";
 import _filter from "lodash/filter";
 import _matches from "lodash/matches";
@@ -87,50 +87,50 @@ export class ArrayField extends Component {
     const { nextKey } = this.state;
     const valuesToDisplay = this.getValues(values, fieldPath);
     return (
-      <Form.Field {...uiProps} {...hasError}>
-        <FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />
+      <>
+        <Form.Field {...uiProps} {...hasError}>
+          <FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />
 
-        {valuesToDisplay.map((value, index, array) => {
-          const arrayPath = fieldPath;
-          const indexPath = index;
-          const key = value.__key || index;
+          {valuesToDisplay.map((value, index, array) => {
+            const arrayPath = fieldPath;
+            const indexPath = index;
+            const key = value.__key || index;
 
-          return (
-            <div key={key}>
-              {children({
-                array,
-                arrayHelpers,
-                arrayPath,
-                indexPath,
-                key,
-                value,
-                ...props,
-              })}
-            </div>
-          );
-        })}
+            return (
+              <div key={key}>
+                {children({
+                  array,
+                  arrayHelpers,
+                  arrayPath,
+                  indexPath,
+                  key,
+                  value,
+                  ...props,
+                })}
+              </div>
+            );
+          })}
+        </Form.Field>
 
-        <label className="helptext">{helpText}</label>
+        {helpText && <label className="helptext rel-mb-1">{helpText}</label>}
 
-        <Form.Group>
-          <Form.Button
-            type="button"
-            icon
-            className="align-self-end"
-            labelPosition="left"
-            onClick={() => {
-              arrayHelpers.push({
-                ...defaultNewValue,
-                __key: nextKey,
-              });
-              this.setState((state) => ({ nextKey: state.nextKey - 1 }));
-            }}
-          >
-            <Icon name="add" />
-            {addButtonLabel}
-          </Form.Button>
-        </Form.Group>
-      </Form.Field>
+        <Button
+          type="button"
+          icon
+          className="align-self-end rel-mb-1"
+          labelPosition="left"
+          onClick={() => {
+            arrayHelpers.push({
+              ...defaultNewValue,
+              __key: nextKey,
+            });
+            this.setState((state) => ({ nextKey: state.nextKey - 1 }));
+          }}
+        >
+          <Icon name="add" />
+          {addButtonLabel}
+        </Button>
+      </>
     );
   };