@wavemaker/react-runtime 11.14.1-rc.236

package/components/dialogs/login-dialog/index.js

@@ -0,0 +1,369 @@
+"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 _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _dialogHeader = require("@wavemaker/react-runtime/components/dialogs/dialog-header");
+var _dialogContent = require("@wavemaker/react-runtime/components/dialogs/dialog-content");
+var _dialogs = require("@wavemaker/react-runtime/components/dialogs");
+var _message = require("@wavemaker/react-runtime/components/basic/message");
+var _withDialogWrapper = _interopRequireDefault(require("../withDialogWrapper"));
+var _dialogBody = require("../dialog-body");
+var _formUtils = require("@wavemaker/react-runtime/utils/form-utils");
+var _excluded = ["name", "isopen", "title", "iconclass", "errormessage", "eventsource", "onSubmit", "onOpened", "onClose", "onSuccess", "onError", "logintext", "canceltext", "close", "children", "invokeEventCallback", "appLocale", "listener"];
+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-dialog modal-dialog app-login-dialog";
+var FORM_SETUP_TIMEOUT = 100;
+var WmLoginDialog = function WmLoginDialog(props) {
+  var _listener$Widgets;
+  var name = props.name,
+    _props$isopen = props.isopen,
+    isopen = _props$isopen === void 0 ? false : _props$isopen,
+    _props$title = props.title,
+    title = _props$title === void 0 ? "Login" : _props$title,
+    _props$iconclass = props.iconclass,
+    iconclass = _props$iconclass === void 0 ? "wi wi-user" : _props$iconclass,
+    errormessage = props.errormessage,
+    eventsource = props.eventsource,
+    onSubmit = props.onSubmit,
+    onOpened = props.onOpened,
+    onClose = props.onClose,
+    onSuccess = props.onSuccess,
+    onError = props.onError,
+    _props$logintext = props.logintext,
+    logintext = _props$logintext === void 0 ? "Login" : _props$logintext,
+    _props$canceltext = props.canceltext,
+    canceltext = _props$canceltext === void 0 ? "Cancel" : _props$canceltext,
+    close = props.close,
+    children = props.children,
+    invokeEventCallback = props.invokeEventCallback,
+    appLocale = props.appLocale,
+    listener = props.listener,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  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];
+  var _useState3 = (0, _react.useState)(false),
+    isFormReady = _useState3[0],
+    setIsFormReady = _useState3[1];
+  var messageRef = (0, _react.useRef)(null);
+  var widgetRef = (0, _react.useRef)(null);
+  var formRef = (0, _react.useRef)(null);
+
+  // Widget reference
+  var dialogWidget = listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name];
+  var hideMsg = (0, _react.useCallback)(function () {
+    setLoginMessage({
+      type: "",
+      caption: "",
+      show: false
+    });
+  }, []);
+  var showMessage = (0, _react.useCallback)(function (caption, type) {
+    var message = {
+      type: type,
+      caption: caption,
+      show: true
+    };
+    setLoginMessage(message);
+  }, []);
+  var handleMessageClose = (0, _react.useCallback)(function () {
+    setLoginMessage(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        show: false
+      });
+    });
+  }, []);
+
+  // Validation helpers
+  var validateCredentials = (0, _react.useCallback)(function (formData) {
+    if (!formData.isValid) {
+      var _formRef$current, _formRef$current$vali;
+      (_formRef$current = formRef.current) === null || _formRef$current === void 0 || (_formRef$current$vali = _formRef$current.validateForm) === null || _formRef$current$vali === void 0 || _formRef$current$vali.call(_formRef$current);
+      return false;
+    }
+    if (!formData.values["j_username"] || !formData.values["j_password"]) {
+      showMessage("Please enter username and password", "error");
+      return false;
+    }
+    return true;
+  }, [showMessage]);
+
+  // Main login logic
+  var doLogin = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _formRef$current$clea, _formRef$current2;
+    var formData, beforeSubmitResult, params;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          if (!(isSubmitting || !eventsource || !formRef.current)) {
+            _context3.next = 2;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 2:
+          formData = (0, _formUtils.getFormData)(formRef);
+          if (validateCredentials(formData)) {
+            _context3.next = 5;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 5:
+          _context3.next = 7;
+          return (0, _formUtils.invokeFormEvent)(formRef, listener, "onBeforeSubmit", new Event("beforeSubmit"), formData);
+        case 7:
+          beforeSubmitResult = _context3.sent;
+          if (!(beforeSubmitResult === false)) {
+            _context3.next = 10;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 10:
+          setIsSubmitting(true);
+          showMessage("Loading...", "loading");
+          (_formRef$current$clea = (_formRef$current2 = formRef.current).clearErrors) === null || _formRef$current$clea === void 0 || _formRef$current$clea.call(_formRef$current2);
+          params = {
+            formData: formData.values
+          };
+          eventsource.invoke(params, /*#__PURE__*/function () {
+            var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(data) {
+              return _regenerator["default"].wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    setIsSubmitting(false);
+                    hideMsg();
+
+                    // Invoke onSuccess event through form
+                    _context.next = 4;
+                    return (0, _formUtils.invokeFormEvent)(formRef, listener, "onSuccess", new Event("onSuccess"), formData);
+                  case 4:
+                    invokeEventCallback === null || invokeEventCallback === void 0 || invokeEventCallback("success");
+                    onSuccess === null || onSuccess === void 0 || onSuccess(new Event("success"), dialogWidget);
+                    close();
+                  case 7:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            return function (_x) {
+              return _ref2.apply(this, arguments);
+            };
+          }(),
+          /*#__PURE__*/
+          // Error callback
+          function () {
+            var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(error) {
+              return _regenerator["default"].wrap(function _callee2$(_context2) {
+                while (1) switch (_context2.prev = _context2.next) {
+                  case 0:
+                    setIsSubmitting(false);
+                    showMessage((0, _formUtils.loginErrorMessage)(error, appLocale, errormessage), "error");
+
+                    // Invoke onError event through form
+                    _context2.next = 4;
+                    return (0, _formUtils.invokeFormEvent)(formRef, listener, "onError", new Event("onError"), formData);
+                  case 4:
+                    invokeEventCallback === null || invokeEventCallback === void 0 || invokeEventCallback("error");
+                    onError === null || onError === void 0 || onError(new Event("error"), dialogWidget);
+                  case 6:
+                  case "end":
+                    return _context2.stop();
+                }
+              }, _callee2);
+            }));
+            return function (_x2) {
+              return _ref3.apply(this, arguments);
+            };
+          }());
+
+          // Invoke onSubmit event
+          _context3.next = 17;
+          return (0, _formUtils.invokeFormEvent)(formRef, listener, "onSubmit", new Event("submit"), formData);
+        case 17:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })), [isSubmitting, eventsource, validateCredentials, showMessage, hideMsg, invokeEventCallback, onSuccess, onError, errormessage, appLocale]);
+
+  // Form setup effect
+  (0, _react.useEffect)(function () {
+    if (!isopen) {
+      setIsFormReady(false);
+      return;
+    }
+
+    // Setup form reference with timeout to allow DOM rendering
+    var setupTimeout = setTimeout(function () {
+      var container = widgetRef.current;
+      if (!container) return;
+
+      // Find form element
+      var formElement = container.querySelector("form") || container.querySelector('[role="form"]');
+      if (formElement) {
+        formRef.current = formElement;
+        setIsFormReady(true);
+      }
+    }, FORM_SETUP_TIMEOUT);
+    return function () {
+      return clearTimeout(setupTimeout);
+    };
+  }, [isopen]);
+
+  // Form event handlers
+  var handleFormSubmit = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(e) {
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            e.preventDefault();
+            e.stopPropagation();
+            if (!onSubmit) {
+              _context4.next = 6;
+              break;
+            }
+            onSubmit(e.nativeEvent, dialogWidget);
+            _context4.next = 8;
+            break;
+          case 6:
+            _context4.next = 8;
+            return doLogin();
+          case 8:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }));
+    return function (_x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }(), [onSubmit, doLogin]);
+  var handleKeyPress = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(e) {
+      return _regenerator["default"].wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            if (!(e.key === "Enter" && isFormReady)) {
+              _context5.next = 5;
+              break;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            _context5.next = 5;
+            return doLogin();
+          case 5:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    return function (_x4) {
+      return _ref5.apply(this, arguments);
+    };
+  }(), [doLogin, isFormReady]);
+  var handleLoginButtonClick = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6(e) {
+      var target, dataRole, _target$parentElement, container, hasContainerSubmitEvent, hasButtonClickEvent, hasButtonTapEvent;
+      return _regenerator["default"].wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            target = e.target;
+            dataRole = "";
+            if (target.tagName === "BUTTON") {
+              dataRole = target.getAttribute("data-role") || "";
+            } else if (target.tagName === "SPAN") {
+              dataRole = ((_target$parentElement = target.parentElement) === null || _target$parentElement === void 0 ? void 0 : _target$parentElement.getAttribute("data-role")) || "";
+              target = target.parentElement;
+            }
+            if (!(dataRole.toLowerCase() === "loginbutton")) {
+              _context6.next = 13;
+              break;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            container = widgetRef.current;
+            hasContainerSubmitEvent = container === null || container === void 0 ? void 0 : container.hasAttribute("submit.event");
+            hasButtonClickEvent = target.hasAttribute("click.event");
+            hasButtonTapEvent = target.hasAttribute("tap.event");
+            if (!(!hasContainerSubmitEvent && !hasButtonClickEvent && !hasButtonTapEvent)) {
+              _context6.next = 13;
+              break;
+            }
+            _context6.next = 13;
+            return doLogin();
+          case 13:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee6);
+    }));
+    return function (_x5) {
+      return _ref6.apply(this, arguments);
+    };
+  }(), [doLogin]);
+
+  // Early return if dialog is not open
+  if (!isopen) {
+    return null;
+  }
+  return __jsx(_dialogs.WmDialog, {
+    open: isopen,
+    onClose: close,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, props.className),
+    closable: props.closable,
+    sheet: props.sheet,
+    name: props.name || "",
+    listener: listener
+  }, __jsx(_dialogContent.WmDialogContent, {
+    name: "".concat(name, "_content"),
+    listener: listener
+  }, __jsx(_dialogHeader.WmDialogHeader, {
+    name: "login-dialog-".concat(title),
+    listener: listener,
+    titleid: "login-dialog-".concat(title),
+    heading: title,
+    iconclass: iconclass,
+    onClose: close
+  }), __jsx(_dialogBody.WmDialogBody, {
+    name: "".concat(name, "_body"),
+    listener: listener
+  }, __jsx("div", {
+    ref: widgetRef,
+    className: "login-dialog-content",
+    onSubmit: handleFormSubmit,
+    onKeyPress: handleKeyPress,
+    onClick: handleLoginButtonClick
+  }, __jsx(_message.WmMessage, {
+    ref: messageRef,
+    className: "app-login-message",
+    name: "LoginMessage",
+    type: loginMessage.type || "info",
+    caption: loginMessage.caption,
+    open: loginMessage.show,
+    close: handleMessageClose,
+    listener: listener
+  }), children))));
+};
+var _default = exports["default"] = (0, _withDialogWrapper["default"])((0, _withBaseWrapper.withBaseWrapper)(WmLoginDialog));

package/components/dialogs/login-dialog/props.js

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

package/components/dialogs/page-dialog/index.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _withDialogWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/components/dialogs/withDialogWrapper"));
+var _dialogs = require("@wavemaker/react-runtime/components/dialogs");
+var _dialogContent = require("@wavemaker/react-runtime/components/dialogs/dialog-content");
+var _dialogHeader = require("@wavemaker/react-runtime/components/dialogs/dialog-header");
+var _dialogBody = require("@wavemaker/react-runtime/components/dialogs/dialog-body");
+var _button = require("@wavemaker/react-runtime/components/form/button");
+var _dialogActions = require("@wavemaker/react-runtime/components/dialogs/dialog-actions");
+var _partialContainer = _interopRequireDefault(require("@wavemaker/react-runtime/components/page/partial-container"));
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-dialog modal-dialog app-page-dialog";
+var WmPageDialog = function WmPageDialog(props) {
+  var _props$showactions = props.showactions,
+    showactions = _props$showactions === void 0 ? true : _props$showactions,
+    _props$iconclass = props.iconclass,
+    iconclass = _props$iconclass === void 0 ? "wi wi-file" : _props$iconclass,
+    _props$title = props.title,
+    title = _props$title === void 0 ? "Page Content" : _props$title,
+    _props$oktext = props.oktext,
+    oktext = _props$oktext === void 0 ? "OK" : _props$oktext;
+
+  // const { isopen, onOk, onClose, close, title, content, prefab, prefabName } = props;
+  var handleOk = function handleOk(event) {
+    if (props.onOk) {
+      props.onOk(event);
+    }
+    if (props.close) {
+      props.close(event);
+    }
+  };
+  var handleClose = function handleClose(event) {
+    if (props.onClose) {
+      props.onClose(event);
+    }
+    if (props.close) {
+      props.close(event);
+    }
+  };
+  if (!props.isopen) {
+    return null;
+  }
+  return __jsx(_dialogs.WmDialog, {
+    open: props.isopen || false,
+    onClose: handleClose,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, props.className),
+    closable: props.closable,
+    sheet: props.sheet,
+    "data-role": "page-dialog",
+    "aria-labelledby": "page-dialog-".concat(props.title),
+    "aria-describedby": "page-dialog-".concat(props.title, "-description"),
+    role: "dialog",
+    name: props.name || "",
+    listener: {}
+  }, __jsx(_dialogContent.WmDialogContent, {
+    name: "",
+    listener: {}
+  }, __jsx(_dialogHeader.WmDialogHeader, {
+    titleid: "page-dialog-".concat(props.title),
+    heading: title,
+    iconclass: iconclass,
+    onClose: handleClose,
+    closable: props.closable,
+    name: "",
+    listener: {}
+  }), __jsx(_dialogBody.WmDialogBody, {
+    name: "",
+    listener: {}
+  }, props.content && __jsx(_partialContainer["default"], {
+    listener: {},
+    name: "",
+    content: props.content,
+    prefab: props.prefab,
+    prefabName: props.prefabName
+  })), showactions && __jsx(_dialogActions.WmDialogFooter, {
+    name: "",
+    listener: {}
+  }, __jsx(_button.WmButton, {
+    "aria-label": oktext,
+    caption: oktext,
+    onClick: props.onOkClick || handleOk,
+    className: "btn-primary ok-action",
+    listener: {},
+    name: "page-dialog-ok-button"
+  }))));
+};
+WmPageDialog.displayName = "WmPageDialog";
+var _default = exports["default"] = (0, _withDialogWrapper["default"])((0, _withBaseWrapper["default"])(WmPageDialog));

package/components/dialogs/withDialogWrapper.js

@@ -0,0 +1,108 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _store = require("@wavemaker/react-runtime/store");
+var _dialog = _interopRequireDefault(require("@wavemaker/react-runtime/core/dialog.service"));
+var _excluded = ["isopen", "onClose", "onOk", "onOpened", "name"];
+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; }
+var BaseDialog = function BaseDialog(Component) {
+  var WrappedComponent = function WrappedComponent(props) {
+    var _props$isopen = props.isopen,
+      isopen = _props$isopen === void 0 ? false : _props$isopen,
+      onClose = props.onClose,
+      onOk = props.onOk,
+      onOpened = props.onOpened,
+      name = props.name,
+      restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    var _useState = (0, _react.useState)(!!isopen),
+      dialogOpen = _useState[0],
+      setDialogOpen = _useState[1];
+    var appLocale = (0, _store.useAppSelector)(function (state) {
+      return state.i18n.appLocale;
+    });
+    var dialogInstanceRef = (0, _react.useRef)(null);
+    var isDialogOpenRef = (0, _react.useRef)(isopen);
+    (0, _react.useEffect)(function () {
+      setDialogOpen(!!isopen);
+      isDialogOpenRef.current = !!isopen;
+    }, [isopen]);
+    var handleTransitionEntered = (0, _react.useCallback)(function () {
+      if (onOpened) {
+        onOpened();
+      }
+    }, [onOpened, name]);
+    var handleOpen = (0, _react.useCallback)(function () {
+      setDialogOpen(true);
+      isDialogOpenRef.current = true;
+    }, []);
+    var handleClose = (0, _react.useCallback)(function (event) {
+      if (isDialogOpenRef.current) {
+        setDialogOpen(false);
+        isDialogOpenRef.current = false;
+        onClose && onClose(event);
+      }
+    }, [onClose]);
+    var handleOk = (0, _react.useCallback)(function (event) {
+      setDialogOpen(false);
+      isDialogOpenRef.current = false;
+      onOk && onOk(event);
+    }, [onOk]);
+
+    // Register/unregister dialog with DialogService
+    (0, _react.useEffect)(function () {
+      if (name) {
+        var dialogInstance = {
+          open: handleOpen,
+          close: handleClose,
+          isOpen: dialogOpen,
+          component: Component
+        };
+        dialogInstanceRef.current = dialogInstance;
+        _dialog["default"].registerDialog(name, dialogInstance);
+        return function () {
+          _dialog["default"].unregisterDialog(name);
+        };
+      }
+    }, [name, handleOpen, handleClose, Component]);
+
+    // Update dialog state in the service when dialogOpen changes
+    (0, _react.useEffect)(function () {
+      if (name && dialogInstanceRef.current) {
+        dialogInstanceRef.current.isOpen = dialogOpen;
+      }
+    }, [dialogOpen, name]);
+    var updatedProps = (0, _react.useMemo)(function () {
+      return _objectSpread(_objectSpread({}, restProps), {}, {
+        isopen: dialogOpen,
+        open: handleOpen,
+        close: handleClose,
+        openDialog: handleOpen,
+        closeDialog: handleClose,
+        widgetType: "wm-dialog",
+        onOkClick: handleOk,
+        onTransitionEntered: handleTransitionEntered,
+        dialogLocale: {
+          LABEL_CLOSE: appLocale.LABEL_CLOSE
+        }
+      });
+    }, [restProps, dialogOpen, handleOpen, handleClose, handleOk]);
+    return __jsx(Component, (0, _extends2["default"])({}, updatedProps, {
+      name: name
+    }));
+  };
+  WrappedComponent.displayName = "BaseDialog(".concat(Component.displayName || Component.name || "Component", ")");
+  return WrappedComponent;
+};
+var _default = exports["default"] = BaseDialog;