@maif/react-forms 1.0.5 → 1.0.9

package/dist/react-form.js.LICENSE.txt

@@ -54,6 +54,14 @@ and limitations under the License.
 
 /*! showdown v 1.9.1 - 02-11-2019 */
 
+/**
+ * A better abstraction over CSS.
+ *
+ * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
+ * @website https://github.com/cssinjs/jss
+ * @license MIT
+ */
+
 /** @license React v0.20.2
  * scheduler.production.min.js
  *

package/lib/form.d.ts

@@ -1,11 +1,2 @@
-export function Form({ schema, flow, value, inputWrapper, onSubmit, footer, style, className, options }: {
-    schema: any;
-    flow: any;
-    value: any;
-    inputWrapper: any;
-    onSubmit: any;
-    footer: any;
-    style: any;
-    className: any;
-    options?: {} | undefined;
-}): JSX.Element;
+export const Form: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/lib/form.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Form = void 0;
 
+var _react = _interopRequireWildcard(require("react"));
+
 var _yup = require("@hookform/resolvers/yup");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _reactFeather = require("react-feather");
 
 var _reactHookForm = require("react-hook-form");
@@ -23,6 +23,8 @@ var _uuid = require("uuid");
 
 var yup = _interopRequireWildcard(require("yup"));
 
+var _styleContext = require("./styleContext");
+
 var _type = require("./type");
 
 var _format = require("./format");
@@ -33,12 +35,12 @@ var _index2 = require("./resolvers/index");
 
 var _Option = require("./Option");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -81,6 +83,7 @@ var BasicWrapper = function BasicWrapper(_ref) {
       help = _ref.help,
       children = _ref.children,
       render = _ref.render;
+  var classes = (0, _styleContext.useCustomStyle)();
   var id = (0, _uuid.v4)();
 
   if (render) {
@@ -116,7 +119,7 @@ var BasicWrapper = function BasicWrapper(_ref) {
       cursor: 'help'
     }
   })))), children, error && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "invalid-feedback"
+    className: classes.invalid_feedback
   }, error.message));
 };
 
@@ -131,8 +134,8 @@ var CustomizableInput = function CustomizableInput(props) {
 };
 
 var defaultVal = function defaultVal(t, array, defaultValue) {
-  if (!!array) return [];
   if (!!defaultValue) return defaultValue;
+  if (!!array) return [];
 
   switch (t) {
     case _type.type.bool:
@@ -142,7 +145,8 @@ var defaultVal = function defaultVal(t, array, defaultValue) {
       return 0;
 
     case _type.type.object:
-      return {};
+      return undefined;
+    //todo: passur de moi
 
     case _type.type.string:
       return "";
@@ -160,21 +164,25 @@ var getDefaultValues = function getDefaultValues(flow, schema) {
       return _objectSpread(_objectSpread({}, acc), getDefaultValues(key.flow, schema));
     }
 
-    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, defaultVal(entry.type, entry.array, entry.defaultValue)));
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, defaultVal(entry.type, entry.array || entry.isMulti, entry.defaultValue)));
   }, {});
 };
 
-var Form = function Form(_ref2) {
+var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
   var schema = _ref2.schema,
       flow = _ref2.flow,
       value = _ref2.value,
       inputWrapper = _ref2.inputWrapper,
       onSubmit = _ref2.onSubmit,
+      _ref2$onError = _ref2.onError,
+      onError = _ref2$onError === void 0 ? function () {} : _ref2$onError,
       footer = _ref2.footer,
-      style = _ref2.style,
+      _ref2$style = _ref2.style,
+      style = _ref2$style === void 0 ? {} : _ref2$style,
       className = _ref2.className,
       _ref2$options = _ref2.options,
       options = _ref2$options === void 0 ? {} : _ref2$options;
+  var classes = (0, _styleContext.useCustomStyle)(style);
   var formFlow = flow || Object.keys(schema);
 
   var maybeCustomHttpClient = function maybeCustomHttpClient(url, method) {
@@ -203,39 +211,63 @@ var Form = function Form(_ref2) {
     return resolver;
   };
 
-  var cleanInputArray = function cleanInputArray(obj) {
+  var cleanInputArray = function cleanInputArray(obj, subSchema) {
     return Object.entries(obj).reduce(function (acc, curr) {
       var _curr = _slicedToArray(curr, 2),
           key = _curr[0],
           v = _curr[1];
 
       if (Array.isArray(v)) {
-        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v.map(function (value) {
-          return {
-            value: value
-          };
-        })));
+        var isArray = (0, _Option.option)(subSchema).orElse(schema).map(function (s) {
+          return s[key];
+        }).map(function (entry) {
+          return !!entry.array;
+        }).getOrElse(false);
+
+        if (isArray) {
+          return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v.map(function (value) {
+            return {
+              value: value
+            };
+          })));
+        }
+
+        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
       } else if (!!v && _typeof(v) === 'object') {
-        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanInputArray(v)));
+        var _schema$key;
+
+        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanInputArray(v, ((_schema$key = schema[key]) === null || _schema$key === void 0 ? void 0 : _schema$key.schema) || {})));
       } else {
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
       }
     }, {});
   };
 
-  var cleanOutputArray = function cleanOutputArray(obj) {
+  var cleanOutputArray = function cleanOutputArray(obj, subSchema) {
     return Object.entries(obj).reduce(function (acc, curr) {
       var _curr2 = _slicedToArray(curr, 2),
           key = _curr2[0],
           v = _curr2[1];
 
       if (Array.isArray(v)) {
-        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v.map(function (_ref3) {
-          var value = _ref3.value;
-          return value;
-        })));
+        var isArray = (0, _Option.option)(subSchema).orElse(schema).map(function (s) {
+          return s[key];
+        }).map(function (entry) {
+          return !!entry.array;
+        }).getOrElse(false);
+
+        if (isArray) {
+          return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v.map(function (_ref3) {
+            var value = _ref3.value;
+            return value;
+          })));
+        }
+
+        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
       } else if (!!v && _typeof(v) === 'object') {
-        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanOutputArray(v)));
+        var _schema$key2;
+
+        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanOutputArray(v, ((_schema$key2 = schema[key]) === null || _schema$key2 === void 0 ? void 0 : _schema$key2.schema) || {})));
       } else {
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
       }
@@ -249,7 +281,7 @@ var Form = function Form(_ref2) {
     defaultValues: cleanInputArray(value || defaultValues)
   });
   var register = methods.register,
-      handleSubmit = methods.handleSubmit,
+      _handleSubmit = methods.handleSubmit,
       errors = methods.formState.errors,
       control = methods.control,
       _reset = methods.reset,
@@ -266,12 +298,14 @@ var Form = function Form(_ref2) {
     _reset(cleanInputArray(value || defaultValues));
   }, [schema]);
   var data = watch();
+  var prevData = usePrevious(data);
   (0, _react.useEffect)(function () {
     //todo: with debounce
-    if (!!options.autosubmit) {
-      handleSubmit(function (data) {
-        return onSubmit(cleanOutputArray(data));
-      });
+    if (!!options.autosubmit && JSON.stringify(data) !== JSON.stringify(prevData)) {
+      _handleSubmit(function (data) {
+        var clean = cleanOutputArray(data);
+        onSubmit(clean);
+      }, onError)();
     }
   }, [data]);
 
@@ -279,27 +313,40 @@ var Form = function Form(_ref2) {
     console.log(watch());
   }
 
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      handleSubmit: function handleSubmit() {
+        return _handleSubmit(function (data) {
+          var clean = cleanOutputArray(data);
+          onSubmit(clean);
+        }, onError)();
+      }
+    };
+  });
   return /*#__PURE__*/_react["default"].createElement(_reactHookForm.FormProvider, methods, /*#__PURE__*/_react["default"].createElement("form", {
-    className: className || "col-12 section pt-2 pr-2",
-    style: style,
-    onSubmit: handleSubmit(function (data) {
+    className: className || classes.pr_15,
+    onSubmit: _handleSubmit(function (data) {
       var clean = cleanOutputArray(data);
-      return onSubmit(clean);
-    })
+      onSubmit(clean);
+    }, onError)
   }, formFlow.map(function (entry, idx) {
     if (entry && _typeof(entry) === 'object') {
       var errored = entry.flow.some(function (step) {
         return !!errors[step];
       });
       return /*#__PURE__*/_react["default"].createElement(_index.Collapse, {
-        key: idx,
+        key: "collapse-".concat(idx),
         label: entry.label,
         collapsed: entry.collapsed,
         errored: errored
-      }, entry.flow.map(function (entry, idx) {
+      }, entry.flow.map(function (entry, entryIdx) {
         var step = schema[entry];
+        var error = entry.split('.').reduce(function (object, key) {
+          return object && object[key];
+        }, errors); //FIXME: better key ==> entry name + idx
+
         return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
-          key: idx,
+          key: "collapse-".concat(idx, "-").concat(entry, "-").concat(entryIdx),
           entry: entry,
           error: error,
           label: step.label || entry,
@@ -326,7 +373,7 @@ var Form = function Form(_ref2) {
       return object && object[key];
     }, errors);
     return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
-      key: idx,
+      key: "".concat(entry, "-").concat(idx),
       entry: entry,
       error: error,
       label: step.label || entry,
@@ -352,18 +399,20 @@ var Form = function Form(_ref2) {
     reset: function reset() {
       return _reset(defaultValues);
     },
-    valid: handleSubmit(function (data) {
+    valid: _handleSubmit(function (data) {
       return onSubmit(cleanOutputArray(data));
-    }),
+    }, onError),
     actions: options.actions
   })));
-};
+});
 
 exports.Form = Form;
 
 var Footer = function Footer(props) {
   var _props$actions, _props$actions$submit, _props$actions2, _props$actions2$submi, _props$actions3, _props$actions3$reset, _props$actions4, _props$actions4$reset, _props$actions5, _props$actions5$submi;
 
+  var classes = (0, _styleContext.useCustomStyle)();
+
   if (props.render) {
     return props.render({
       reset: props.reset,
@@ -373,13 +422,13 @@ var Footer = function Footer(props) {
 
   var isSubmitDisplayed = ((_props$actions = props.actions) === null || _props$actions === void 0 ? void 0 : (_props$actions$submit = _props$actions.submit) === null || _props$actions$submit === void 0 ? void 0 : _props$actions$submit.display) === undefined ? true : !!((_props$actions2 = props.actions) !== null && _props$actions2 !== void 0 && (_props$actions2$submi = _props$actions2.submit) !== null && _props$actions2$submi !== void 0 && _props$actions2$submi.display);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "d-flex flex-row justify-content-end mt-2"
+    className: "".concat(classes.flex, " ").concat(classes.jc_end, " ").concat(classes.mt_5)
   }, ((_props$actions3 = props.actions) === null || _props$actions3 === void 0 ? void 0 : (_props$actions3$reset = _props$actions3.reset) === null || _props$actions3$reset === void 0 ? void 0 : _props$actions3$reset.display) && /*#__PURE__*/_react["default"].createElement("button", {
-    className: "btn btn-danger",
+    className: "".concat(classes.btn, " ").concat(classes.btn_red),
     type: "button",
     onClick: props.reset
   }, ((_props$actions4 = props.actions) === null || _props$actions4 === void 0 ? void 0 : (_props$actions4$reset = _props$actions4.reset) === null || _props$actions4$reset === void 0 ? void 0 : _props$actions4$reset.label) || 'Reset'), isSubmitDisplayed && /*#__PURE__*/_react["default"].createElement("button", {
-    className: "btn btn-success ml-1",
+    className: "".concat(classes.btn, " ").concat(classes.btn_green, " ").concat(classes.ml_10),
     type: "submit"
   }, ((_props$actions5 = props.actions) === null || _props$actions5 === void 0 ? void 0 : (_props$actions5$submi = _props$actions5.submit) === null || _props$actions5$submi === void 0 ? void 0 : _props$actions5$submi.label) || 'Save'));
 };
@@ -399,6 +448,26 @@ var Step = function Step(_ref4) {
       httpClient = _ref4.httpClient,
       defaultValue = _ref4.defaultValue,
       index = _ref4.index;
+  var classes = (0, _styleContext.useCustomStyle)();
+  var visibleStep = step && (0, _Option.option)(step.visible).map(function (visible) {
+    switch (_typeof(visible)) {
+      case 'object':
+        var value = watch(step.visible.ref);
+        return (0, _Option.option)(step.visible.test).map(function (test) {
+          return test(value);
+        }).getOrElse(value);
+
+      case 'boolean':
+        return visible;
+
+      default:
+        return true;
+    }
+  }).getOrElse(true);
+
+  if (!visibleStep) {
+    return null;
+  }
 
   if (step.array) {
     return /*#__PURE__*/_react["default"].createElement(ArrayStep, {
@@ -437,26 +506,6 @@ var Step = function Step(_ref4) {
     });
   }
 
-  var visibleStep = step && (0, _Option.option)(step.visible).map(function (visible) {
-    switch (_typeof(visible)) {
-      case 'object':
-        var value = watch(step.visible.ref);
-        return (0, _Option.option)(step.visible.test).map(function (test) {
-          return test(value);
-        }).getOrElse(value);
-
-      case 'boolean':
-        return visible;
-
-      default:
-        return true;
-    }
-  }).getOrElse(true);
-
-  if (!visibleStep) {
-    return null;
-  }
-
   switch (step.type) {
     case _type.type.string:
       switch (step.format) {
@@ -477,9 +526,7 @@ var Step = function Step(_ref4) {
           }, /*#__PURE__*/_react["default"].createElement("textarea", _extends({
             type: "text",
             id: entry,
-            className: (0, _classnames["default"])("form-control", {
-              'is-invalid': error
-            }),
+            className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
             readOnly: step.disabled ? 'readOnly' : null
           }, step.props, {
             name: entry,
@@ -503,9 +550,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.CodeInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
-                  'is-invalid': error
-                }),
+                className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
                 readOnly: step.disabled ? 'readOnly' : null,
                 onChange: field.onChange,
                 value: field.value,
@@ -530,9 +575,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.MarkdownInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
-                  'is-invalid': error
-                }),
+                className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
                 readOnly: step.disabled ? 'readOnly' : null,
                 onChange: field.onChange,
                 value: field.value,
@@ -541,6 +584,7 @@ var Step = function Step(_ref4) {
             }
           });
 
+        case _format.format.buttonsSelect:
         case _format.format.select:
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
             name: entry,
@@ -557,9 +601,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
-                  'is-invalid': error
-                }),
+                className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
                 readOnly: step.disabled ? 'readOnly' : null,
                 onChange: field.onChange,
                 value: field.value,
@@ -590,9 +632,7 @@ var Step = function Step(_ref4) {
             // {...step.props}
             type: step.format || 'text',
             id: entry,
-            className: (0, _classnames["default"])("form-control", {
-              'is-invalid': error
-            }),
+            className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
             readOnly: step.disabled ? 'readOnly' : null // defaultValue={defaultValue}
             ,
             placeholder: step.placeholder
@@ -601,6 +641,7 @@ var Step = function Step(_ref4) {
 
     case _type.type.number:
       switch (step.format) {
+        case _format.format.buttonsSelect:
         case _format.format.select:
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
             name: entry,
@@ -617,9 +658,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
-                  'is-invalid': error
-                }),
+                className: (0, _classnames["default"])(classes.content, _defineProperty({}, classes.input__invalid, error)),
                 readOnly: step.disabled ? 'readOnly' : null,
                 onChange: field.onChange,
                 value: field.value,
@@ -647,9 +686,7 @@ var Step = function Step(_ref4) {
           }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, step.props, {
             type: step.format || 'number',
             id: entry,
-            className: (0, _classnames["default"])("form-control", {
-              'is-invalid': error
-            }),
+            className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
             readOnly: step.disabled ? 'readOnly' : null,
             name: entry,
             placeholder: step.placeholder,
@@ -673,9 +710,7 @@ var Step = function Step(_ref4) {
             }, field),
             error: error
           }, /*#__PURE__*/_react["default"].createElement(_index.BooleanInput, _extends({}, step.props, {
-            className: (0, _classnames["default"])({
-              'is-invalid': error
-            }),
+            className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
             readOnly: step.disabled ? 'readOnly' : null,
             onChange: field.onChange,
             value: field.value
@@ -685,6 +720,7 @@ var Step = function Step(_ref4) {
 
     case _type.type.object:
       switch (step.format) {
+        case _format.format.buttonsSelect:
         case _format.format.select:
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
             name: entry,
@@ -702,9 +738,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
-                  'is-invalid': error
-                }),
+                className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
                 readOnly: step.disabled ? 'readOnly' : null,
                 onChange: field.onChange,
                 value: field.value,
@@ -762,9 +796,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.ObjectInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
-                  'is-invalid': error
-                }),
+                className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
                 readOnly: step.disabled ? 'readOnly' : null,
                 onChange: field.onChange,
                 value: field.value,
@@ -792,9 +824,7 @@ var Step = function Step(_ref4) {
             error: error
           }, /*#__PURE__*/_react["default"].createElement(_reactRainbowComponents.DatePicker, _extends({}, step.props, {
             id: "datePicker-1",
-            className: (0, _classnames["default"])({
-              'is-invalid': error
-            }),
+            className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
             readOnly: step.disabled ? 'readOnly' : null,
             value: field.value,
             onChange: field.onChange,
@@ -837,23 +867,23 @@ var Step = function Step(_ref4) {
               };
 
               return /*#__PURE__*/_react["default"].createElement("div", {
-                className: (0, _classnames["default"])("d-flex flex-row justify-content-start", {
-                  'is-invalid': error
-                })
+                className: (0, _classnames["default"])("d-flex flex-row justify-content-start", _defineProperty({}, classes.input__invalid, error))
               }, /*#__PURE__*/_react["default"].createElement("input", {
                 ref: function ref(r) {
                   return setInput(r);
                 },
                 type: "file",
                 multiple: true,
-                className: "form-control d-none",
+                className: classes.d_none,
                 onChange: setFiles
               }), /*#__PURE__*/_react["default"].createElement("button", {
                 type: "button",
-                className: "btn btn-outline-success pl",
+                className: "".concat(classes.btn, " ").concat(classes.flex, " ").concat(classes.ai_center),
                 disabled: uploading,
                 onClick: trigger
-              }, uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Loader, null), !uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Upload, null), "Select file"));
+              }, uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Loader, null), !uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Upload, null), /*#__PURE__*/_react["default"].createElement("span", {
+                className: "".concat(classes.ml_5)
+              }, "Select file")));
             };
 
             return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
@@ -891,9 +921,7 @@ var Step = function Step(_ref4) {
       }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, step.props, {
         type: "file",
         id: entry,
-        className: (0, _classnames["default"])("form-control", {
-          'is-invalid': error
-        }),
+        className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
         readOnly: step.disabled ? 'readOnly' : null,
         name: entry,
         placeholder: step.placeholder
@@ -931,11 +959,13 @@ var ArrayStep = function ArrayStep(_ref15) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: field.id,
       className: "d-flex flex-row"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex-grow-1"
     }, component(_objectSpread(_objectSpread({
       key: field.id
     }, field), {}, {
       defaultValue: values[idx] || defaultValue
-    }), idx), /*#__PURE__*/_react["default"].createElement("div", {
+    }), idx)), /*#__PURE__*/_react["default"].createElement("div", {
       className: "input-group-append"
     }, /*#__PURE__*/_react["default"].createElement("button", {
       className: "btn btn-danger btn-sm",
@@ -946,12 +976,10 @@ var ArrayStep = function ArrayStep(_ref15) {
     }, "remove")));
   }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("input", {
     type: "button",
-    className: (0, _classnames["default"])("btn btn-info mt-2", {
-      'is-invalid': error
-    }),
+    className: (0, _classnames["default"])("btn btn-info mt-2", _defineProperty({}, classes.input__invalid, error)),
     onClick: function onClick() {
       append({
-        value: defaultValue
+        value: step.addableDefaultValue
       });
       trigger(entry);
     },

package/lib/format.d.ts

@@ -8,4 +8,5 @@ export declare const format: {
     password: string;
     hidden: string;
     form: string;
+    buttonsSelect: string;
 };

package/lib/format.js

@@ -13,6 +13,7 @@ var format = {
   email: 'email',
   password: 'password',
   hidden: 'hidden',
-  form: 'form'
+  form: 'form',
+  buttonsSelect: 'buttons'
 };
 exports.format = format;

package/lib/inputs/ArrayInput.js

@@ -84,7 +84,7 @@ var ArrayInput = function ArrayInput(props) {
         });
       }
     }
-  }, [props, value]);
+  }, [props.optionsFrom]);
 
   var handleChanges = function handleChanges(changes) {
     props.onChange(changes.map(function (x) {

package/lib/inputs/BooleanInput.js

@@ -9,30 +9,27 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactFeather = require("react-feather");
 
+var _styleContext = require("../styleContext");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var BooleanInput = function BooleanInput(_ref) {
   var onChange = _ref.onChange,
       value = _ref.value;
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "form-group row"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "col-sm-10"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "col-sm-6 cursor-pointer"
+  var classes = (0, _styleContext.useCustomStyle)();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.cursor_pointer
   }, !!value && /*#__PURE__*/_react["default"].createElement(_reactFeather.ToggleRight, {
-    className: "input__boolean__on",
+    className: classes.input__boolean__on,
     onClick: function onClick() {
       return onChange(false);
     }
   }), !value && /*#__PURE__*/_react["default"].createElement(_reactFeather.ToggleLeft, {
-    className: "input__boolean__off",
+    className: classes.input__boolean__off,
     onClick: function onClick() {
       return onChange(true);
     }
-  }))))));
+  }));
 };
 
 exports.BooleanInput = BooleanInput;