fix(blueprint): add missing field array component

Author: rvsia

packages/blueprint-component-mapper/demo/index.js

@@ -19,10 +19,8 @@ import demoSchema from '@data-driven-forms/common/src/demoschema';
 const Summary = (props) => <div>Custom summary component.</div>;
 
 const fieldArrayState = {
-  schema: wizardSchema,
+  schema: arraySchemaDDF,
   additionalOptions: {
-    wizard: true,
-    showFormControls: false,
     initialValues: {
       number: [1, 2, 3, 4],
       minMax: [null, null, null, null]

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

@@ -1,5 +1,148 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { useFieldApi, useFormApi, FieldArray as FieldArrayFF } from '@data-driven-forms/react-form-renderer';
+
+import { Button, Intent, FormGroup } from '@blueprintjs/core';
+
+import BlueprintContext from './blueprint-context';
+
+import './field-array.scss';
+
+const ArrayItem = ({ remove, fields, name, removeLabel, ArrayItemProps, RemoveButtonProps, disabledRemove }) => {
+  const formOptions = useFormApi();
+
+  const editedFields = fields.map((field) => ({
+    ...field,
+    ...(field.name ? { name: `${name}.${field.name}` } : { name })
+  }));
+
+  return (
+    <div {...ArrayItemProps}>
+      {formOptions.renderForm(editedFields, formOptions)}
+      <Button
+        onClick={remove}
+        intent={Intent.DANGER}
+        disabled={disabledRemove}
+        {...RemoveButtonProps}
+        className={clsx('ddorg__blueprint_mapper--field-array-remove', RemoveButtonProps && RemoveButtonProps.className)}
+      >
+        {removeLabel}
+      </Button>
+    </div>
+  );
+};
+
+ArrayItem.propTypes = {
+  remove: PropTypes.func,
+  fields: PropTypes.array,
+  name: PropTypes.string,
+  removeLabel: PropTypes.node,
+  ArrayItemProps: PropTypes.object,
+  RemoveButtonProps: PropTypes.object,
+  disabledRemove: PropTypes.bool
+};
+
 const FieldArray = (props) => {
-  return 'FieldArray';
+  const {
+    defaultItem,
+    fields,
+    arrayValidator,
+    label,
+    description,
+    buttonLabels,
+    AddContainerProps,
+    AddButtonProps,
+    RemoveButtonProps,
+    ArrayItemProps,
+    FieldArrayProps,
+    noItemsMessage,
+    validateOnMount,
+    meta,
+    helperText,
+    isRequired,
+    FormGroupProps,
+    maxItems,
+    minItems
+  } = useFieldApi(props);
+
+  const { required } = useContext(BlueprintContext);
+
+  const { error, touched } = meta;
+  const showError = (validateOnMount || touched) && error;
+
+  const text = showError ? error : helperText || description;
+
+  const intent = showError && error && { intent: Intent.DANGER };
+  const labelInfo = isRequired && { labelInfo: required };
+
+  const combinedLabels = {
+    add: 'Add',
+    remove: 'Remove',
+    ...buttonLabels
+  };
+
+  return (
+    <FormGroup helperText={text} label={label} {...labelInfo} {...FormGroupProps} {...intent}>
+      <FieldArrayFF name={props.name} validate={arrayValidator}>
+        {(fieldArrayProps) => (
+          <div {...FieldArrayProps}>
+            {fieldArrayProps.fields.length === 0 && noItemsMessage}
+            {fieldArrayProps.fields.map((name, index) => (
+              <ArrayItem
+                key={index}
+                remove={() => fieldArrayProps.fields.remove(index)}
+                name={name}
+                fields={fields}
+                removeLabel={combinedLabels.remove}
+                ArrayItemProps={ArrayItemProps}
+                RemoveButtonProps={RemoveButtonProps}
+                disabledRemove={fieldArrayProps.fields.length <= minItems}
+              />
+            ))}
+            <div
+              {...AddContainerProps}
+              className={clsx('ddorg__blueprint_mapper--field-array-add-container', AddContainerProps && AddContainerProps.className)}
+            >
+              <Button
+                onClick={() => fieldArrayProps.fields.push(defaultItem)}
+                intent={Intent.SUCCESS}
+                disabled={fieldArrayProps.fields.length >= maxItems}
+                {...AddButtonProps}
+              >
+                {combinedLabels.add}
+              </Button>
+            </div>
+          </div>
+        )}
+      </FieldArrayFF>
+    </FormGroup>
+  );
+};
+
+FieldArray.propTypes = {
+  name: PropTypes.string,
+  defaultItem: PropTypes.any,
+  fields: PropTypes.array,
+  label: PropTypes.node,
+  description: PropTypes.node,
+  buttonLabels: PropTypes.object,
+  AddContainerProps: PropTypes.object,
+  AddButtonProps: PropTypes.object,
+  RemoveButtonProps: PropTypes.object,
+  ArrayItemProps: PropTypes.object,
+  FieldArrayProps: PropTypes.object,
+  noItemsMessage: PropTypes.node,
+  validateOnMount: PropTypes.bool,
+  helperText: PropTypes.node,
+  isRequired: PropTypes.bool,
+  FormGroupProps: PropTypes.object,
+  maxItems: PropTypes.number,
+  minItems: PropTypes.number
+};
+
+FieldArray.defaultProps = {
+  noItemsMessage: 'No items'
 };
 
 export default FieldArray;

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

@@ -0,0 +1,9 @@
+.ddorg__blueprint_mapper--field-array-add-container {
+    display: flex;
+    flex-flow: row-reverse;
+    margin-bottom: 15px;
+}
+
+.ddorg__blueprint_mapper--field-array-remove {
+    margin-bottom: 15px;
+}