feat(carbon): add field array component

Author: rvsia

packages/carbon-component-mapper/demo/demo-schemas/widget-schema.js

@@ -14,7 +14,6 @@ export const arraySchemaDDF = {
           name: 'name',
           label: 'Name',
           placeholder: 'Borek',
-          isRequired: true,
           validate: [
             {
               type: 'required'
@@ -63,7 +62,6 @@ export const arraySchemaDDF = {
       fields: [
         {
           component: 'text-field',
-          isRequired: true,
           validate: [
             {
               type: 'required'

packages/carbon-component-mapper/src/files/field-array.js

@@ -2,7 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useFieldApi, useFormApi, FieldArray as FieldArrayFF } from '@data-driven-forms/react-form-renderer';
 
-const ArrayItem = ({ remove, fields, name }) => {
+import { Button, FormGroup } from 'carbon-components-react';
+import { AddAlt32, Subtract32 } from '@carbon/icons-react';
+
+import './field-array.scss';
+
+import prepareProps from '../common/prepare-props';
+
+const ArrayItem = ({ remove, fields, name, removeText, buttonDisabled }) => {
   const formOptions = useFormApi();
 
   const editedFields = fields.map((field) => ({
@@ -13,32 +20,91 @@ const ArrayItem = ({ remove, fields, name }) => {
   return (
     <div>
       {formOptions.renderForm(editedFields, formOptions)}
-      <button onClick={remove}>Remove</button>
+      <Button
+        disabled={buttonDisabled}
+        renderIcon={Subtract32}
+        id={`remove-${name}`}
+        kind="danger"
+        onClick={remove}
+        className={'ddorg__carbon-field-array-remove'}
+      >
+        {removeText}
+      </Button>
     </div>
   );
 };
 
 ArrayItem.propTypes = {
   remove: PropTypes.func,
   fields: PropTypes.array,
-  name: PropTypes.string
+  name: PropTypes.string,
+  removeText: PropTypes.node,
+  buttonDisabled: PropTypes.bool
 };
 
 const FieldArray = (props) => {
-  const { itemDefault, fields, input, arrayValidator } = useFieldApi(props);
+  const { itemDefault, maxItems, minItems, fields, input, arrayValidator, labelText, buttonLabels, noItemsMessage, meta } = useFieldApi(
+    prepareProps(props)
+  );
+
+  const buttonLabelsFinal = {
+    add: 'Add',
+    remove: 'Remove',
+    ...buttonLabels
+  };
+
+  const invalid = meta.touched && meta.error && !Array.isArray(meta.error);
 
   return (
-    <FieldArrayFF name={input.name} validate={arrayValidator}>
-      {(fieldArrayProps) => (
-        <div>
-          {fieldArrayProps.fields.map((name, index) => (
-            <ArrayItem key={index} remove={() => fieldArrayProps.fields.remove(index)} name={name} fields={fields} />
-          ))}
-          <button onClick={() => fieldArrayProps.fields.push(itemDefault)}>Add</button>
-        </div>
-      )}
-    </FieldArrayFF>
+    <FormGroup
+      legendText={labelText}
+      invalid={Boolean(invalid)}
+      message={Boolean(invalid)}
+      messageText={invalid || ''}
+      className={'ddorg__carbon-field-array-form-group'}
+    >
+      <FieldArrayFF name={input.name} validate={arrayValidator}>
+        {(fieldArrayProps) => (
+          <div>
+            {fieldArrayProps.fields.length === 0 && noItemsMessage}
+            {fieldArrayProps.fields.map((name, index) => (
+              <ArrayItem
+                removeText={buttonLabelsFinal.remove}
+                key={index}
+                remove={() => fieldArrayProps.fields.remove(index)}
+                name={name}
+                fields={fields}
+                buttonDisabled={minItems >= fieldArrayProps.fields.length}
+              />
+            ))}
+            <div className={'ddorg__carbon-field-array-add-container'}>
+              <Button
+                disabled={fieldArrayProps.fields.length >= maxItems}
+                renderIcon={AddAlt32}
+                id={`add-${input.name}`}
+                onClick={() => fieldArrayProps.fields.push(itemDefault)}
+                className={'ddorg__carbon-field-array-add'}
+              >
+                {buttonLabelsFinal.add}
+              </Button>
+            </div>
+          </div>
+        )}
+      </FieldArrayFF>
+    </FormGroup>
   );
 };
 
+FieldArray.propTypes = {
+  noItemsMessage: PropTypes.node,
+  maxItems: PropTypes.number,
+  minItems: PropTypes.number
+};
+
+FieldArray.defaultProps = {
+  noItemsMessage: 'No items',
+  maxItems: Infinity,
+  minItems: 0
+};
+
 export default FieldArray;

packages/carbon-component-mapper/src/files/field-array.scss

@@ -0,0 +1,20 @@
+.ddorg__carbon-field-array-add {
+    margin-top: 16px;
+}
+
+.ddorg__carbon-field-array-add-container {
+    width: 100%;
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.ddorg__carbon-field-array-remove {
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+.ddorg__carbon-field-array-form-group {
+    .bx--form__requirements {
+        color: #da1e28;
+    }
+}