@maif/react-forms 1.0.13 → 1.0.17

package/examples/src/Playground.js

@@ -3,13 +3,11 @@ import { Form } from '@maif/react-forms'
 import Select from 'react-select';
 import AceEditor from 'react-ace';
 
-import 'ace-builds/src-noconflict/mode-html'
-import 'ace-builds/src-noconflict/mode-json'
-import 'ace-builds/src-noconflict/mode-javascript'
-import 'ace-builds/src-noconflict/mode-markdown'
-import 'ace-builds/src-noconflict/theme-monokai'
-import 'ace-builds/src-noconflict/ext-searchbox'
-import 'ace-builds/src-noconflict/ext-language_tools'
+import Beautify from 'brace/ext/beautify'
+import 'brace/mode/json'
+import 'brace/theme/monokai'
+import 'brace/ext/searchbox'
+import 'brace/ext/language_tools';
 
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css'
@@ -77,6 +75,7 @@ export const Playground = () => {
               defaultValue={{ value: basic, label: "basic" }}
               onChange={e => setSchema(JSON.stringify(examples[e.value], null, 4))} />
             <AceEditor
+              commands={Beautify.commands}
               style={{ marginTop: '15px', zIndex: 0, isolation: 'isolate', width: '100%' }}
               mode="json"
               theme="monokai"

package/lib/form.js

@@ -69,7 +69,7 @@ var usePrevious = function usePrevious(value) {
   var ref = (0, _react.useRef)(); // Store current value in ref
 
   (0, _react.useEffect)(function () {
-    ref.current = value;
+    ref.current = JSON.parse(JSON.stringify(value));
   }, [value]); // Only re-run if value changes
   // Return previous value (happens before update in useEffect above)
 
@@ -102,7 +102,7 @@ var BasicWrapper = function BasicWrapper(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "form-group mt-3"
-  }, /*#__PURE__*/_react["default"].createElement("label", {
+  }, label && /*#__PURE__*/_react["default"].createElement("label", {
     className: "form-label d-flex align-content-center",
     htmlFor: entry
   }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -282,7 +282,8 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     resolver: function resolver(data, context, options) {
       return (0, _yup.yupResolver)(_resolver(data))(data, context, options);
     },
-    defaultValues: cleanInputArray(value || defaultValues)
+    defaultValues: cleanInputArray(value || defaultValues),
+    shouldFocusError: !options.autosubmit
   });
   var register = methods.register,
       _handleSubmit = methods.handleSubmit,
@@ -314,7 +315,9 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
   }, [data]);
 
   if (options.watch) {
+    console.group('react-form watch');
     console.log(watch());
+    console.groupEnd();
   }
 
   (0, _react.useImperativeHandle)(ref, function () {
@@ -328,7 +331,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     };
   });
   return /*#__PURE__*/_react["default"].createElement(_reactHookForm.FormProvider, methods, /*#__PURE__*/_react["default"].createElement("form", {
-    className: className || classes.pr_15,
+    className: className || "".concat(classes.pr_15, " ").concat(classes.full_width),
     onSubmit: _handleSubmit(function (data) {
       var clean = cleanOutputArray(data);
       onSubmit(clean);
@@ -345,10 +348,6 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
         case 'object':
           var _value = watch(step.visible.ref);
 
-          console.log({
-            value: _value,
-            step: step
-          });
           return (0, _Option.option)(step.visible.test).map(function (test) {
             return test(_value);
           }).getOrElse(_value);
@@ -369,7 +368,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       key: "".concat(entry, "-").concat(idx),
       entry: entry,
       error: error,
-      label: (step === null || step === void 0 ? void 0 : step.label) || entry,
+      label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry,
       help: step === null || step === void 0 ? void 0 : step.help,
       render: inputWrapper
     }, /*#__PURE__*/_react["default"].createElement(Step, {
@@ -458,11 +457,33 @@ var Step = function Step(_ref4) {
       var err = _typeof(en) === 'object' ? undefined : en.split('.').reduce(function (object, key) {
         return object && object[key];
       }, errors);
+      var visibleStep = (0, _Option.option)(stp).map(function (s) {
+        return s.visible;
+      }).map(function (visible) {
+        switch (_typeof(visible)) {
+          case 'object':
+            var value = watch(visible.ref);
+            return (0, _Option.option)(visible.test).map(function (test) {
+              return test(value);
+            }).getOrElse(value);
+
+          case 'boolean':
+            return visible;
+
+          default:
+            return true;
+        }
+      }).getOrElse(true);
+
+      if (!visibleStep) {
+        return null;
+      }
+
       return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
         key: "collapse-".concat(en, "-").concat(entryIdx),
         entry: en,
         error: err,
-        label: (stp === null || stp === void 0 ? void 0 : stp.label) || en,
+        label: (stp === null || stp === void 0 ? void 0 : stp.label) === null ? null : (stp === null || stp === void 0 ? void 0 : stp.label) || en,
         help: stp === null || stp === void 0 ? void 0 : stp.help,
         render: inputWrapper
       }, /*#__PURE__*/_react["default"].createElement(Step, {
@@ -477,37 +498,13 @@ var Step = function Step(_ref4) {
         getValues: getValues,
         setValue: _setValue,
         watch: watch,
-        inputWrapper: inputWrapper
+        inputWrapper: inputWrapper,
+        httpClient: httpClient,
+        defaultValue: stp.defaultValue
       }));
     }));
   }
 
-  var visibleStep = (0, _Option.option)(step).map(function (s) {
-    return s.visible;
-  }).map(function (visible) {
-    switch (_typeof(visible)) {
-      case 'object':
-        var value = watch(step.visible.ref);
-        console.log({
-          value: value,
-          step: step
-        });
-        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, {
       entry: entry,
@@ -588,13 +585,13 @@ var Step = function Step(_ref4) {
                   rawValues: getValues()
                 }, field),
                 error: error
-              }, /*#__PURE__*/_react["default"].createElement(_index.CodeInput, _extends({}, step.props, {
+              }, /*#__PURE__*/_react["default"].createElement(_index.CodeInput, _extends({
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? 'readOnly' : null,
+                readOnly: step.disabled ? true : false,
                 onChange: field.onChange,
                 value: field.value,
                 defaultValue: defaultValue
-              }, step)));
+              }, step.props)));
             }
           });
 
@@ -1093,7 +1090,7 @@ var NestedForm = function NestedForm(_ref16) {
       key: "".concat(entry, ".").concat(idx),
       entry: "".concat(parent, ".").concat(entry),
       error: realError,
-      label: step.label || entry,
+      label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry,
       help: step.help,
       render: inputWrapper
     }, /*#__PURE__*/_react["default"].createElement(Step, {

package/lib/inputs/CodeInput.js

@@ -9,30 +9,32 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactAce = _interopRequireDefault(require("react-ace"));
 
-var _extBeautify = _interopRequireDefault(require("ace-builds/src-noconflict/ext-beautify"));
+var _beautify = _interopRequireDefault(require("brace/ext/beautify"));
 
-require("ace-builds/src-noconflict/mode-html");
+require("brace/mode/html");
 
-require("ace-builds/src-noconflict/mode-json");
+require("brace/mode/javascript");
 
-require("ace-builds/src-noconflict/mode-javascript");
+require("brace/mode/json");
 
-require("ace-builds/src-noconflict/mode-css");
+require("brace/mode/css");
 
-require("ace-builds/src-noconflict/mode-markdown");
+require("brace/mode/markdown");
 
-require("ace-builds/src-noconflict/theme-monokai");
+require("brace/theme/monokai");
 
-require("ace-builds/src-noconflict/theme-tomorrow");
+require("brace/theme/tomorrow");
 
-require("ace-builds/src-noconflict/ext-searchbox");
+require("brace/ext/searchbox");
 
-require("ace-builds/src-noconflict/ext-language_tools");
+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; }
@@ -49,8 +51,8 @@ var CodeInput = function CodeInput(_ref) {
       mode = _ref$mode === void 0 ? 'javascript' : _ref$mode,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_react["default"].createElement(_reactAce["default"], {
-    commands: _extBeautify["default"].commands,
+  return /*#__PURE__*/_react["default"].createElement(_reactAce["default"], _extends({
+    commands: _beautify["default"].commands,
     className: className,
     readOnly: readOnly,
     style: {
@@ -79,7 +81,9 @@ var CodeInput = function CodeInput(_ref) {
     highlightActiveLine: true,
     enableBasicAutocompletion: true,
     enableLiveAutocompletion: true
-  });
+  }, props, {
+    ref: props.setRef
+  }));
 };
 
 exports.CodeInput = CodeInput;

package/lib/inputs/MarkdownInput.js

@@ -19,19 +19,25 @@ require("@fortawesome/fontawesome-free/css/all.css");
 
 require("highlight.js/styles/monokai.css");
 
-require("ace-builds/src-noconflict/mode-html");
+var _beautify = _interopRequireDefault(require("brace/ext/beautify"));
 
-require("ace-builds/src-noconflict/mode-json");
+require("brace/mode/html");
 
-require("ace-builds/src-noconflict/mode-javascript");
+require("brace/mode/javascript");
 
-require("ace-builds/src-noconflict/mode-markdown");
+require("brace/mode/json");
 
-require("ace-builds/src-noconflict/theme-monokai");
+require("brace/mode/css");
 
-require("ace-builds/src-noconflict/ext-searchbox");
+require("brace/mode/markdown");
 
-require("ace-builds/src-noconflict/ext-language_tools");
+require("brace/theme/monokai");
+
+require("brace/theme/tomorrow");
+
+require("brace/ext/searchbox");
+
+require("brace/ext/language_tools");
 
 var _highlight = _interopRequireDefault(require("highlight.js"));
 
@@ -316,6 +322,17 @@ var MarkdownInput = function MarkdownInput(props) {
       return /*#__PURE__*/_react["default"].createElement("button", {
         type: "button",
         className: "btn-for-descriptionToolbar",
+        style: {
+          textAlign: "left",
+          cursor: "pointer",
+          height: "22px",
+          padding: "4px",
+          border: "none",
+          background: "none",
+          color: "#242729",
+          marginRight: "5px",
+          marginLeft: "5px"
+        },
         "aria-label": command.name,
         title: command.name,
         key: "toolbar-btn-".concat(idx),
@@ -373,18 +390,26 @@ var MarkdownInput = function MarkdownInput(props) {
   }, "Preview"))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "d-flex flex-row"
   }, injectButtons())), !preview && /*#__PURE__*/_react["default"].createElement(_reactAce["default"], {
+    commands: _beautify["default"].commands,
     ref: function ref(r) {
       if (r && r.editor) {
         setEditor(r.editor);
       }
     },
     mode: "markdown",
-    theme: "monokai",
+    theme: props.theme | 'monokai',
     style: {
       zIndex: 0,
       isolation: 'isolate'
     },
     onChange: props.onChange,
+    onLoad: function onLoad(editorInstance) {
+      editorInstance.container.style.resize = "both"; // mouseup = css resize end
+
+      document.addEventListener("mouseup", function (e) {
+        return editorInstance.resize();
+      });
+    },
     value: props.value,
     name: "scriptParam",
     editorProps: {

package/lib/inputs/SelectInput.js

@@ -74,10 +74,10 @@ var valueToSelectOption = function valueToSelectOption(value) {
   return maybeValue.getOrElse({
     label: maybeValue.map(function (v) {
       return v.label;
-    }).getOrElse(value),
+    }).getOrElse((value === null || value === void 0 ? void 0 : value.label) || value),
     value: maybeValue.map(function (v) {
       return v.value;
-    }).getOrElse(value)
+    }).getOrElse((value === null || value === void 0 ? void 0 : value.value) || value)
   });
 };
 

package/lib/style.d.ts

@@ -123,6 +123,9 @@ export namespace style {
     namespace pr_15 {
         const paddingRight: number;
     }
+    namespace full_width {
+        const width: string;
+    }
     namespace d_none {
         const display: string;
     }
@@ -185,7 +188,8 @@ export namespace style {
         const borderColor: string;
     }
     namespace invalid_feedback {
-        export const width: string;
+        const width_1: string;
+        export { width_1 as width };
         const marginTop_4: string;
         export { marginTop_4 as marginTop };
         const fontSize_2: string;

package/lib/style.js

@@ -93,6 +93,9 @@ var style = (_style = {
   pr_15: {
     paddingRight: 15
   },
+  full_width: {
+    width: '100%'
+  },
   d_none: {
     display: "none"
   },

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" | "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" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback">;
+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" | "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">;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.13",
+  "version": "1.0.17",
   "main": "lib/index.js",
   "author": "MAIF team",
   "keywords": [
@@ -105,13 +105,13 @@
     "@types/node": "^16.3.0",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
-    "ace-builds": "1.4.12",
     "antd": "4.15.4",
     "bootstrap": "5.0.0",
+    "brace": "^0.11.1",
     "classnames": "2.3.0",
     "highlight.js": "11.2.0",
     "moment": "2.29.1",
-    "react-ace": "9.4.3",
+    "react-ace": "9.5.0",
     "react-feather": "2.0.9",
     "react-hook-form": "7.17.1",
     "react-jss": "10.8.2",