envoc-form 2.0.1-1 → 2.0.1-13

package/lib/FileInput/DropzoneFileInput.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = DropzoneFileInput;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/readOnlyError"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDropzone = require("react-dropzone");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _DefaultFileList = _interopRequireDefault(require("./DefaultFileList"));
+
+var _excluded = ["className", "onChange", "value", "accept", "disabled", "multiple", "FileList", "placeholder", "dropzone"];
+
+function DropzoneFileInput(_ref) {
+  var classNameProp = _ref.className,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      accept = _ref.accept,
+      disabled = _ref.disabled,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+      _ref$FileList = _ref.FileList,
+      FileList = _ref$FileList === void 0 ? _DefaultFileList["default"] : _ref$FileList,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? 'Drag and drop some file(s) here, or click to select file(s)' : _ref$placeholder,
+      dropzone = _ref.dropzone,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useDropzone = (0, _reactDropzone.useDropzone)({
+    accept: accept,
+    onDrop: onDrop,
+    disabled: disabled,
+    multiple: multiple
+  }),
+      _useDropzone$accepted = _useDropzone.acceptedFiles,
+      acceptedFiles = _useDropzone$accepted === void 0 ? (acceptedFiles[0], (0, _readOnlyError2["default"])("acceptedFiles")) : _useDropzone$accepted,
+      _useDropzone$fileReje = _useDropzone.fileRejections,
+      fileRejections = _useDropzone$fileReje === void 0 ? fileRejections.push(acceptedFiles.slice(1, acceptedFiles.length)) : _useDropzone$fileReje,
+      getRootProps = _useDropzone.getRootProps,
+      getInputProps = _useDropzone.getInputProps,
+      isDragAccept = _useDropzone.isDragAccept,
+      isDragReject = _useDropzone.isDragReject;
+
+  function onDrop(acceptedFiles) {
+    if (!(acceptedFiles !== null && acceptedFiles !== void 0 && acceptedFiles.length) > 1 && !multiple) {
+      onChange(null);
+    } else {
+      onChange(acceptedFiles);
+    }
+  }
+
+  var className = (0, _classnames["default"])('react-dropzone', classNameProp, {
+    accept: isDragAccept,
+    reject: isDragReject,
+    disabled: disabled
+  });
+  return /*#__PURE__*/_react["default"].createElement("section", {
+    className: className
+  }, /*#__PURE__*/_react["default"].createElement("div", getRootProps(), /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, props, getInputProps())), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, placeholder), !multiple && /*#__PURE__*/_react["default"].createElement("b", null, "Only one file accepted."), accept && /*#__PURE__*/_react["default"].createElement("b", null, "Files of type \"".concat(accept, "\" accepted"))), /*#__PURE__*/_react["default"].createElement("aside", null, /*#__PURE__*/_react["default"].createElement(FileList, {
+    files: acceptedFiles,
+    rejectedFiles: fileRejections
+  })));
+}

package/lib/FileInput/FileInput.js

@@ -1,48 +1,77 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = FileInput;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _DefaultFileList = _interopRequireDefault(require("./DefaultFileList"));
+
+var _excluded = ["className", "onChange", "value", "multiple"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function FileInput(_ref) {
   var className = _ref.className,
       onChange = _ref.onChange,
       value = _ref.value,
-      props = (0, _objectWithoutProperties2["default"])(_ref, ["className", "onChange", "value"]);
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var inputRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      acceptedFiles = _useState2[0],
+      setAcceptedFiles = _useState2[1];
+
   (0, _react.useEffect)(function () {
     if (!value && inputRef.current) {
       inputRef.current.value = null;
     }
   }, [value]);
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "custom-file file-input ".concat(className || '', " ").concat(props.disabled ? 'disabled' : '')
-  }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
     ref: inputRef,
     type: "file",
     className: "custom-file-input",
-    onChange: handleChange
-  }, props)), /*#__PURE__*/_react["default"].createElement("label", {
+    onChange: handleChange,
+    multiple: multiple
+  }, props))), /*#__PURE__*/_react["default"].createElement("label", {
     className: "custom-file-label"
-  }, !value && /*#__PURE__*/_react["default"].createElement("span", null, "Choose A File..."), value && /*#__PURE__*/_react["default"].createElement("span", null, value.name, " - size: ", humanFileSize(value.size))));
+  }, /*#__PURE__*/_react["default"].createElement("div", null, !value && /*#__PURE__*/_react["default"].createElement("span", null, "Choose A File..."), value && (!multiple ? /*#__PURE__*/_react["default"].createElement("span", null, value.name, " - size: ", humanFileSize(value.size)) : value.length === 1 ? /*#__PURE__*/_react["default"].createElement("span", null, value[0].name, " - size: ", humanFileSize(value[0].size)) : /*#__PURE__*/_react["default"].createElement("span", null, "Multiple files selected."))))), /*#__PURE__*/_react["default"].createElement(_DefaultFileList["default"], {
+    files: acceptedFiles
+  }));
 
   function handleChange(e) {
     if (e == null || !e.target || !e.target.files.length) {
       onChange(null);
     } else {
-      var target = e.target.files[0];
-      onChange(target);
+      var files = (0, _toConsumableArray2["default"])(e.target.files);
+      setAcceptedFiles(files);
+
+      if (!multiple) {
+        onChange(files[0]);
+      } else {
+        onChange(files);
+      }
     }
   }
 }

package/lib/FileInput/index.js

@@ -5,9 +5,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+Object.defineProperty(exports, "FileInput", {
+  enumerable: true,
+  get: function get() {
+    return _FileInput["default"];
+  }
+});
+Object.defineProperty(exports, "DropzoneFileInput", {
+  enumerable: true,
+  get: function get() {
+    return _DropzoneFileInput["default"];
+  }
+});
 
 var _FileInput = _interopRequireDefault(require("./FileInput"));
 
-var _default = _FileInput["default"];
-exports["default"] = _default;
+var _DropzoneFileInput = _interopRequireDefault(require("./DropzoneFileInput"));

package/lib/Form/Form.js

@@ -1,16 +1,13 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = Form;
-exports.objectToFormData = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -32,6 +29,14 @@ var _FormBasedPreventNavigation = _interopRequireDefault(require("./FormBasedPre
 
 var _ServerErrorContext = _interopRequireDefault(require("./ServerErrorContext"));
 
+var _utils = require("../utils");
+
+var _excluded = ["children", "className", "style", "ignoreLostChanges", "onSubmit", "initialValues"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function Form(_ref) {
   var children = _ref.children,
       className = _ref.className,
@@ -39,7 +44,7 @@ function Form(_ref) {
       ignoreLostChanges = _ref.ignoreLostChanges,
       onSubmit = _ref.onSubmit,
       initialValues = _ref.initialValues,
-      props = (0, _objectWithoutProperties2["default"])(_ref, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "initialValues"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
   // formik resets all error on each blur (with our settings)
   // this means that ALL errors from the server disappear when any one field is blurred
@@ -83,10 +88,13 @@ function Form(_ref) {
   function handleSubmit(values, formikBag) {
     var formData = null;
 
-    if (Object.entries(values).some(function (value) {
-      return value && value[1] instanceof File;
-    })) {
-      formData = objectToFormData(values);
+    if ((0, _utils.objectContainsNonSerializableProperty)(values)) {
+      formData = (0, _utils.objectToFormData)(values, {
+        indices: true,
+        dotNotation: true,
+        allowEmptyArrays: true,
+        noFileListBrackets: true
+      });
     }
 
     return Promise.resolve(onSubmit(formData || values)).then(function (response) {
@@ -136,36 +144,8 @@ function DisplayFormState() {
       padding: '.5rem'
     }
   }, serverErrorContext && serverErrorContext.errors && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("strong", null, "serverErrors = "), JSON.stringify(serverErrorContext.errors, null, 2)), /*#__PURE__*/_react["default"].createElement("strong", null, "formState = "), JSON.stringify(formState, null, 2)));
-} // https://github.com/silkyland/object-to-formdata
-
-
-var objectToFormData = function objectToFormData(obj, form, namespace) {
-  var fd = form || new FormData();
-  var formKey;
-
-  for (var property in obj) {
-    if (obj.hasOwnProperty(property)) {
-      if (namespace) {
-        formKey = namespace + '.' + property;
-      } else {
-        formKey = property;
-      }
-
-      if (obj[property] instanceof Date) {
-        fd.append(formKey, obj[property].toISOString());
-      } else if ((0, _typeof2["default"])(obj[property]) === 'object' && !(obj[property] instanceof File) && !(obj[property] instanceof Blob)) {
-        objectToFormData(obj[property], fd, formKey);
-      } else {
-        // if it's a string or a File object
-        fd.append(formKey, obj[property]);
-      }
-    }
-  }
-
-  return fd;
-};
+}
 
-exports.objectToFormData = objectToFormData;
 Form.propTypes = {
   ignoreLostChanges: _propTypes["default"].bool,
   onSubmit: _propTypes["default"].func.isRequired,

package/lib/Form/FormBasedPreventNavigation.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,10 +9,14 @@ exports["default"] = FormBasedPreventNavigation;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactRouter = require("react-router");
+var _reactRouterDom = require("react-router-dom");
 
 var _formik = require("formik");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function FormBasedPreventNavigation(_ref) {
   var ignoreLostChanges = _ref.ignoreLostChanges,
       _ref$promptMessage = _ref.promptMessage,
@@ -38,7 +42,7 @@ function FormBasedPreventNavigation(_ref) {
       e.returnValue = promptMessage;
     }
   }, [preventNavigate, promptMessage]);
-  return /*#__PURE__*/_react["default"].createElement(_reactRouter.Prompt, {
+  return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Prompt, {
     when: preventNavigate,
     message: promptMessage
   });

package/lib/FormGroupWrapper.js

@@ -19,12 +19,14 @@ var _FormGroup = _interopRequireDefault(require("./FormGroup"));
 
 var _ErrorScrollTarget = _interopRequireDefault(require("./ErrorScrollTarget"));
 
+var _excluded = ["prepend", "append", "Component", "helpText"];
+
 function FormGroupWrapper(_ref) {
   var prepend = _ref.prepend,
       append = _ref.append,
       Component = _ref.Component,
       helpText = _ref.helpText,
-      props = (0, _objectWithoutProperties2["default"])(_ref, ["prepend", "append", "Component", "helpText"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var meta = props.meta;
   return /*#__PURE__*/_react["default"].createElement(_FormGroup["default"], (0, _extends2["default"])({
     meta: meta,

package/lib/FormInput/FormInput.js

@@ -38,7 +38,14 @@ var _ReactSelectField = _interopRequireDefault(require("../ReactSelectField"));
 
 var _useStandardFormInput3 = _interopRequireDefault(require("../useStandardFormInput"));
 
-var _FileInput = _interopRequireDefault(require("../FileInput"));
+var _FileInput = require("../FileInput");
+
+var _excluded = ["className", "meta", "helpText"],
+    _excluded2 = ["meta"],
+    _excluded3 = ["includeEmptyOption", "options"],
+    _excluded4 = ["optionsUrl", "includeEmptyOption", "includeOtherOption", "cache", "maxAge"],
+    _excluded5 = ["meta"],
+    _excluded6 = ["helpText", "meta"];
 
 function FormInput(props) {
   var _useStandardFormInput = (0, _useStandardFormInput3["default"])(props),
@@ -87,8 +94,14 @@ function StandardFieldGroup(props) {
       return Checkbox(props);
 
     case 'file':
+      if (props.dropzone) {
+        return /*#__PURE__*/_react["default"].createElement(_FormGroupWrapper["default"], (0, _extends2["default"])({}, props, {
+          Component: _FileInput.DropzoneFileInput
+        }));
+      }
+
       return /*#__PURE__*/_react["default"].createElement(_FormGroupWrapper["default"], (0, _extends2["default"])({}, props, {
-        Component: _FileInput["default"]
+        Component: _FileInput.FileInput
       }));
 
     case 'textarea':
@@ -107,7 +120,7 @@ var TextAreaInput = function TextAreaInput(_ref) {
   var className = _ref.className,
       meta = _ref.meta,
       helpText = _ref.helpText,
-      props = (0, _objectWithoutProperties2["default"])(_ref, ["className", "meta", "helpText"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], (0, _extends2["default"])({
     cacheMeasurements: true,
     className: (0, _classnames["default"])(className, 'form-control', meta.error ? 'is-invalid' : '')
@@ -116,7 +129,7 @@ var TextAreaInput = function TextAreaInput(_ref) {
 
 var DefaultInput = function DefaultInput(_ref2) {
   var meta = _ref2.meta,
-      props = (0, _objectWithoutProperties2["default"])(_ref2, ["meta"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
   return /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, (0, _extends2["default"])({
     invalid: !!meta.error
   }, props));
@@ -126,7 +139,7 @@ var Select = function Select(_ref3) {
   var _ref3$includeEmptyOpt = _ref3.includeEmptyOption,
       includeEmptyOption = _ref3$includeEmptyOpt === void 0 ? true : _ref3$includeEmptyOpt,
       options = _ref3.options,
-      props = (0, _objectWithoutProperties2["default"])(_ref3, ["includeEmptyOption", "options"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
   var allOptions = includeEmptyOption ? [{
     label: ' ',
     value: null
@@ -134,11 +147,13 @@ var Select = function Select(_ref3) {
   return /*#__PURE__*/_react["default"].createElement(_ReactSelectField["default"], (0, _extends2["default"])({}, props, {
     options: allOptions
   }));
-};
+}; // low cache value just to prevent the same dropdown from hitting the API at the same time
+// TODO: global cache provider / "envoc-cache" instead of this static instance
+
 
 var optionCache = new _lruCache["default"]({
   max: 500,
-  maxAge: 1000 * 60 * 5
+  maxAge: 1000 * 10
 });
 exports.optionCache = optionCache;
 
@@ -148,11 +163,16 @@ var RemoteSelect = function RemoteSelect(_ref4) {
       includeEmptyOption = _ref4$includeEmptyOpt === void 0 ? true : _ref4$includeEmptyOpt,
       _ref4$includeOtherOpt = _ref4.includeOtherOption,
       includeOtherOption = _ref4$includeOtherOpt === void 0 ? false : _ref4$includeOtherOpt,
-      props = (0, _objectWithoutProperties2["default"])(_ref4, ["optionsUrl", "includeEmptyOption", "includeOtherOption"]);
+      _ref4$cache = _ref4.cache,
+      cache = _ref4$cache === void 0 ? optionCache : _ref4$cache,
+      _ref4$maxAge = _ref4.maxAge,
+      maxAge = _ref4$maxAge === void 0 ? 1000 * 10 : _ref4$maxAge,
+      props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded4);
   var request = {
     method: 'get',
     url: optionsUrl,
-    cache: optionCache,
+    cache: cache,
+    maxAge: maxAge,
     autoExecute: true
   };
   var webRequest = (0, _envocRequest.useAxiosRequest)(request);
@@ -195,7 +215,7 @@ var RemoteSelect = function RemoteSelect(_ref4) {
 
 var DatePicker = function DatePicker(_ref5) {
   var meta = _ref5.meta,
-      props = (0, _objectWithoutProperties2["default"])(_ref5, ["meta"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded5);
   return /*#__PURE__*/_react["default"].createElement(_DatePickerInput["default"], (0, _extends2["default"])({}, props, {
     className: meta.error ? 'is-invalid' : ''
   }));
@@ -204,6 +224,6 @@ var DatePicker = function DatePicker(_ref5) {
 var Checkbox = function Checkbox(_ref6) {
   var helpText = _ref6.helpText,
       meta = _ref6.meta,
-      props = (0, _objectWithoutProperties2["default"])(_ref6, ["helpText", "meta"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded6);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.CustomInput, props), meta.error && /*#__PURE__*/_react["default"].createElement(_reactstrap.FormFeedback, null, meta.error), helpText && /*#__PURE__*/_react["default"].createElement(_reactstrap.FormText, null, helpText));
 };

package/lib/FormInputArray/FormInputArray.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,13 +27,28 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _reactstrap = require("reactstrap");
 
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _useStandardFormInput3 = _interopRequireDefault(require("../useStandardFormInput"));
 
 var _NestedFormFieldContext = _interopRequireDefault(require("../NestedFormFieldContext"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+var _excluded = ["id", "name", "label", "newItem", "component", "prepend", "disabled", "validate"],
+    _excluded2 = ["className"],
+    _excluded3 = ["className", "children"],
+    _excluded4 = ["children", "className"],
+    _excluded5 = ["children", "className"],
+    _excluded6 = ["children", "className"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -46,7 +61,7 @@ function FormInputArray(_ref) {
       Prepend = _ref.prepend,
       disabled = _ref.disabled,
       validate = _ref.validate,
-      props = (0, _objectWithoutProperties2["default"])(_ref, ["id", "name", "label", "newItem", "component", "prepend", "disabled", "validate"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
   var _useStandardFormInput = (0, _useStandardFormInput3["default"])(_objectSpread({
     id: id,
@@ -87,8 +102,8 @@ function FormInputArray(_ref) {
     onClick: addItem,
     title: "Add an additional item",
     className: "add-array-item"
-  }, /*#__PURE__*/_react["default"].createElement("i", {
-    className: "fas fa-plus"
+  }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faPlus
   }), " Add New"))), /*#__PURE__*/_react["default"].createElement(_reactstrap.CardBody, null, meta.error && typeof meta.error === 'string' && /*#__PURE__*/_react["default"].createElement(_reactstrap.Row, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.Col, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.Alert, {
     className: "field-array-alert",
     color: "danger"
@@ -101,14 +116,20 @@ function FormInputArray(_ref) {
   })), values.map(function (value, index) {
     var itemName = "".concat(inputProps.name, "[").concat(index, "]");
     return /*#__PURE__*/_react["default"].createElement(_reactstrap.Row, {
-      key: value && value['form-input-array-key'] || value && value['id'] || itemName
+      key: value && value['form-input-array-key'] || value && value['id'] || itemName,
+      className: (0, _classnames["default"])('field-array-item', {
+        removed: value.isDeleted
+      }),
+      role: "listitem"
     }, /*#__PURE__*/_react["default"].createElement(_NestedFormFieldContext["default"].Provider, {
       value: itemName
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "component"
     }, /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
       value: value,
       name: itemName,
       disabled: disabled
-    }, props))), !disabled && /*#__PURE__*/_react["default"].createElement("div", {
+    }, props)))), !disabled && /*#__PURE__*/_react["default"].createElement("div", {
       className: "remove-array-item"
     }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
       color: "link",
@@ -116,8 +137,8 @@ function FormInputArray(_ref) {
         return removeItem(index);
       },
       title: "Remove Item"
-    }, /*#__PURE__*/_react["default"].createElement("i", {
-      className: "fa fa-trash-alt"
+    }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: _freeSolidSvgIcons.faTrash
     }))));
   })));
 
@@ -158,7 +179,7 @@ function FormInputArray(_ref) {
 
 FormInputArray.Header = function (_ref2) {
   var className = _ref2.className,
-      props = (0, _objectWithoutProperties2["default"])(_ref2, ["className"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
   return /*#__PURE__*/_react["default"].createElement(FormInputArray.Column, (0, _extends2["default"])({
     className: (0, _classnames["default"])('mb-2', className)
   }, props));
@@ -167,7 +188,7 @@ FormInputArray.Header = function (_ref2) {
 FormInputArray.Column = function (_ref3) {
   var className = _ref3.className,
       children = _ref3.children,
-      props = (0, _objectWithoutProperties2["default"])(_ref3, ["className", "children"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
   return /*#__PURE__*/_react["default"].createElement(_reactstrap.Col, (0, _extends2["default"])({
     className: (0, _classnames["default"])('d-flex', className)
   }, props), children);
@@ -177,24 +198,24 @@ FormInputArray.propTypes = {
   name: _propTypes["default"].string.isRequired,
   label: _propTypes["default"].string.isRequired,
 
-  /**
-   * The component to use for each element of the array
+  /**
+   * The component to use for each element of the array
    **/
   component: _propTypes["default"].func.isRequired,
   disabled: _propTypes["default"].bool,
 
-  /**
-   * When 'Add Item' is used this object is passed as the default (so you can, as an example, give a default)
+  /**
+   * When 'Add Item' is used this object is passed as the default (so you can, as an example, give a default)
    **/
   newItem: _propTypes["default"].object,
 
-  /**
-   * Affixes a 'header' above all rows so you can have a grid-like display
+  /**
+   * Affixes a 'header' above all rows so you can have a grid-like display
    **/
   prepend: _propTypes["default"].func,
 
-  /**
-   * standard validator, BUT, will be passed the whole array to validate
+  /**
+   * standard validator, BUT, will be passed the whole array to validate
    **/
   validate: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].func), _propTypes["default"].func])
 };
@@ -202,26 +223,26 @@ FormInputArray.propTypes = {
 function CardActionHeader(_ref4) {
   var children = _ref4.children,
       className = _ref4.className,
-      props = (0, _objectWithoutProperties2["default"])(_ref4, ["children", "className"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded4);
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    className: "card-header card-action-header d-flex align-items-baseline ".concat(className)
+    className: (0, _classnames["default"])('card-header card-action-header d-flex align-items-baseline', className)
   }, props), children);
 }
 
 CardActionHeader.Title = function Title(_ref5) {
   var children = _ref5.children,
       className = _ref5.className,
-      props = (0, _objectWithoutProperties2["default"])(_ref5, ["children", "className"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded5);
   return /*#__PURE__*/_react["default"].createElement("strong", (0, _extends2["default"])({
-    className: "mr-auto ".concat(className)
+    className: (0, _classnames["default"])('mr-auto', className)
   }, props), children);
 };
 
 CardActionHeader.Actions = function Actions(_ref6) {
   var children = _ref6.children,
       className = _ref6.className,
-      props = (0, _objectWithoutProperties2["default"])(_ref6, ["children", "className"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded6);
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    className: "card-action-header-actions ".concat(className)
+    className: (0, _classnames["default"])('card-action-header-actions', className)
   }, props), children);
 };

package/lib/FormSection.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,6 +13,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _NestedFormFieldContext = _interopRequireDefault(require("./NestedFormFieldContext"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function FormSection(_ref) {
   var children = _ref.children,
       name = _ref.name;