@maif/react-forms 1.0.7 → 1.0.8

package/lib/form.js

@@ -133,8 +133,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:
@@ -144,7 +144,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 "";
@@ -162,7 +163,7 @@ 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)));
   }, {});
 };
 
@@ -333,14 +334,15 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
         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) {
-        var step = schema[entry];
+      }, entry.flow.map(function (entry, entryIdx) {
+        var step = schema[entry]; //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,
@@ -367,7 +369,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       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,
@@ -973,15 +975,20 @@ var ArrayStep = function ArrayStep(_ref15) {
       append = _useFieldArray.append,
       remove = _useFieldArray.remove;
 
+  console.log({
+    fields: fields
+  });
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, fields.map(function (field, idx) {
     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",
@@ -997,7 +1004,7 @@ var ArrayStep = function ArrayStep(_ref15) {
     }),
     onClick: function onClick() {
       append({
-        value: defaultValue
+        value: step.addableDefaultValue
       });
       trigger(entry);
     },

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

@@ -1,4 +1,5 @@
-export function CodeInput({ onChange, value, className, readOnly, theme, mode }: {
+export function CodeInput({ onChange, value, className, readOnly, theme, mode, ...props }: {
+    [x: string]: any;
     onChange: any;
     value: any;
     className?: string | undefined;

package/lib/inputs/CodeInput.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactAce = _interopRequireDefault(require("react-ace"));
 
+var _extBeautify = _interopRequireDefault(require("ace-builds/src-noconflict/ext-beautify"));
+
 require("ace-builds/src-noconflict/mode-html");
 
 require("ace-builds/src-noconflict/mode-json");
@@ -27,8 +29,14 @@ require("ace-builds/src-noconflict/ext-searchbox");
 
 require("ace-builds/src-noconflict/ext-language_tools");
 
+var _excluded = ["onChange", "value", "className", "readOnly", "theme", "mode"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var CodeInput = function CodeInput(_ref) {
   var onChange = _ref.onChange,
       value = _ref.value,
@@ -38,8 +46,11 @@ var CodeInput = function CodeInput(_ref) {
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'monokai' : _ref$theme,
       _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? 'javascript' : _ref$mode;
+      mode = _ref$mode === void 0 ? 'javascript' : _ref$mode,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   return /*#__PURE__*/_react["default"].createElement(_reactAce["default"], {
+    commands: _extBeautify["default"].commands,
     className: className,
     readOnly: readOnly,
     style: {
@@ -54,8 +65,15 @@ var CodeInput = function CodeInput(_ref) {
     editorProps: {
       $blockScrolling: true
     },
-    height: "300px",
-    width: "100%",
+    onLoad: function onLoad(editorInstance) {
+      editorInstance.container.style.resize = "both"; // mouseup = css resize end
+
+      document.addEventListener("mouseup", function (e) {
+        return editorInstance.resize();
+      });
+    },
+    height: props.height,
+    width: props.width,
     showGutter: true,
     tabSize: 2,
     highlightActiveLine: true,

package/lib/inputs/Collapse.d.ts

@@ -1,2 +1 @@
 export function Collapse(props: any): JSX.Element;
-export function Panel(props: any): JSX.Element;

package/lib/inputs/Collapse.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Panel = exports.Collapse = void 0;
+exports.Collapse = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactFeather = require("react-feather");
 
+var _styleContext = require("../styleContext");
+
 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; }
@@ -37,6 +39,8 @@ var Collapse = function Collapse(props) {
       collapsed = _useState2[0],
       setCollapsed = _useState2[1];
 
+  var classes = (0, _styleContext.useCustomStyle)();
+
   var toggle = function toggle(e) {
     if (e && e.preventDefault) e.preventDefault();
     setCollapsed(!collapsed);
@@ -47,58 +51,15 @@ var Collapse = function Collapse(props) {
       errored: props.errored
     })
   }, /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "form-group row"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "col-sm-12",
-    onClick: toggle,
-    style: {
-      cursor: 'pointer'
-    }
+    className: "".concat(classes.cursor_pointer, " ").concat(classes.flex, " ").concat(classes.justifyContentBetween),
+    onClick: toggle
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "form__collapse__label",
-    style: {
-      fontWeight: 'bold',
-      marginTop: 7
-    }
+    className: classes.collapse_label
   }, props.label), /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
-    className: "btn btn-access-negative pull-right btn-sm",
-    style: {
-      "float": 'right'
-    },
-    onClick: toggle
-  }, !!collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.Eye, null), !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.EyeOff, null)))), !collapsed && props.children, props.lineEnd && /*#__PURE__*/_react["default"].createElement("hr", null));
-};
-
-exports.Collapse = Collapse;
-
-var Panel = function Panel(props) {
-  var _useState3 = (0, _react.useState)(props.initCollapsed || props.collapsed),
-      _useState4 = _slicedToArray(_useState3, 2),
-      collapsed = _useState4[0],
-      setCollapsed = _useState4[1];
-
-  var toggle = function toggle(e) {
-    if (e && e.preventDefault) e.preventDefault();
-    setCollapsed(!collapsed);
-  };
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "col-xs-12 col-sm-3"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "panel panel-primary",
-    style: {
-      marginBottom: 0
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "panel-heading",
-    style: {
-      cursor: 'pointer'
-    },
+    className: classes.btn,
     onClick: toggle
-  }, props.title), !collapsed && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "panel-body"
-  }, props.children)));
+  }, !!collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.Eye, null), !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.EyeOff, null))), !collapsed && props.children, props.lineEnd && /*#__PURE__*/_react["default"].createElement("hr", null));
 };
 
-exports.Panel = Panel;
+exports.Collapse = Collapse;

package/lib/inputs/SelectInput.js

@@ -15,6 +15,8 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 
 var _Option = require("../Option");
 
+var _utils = require("../utils");
+
 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); }
@@ -46,28 +48,31 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var valueToSelectOption = function valueToSelectOption(value) {
   var possibleValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var isMulti = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var maybeTransformer = arguments.length > 3 ? arguments[3] : undefined;
 
   if (value === null) {
     return null;
   }
 
   if (isMulti) {
-    return value.map(function (x) {
-      return valueToSelectOption(x, possibleValues, false);
-    });
+    return (0, _Option.option)(value).map(function (v) {
+      return v.map(function (x) {
+        return valueToSelectOption(x, possibleValues, false, maybeTransformer);
+      });
+    }).getOrElse([]);
   }
 
   var maybeValue = (0, _Option.option)(possibleValues.find(function (v) {
-    return v.value === value;
+    return (0, _utils.deepEqual)(v.value, value);
   }));
-  return {
+  return maybeValue.getOrElse({
     label: maybeValue.map(function (v) {
       return v.label;
     }).getOrElse(value),
     value: maybeValue.map(function (v) {
       return v.value;
     }).getOrElse(value)
-  };
+  });
 };
 
 var SelectInput = function SelectInput(props) {
@@ -90,13 +95,13 @@ var SelectInput = function SelectInput(props) {
       values = _useState4[0],
       setValues = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti)),
+  var _useState5 = (0, _react.useState)(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti, props.transformer)),
       _useState6 = _slicedToArray(_useState5, 2),
       value = _useState6[0],
       setValue = _useState6[1];
 
   (0, _react.useEffect)(function () {
-    setValue(valueToSelectOption(props.value, values, props.isMulti));
+    setValue(valueToSelectOption(props.value, values, props.isMulti, props.transformer));
   }, [props.value, values]);
   (0, _react.useEffect)(function () {
     if (props.optionsFrom) {
@@ -110,7 +115,7 @@ var SelectInput = function SelectInput(props) {
           return r.json();
         }).then(function (values) {
           return values.map(function (x) {
-            return props.transformer ? props.transformer(x) : valueToSelectOption(x);
+            return props.transformer ? props.transformer(x) : valueToSelectOption(x, values, props.isMulti, props.transformer);
           });
         }).then(function (values) {
           setValues(values);
@@ -121,7 +126,7 @@ var SelectInput = function SelectInput(props) {
         });
       }
     }
-  }, [values, props.isMulti]);
+  }, [props.optionsFrom]);
 
   var onChange = function onChange(changes) {
     setValue(changes);
@@ -135,11 +140,21 @@ var SelectInput = function SelectInput(props) {
     }
   };
 
-  var createOption = function createOption(option) {
-    var fn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
-    fn(option);
-    setValues([].concat(_toConsumableArray(values), [valueToSelectOption(option, values)]));
-    onChange([].concat(_toConsumableArray(value), [valueToSelectOption(option, [].concat(_toConsumableArray(values), [valueToSelectOption(option, values)]))]));
+  var handleCreate = function handleCreate(label, fn) {
+    var createdValue = (0, _Option.option)(fn).map(function (func) {
+      return func(label);
+    }).map(function (createdOpt) {
+      return (0, _Option.option)(props.transformer).map(function (t) {
+        return t(createdOpt);
+      }).getOrElse(createdOpt);
+    }).getOrElse(valueToSelectOption(label, values));
+    setValues([].concat(_toConsumableArray(values), [createdValue]));
+
+    if (props.isMulti) {
+      onChange([].concat(_toConsumableArray(value), [createdValue]));
+    } else {
+      onChange(createdValue);
+    }
   };
 
   if (props.createOption) {
@@ -153,7 +168,7 @@ var SelectInput = function SelectInput(props) {
       onChange: onChange,
       options: values,
       onCreateOption: function onCreateOption(option) {
-        return props.onCreateOption ? createOption(option, props.onCreateOption) : createOption(option);
+        return handleCreate(option, props.onCreateOption);
       },
       classNamePrefix: "react-form-select",
       className: props.className

package/lib/style.d.ts

@@ -109,13 +109,16 @@ export namespace style {
         const display_1: string;
         export { display_1 as display };
     }
-    namespace flexDirection {
-        const flexDirection_1: string;
-        export { flexDirection_1 as flexDirection };
+    namespace flexColumn {
+        const flexDirection: string;
     }
-    namespace jc_end {
+    namespace justifyContentBetween {
         const justifyContent: string;
     }
+    namespace jc_end {
+        const justifyContent_1: string;
+        export { justifyContent_1 as justifyContent };
+    }
     namespace ac_center {
         const alignContent: string;
     }
@@ -129,8 +132,8 @@ export namespace style {
     namespace collapse {
         const display_2: string;
         export { display_2 as display };
-        const justifyContent_1: string;
-        export { justifyContent_1 as justifyContent };
+        const justifyContent_2: string;
+        export { justifyContent_2 as justifyContent };
         const cursor_2: string;
         export { cursor_2 as cursor };
     }

package/lib/style.js

@@ -108,9 +108,12 @@ var style = {
   flex: {
     display: "flex"
   },
-  flexDirection: {
+  flexColumn: {
     flexDirection: "column"
   },
+  justifyContentBetween: {
+    justifyContent: "space-between"
+  },
   jc_end: {
     justifyContent: "end"
   },

package/lib/styleContext.d.ts

@@ -1 +1 @@
-export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "flexDirection" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "d_none" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "datepicker" | "input__boolean__on" | "input__boolean__off">;
+export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "datepicker" | "input__boolean__on" | "input__boolean__off">;

package/lib/utils.d.ts

@@ -0,0 +1 @@
+export function deepEqual(a: any, b: any): boolean;

package/lib/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deepEqual = void 0;
+
+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); }
+
+var deepEqual = function deepEqual(a, b) {
+  if (a === b) return true;
+  if (_typeof(a) !== 'object' || _typeof(b) !== 'object' || a === null || b === null) return false;
+  var keysA = Object.keys(a),
+      keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+
+  for (var _i = 0, _keysA = keysA; _i < _keysA.length; _i++) {
+    var key = _keysA[_i];
+    if (!keysB.includes(key)) return false;
+
+    if (typeof a[key] === 'function' || typeof b[key] === 'function') {
+      if (a[key].toString() !== b[key].toString()) return false;
+    } else {
+      if (!deepEqual(a[key], b[key])) return false;
+    }
+  }
+
+  return true;
+};
+
+exports.deepEqual = deepEqual;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "main": "lib/index.js",
   "author": "MAIF team",
   "keywords": [