@maif/react-forms 1.0.27 → 1.0.30

package/lib/constraints.js

@@ -195,7 +195,7 @@ exports.maxSize = _maxSize;
 
 var _nullable = function nullable() {
   return function (r) {
-    return r.nullable();
+    return r.nullable().optional();
   };
 };
 

package/lib/form.js

@@ -1202,6 +1202,8 @@ var ArrayStep = function ArrayStep(_ref15) {
 };
 
 var NestedForm = function NestedForm(_ref16) {
+  var _classNames15;
+
   var schema = _ref16.schema,
       flow = _ref16.flow,
       parent = _ref16.parent,
@@ -1222,7 +1224,7 @@ var NestedForm = function NestedForm(_ref16) {
       watch = _useFormContext.watch; // retrieve all hook methods
 
 
-  var _useState5 = (0, _react.useState)(false),
+  var _useState5 = (0, _react.useState)(!!step.collapsed),
       _useState6 = _slicedToArray(_useState5, 2),
       collapsed = _useState6[0],
       setCollapsed = _useState6[1];
@@ -1289,7 +1291,7 @@ var NestedForm = function NestedForm(_ref16) {
     return x.visibleStep;
   }).length > 1 && step.label !== null;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(_defineProperty({}, classes.nestedform__border, bordered))
+    className: (0, _classnames["default"])((_classNames15 = {}, _defineProperty(_classNames15, classes.nestedform__border, bordered), _defineProperty(_classNames15, classes.border__error, !!error), _classNames15))
   }, !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowDown, {
     size: 30,
     className: classes.cursor_pointer,
@@ -1298,7 +1300,7 @@ var NestedForm = function NestedForm(_ref16) {
       top: '5px',
       left: '-16px'
     },
-    "stroke-width": "3",
+    strokeWidth: "3",
     onClick: function onClick() {
       return setCollapsed(!collapsed);
     }
@@ -1310,7 +1312,7 @@ var NestedForm = function NestedForm(_ref16) {
       top: '5px',
       left: '-16px'
     },
-    "strok-width": "3",
+    strokeWidth: "3",
     onClick: function onClick() {
       return setCollapsed(!collapsed);
     }
@@ -1325,13 +1327,9 @@ var NestedForm = function NestedForm(_ref16) {
     }
 
     var realError = error && error[entry];
-    var oneVisibleSetup = Object.values(schemaAndFlow.schema).some(function (v) {
-      return !!v.visibleOnCollapse;
-    });
-    var isCollapsed = collapsed && (oneVisibleSetup ? !step.visibleOnCollapse : idx > 0);
     return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
       key: "".concat(entry, ".").concat(idx),
-      className: (0, _classnames["default"])(_defineProperty({}, classes.display__none, isCollapsed || !visibleStep)),
+      className: (0, _classnames["default"])(_defineProperty({}, classes.display__none, collapsed && !step.visibleOnCollapse || !visibleStep)),
       entry: "".concat(parent, ".").concat(entry),
       error: realError,
       label: functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry),

package/lib/inputs/BooleanInput.d.ts

@@ -1,4 +1,5 @@
-export function BooleanInput({ onChange, value }: {
+export function BooleanInput({ onChange, value, readOnly }: {
     onChange: any;
     value: any;
+    readOnly: any;
 }): JSX.Element;

package/lib/inputs/BooleanInput.js

@@ -7,27 +7,41 @@ exports.BooleanInput = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _reactFeather = require("react-feather");
 
 var _styleContext = require("../styleContext");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var BooleanInput = function BooleanInput(_ref) {
+  var _classNames;
+
   var onChange = _ref.onChange,
-      value = _ref.value;
+      value = _ref.value,
+      readOnly = _ref.readOnly;
   var classes = (0, _styleContext.useCustomStyle)();
+
+  var handleClick = function handleClick(value) {
+    if (!readOnly) {
+      onChange(value);
+    }
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.cursor_pointer
+    className: (0, _classnames["default"])((_classNames = {}, _defineProperty(_classNames, classes.cursor_pointer, !readOnly), _defineProperty(_classNames, classes.cursor_not_allowed, readOnly), _classNames))
   }, !!value && /*#__PURE__*/_react["default"].createElement(_reactFeather.ToggleRight, {
-    className: classes.input__boolean__on,
+    className: (0, _classnames["default"])(classes.input__boolean__on),
     onClick: function onClick() {
-      return onChange(false);
+      return handleClick(false);
     }
   }), !value && /*#__PURE__*/_react["default"].createElement(_reactFeather.ToggleLeft, {
-    className: classes.input__boolean__off,
+    className: (0, _classnames["default"])(classes.input__boolean__off),
     onClick: function onClick() {
-      return onChange(true);
+      return handleClick(true);
     }
   }));
 };

package/lib/inputs/SelectInput.js

@@ -54,7 +54,6 @@ 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;
@@ -63,7 +62,7 @@ var valueToSelectOption = function valueToSelectOption(value) {
   if (isMulti) {
     return (0, _Option.option)(value).map(function (v) {
       return v.map(function (x) {
-        return valueToSelectOption(x, possibleValues, false, maybeTransformer);
+        return valueToSelectOption(x, possibleValues, false);
       });
     }).getOrElse([]);
   }
@@ -74,7 +73,7 @@ var valueToSelectOption = function valueToSelectOption(value) {
   return maybeValue.getOrElse({
     label: maybeValue.map(function (v) {
       return v.label;
-    }).getOrElse((value === null || value === void 0 ? void 0 : value.label) || value),
+    }).getOrElse((value === null || value === void 0 ? void 0 : value.label) || JSON.stringify(value)),
     value: maybeValue.map(function (v) {
       return v.value;
     }).getOrElse((value === null || value === void 0 ? void 0 : value.value) || value)
@@ -84,10 +83,13 @@ var valueToSelectOption = function valueToSelectOption(value) {
 var SelectInput = function SelectInput(props) {
   var classes = (0, _styleContext.useCustomStyle)();
   var possibleValues = (props.possibleValues || []).map(function (v) {
-    return props.transformer ? props.transformer(v) : v;
+    return props.transformer ? typeof props.transformer === 'function' ? props.transformer(v) : {
+      label: v[props.transformer.label],
+      value: v[props.transformer.value]
+    } : v;
   }).map(function (v) {
     return {
-      label: (v === null || v === void 0 ? void 0 : v.label) || v,
+      label: (v === null || v === void 0 ? void 0 : v.label) || JSON.stringify(v),
       value: (v === null || v === void 0 ? void 0 : v.value) || v
     };
   });
@@ -102,13 +104,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, props.transformer)),
+  var _useState5 = (0, _react.useState)(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti)),
       _useState6 = _slicedToArray(_useState5, 2),
       value = _useState6[0],
       setValue = _useState6[1];
 
   (0, _react.useEffect)(function () {
-    setValue(valueToSelectOption(props.value, values, props.isMulti, props.transformer));
+    setValue(valueToSelectOption(props.value, values, props.isMulti));
   }, [props.value, values]);
   (0, _react.useEffect)(function () {
     if (props.optionsFrom) {
@@ -144,7 +146,7 @@ var SelectInput = function SelectInput(props) {
         return x.value;
       }));
     } else {
-      props.onChange(changes.value);
+      props.onChange(changes === null || changes === void 0 ? void 0 : changes.value);
     }
   };
 

package/lib/resolvers/utils.js

@@ -42,8 +42,7 @@ var resolvers = (_resolvers = {}, _defineProperty(_resolvers, _type.type.string,
 }), _resolvers);
 
 var buildSubResolver = function buildSubResolver(props, key, dependencies, rawData) {
-  var type = props.type,
-      _props$constraints = props.constraints,
+  var _props$constraints = props.constraints,
       constraints = _props$constraints === void 0 ? [] : _props$constraints;
 
   if (props.array || props.isMulti) {
@@ -64,13 +63,13 @@ var buildSubResolver = function buildSubResolver(props, key, dependencies, rawDa
     return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
     }, arrayResolver);
-  } else if (props.type === type.object && props.schema) {
+  } else if (props.type === _type.type.object && props.schema) {
     var _subResolver = getShapeAndDependencies(props.flow || Object.keys(props.schema), props.schema, dependencies, rawData);
 
     return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
     }, yup.object().shape(_subResolver.shape, dependencies));
-  } else if (props.type === type.object && props.conditionalSchema) {
+  } else if (props.type === _type.type.object && props.conditionalSchema) {
     var _option$map$getOrElse = (0, _Option.option)(props.conditionalSchema).map(function (condiSchema) {
       var ref = (0, _Option.option)(condiSchema.ref).map(function (ref) {
         return rawData[ref];
@@ -100,7 +99,7 @@ var buildSubResolver = function buildSubResolver(props, key, dependencies, rawDa
   } else {
     return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
-    }, resolvers[type]());
+    }, resolvers[props.type]());
   }
 };
 

package/lib/style.d.ts

@@ -163,13 +163,17 @@ export namespace style {
     namespace cursor_pointer {
         const cursor: string;
     }
+    namespace cursor_not_allowed {
+        const cursor_1: string;
+        export { cursor_1 as cursor };
+    }
     namespace collapse {
         const display_2: string;
         export { display_2 as display };
         const justifyContent_2: string;
         export { justifyContent_2 as justifyContent };
-        const cursor_1: string;
-        export { cursor_1 as cursor };
+        const cursor_2: string;
+        export { cursor_2 as cursor };
     }
     namespace collapse_label {
         export const fontWeight: string;
@@ -223,4 +227,8 @@ export namespace style {
         export { marginBottom_1 as marginBottom };
         export const position: string;
     }
+    namespace border__error {
+        const borderColor_1: string;
+        export { borderColor_1 as borderColor };
+    }
 }

package/lib/style.js

@@ -132,6 +132,9 @@ var style = (_style = {
   cursor_pointer: {
     cursor: "pointer"
   },
+  cursor_not_allowed: {
+    cursor: "not-allowed"
+  },
   collapse: {
     display: "flex",
     justifyContent: "space-between",
@@ -172,5 +175,7 @@ var style = (_style = {
   paddingLeft: '1rem',
   marginBottom: '.5rem',
   position: 'relative'
+}), _defineProperty(_style, "border__error", {
+  borderColor: "#dc3545"
 }), _style);
 exports.style = style;

package/lib/styleContext.d.ts

@@ -1 +1 @@
-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" | "mr_5" | "mr_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "full_width" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback" | "display__none" | "collapse__inline" | "nestedform__border">;
+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" | "mr_5" | "mr_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "full_width" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "cursor_not_allowed" | "collapse" | "collapse_label" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback" | "display__none" | "collapse__inline" | "nestedform__border" | "border__error">;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.27",
+  "version": "1.0.30",
   "main": "lib/index.js",
   "author": "MAIF team",
   "keywords": [
@@ -121,6 +121,6 @@
     "showdown": "1.9.1",
     "typescript": "^4.3.5",
     "uuid": "8.3.2",
-    "yup": "0.32.9"
+    "yup": "0.32.11"
   }
 }