@maif/react-forms 1.0.28 → 1.0.31

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

@@ -654,6 +654,8 @@ var Step = function Step(_ref4) {
           }, inputProps)));
 
         case _format.format.code:
+        case _format.format.singleLineCode:
+          var Component = step.format === _format.format.code ? _index.CodeInput : _index.SingleLineCode;
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
             name: entry,
             control: control,
@@ -668,7 +670,7 @@ var Step = function Step(_ref4) {
                   rawValues: getValues()
                 }, field),
                 error: error
-              }, /*#__PURE__*/_react["default"].createElement(_index.CodeInput, _extends({
+              }, /*#__PURE__*/_react["default"].createElement(Component, _extends({
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
                 readOnly: functionalProperty(entry, step.disabled) ? true : false,
                 onChange: function onChange(e) {
@@ -1224,7 +1226,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];
@@ -1300,7 +1302,7 @@ var NestedForm = function NestedForm(_ref16) {
       top: '5px',
       left: '-16px'
     },
-    "stroke-width": "3",
+    strokeWidth: "3",
     onClick: function onClick() {
       return setCollapsed(!collapsed);
     }
@@ -1312,7 +1314,7 @@ var NestedForm = function NestedForm(_ref16) {
       top: '5px',
       left: '-16px'
     },
-    "strok-width": "3",
+    strokeWidth: "3",
     onClick: function onClick() {
       return setCollapsed(!collapsed);
     }
@@ -1327,13 +1329,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/format.d.ts

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

package/lib/format.js

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

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

@@ -0,0 +1,9 @@
+export function SingleLineCode({ onChange, value, className, readOnly, theme, mode, ...props }: {
+    [x: string]: any;
+    onChange: any;
+    value: any;
+    className?: string | undefined;
+    readOnly: any;
+    theme?: string | undefined;
+    mode?: string | undefined;
+}): JSX.Element;

package/lib/inputs/SingleLineCode.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleLineCode = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactAce = _interopRequireDefault(require("react-ace"));
+
+var _beautify = _interopRequireDefault(require("brace/ext/beautify"));
+
+require("brace/mode/html");
+
+require("brace/mode/javascript");
+
+require("brace/mode/json");
+
+require("brace/mode/css");
+
+require("brace/mode/markdown");
+
+require("brace/theme/monokai");
+
+require("brace/theme/tomorrow");
+
+require("brace/ext/searchbox");
+
+require("brace/ext/language_tools");
+
+var _excluded = ["onChange", "value", "className", "readOnly", "theme", "mode"];
+
+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 _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 SingleLineCode = function SingleLineCode(_ref) {
+  var onChange = _ref.onChange,
+      value = _ref.value,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      readOnly = _ref.readOnly,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'monokai' : _ref$theme,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? 'javascript' : _ref$mode,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '6px',
+      backgroundColor: theme === 'monokai' ? "#272822" : '#fff'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_reactAce["default"], _extends({
+    commands: _beautify["default"].commands,
+    className: className,
+    readOnly: readOnly,
+    style: {
+      zIndex: 0,
+      isolation: 'isolate'
+    },
+    width: "-1",
+    mode: mode,
+    theme: theme,
+    onChange: onChange,
+    value: value,
+    name: "scriptParam",
+    setOptions: {
+      maxLines: 1,
+      fontSize: '15px'
+    },
+    editorProps: {
+      $blockScrolling: true
+    },
+    showGutter: false,
+    highlightActiveLine: false,
+    enableBasicAutocompletion: true,
+    enableLiveAutocompletion: true,
+    ref: props.setRef
+  }, props)));
+};
+
+exports.SingleLineCode = SingleLineCode;

package/lib/inputs/index.d.ts

@@ -5,3 +5,4 @@ export * from "./ArrayInput";
 export * from "./objectInput";
 export * from "./CodeInput";
 export * from "./MarkdownInput";
+export * from "./SingleLineCode";

package/lib/inputs/index.js

@@ -93,4 +93,17 @@ Object.keys(_MarkdownInput).forEach(function (key) {
       return _MarkdownInput[key];
     }
   });
+});
+
+var _SingleLineCode = require("./SingleLineCode");
+
+Object.keys(_SingleLineCode).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SingleLineCode[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SingleLineCode[key];
+    }
+  });
 });

package/lib/resolvers/utils.js

@@ -42,6 +42,9 @@ var resolvers = (_resolvers = {}, _defineProperty(_resolvers, _type.type.string,
 }), _resolvers);
 
 var buildSubResolver = function buildSubResolver(props, key, dependencies, rawData) {
+  var _props$constraints = props.constraints,
+      constraints = _props$constraints === void 0 ? [] : _props$constraints;
+
   if (props.array || props.isMulti) {
     var subResolver;
     var arrayResolver = yup.array();
@@ -63,7 +66,7 @@ var buildSubResolver = function buildSubResolver(props, key, dependencies, rawDa
   } else if (props.type === _type.type.object && props.schema) {
     var _subResolver = getShapeAndDependencies(props.flow || Object.keys(props.schema), props.schema, dependencies, rawData);
 
-    return props.constraints.reduce(function (resolver, constraint) {
+    return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
     }, yup.object().shape(_subResolver.shape, dependencies));
   } else if (props.type === _type.type.object && props.conditionalSchema) {
@@ -90,11 +93,11 @@ var buildSubResolver = function buildSubResolver(props, key, dependencies, rawDa
 
     var _subResolver2 = getShapeAndDependencies(flow || Object.keys(schema), schema, dependencies, rawData);
 
-    return props.constraints.reduce(function (resolver, constraint) {
+    return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
     }, yup.object().shape(_subResolver2.shape, dependencies));
   } else {
-    return props.constraints.reduce(function (resolver, constraint) {
+    return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
     }, resolvers[props.type]());
   }
@@ -118,14 +121,6 @@ var getShapeAndDependencies = function getShapeAndDependencies(flow, schema) {
       return _objectSpread(_objectSpread({}, resolvers), getShapeAndDependencies(key.flow, schema, dependencies, rawData).shape);
     }
 
-    console.group('get resolver');
-    console.debug({
-      schemaBykey: schema[key],
-      key: key,
-      dependencies: dependencies,
-      rawData: rawData
-    });
-    console.groupEnd();
     var resolver = buildSubResolver(schema[key], key, dependencies, rawData);
     return _objectSpread(_objectSpread({}, resolvers), {}, _defineProperty({}, key, resolver));
   }, {});

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;

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",

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" | "border__error">;
+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.28",
+  "version": "1.0.31",
   "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"
   }
 }