@maif/react-forms 1.0.2 → 1.0.6

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/constraints.d.ts

@@ -42,6 +42,7 @@ export declare const length: (ref: number | Reference<number>, message?: string)
 export declare const supportedFormat: (arrayOfValues: string[], message?: string) => (r: yup.ObjectSchema<any, any, any, any>) => yup.ObjectSchema<any, any, any, any>;
 export declare const unsupportedFormat: (arrayOfValues: string[], message?: string) => (r: yup.ObjectSchema<any, any, any, any>) => yup.ObjectSchema<any, any, any, any>;
 export declare const maxSize: (ref: number | Reference<number>, message?: string) => (r: yup.ObjectSchema<any, any, any, any>) => yup.ObjectSchema<any, any, any, any>;
+export declare const nullable: () => (r: yup.AnySchema) => any;
 export declare const test: (name: string, message: string | undefined, test: (val: any) => boolean) => (r: yup.AnySchema) => yup.AnySchema<any, any, any>;
 export declare const when: (ref: string, test: (val: any) => boolean, then?: any, otherwise?: any) => (r: yup.AnySchema, key: string, dependencies: any) => yup.AnySchema<any, any, any>;
 export declare const oneOf: (arrayOfValues: any[], message?: string) => (r: yup.AnySchema) => yup.AnySchema<any, any, any>;
@@ -84,5 +85,6 @@ export declare const jsonConstraints: {
     when: ({ ref, test, then, otherwise }: WhenConstraint) => (r: yup.AnySchema, key: string, dependencies: any) => yup.AnySchema<any, any, any>;
     oneOf: ({ arrayOfValues, message }: ArrayOfAnyConstraint) => (r: yup.AnySchema) => yup.AnySchema<any, any, any>;
     ref: (val: Ref) => Reference;
+    nullable: () => (r: yup.AnySchema) => any;
 };
 export {};

package/lib/constraints.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.jsonConstraints = exports.ref = exports.oneOf = exports.when = exports.test = exports.maxSize = exports.unsupportedFormat = exports.supportedFormat = exports.length = exports.moreThan = exports.lessThan = exports.integer = exports.negative = exports.positive = exports.max = exports.min = exports.matches = exports.uuid = exports.email = exports.url = exports.required = void 0;
+exports.jsonConstraints = exports.ref = exports.oneOf = exports.when = exports.test = exports.nullable = exports.maxSize = exports.unsupportedFormat = exports.supportedFormat = exports.length = exports.moreThan = exports.lessThan = exports.integer = exports.negative = exports.positive = exports.max = exports.min = exports.matches = exports.uuid = exports.email = exports.url = exports.required = void 0;
 
 var yup = _interopRequireWildcard(require("yup"));
 
@@ -193,6 +193,14 @@ var _maxSize = function maxSize(ref) {
 
 exports.maxSize = _maxSize;
 
+var _nullable = function nullable() {
+  return function (r) {
+    return r.nullable();
+  };
+};
+
+exports.nullable = _nullable;
+
 var _test = function test(name) {
   var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Test failed';
   var test = arguments.length > 2 ? arguments[2] : undefined;
@@ -355,6 +363,9 @@ var jsonConstraints = {
   },
   ref: function ref(val) {
     return _ref20(val.ref);
+  },
+  nullable: function nullable() {
+    return _nullable();
   }
 };
 exports.jsonConstraints = jsonConstraints;

package/lib/form.d.ts

@@ -5,7 +5,7 @@ export function Form({ schema, flow, value, inputWrapper, onSubmit, footer, styl
     inputWrapper: any;
     onSubmit: any;
     footer: any;
-    style: any;
+    style?: {} | undefined;
     className: any;
     options?: {} | undefined;
 }): JSX.Element;

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,11 +35,13 @@ 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(); }
 
@@ -51,8 +55,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-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 _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 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; }
@@ -171,10 +173,12 @@ var Form = function Form(_ref2) {
       inputWrapper = _ref2.inputWrapper,
       onSubmit = _ref2.onSubmit,
       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,11 +207,74 @@ var Form = function Form(_ref2) {
     return resolver;
   };
 
+  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)) {
+        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') {
+        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, subSchema) {
+    return Object.entries(obj).reduce(function (acc, curr) {
+      var _curr2 = _slicedToArray(curr, 2),
+          key = _curr2[0],
+          v = _curr2[1];
+
+      if (Array.isArray(v)) {
+        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') {
+        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));
+      }
+    }, {});
+  };
+
   var methods = (0, _reactHookForm.useForm)({
     resolver: function resolver(data, context, options) {
       return (0, _yup.yupResolver)(_resolver(data))(data, context, options);
     },
-    defaultValues: value || defaultValues
+    defaultValues: cleanInputArray(value || defaultValues)
   });
   var register = methods.register,
       handleSubmit = methods.handleSubmit,
@@ -220,24 +287,32 @@ var Form = function Form(_ref2) {
       setValue = methods.setValue;
   (0, _react.useEffect)(function () {
     if (value) {
-      _reset(value);
+      _reset(cleanInputArray(value));
     }
   }, [value, _reset]);
   (0, _react.useEffect)(function () {
-    _reset(value || defaultValues);
+    _reset(cleanInputArray(value || defaultValues));
   }, [schema]);
   var data = watch();
   (0, _react.useEffect)(function () {
     //todo: with debounce
     if (!!options.autosubmit) {
-      handleSubmit(onSubmit);
+      handleSubmit(function () {
+        return onSubmit(cleanOutputArray(data));
+      });
     }
-  }, [data]); // console.log(watch())
+  }, [data]);
+
+  if (options.watch) {
+    console.log(watch());
+  }
 
   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(onSubmit)
+    className: className || classes.pr_15,
+    onSubmit: handleSubmit(function (data) {
+      var clean = cleanOutputArray(data);
+      return onSubmit(clean);
+    })
   }, formFlow.map(function (entry, idx) {
     if (entry && _typeof(entry) === 'object') {
       var errored = entry.flow.some(function (step) {
@@ -304,7 +379,9 @@ var Form = function Form(_ref2) {
     reset: function reset() {
       return _reset(defaultValues);
     },
-    valid: handleSubmit(onSubmit),
+    valid: handleSubmit(function (data) {
+      return onSubmit(cleanOutputArray(data));
+    }),
     actions: options.actions
   })));
 };
@@ -314,6 +391,8 @@ 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,
@@ -323,32 +402,33 @@ 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'));
 };
 
-var Step = function Step(_ref3) {
-  var entry = _ref3.entry,
-      step = _ref3.step,
-      error = _ref3.error,
-      register = _ref3.register,
-      schema = _ref3.schema,
-      control = _ref3.control,
-      trigger = _ref3.trigger,
-      getValues = _ref3.getValues,
-      _setValue = _ref3.setValue,
-      watch = _ref3.watch,
-      inputWrapper = _ref3.inputWrapper,
-      httpClient = _ref3.httpClient,
-      defaultValue = _ref3.defaultValue,
-      index = _ref3.index;
+var Step = function Step(_ref4) {
+  var entry = _ref4.entry,
+      step = _ref4.step,
+      error = _ref4.error,
+      register = _ref4.register,
+      schema = _ref4.schema,
+      control = _ref4.control,
+      trigger = _ref4.trigger,
+      getValues = _ref4.getValues,
+      _setValue = _ref4.setValue,
+      watch = _ref4.watch,
+      inputWrapper = _ref4.inputWrapper,
+      httpClient = _ref4.httpClient,
+      defaultValue = _ref4.defaultValue,
+      index = _ref4.index;
+  var classes = (0, _styleContext.useCustomStyle)();
 
   if (step.array) {
     return /*#__PURE__*/_react["default"].createElement(ArrayStep, {
@@ -362,15 +442,14 @@ var Step = function Step(_ref3) {
       values: getValues(entry),
       defaultValue: step.defaultValue || defaultVal(step.type),
       component: function component(props, idx) {
-        /*#__PURE__*/
-        _react["default"].createElement("div", null, idx);
+        var _error$idx;
 
         return /*#__PURE__*/_react["default"].createElement(Step, {
-          entry: "".concat(entry, "[").concat(idx, "]"),
+          entry: "".concat(entry, "[").concat(idx, "].value"),
           step: _objectSpread(_objectSpread({}, schema[entry]), {}, {
             array: false
           }),
-          error: error,
+          error: error && ((_error$idx = error[idx]) === null || _error$idx === void 0 ? void 0 : _error$idx.value),
           register: register,
           schema: schema,
           control: control,
@@ -428,7 +507,7 @@ var Step = function Step(_ref3) {
           }, /*#__PURE__*/_react["default"].createElement("textarea", _extends({
             type: "text",
             id: entry,
-            className: (0, _classnames["default"])("form-control", {
+            className: (0, _classnames["default"])(classes.input, {
               'is-invalid': error
             }),
             readOnly: step.disabled ? 'readOnly' : null
@@ -442,8 +521,8 @@ var Step = function Step(_ref3) {
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
             name: entry,
             control: control,
-            render: function render(_ref4) {
-              var field = _ref4.field;
+            render: function render(_ref5) {
+              var field = _ref5.field;
               return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
                 render: step.render,
                 field: _objectSpread({
@@ -469,8 +548,8 @@ var Step = function Step(_ref3) {
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
             name: entry,
             control: control,
-            render: function render(_ref5) {
-              var field = _ref5.field;
+            render: function render(_ref6) {
+              var field = _ref6.field;
               return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
                 render: step.render,
                 field: _objectSpread({
@@ -496,8 +575,8 @@ var Step = function Step(_ref3) {
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
             name: entry,
             control: control,
-            render: function render(_ref6) {
-              var field = _ref6.field;
+            render: function render(_ref7) {
+              var field = _ref7.field;
               return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
                 render: step.render,
                 field: _objectSpread({
@@ -541,7 +620,7 @@ var Step = function Step(_ref3) {
             // {...step.props}
             type: step.format || 'text',
             id: entry,
-            className: (0, _classnames["default"])("form-control", {
+            className: (0, _classnames["default"])(classes.input, {
               'is-invalid': error
             }),
             readOnly: step.disabled ? 'readOnly' : null // defaultValue={defaultValue}
@@ -556,8 +635,8 @@ var Step = function Step(_ref3) {
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
             name: entry,
             control: control,
-            render: function render(_ref7) {
-              var field = _ref7.field;
+            render: function render(_ref8) {
+              var field = _ref8.field;
               return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
                 render: step.render,
                 field: _objectSpread({
@@ -568,7 +647,7 @@ var Step = function Step(_ref3) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
+                className: (0, _classnames["default"])(classes.content, {
                   'is-invalid': error
                 }),
                 readOnly: step.disabled ? 'readOnly' : null,
@@ -598,7 +677,7 @@ var Step = function Step(_ref3) {
           }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, step.props, {
             type: step.format || 'number',
             id: entry,
-            className: (0, _classnames["default"])("form-control", {
+            className: (0, _classnames["default"])(classes.input, {
               'is-invalid': error
             }),
             readOnly: step.disabled ? 'readOnly' : null,
@@ -612,8 +691,8 @@ var Step = function Step(_ref3) {
       return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
         name: entry,
         control: control,
-        render: function render(_ref8) {
-          var field = _ref8.field;
+        render: function render(_ref9) {
+          var field = _ref9.field;
           return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
             render: step.render,
             field: _objectSpread({
@@ -641,8 +720,8 @@ var Step = function Step(_ref3) {
             name: entry,
             control: control,
             defaultValue: step.defaultValue,
-            render: function render(_ref9) {
-              var field = _ref9.field;
+            render: function render(_ref10) {
+              var field = _ref10.field;
               return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
                 render: step.render,
                 field: _objectSpread({
@@ -701,8 +780,8 @@ var Step = function Step(_ref3) {
             name: entry,
             control: control,
             defaultValue: step.defaultValue,
-            render: function render(_ref10) {
-              var field = _ref10.field;
+            render: function render(_ref11) {
+              var field = _ref11.field;
               return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
                 render: step.render,
                 field: _objectSpread({
@@ -730,8 +809,8 @@ var Step = function Step(_ref3) {
         name: entry,
         control: control,
         defaultValue: step.defaultValue,
-        render: function render(_ref11) {
-          var field = _ref11.field;
+        render: function render(_ref12) {
+          var field = _ref12.field;
           return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
             render: step.render,
             field: _objectSpread({
@@ -760,11 +839,11 @@ var Step = function Step(_ref3) {
         return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
           name: entry,
           control: control,
-          render: function render(_ref12) {
-            var field = _ref12.field;
+          render: function render(_ref13) {
+            var field = _ref13.field;
 
-            var FileInput = function FileInput(_ref13) {
-              var onChange = _ref13.onChange;
+            var FileInput = function FileInput(_ref14) {
+              var onChange = _ref14.onChange;
 
               var _useState = (0, _react.useState)(false),
                   _useState2 = _slicedToArray(_useState, 2),
@@ -797,14 +876,16 @@ var Step = function Step(_ref3) {
                 },
                 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, {
@@ -842,7 +923,7 @@ var Step = function Step(_ref3) {
       }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, step.props, {
         type: "file",
         id: entry,
-        className: (0, _classnames["default"])("form-control", {
+        className: (0, _classnames["default"])(classes.input, {
           'is-invalid': error
         }),
         readOnly: step.disabled ? 'readOnly' : null,
@@ -855,17 +936,17 @@ var Step = function Step(_ref3) {
   }
 };
 
-var ArrayStep = function ArrayStep(_ref14) {
-  var entry = _ref14.entry,
-      step = _ref14.step,
-      control = _ref14.control,
-      trigger = _ref14.trigger,
-      register = _ref14.register,
-      error = _ref14.error,
-      component = _ref14.component,
-      values = _ref14.values,
-      defaultValue = _ref14.defaultValue,
-      setValue = _ref14.setValue;
+var ArrayStep = function ArrayStep(_ref15) {
+  var entry = _ref15.entry,
+      step = _ref15.step,
+      control = _ref15.control,
+      trigger = _ref15.trigger,
+      register = _ref15.register,
+      error = _ref15.error,
+      component = _ref15.component,
+      values = _ref15.values,
+      defaultValue = _ref15.defaultValue,
+      setValue = _ref15.setValue;
 
   var _useFieldArray = (0, _reactHookForm.useFieldArray)({
     control: control,
@@ -901,7 +982,9 @@ var ArrayStep = function ArrayStep(_ref14) {
       'is-invalid': error
     }),
     onClick: function onClick() {
-      append(defaultValue);
+      append({
+        value: defaultValue
+      });
       trigger(entry);
     },
     value: "Add"
@@ -910,16 +993,16 @@ var ArrayStep = function ArrayStep(_ref14) {
   }, error.message)));
 };
 
-var NestedForm = function NestedForm(_ref15) {
-  var schema = _ref15.schema,
-      flow = _ref15.flow,
-      parent = _ref15.parent,
-      inputWrapper = _ref15.inputWrapper,
-      maybeCustomHttpClient = _ref15.maybeCustomHttpClient,
-      index = _ref15.index,
-      error = _ref15.error,
-      value = _ref15.value,
-      step = _ref15.step;
+var NestedForm = function NestedForm(_ref16) {
+  var schema = _ref16.schema,
+      flow = _ref16.flow,
+      parent = _ref16.parent,
+      inputWrapper = _ref16.inputWrapper,
+      maybeCustomHttpClient = _ref16.maybeCustomHttpClient,
+      index = _ref16.index,
+      error = _ref16.error,
+      value = _ref16.value,
+      step = _ref16.step;
 
   var _useFormContext = (0, _reactHookForm.useFormContext)(),
       register = _useFormContext.register,
@@ -969,7 +1052,7 @@ var NestedForm = function NestedForm(_ref15) {
     }
   }, schemaAndFlow.flow.map(function (entry, idx) {
     var step = schemaAndFlow.schema[entry];
-    var realError = index !== undefined ? error && error[index] && error[index][entry] : error && error[entry];
+    var realError = error && error[entry];
     return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
       key: "".concat(entry, ".").concat(idx),
       entry: "".concat(parent, ".").concat(entry),

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;

package/lib/inputs/CodeInput.d.ts

@@ -1,6 +1,8 @@
-export function CodeInput({ onChange, value, className, readOnly }: {
+export function CodeInput({ onChange, value, className, readOnly, theme, mode }: {
     onChange: any;
     value: any;
     className?: string | undefined;
     readOnly: any;
+    theme?: string | undefined;
+    mode?: string | undefined;
 }): JSX.Element;