@wavemaker/react-runtime 11.14.1-16.6404

package/components/data/form/base-form/index.js

@@ -0,0 +1,460 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _reactHookForm = require("react-hook-form");
+var _get = _interopRequireDefault(require("lodash-es/get"));
+var _set = _interopRequireDefault(require("lodash-es/set"));
+var _props = require("./props");
+var _utils = require("./utils");
+var _formContext = require("../form-context");
+var _utils2 = require("../../utils");
+var _lodashEs = require("lodash-es");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLASS = "panel app-panel app-form";
+var BaseForm = function BaseForm(WrappedComponent) {
+  var ControlledForm = function ControlledForm(FormProps) {
+    // setting up default props for form
+    var props = _objectSpread(_objectSpread({}, _props.defaultProps), FormProps);
+    var isInsideWizard = props.isInsideWizard || false;
+    var primaryKeyRef = (0, _react.useRef)([]);
+    var formRef = (0, _react.useRef)(null);
+    var _useState = (0, _react.useState)({}),
+      formfields = _useState[0],
+      setFormfields = _useState[1];
+    var _useState2 = (0, _react.useState)({}),
+      headerActions = _useState2[0],
+      setHeaderActions = _useState2[1];
+    var _useState3 = (0, _react.useState)({}),
+      initialValues = _useState3[0];
+    var _useState4 = (0, _react.useState)(props.expanded),
+      expanded = _useState4[0],
+      setExpanded = _useState4[1];
+    var _useState5 = (0, _react.useState)(false),
+      showmessage = _useState5[0],
+      setShowMessage = _useState5[1];
+    var _useState6 = (0, _react.useState)({
+        caption: "",
+        type: ""
+      }),
+      statusMessage = _useState6[0],
+      setStatusMessage = _useState6[1];
+    var messageRef = (0, _react.useRef)(null);
+    var _useState7 = (0, _react.useState)(false),
+      showViewMode = _useState7[0],
+      setShowViewMode = _useState7[1];
+    var _useForm = (0, _reactHookForm.useForm)({
+        defaultValues: props.formData,
+        mode: "onTouched",
+        reValidateMode: "onBlur"
+      }),
+      control = _useForm.control,
+      handleSubmit = _useForm.handleSubmit,
+      _useForm$formState = _useForm.formState,
+      errors = _useForm$formState.errors,
+      isValid = _useForm$formState.isValid,
+      reset = _useForm.reset,
+      watch = _useForm.watch,
+      trigger = _useForm.trigger,
+      clearErrors = _useForm.clearErrors;
+
+    // update the form data when the formdata prop changes
+    (0, _react.useEffect)(function () {
+      if (props.formdata && (0, _typeof2["default"])(props.formdata) === "object" && !Array.isArray(props.formdata) && Object.keys(props.formdata).length > 0) {
+        reset(props.formdata);
+        if (props["form-type"] === "live-filter") {
+          debouncedFilter();
+        }
+      }
+    }, [props.formdata, reset]);
+    function debouncedFilter() {
+      var debouncedFilter = (0, _lodashEs.debounce)(filter, 250);
+      debouncedFilter();
+    }
+    var formreset = function formreset() {
+      Object.keys(formfields).forEach(function (key) {
+        formfields[key].datavalue = formfields[key].defaultvalue;
+        formfields[key].value = formfields[key].defaultvalue;
+      });
+      setTimeout(function () {
+        setFormfields(function (prev) {
+          Object.keys(prev).forEach(function (key) {
+            prev[key].datavalue = prev[key].defaultvalue;
+            prev[key].value = prev[key].defaultvalue;
+          });
+          return prev;
+        });
+      }, 100);
+      reset(initialValues);
+    };
+    var isElementInViewport = function isElementInViewport(el) {
+      if (!el) return false;
+      var rect = el.getBoundingClientRect();
+      return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+    };
+    var scrollToElement = function scrollToElement(el) {
+      if (el) {
+        el.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+      }
+    };
+    var checkAppServiceErrorMsg = function checkAppServiceErrorMsg(type) {
+      var notificationAction = (0, _get["default"])(props.listener, "Actions.appNotification");
+      if (notificationAction && type === "error") {
+        var _notificationAction$g;
+        return notificationAction === null || notificationAction === void 0 || (_notificationAction$g = notificationAction.getMessage) === null || _notificationAction$g === void 0 ? void 0 : _notificationAction$g.call(notificationAction);
+      }
+      return;
+    };
+    var clearMessage = function clearMessage() {
+      toggleMessage(false);
+    };
+    var toggleMessage = function toggleMessage(state, msg, type, header) {
+      var template = msg;
+      if (state && msg) {
+        if (type === "error" && props.errormessage && props.errormessage.length > 0) {
+          template = props.errormessage;
+        }
+        if (props.messagelayout === "Inline") {
+          template = checkAppServiceErrorMsg(type) || template;
+          setStatusMessage({
+            caption: template || "",
+            type: type
+          });
+          setShowMessage(true);
+          if (messageRef.current && messageRef.current.showMessage) {
+            messageRef.current.showMessage(template, type);
+          }
+          // Scroll to top if not in viewport
+          var formEl = formRef.current;
+          if (formEl && !isElementInViewport(formEl)) {
+            scrollToElement(formEl);
+          }
+        } else {
+          var _props$listener;
+          props === null || props === void 0 || (_props$listener = props.listener) === null || _props$listener === void 0 || (_props$listener = _props$listener.App) === null || _props$listener === void 0 || _props$listener.notifyApp(template, type);
+        }
+      } else {
+        setStatusMessage({
+          caption: ""
+        });
+        setShowMessage(false);
+      }
+      if (formRef.current) {
+        scrollToElement(formRef.current);
+      }
+    };
+    var validateFieldsOnSubmit = (0, _react.useCallback)(function () {
+      return trigger();
+    }, [trigger]);
+    var handleFormSubmit = /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(data, e, operation) {
+        var isValid, _props$listener2, result, FormData, _props$listener3, operationType;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!e) {
+                e = new Event("submit");
+              }
+
+              // check form is valid or not
+              _context.next = 3;
+              return validateFieldsOnSubmit();
+            case 3:
+              isValid = _context.sent;
+              if (isValid) {
+                _context.next = 7;
+                break;
+              }
+              props === null || props === void 0 || (_props$listener2 = props.listener) === null || _props$listener2 === void 0 || _props$listener2.onChange(props.name, {
+                valid: false,
+                errors: errors
+              });
+              return _context.abrupt("return");
+            case 7:
+              if (!props.onBeforeSubmit) {
+                _context.next = 13;
+                break;
+              }
+              _context.next = 10;
+              return props.onBeforeSubmit(e, props, data);
+            case 10:
+              result = _context.sent;
+              if (!(result === false)) {
+                _context.next = 13;
+                break;
+              }
+              return _context.abrupt("return");
+            case 13:
+              FormData = {};
+              Object.keys(data).forEach(function (key) {
+                (0, _set["default"])(FormData, key, data[key]);
+              });
+
+              // form submit
+              if (props.formSubmit) {
+                if ((_props$listener3 = props.listener) !== null && _props$listener3 !== void 0 && _props$listener3.onChange) {
+                  props.listener.onChange(props.name, {
+                    dataoutput: data
+                  });
+                }
+
+                // get the operation type
+                operationType = props.widgettype === "live-form" && !operation ? (0, _utils2.findOperationType)(FormData, primaryKeyRef.current) : operation;
+                props.formSubmit(FormData, function (data) {
+                  if (props.widgettype === "live-form" && operationType === "insert") {
+                    reset(data);
+                  }
+                  onResultCb((0, _get["default"])(data, "params"), "success");
+                  toggleMessage(true, props.postmessage, "success");
+                }, function (error) {
+                  toggleMessage(true, props.errormessage || error || error.message, "error");
+                  onResultCb(error, "");
+                }, operationType);
+              }
+              if (props !== null && props !== void 0 && props.onSubmit) {
+                props.onSubmit(e, props, FormData);
+              }
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function handleFormSubmit(_x, _x2, _x3) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    var formfieldsRef = (0, _react.useRef)(formfields);
+    var submit = handleSubmit(function (data, e) {
+      return handleFormSubmit(data, e);
+    });
+    var deleteEntry = handleSubmit(function (data, e) {
+      return handleFormSubmit(data, e, "delete");
+    });
+    var livefilterFn = props.Livefilter || function () {};
+    var filter = handleSubmit(function (data, e) {
+      return livefilterFn(data, false, formfieldsRef.current);
+    });
+    var clearFilter = handleSubmit(function (data, e) {
+      formreset();
+      livefilterFn(data, true, formfieldsRef.current);
+    });
+    var onResultCb = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(data, status, event) {
+        var params;
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              params = {
+                $event: event,
+                $data: data,
+                $operation: props.operationType
+              };
+              if (props.onResult) {
+                props.onResult(event, props, data);
+              }
+
+              // whether service call success or failure call this method
+              if (status) {
+                // if service call is success call this method
+                props.onSuccess(event, props, data);
+                if (props.messagelayout === "Inline") {
+                  toggleMessage(true, props.successmessage, "success");
+                }
+              } else {
+                // if service call fails call this method
+                props.onError(event, props, data);
+                if (props.messagelayout === "Inline") {
+                  toggleMessage(true, props.errormessage, "error");
+                }
+              }
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function onResultCb(_x4, _x5, _x6) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    // register header action
+    var registerHeaderAction = function registerHeaderAction(actionName, action) {
+      if (!action || !actionName) {
+        return;
+      }
+      if (!headerActions[actionName]) {
+        setHeaderActions(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, actionName, action));
+        });
+      }
+    };
+
+    // form onChange
+    var onChangeHandler = function onChangeHandler(fieldName, value) {
+      if (!fieldName || !value) {
+        return;
+      }
+      setFormfields(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, fieldName, _objectSpread(_objectSpread({}, prev[fieldName]), {}, {
+          value: value,
+          datavalue: value
+        })));
+      });
+    };
+
+    // get the classes according to the captionwidth and captionposition
+    var _useMemo = (0, _react.useMemo)(function () {
+        return (0, _utils.getFieldLayoutConfig)(props.captionwidth, props.captionposition, "os");
+      }, [props.captionwidth, props.captionposition]),
+      captionCls = _useMemo.captionCls,
+      widgetCls = _useMemo.widgetCls;
+    function expandCollapsePanel() {
+      if (props.collapsible) {
+        // flip the active flag
+        setExpanded(!expanded);
+      }
+    }
+    var getFieldValue = function getFieldValue(fieldName) {
+      return watch(fieldName);
+    };
+    var ref = {
+      control: control,
+      watch: watch,
+      registerHeaderAction: registerHeaderAction,
+      onChangeHandler: onChangeHandler,
+      trigger: trigger,
+      errors: errors,
+      name: props.name,
+      captionposition: props.captionposition,
+      captionCls: captionCls,
+      widgetCls: widgetCls,
+      validationtype: props.validationtype,
+      showViewMode: showViewMode,
+      formdata: props.formdata,
+      getFieldValue: getFieldValue
+    };
+    var formProps = _objectSpread(_objectSpread({}, props), {}, {
+      submit: submit,
+      formreset: formreset,
+      formfields: formfields,
+      formWidgets: formfields,
+      headerActions: headerActions,
+      ref: ref,
+      toggleMessage: toggleMessage,
+      clearMessage: clearMessage,
+      expandCollapsePanel: expandCollapsePanel,
+      expanded: expanded,
+      showmessage: showmessage,
+      statusMessage: statusMessage,
+      showViewMode: showViewMode,
+      filter: filter,
+      clearFilter: clearFilter,
+      validateFieldsOnSubmit: validateFieldsOnSubmit,
+      valid: isValid,
+      errors: errors,
+      "delete": deleteEntry,
+      cancel: cancel,
+      "new": create,
+      edit: edit,
+      setShowViewMode: setShowViewMode
+    });
+    var conditionalProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.target && {
+      target: props.target
+    }), props.method && {
+      method: props.method
+    }), props.encType && {
+      encType: props.encType
+    }), props.action && {
+      action: props.action
+    });
+    (0, _react.useEffect)(function () {
+      if (formRef.current) {
+        formRef.current.getFormData = function () {
+          return {
+            values: watch(),
+            isValid: isValid
+          };
+        };
+        formRef.current.validateForm = function () {
+          return trigger();
+        };
+        formRef.current.clearErrors = function () {
+          clearErrors();
+        };
+        formRef.current.getProps = function () {
+          return props;
+        };
+        formRef.current.formWidgets = formfields;
+      }
+    }, [watch, trigger, isValid, errors, formfields]);
+    function create() {
+      formreset();
+      setShowViewMode(false);
+    }
+    function edit(data) {
+      if (data) {
+        reset(data);
+      }
+      setShowViewMode(false);
+    }
+    function cancel() {
+      setShowViewMode(true);
+    }
+
+    // Call onDataSourceChange when formfields change
+    (0, _react.useEffect)(function () {
+      if (props.onDataSourceChange && Object.keys(formfields).length > 0) {
+        props.onDataSourceChange(formfields);
+      }
+    }, [formfields, props.onDataSourceChange]);
+
+    // Determine form classes based on wizard context
+    var formClassName = (0, _react.useMemo)(function () {
+      if (isInsideWizard) {
+        return (0, _clsx["default"])(props.className);
+      }
+      return (0, _clsx["default"])(DEFAULT_CLASS, props.className);
+    }, [isInsideWizard, props.className]);
+    return __jsx("form", (0, _extends2["default"])({
+      name: props.name,
+      defaultmode: props.defaultmode,
+      captionposition: props.captionposition,
+      captionalign: props.captionalign,
+      numberoffields: Object.keys(formfields).length,
+      ref: formRef,
+      className: formClassName,
+      id: props.id,
+      onSubmit: submit
+    }, conditionalProps, {
+      style: _objectSpread(_objectSpread({}, props.styles), props.conditionalstyle)
+    }), __jsx(_formContext.FormProvider, {
+      value: ref,
+      isViewMode: showViewMode
+    }, __jsx(WrappedComponent, (0, _extends2["default"])({}, formProps, {
+      valid: isValid,
+      formWidgets: formfields,
+      formfields: formfields
+    }))));
+  };
+  return ControlledForm;
+};
+var _default = exports["default"] = BaseForm;

package/components/data/form/base-form/props.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = exports.defaultProps = {
+  captionwidth: "xs-12 sm-3 md-3 lg-3",
+  captionposition: "left",
+  captionalign: "left",
+  autocomplete: "off",
+  method: "post",
+  messagelayout: "Inline",
+  postmessage: "Data posted successfully",
+  errormessage: "An error occurred. Please try again!",
+  tabindex: 0,
+  validationtype: "default",
+  collapsible: false,
+  expanded: true,
+  onReset: function onReset() {},
+  onSubmit: function onSubmit(event, widget, data) {},
+  onError: function onError(event, widget, error) {},
+  onSuccess: function onSuccess(event, widget, data) {},
+  formsubmit: function formsubmit(event, widget, data) {},
+  onChange: function onChange(event, widget, data) {},
+  onBeforeSubmit: function onBeforeSubmit(event, widget, data) {
+    return true;
+  }
+};

package/components/data/form/base-form/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isAndroid = exports.getFieldLayoutConfig = void 0;
+var _lodashEs = require("lodash-es");
+var _constant = require("./constant");
+var userAgent = "";
+if (typeof window !== "undefined") {
+  userAgent = window.navigator.userAgent;
+}
+var isAndroid = exports.isAndroid = function isAndroid() {
+  return _constant.REGEX.ANDROID.test(userAgent);
+};
+var getFieldLayoutConfig = exports.getFieldLayoutConfig = function getFieldLayoutConfig(captionWidth, captionPosition, os) {
+  var captionCls = "",
+    widgetCls = "";
+  captionPosition = captionPosition || "top";
+  if (captionPosition === "top" || captionPosition === "floating") {
+    if (os && os === "android" || isAndroid()) {
+      // Is android or not a mobile application
+      captionCls = widgetCls = "col-xs-12";
+    }
+  } else if (captionWidth) {
+    // handling itemsperrow containing string of classes
+    (0, _lodashEs.forEach)((0, _lodashEs.split)(captionWidth, " "), function (cls) {
+      var keys = (0, _lodashEs.split)(cls, "-"),
+        tier = keys[0];
+      var _captionWidth, widgetWidth;
+      _captionWidth = parseInt(keys[1], 10);
+      widgetWidth = 12 - _captionWidth;
+      widgetWidth = widgetWidth <= 0 ? 12 : widgetWidth;
+      captionCls += " " + "col-" + tier + "-" + _captionWidth;
+      widgetCls += " " + "col-" + tier + "-" + widgetWidth;
+    });
+  }
+  return {
+    captionCls: captionCls,
+    widgetCls: widgetCls
+  };
+};