@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.314

package/components/advanced/login/index.js

@@ -1,317 +1,259 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _lodashEs = require("lodash-es");
-var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
-var _message = require("@wavemaker-ai/react-runtime/components/basic/message");
-var _formUtils = require("@wavemaker-ai/react-runtime/utils/form-utils");
-var _excluded = ["name", "show", "errormessage", "children", "className", "styles", "invokeEventCallback", "appLocale", "onSubmit", "onBeforerender", "onSuccess", "onError", "listener", "eventSource"];
-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" != _typeof(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; }
-// Constants
-var DEFAULT_CLASS = "app-login";
-
-// Styled Components
-var StyledLoginContainer = (0, _styles.styled)(_Box["default"])(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    "&.app-login": {
-      display: "block",
-      position: "relative"
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-  };
-});
-var WmLogin = function WmLogin(props) {
-  var name = props.name,
-    _props$show = props.show,
-    show = _props$show === void 0 ? true : _props$show,
-    errormessage = props.errormessage,
-    children = props.children,
-    className = props.className,
-    styles = props.styles,
-    invokeEventCallback = props.invokeEventCallback,
-    appLocale = props.appLocale,
-    onSubmit = props.onSubmit,
-    onBeforerender = props.onBeforerender,
-    onSuccess = props.onSuccess,
-    onError = props.onError,
-    listener = props.listener,
-    eventSource = props.eventSource,
-    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
-
-  // State management
-  var _useState = (0, _react.useState)({
-      type: "",
-      caption: "",
-      show: false
-    }),
-    loginMessage = _useState[0],
-    setLoginMessage = _useState[1];
-  var _useState2 = (0, _react.useState)(false),
-    isSubmitting = _useState2[0],
-    setIsSubmitting = _useState2[1];
-
-  // Refs
-  var widgetRef = (0, _react.useRef)(null);
-  var formRef = (0, _react.useRef)(null);
-  var loginButtonRef = (0, _react.useRef)(null);
-  var cleanupFunctionsRef = (0, _react.useRef)([]);
-  (0, _react.useEffect)(function () {
-    if (listener !== null && listener !== void 0 && listener.onChange && formRef.current && loginButtonRef.current) {
-      var _listener$Widgets, _listener$Widgets2, _loginButtonRef$curre;
-      var formProps = (0, _formUtils.getFormProps)(formRef);
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useCallback } from "react";
+import { styled } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import { includes } from "lodash-es";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { WmMessageWithoutWrapper } from "../../basic/message";
+import {
+  getFormData,
+  getFormProps,
+  invokeFormEvent,
+  loginErrorMessage
+} from "../../../utils/form-utils";
+const DEFAULT_CLASS = "app-login";
+const StyledLoginContainer = styled(Box)(({ theme }) => ({
+  "&.app-login": {
+    display: "block",
+    position: "relative"
+  }
+}));
+const WmLogin = (props) => {
+  const _a = props, {
+    name,
+    show = true,
+    errormessage,
+    children,
+    className,
+    styles,
+    invokeEventCallback,
+    appLocale,
+    onSubmit,
+    onBeforerender,
+    onSuccess,
+    onError,
+    listener,
+    eventSource
+  } = _a, rest = __objRest(_a, [
+    "name",
+    "show",
+    "errormessage",
+    "children",
+    "className",
+    "styles",
+    "invokeEventCallback",
+    "appLocale",
+    "onSubmit",
+    "onBeforerender",
+    "onSuccess",
+    "onError",
+    "listener",
+    "eventSource"
+  ]);
+  const [loginMessage, setLoginMessage] = useState({
+    type: "",
+    caption: "",
+    show: false
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const widgetRef = useRef(null);
+  const formRef = useRef(null);
+  const loginButtonRef = useRef(null);
+  const cleanupFunctionsRef = useRef([]);
+  useEffect(() => {
+    var _a2, _b, _c;
+    if ((listener == null ? void 0 : listener.onChange) && formRef.current && loginButtonRef.current) {
+      const formProps = getFormProps(formRef);
       if (!formProps) return;
-      var formName = formProps.name;
+      const { name: formName } = formProps;
       listener.onChange(name, {
-        formCmp: listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[formName],
-        loginBtnCmp: listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[(loginButtonRef === null || loginButtonRef === void 0 || (_loginButtonRef$curre = loginButtonRef.current) === null || _loginButtonRef$curre === void 0 ? void 0 : _loginButtonRef$curre.getAttribute("name")) || "loginButton"]
+        formCmp: (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[formName],
+        loginBtnCmp: (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[((_b = loginButtonRef == null ? void 0 : loginButtonRef.current) == null ? void 0 : _b.getAttribute("name")) || "loginButton"]
       });
     }
   }, [formRef.current]);
-
-  // Callback handlers
-  var onSuccessCB = (0, _react.useCallback)(function () {
-    var formData = (0, _formUtils.getFormData)(formRef);
-    (0, _formUtils.invokeFormEvent)(formRef, listener, "onSuccess", new Event("onSuccess"), formData);
+  const onSuccessCB = useCallback(() => {
+    const formData = getFormData(formRef);
+    invokeFormEvent(formRef, listener, "onSuccess", new Event("onSuccess"), formData);
     setIsSubmitting(false);
-    invokeEventCallback === null || invokeEventCallback === void 0 || invokeEventCallback("success");
-    onSuccess === null || onSuccess === void 0 || onSuccess(new Event("success"), widgetRef.current);
+    invokeEventCallback == null ? void 0 : invokeEventCallback("success");
+    onSuccess == null ? void 0 : onSuccess(new Event("success"), widgetRef.current);
   }, [invokeEventCallback, onSuccess, listener]);
-  var onErrorCB = (0, _react.useCallback)(function (error) {
-    var formData = (0, _formUtils.getFormData)(formRef);
-    (0, _formUtils.invokeFormEvent)(formRef, listener, "onError", new Event("onError"), formData);
-    setIsSubmitting(false);
-    var message = {
-      type: "error",
-      caption: (0, _formUtils.loginErrorMessage)(error, appLocale, errormessage),
-      show: true
-    };
-    setLoginMessage(message);
-    invokeEventCallback === null || invokeEventCallback === void 0 || invokeEventCallback("error");
-    onError === null || onError === void 0 || onError(new Event("error"), widgetRef.current);
-  }, [errormessage, appLocale, invokeEventCallback, onError, listener]);
-  var doLogin = (0, _react.useCallback)(/*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
-      var _formRef$current$clea, _formRef$current2;
-      var formData, _formRef$current$vali, _formRef$current, beforeSubmitResult;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!(isSubmitting || !formRef.current)) {
-              _context.next = 2;
-              break;
-            }
-            return _context.abrupt("return");
-          case 2:
-            if (eventSource) {
-              _context.next = 5;
-              break;
-            }
-            console.warn('Default action "loginAction" does not exist. Either create the Action or assign an event to onSubmit of the login widget');
-            return _context.abrupt("return");
-          case 5:
-            handleMessageClose();
-            formData = (0, _formUtils.getFormData)(formRef); // Check if form is valid
-            if (formData.isValid) {
-              _context.next = 10;
-              break;
-            }
-            (_formRef$current$vali = (_formRef$current = formRef.current).validateForm) === null || _formRef$current$vali === void 0 || _formRef$current$vali.call(_formRef$current);
-            return _context.abrupt("return");
-          case 10:
-            _context.next = 12;
-            return (0, _formUtils.invokeFormEvent)(formRef, listener, "onBeforeSubmit", e, formData);
-          case 12:
-            beforeSubmitResult = _context.sent;
-            if (!(beforeSubmitResult === false)) {
-              _context.next = 15;
-              break;
-            }
-            return _context.abrupt("return");
-          case 15:
-            (_formRef$current$clea = (_formRef$current2 = formRef.current).clearErrors) === null || _formRef$current$clea === void 0 || _formRef$current$clea.call(_formRef$current2);
-            setIsSubmitting(true);
-            eventSource.invoke({
-              formData: formData.values
-            }, onSuccessCB, onErrorCB);
-            (0, _formUtils.invokeFormEvent)(formRef, listener, "onSubmit", e || new Event("submit"), formData);
-          case 19:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), [eventSource, listener, onSuccessCB, onErrorCB, isSubmitting]);
-
-  // Cleanup all event listeners
-  var cleanupEventListeners = (0, _react.useCallback)(function () {
-    cleanupFunctionsRef.current.forEach(function (cleanup) {
-      return cleanup();
-    });
+  const onErrorCB = useCallback(
+    (error) => {
+      const formData = getFormData(formRef);
+      invokeFormEvent(formRef, listener, "onError", new Event("onError"), formData);
+      setIsSubmitting(false);
+      const message = {
+        type: "error",
+        caption: loginErrorMessage(error, appLocale, errormessage),
+        show: true
+      };
+      setLoginMessage(message);
+      invokeEventCallback == null ? void 0 : invokeEventCallback("error");
+      onError == null ? void 0 : onError(new Event("error"), widgetRef.current);
+    },
+    [errormessage, appLocale, invokeEventCallback, onError, listener]
+  );
+  const doLogin = useCallback(
+    async (e) => {
+      var _a2, _b, _c, _d;
+      if (isSubmitting || !formRef.current) {
+        return;
+      }
+      if (!eventSource) {
+        console.warn(
+          'Default action "loginAction" does not exist. Either create the Action or assign an event to onSubmit of the login widget'
+        );
+        return;
+      }
+      handleMessageClose();
+      const formData = getFormData(formRef);
+      if (!formData.isValid) {
+        (_b = (_a2 = formRef.current).validateForm) == null ? void 0 : _b.call(_a2);
+        return;
+      }
+      const beforeSubmitResult = await invokeFormEvent(
+        formRef,
+        listener,
+        "onBeforeSubmit",
+        e,
+        formData
+      );
+      if (beforeSubmitResult === false) {
+        return;
+      }
+      (_d = (_c = formRef.current).clearErrors) == null ? void 0 : _d.call(_c);
+      setIsSubmitting(true);
+      eventSource.invoke({ formData: formData.values }, onSuccessCB, onErrorCB);
+      invokeFormEvent(formRef, listener, "onSubmit", e || new Event("submit"), formData);
+    },
+    [eventSource, listener, onSuccessCB, onErrorCB, isSubmitting]
+  );
+  const cleanupEventListeners = useCallback(() => {
+    cleanupFunctionsRef.current.forEach((cleanup) => cleanup());
     cleanupFunctionsRef.current = [];
   }, []);
-
-  // Handle message close
-  var handleMessageClose = (0, _react.useCallback)(function () {
-    setLoginMessage(function (prev) {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        show: false
-      });
-    });
+  const handleMessageClose = useCallback(() => {
+    setLoginMessage((prev) => __spreadProps(__spreadValues({}, prev), { show: false }));
   }, []);
-
-  // Handle form submission
-  var handleFormSubmit = (0, _react.useCallback)(/*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(e) {
-      var _widgetRef$current;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            e.preventDefault();
-            e.stopPropagation();
-            if (!onSubmit) {
-              _context2.next = 6;
-              break;
-            }
-            onSubmit(e, widgetRef.current);
-            _context2.next = 9;
-            break;
-          case 6:
-            if ((_widgetRef$current = widgetRef.current) !== null && _widgetRef$current !== void 0 && _widgetRef$current.hasAttribute("submit.event")) {
-              _context2.next = 9;
-              break;
-            }
-            _context2.next = 9;
-            return doLogin(e);
-          case 9:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function (_x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }(), [onSubmit, doLogin]);
-
-  // Handle login button click
-  var handleLoginButtonClick = (0, _react.useCallback)(/*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(event) {
-      var button, container, hasContainerSubmitEvent, hasButtonClickEvent, hasButtonTapEvent;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            event.preventDefault();
-            event.stopPropagation();
-            button = event.target;
-            container = widgetRef.current;
-            hasContainerSubmitEvent = container === null || container === void 0 ? void 0 : container.hasAttribute("submit.event");
-            hasButtonClickEvent = button === null || button === void 0 ? void 0 : button.hasAttribute("click.event");
-            hasButtonTapEvent = button === null || button === void 0 ? void 0 : button.hasAttribute("tap.event"); // If no event is attached, invoke default login action
-            if (!(!hasContainerSubmitEvent && !hasButtonClickEvent && !hasButtonTapEvent)) {
-              _context3.next = 10;
-              break;
-            }
-            _context3.next = 10;
-            return doLogin(event);
-          case 10:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    }));
-    return function (_x3) {
-      return _ref4.apply(this, arguments);
-    };
-  }(), [doLogin]);
-
-  // Handle beforerender event
-  (0, _react.useEffect)(function () {
-    onBeforerender === null || onBeforerender === void 0 || onBeforerender(new Event("beforerender"), widgetRef.current);
+  const handleFormSubmit = useCallback(
+    async (e) => {
+      var _a2;
+      e.preventDefault();
+      e.stopPropagation();
+      if (onSubmit) {
+        onSubmit(e, widgetRef.current);
+      } else if (!((_a2 = widgetRef.current) == null ? void 0 : _a2.hasAttribute("submit.event"))) {
+        await doLogin(e);
+      }
+    },
+    [onSubmit, doLogin]
+  );
+  const handleLoginButtonClick = useCallback(
+    async (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const button = event.target;
+      const container = widgetRef.current;
+      const hasContainerSubmitEvent = container == null ? void 0 : container.hasAttribute("submit.event");
+      const hasButtonClickEvent = button == null ? void 0 : button.hasAttribute("click.event");
+      const hasButtonTapEvent = button == null ? void 0 : button.hasAttribute("tap.event");
+      if (!hasContainerSubmitEvent && !hasButtonClickEvent && !hasButtonTapEvent) {
+        await doLogin(event);
+      }
+    },
+    [doLogin]
+  );
+  useEffect(() => {
+    onBeforerender == null ? void 0 : onBeforerender(new Event("beforerender"), widgetRef.current);
   }, []);
-
-  // Main setup effect
-  (0, _react.useEffect)(function () {
-    var container = widgetRef.current;
+  useEffect(() => {
+    const container = widgetRef.current;
     if (!container) return;
-
-    // Clear previous event listeners
     cleanupEventListeners();
-
-    // Find and set form reference
-    var formElement = container.querySelector("form") || container.querySelector('[role="form"]');
+    const formElement = container.querySelector("form") || container.querySelector('[role="form"]');
     if (formElement) {
       formRef.current = formElement;
-
-      // Add form submit event listener
       formElement.addEventListener("submit", handleFormSubmit);
-      cleanupFunctionsRef.current.push(function () {
+      cleanupFunctionsRef.current.push(() => {
         formElement.removeEventListener("submit", handleFormSubmit);
       });
     }
-
-    // Find and setup login button
-    var buttons = container.querySelectorAll('button, [role="button"]');
-    var loginButtonFound = false;
-    buttons.forEach(function (button) {
+    const buttons = container.querySelectorAll('button, [role="button"]');
+    let loginButtonFound = false;
+    buttons.forEach((button) => {
       if (loginButtonFound) return;
-      var name = button.getAttribute("name");
-      var classList = Array.from(button.classList);
-      if (name === "loginButton" || (0, _lodashEs.includes)(classList, "app-login-button")) {
+      const name2 = button.getAttribute("name");
+      const classList = Array.from(button.classList);
+      if (name2 === "loginButton" || includes(classList, "app-login-button")) {
         loginButtonFound = true;
         loginButtonRef.current = button;
-
-        // Add click event listener
         button.addEventListener("click", handleLoginButtonClick);
-        cleanupFunctionsRef.current.push(function () {
+        cleanupFunctionsRef.current.push(() => {
           button.removeEventListener("click", handleLoginButtonClick);
         });
       }
     });
-
-    // Return cleanup function
     return cleanupEventListeners;
   }, [children, handleFormSubmit, handleLoginButtonClick, cleanupEventListeners]);
-  return __jsx(StyledLoginContainer, {
-    ref: widgetRef,
-    className: "".concat(DEFAULT_CLASS, " ").concat(className || ""),
-    sx: styles
-  }, __jsx(_message.WmMessageWithoutWrapper, {
-    className: "app-login-message",
-    name: "LoginMessage",
-    type: loginMessage.type || "info",
-    caption: loginMessage.caption,
-    open: loginMessage.show,
-    close: handleMessageClose,
-    listener: listener
-  }), children);
+  return /* @__PURE__ */ jsxs(
+    StyledLoginContainer,
+    {
+      ref: widgetRef,
+      className: `${DEFAULT_CLASS} ${className || ""}`,
+      sx: styles,
+      children: [
+        /* @__PURE__ */ jsx(
+          WmMessageWithoutWrapper,
+          {
+            className: "app-login-message",
+            name: "LoginMessage",
+            type: loginMessage.type || "info",
+            caption: loginMessage.caption,
+            open: loginMessage.show,
+            close: handleMessageClose,
+            listener
+          }
+        ),
+        children
+      ]
+    }
+  );
 };
 WmLogin.displayName = "WmLogin";
-
-/**
- * The WmLogin component provides a standard login interface with form handling.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/advanced-login--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/advanced-login--docs)
- *
- * @param props - {@link WmLoginProps}
- */
-var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmLogin);
+var login_default = withBaseWrapper(WmLogin);
+export {
+  login_default as default
+};

package/components/advanced/login/props.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});