fcr-ui-scene 3.3.1 → 3.4.1

package/lib/modules/dialog/components/Interpreter/index.js

@@ -1,61 +1,33 @@
 "use strict";
 
 require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _env = require("agora-foundation/lib/utilities/env");
 var _electron = require("./electron");
-var _mobxReact = require("mobx-react");
-var _react = require("react");
-var _reactRnd = require("react-rnd");
-var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _context = require("../../context");
 require("./index.css");
+var _dialogContainer = _interopRequireDefault(require("../../../components/dialog-container"));
+var _constant = require("../../../../utilities/constant");
 var _jsxRuntime = require("react/jsx-runtime");
-var InterpreterDialog = (0, _mobxReact.observer)(function (_ref) {
+var InterpreterDialog = function InterpreterDialog(_ref) {
   var children = _ref.children;
   var t = (0, _i18n.useI18n)();
-  var store = (0, _react.useContext)(_context.StoreContext);
-  var containerRef = (0, _react.useRef)(null);
-  var windowWidth = window.innerWidth;
-  var windowHeight = window.innerHeight;
-  var width = 506;
-  var height = 434;
-  var x = windowWidth / 2 - width / 2;
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    title: t('fmt_interpretation_setting_controller_option_simultaneous_interpretation'),
+    width: 684,
+    height: 438,
+    dialogKey: _constant.DialogKey.INTERPRETER,
+    children: children
+  });
   if ((0, _env.isElectron)()) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.InterpreterElectronDialog, {
-      children: children
+      children: container
     });
   }
-  function handleCloseClick() {
-    store.closeInterpreterDialog();
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-    "default": {
-      x: x,
-      y: windowHeight / 2 - height / 2,
-      width: width,
-      height: height
-    },
-    ref: containerRef,
-    bounds: '.fcr-layout-content',
-    minWidth: width,
-    minHeight: height,
-    dragHandleClassName: "frc-window-header",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fcr-simultaneous-interpretation-dialog-wrapper",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
-        showClose: true,
-        title: t('fmt_modules_labels_simultaneous_interpretation'),
-        onClose: handleCloseClick,
-        type: _windowHeader.WindowType.WINDOW,
-        withWindowPopUpButton: false
-        // otherActionsAfter={<UserQueue />}
-      }), children]
-    })
-  });
-});
+  return container;
+};
 var _default = exports["default"] = InterpreterDialog;

package/lib/modules/dialog/components/chat/electron.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from 'react';
-export declare const ChatElectronDialog: ({ children, chatAction }: PropsWithChildren<{
+export declare const ChatElectronDialog: ({ children, chatAction, }: PropsWithChildren<{
     chatAction: React.ReactNode;
-}>) => null;
+}>) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/components/chat/electron.js

@@ -5,56 +5,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChatElectronDialog = void 0;
-var _mobxReact = require("mobx-react");
-var _react = require("react");
-var _context = require("../../context");
-var _dialogs = require("../../dialogs");
 var _constant = require("../../../../utilities/constant");
-var _renderer = require("../../../../utilities/renderer");
-var _reactDom = require("react-dom");
-var _ = require(".");
-var _platform = require("../../../../utilities/platform");
+var _useElectron = require("../../hooks/useElectron");
 var _jsxRuntime = require("react/jsx-runtime");
-var ChatElectronDialog = exports.ChatElectronDialog = (0, _mobxReact.observer)(function (_ref) {
+var config = {
+  width: 800,
+  height: 600,
+  fullscreen: false,
+  maximizable: false
+};
+var ChatElectronDialog = exports.ChatElectronDialog = function ChatElectronDialog(_ref) {
   var children = _ref.children,
     chatAction = _ref.chatAction;
-  var store = (0, _react.useContext)(_context.StoreContext);
-  (0, _react.useEffect)(function () {
-    var node;
-    window.runtime.openRendererWindow('chat', function (dom, browserWindow) {
-      _dialogs.dialogWindows.set(_constant.DialogKey.CHAT, browserWindow);
-      node = dom;
-      (0, _platform.isWindows)() && browserWindow.show(); // 修复 windows 下打开白屏的问题
-
-      if (store.currentDialogBounds.height) {
-        (0, _dialogs.setDialogBounds)(browserWindow, {
-          y: store.currentDialogBounds.y
-        });
-      }
-      (0, _renderer.handleWillClose)(browserWindow, function () {
-        (0, _reactDom.unmountComponentAtNode)(node);
-        _dialogs.dialogWindows["delete"](_constant.DialogKey.CHAT);
-        store.closeChatFromDialog();
-      });
-      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
-        value: store,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ChatDialogContent, {
-          chatAction: chatAction,
-          children: children
-        })
-      }), dom);
-    }, {
-      frame: false,
-      fullscreen: false,
-      maximizable: false,
-      y: store.currentDialogBounds.y,
-      show: !(0, _platform.isWindows)(),
-      transparent: true
-    });
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('chat');
-    };
-  }, []);
-  return null;
-});
+  (0, _useElectron.useElectronDialog)({
+    config: config,
+    dialogKey: _constant.DialogKey.CHAT,
+    children: children
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+};

package/lib/modules/dialog/components/chat/index.d.ts

@@ -1,7 +1,4 @@
 import { PropsWithChildren } from 'react';
-export declare const ChatDialogContent: ({ children, chatAction, }: PropsWithChildren<{
-    chatAction: React.ReactNode;
-}>) => import("react/jsx-runtime").JSX.Element;
-export declare const ChatDialog: ({ children, chatAction }: PropsWithChildren<{
+export declare const ChatDialog: ({ children, chatAction, }: PropsWithChildren<{
     chatAction: React.ReactNode;
 }>) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/components/chat/index.js

@@ -1,66 +1,60 @@
 "use strict";
 
 require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChatDialogContent = exports.ChatDialog = void 0;
+exports.ChatDialog = void 0;
 var _env = require("agora-foundation/lib/utilities/env");
-var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _reactRnd = require("react-rnd");
-var _context = require("../../context");
+var _store = require("../../store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
 var _electron = require("./electron");
-var _type = require("agora-edu-core/lib/room-control/chatroom-control/type");
+var _type = require("fcr-core/lib/room-control/chatroom-control/type");
+var _dialogContainer = _interopRequireDefault(require("../../../components/dialog-container"));
+var _constant = require("../../../../utilities/constant");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _iconButton = require("agora-ui-foundation/lib/components/icon-button");
+var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _jsxRuntime = require("react/jsx-runtime");
-var ChatDialogContent = exports.ChatDialogContent = (0, _mobxReact.observer)(function (_ref) {
+var ChatDialog = exports.ChatDialog = function ChatDialog(_ref) {
   var children = _ref.children,
     chatAction = _ref.chatAction;
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     closeChatFromDialog = _useContext.closeChatFromDialog,
     moveChatFromDialogToAside = _useContext.moveChatFromDialogToAside,
-    chatRoomState = _useContext.chatRoomState;
+    chatRoomState = _useContext.chatRoomState,
+    waitingRoomState = _useContext.waitingRoomState;
   var transI18n = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-chat-dialog-wrapper",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
-      showClose: true,
-      rootClassName: 'chat-can-draggable',
-      title: chatRoomState === _type.FcrChatRoomConnectionState.Connected ? transI18n('fmt_chat_label_chat') : transI18n('fmt_aside_status_connecting'),
-      onTypeChange: moveChatFromDialogToAside,
-      onClose: closeChatFromDialog,
-      otherActions: chatAction,
-      type: _windowHeader.WindowType.WINDOW
-    }), children]
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    title: chatRoomState === _type.FcrChatRoomConnectionState.Connected ? transI18n('fmt_chat_label_chat') : transI18n('fmt_aside_status_connecting'),
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [chatAction, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: transI18n('fmt_uimanager_option_mergeview'),
+        mouseEnterDelay: 0,
+        trigger: "hover",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+          icon: _type2.FcrIconType.FCR_WINDOWPAGE_BIGGER,
+          onClick: moveChatFromDialogToAside,
+          className: "frc-window-header__icon fcr-no-drag",
+          iconColors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          }
+        })
+      })]
+    }),
+    width: 800,
+    height: waitingRoomState ? 630 : 600,
+    dialogKey: _constant.DialogKey.CHAT,
+    onClose: closeChatFromDialog,
+    children: children
   });
-});
-var ChatDialog = exports.ChatDialog = (0, _mobxReact.observer)(function (_ref2) {
-  var children = _ref2.children,
-    chatAction = _ref2.chatAction;
   if ((0, _env.isElectron)()) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.ChatElectronDialog, {
       chatAction: chatAction,
-      children: children
+      children: container
     });
   }
-  var width = window.innerWidth;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-    "default": {
-      width: 320,
-      height: 350,
-      x: width / 2 - 320 / 2,
-      y: 0
-    },
-    bounds: '.fcr-layout-content',
-    cancel: ".frc-window-header__operates",
-    minWidth: 320,
-    minHeight: 350,
-    dragHandleClassName: "chat-can-draggable",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChatDialogContent, {
-      chatAction: chatAction,
-      children: children
-    })
-  });
-});
+  return container;
+};

package/lib/modules/dialog/components/confirm/electron.d.ts

@@ -6,5 +6,5 @@ declare const ConfirmElectronDialog: ({ children, params, }: PropsWithChildren<{
         x?: number;
         y?: number;
     };
-}>) => null;
+}>) => import("react/jsx-runtime").JSX.Element;
 export default ConfirmElectronDialog;

package/lib/modules/dialog/components/confirm/electron.js

@@ -1,86 +1,54 @@
 "use strict";
 
 require("core-js/modules/es.object.define-property.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 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 _mobxReact = require("mobx-react");
 var _react = require("react");
-var _context2 = require("../../context");
-var _reactDom = require("react-dom");
-var _renderer = require("../../../../utilities/renderer");
+var _store = require("../../store");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
 var _jsxRuntime = require("react/jsx-runtime");
 var ConfirmElectronDialog = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children,
     params = _ref.params;
-  var store = (0, _react.useContext)(_context2.StoreContext);
+  var store = (0, _react.useContext)(_store.StoreContext);
+  var config = {
+    frame: false,
+    fullscreen: false,
+    maximizable: false,
+    width: (params === null || params === void 0 ? void 0 : params.width) || 320,
+    height: (params === null || params === void 0 ? void 0 : params.height) || 168 + (params.closable || params.closable === undefined ? 16 : 0),
+    minWidth: 255,
+    minHeight: 160,
+    maxWidth: 620,
+    maxHeight: 700,
+    transparent: true,
+    resizable: false
+  };
+  var element = (0, _useElectron.useElectronDialog)({
+    config: config,
+    dialogKey: _constant.DialogKey.CONFIRM,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-confirm-dialog-wrapper",
+      children: children
+    }),
+    onOpened: function onOpened(_ref2) {
+      var browserWindow = _ref2.browserWindow;
+      browserWindow.setBounds({
+        width: (params === null || params === void 0 ? void 0 : params.width) || 320,
+        height: (params === null || params === void 0 ? void 0 : params.height) || 168 + (params.closable || params.closable === undefined ? 16 : 0)
+      });
+    }
+  });
   (0, _react.useEffect)(function () {
-    var node;
-    (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-      var _ref3, x, y;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return store.setWorkArea();
-          case 2:
-            _context.t0 = _context.sent;
-            if (_context.t0) {
-              _context.next = 5;
-              break;
-            }
-            _context.t0 = {
-              x: 0,
-              y: 0
-            };
-          case 5:
-            _ref3 = _context.t0;
-            x = _ref3.x;
-            y = _ref3.y;
-            window.runtime.openRendererWindow('confirm-dialog', function (dom, browserWindow) {
-              node = dom;
-              browserWindow.focus(); // 这里打开的confirm dialog 不会走 openRendererWindow 中的 focus 逻辑，所以单独 focus 一下
-
-              (0, _renderer.handleWillClose)(browserWindow, function () {
-                (0, _reactDom.unmountComponentAtNode)(node);
-              });
-              (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context2.StoreContext.Provider, {
-                value: store,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: "fcr-confirm-dialog-wrapper",
-                  children: children
-                })
-              }), dom);
-            }, {
-              frame: false,
-              fullscreen: false,
-              maximizable: false,
-              // TODO:
-              width: (params === null || params === void 0 ? void 0 : params.width) || 320,
-              height: (params === null || params === void 0 ? void 0 : params.height) || 168 + (params.closable || params.closable === undefined ? 16 : 0),
-              minWidth: 255,
-              minHeight: 160,
-              maxWidth: 620,
-              maxHeight: 700,
-              x: x + ((params === null || params === void 0 ? void 0 : params.x) || 0),
-              y: y + ((params === null || params === void 0 ? void 0 : params.y) || 0),
-              transparent: true
-            });
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }))();
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('confirm-dialog');
-    };
-  }, []);
-  return null;
+    var _element$browserWindo;
+    element === null || element === void 0 || (_element$browserWindo = element.browserWindow) === null || _element$browserWindo === void 0 || _element$browserWindo.setBounds({
+      height: store.currentDialogBounds.height
+    });
+  }, [store.currentDialogBounds.height]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
 });
 var _default = exports["default"] = ConfirmElectronDialog;

package/lib/modules/dialog/components/confirm/index.d.ts

@@ -1,10 +1,2 @@
 import { FC, PropsWithChildren } from 'react';
-import { ConfirmContentProps } from 'agora-ui-foundation/lib/components/confirm-content';
-export declare const ConfirmDialog: FC<PropsWithChildren<{
-    dialogType: string;
-    params: (ConfirmContentProps & {
-        height?: number;
-        x?: number;
-        y?: number;
-    }) | undefined;
-}>>;
+export declare const ConfirmDialog: FC<PropsWithChildren<{}>>;

package/lib/modules/dialog/components/confirm/index.js

@@ -1,89 +1,42 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.array.push.js");
-require("core-js/modules/es.object.define-properties.js");
 require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.keys.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.async-iterator.for-each.js");
-require("core-js/modules/esnext.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.filter.js");
-require("core-js/modules/esnext.iterator.for-each.js");
-require("core-js/modules/esnext.weak-map.delete-all.js");
-require("core-js/modules/esnext.weak-map.emplace.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ConfirmDialog = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _mobxReact = require("mobx-react");
-var _react = _interopRequireWildcard(require("react"));
-var _context = require("../../context");
-var _reactRnd = require("react-rnd");
-var _electron = _interopRequireDefault(require("./electron"));
-var _platform = require("../../../../utilities/platform");
+var _useElectron = require("../../hooks/useElectron");
+var _constant = require("../../../../utilities/constant");
+var _env = require("agora-foundation/lib/utilities/env");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-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 ConfirmDialog = exports.ConfirmDialog = (0, _mobxReact.observer)(function (_ref) {
-  var children = _ref.children,
-    dialogType = _ref.dialogType,
-    params = _ref.params;
-  var store = (0, _react.useContext)(_context.StoreContext);
-  var containerWidth = window.innerWidth;
-  var containerHeight = window.innerHeight;
-  var _ref2 = dialogType === 'electron' ? window.runtime.browserWindow.getBounds() : {
-      x: document.body.offsetLeft,
-      y: document.body.offsetTop
-    },
-    offsetX = _ref2.x,
-    offsetY = _ref2.y;
-  var width = (params === null || params === void 0 ? void 0 : params.width) || 415;
-  var height = (params === null || params === void 0 ? void 0 : params.height) || 180;
-  var x = containerWidth / 2 - width / 2 + ((0, _platform.isWindows)() ? offsetX : 0);
-  var y = containerHeight / 2 - height / 2 + ((0, _platform.isWindows)() ? offsetY : 0);
-  if (dialogType === 'electron') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron["default"], {
-      params: _objectSpread(_objectSpread({}, params), {}, {
-        x: x,
-        y: y
-      }),
-      children: children
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
-    value: store,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-      "default": {
-        x: x,
-        y: y,
-        width: width,
-        height: height
-      },
-      maxHeight: 700,
-      maxWidth: width,
-      minWidth: width,
-      minHeight: height,
-      bounds: '.fcr-confirm-dialog-wrapper_web',
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "fcr-confirm-dialog-wrapper_web",
-        children: children
-      })
-    })
+var ConfirmDialog = exports.ConfirmDialog = function ConfirmDialog(_ref) {
+  var children = _ref.children;
+  var config = {
+    maximizable: false,
+    backgroundColor: '#00000000',
+    hiddenInMissionControl: true,
+    hasShadow: false,
+    useContentSize: true,
+    minimizable: false,
+    title: 'Confirm',
+    scroll: false,
+    alwaysOnTop: true,
+    fullscreen: false,
+    resizable: false,
+    skipTaskbar: true
+  };
+  (0, _env.isElectron)() && (0, _useElectron.useElectronDialog)({
+    config: config,
+    dialogKey: _constant.DialogKey.CONFIRM,
+    children: children,
+    fullScreen: true,
+    scroll: false,
+    alwaysOnTop: true,
+    ignoreMouseEvents: true,
+    focus: true,
+    hasCustomShadow: false
   });
-});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: !(0, _env.isElectron)() && children
+  });
+};

package/lib/modules/dialog/components/connection-gateway/electron.d.ts

@@ -1,2 +1,5 @@
 import { PropsWithChildren } from 'react';
-export declare const ConnectionGatewayElectronDialog: ({ children }: PropsWithChildren<{}>) => null;
+import { ParamsType } from '.';
+export declare const ConnectionGatewayElectronDialog: ({ children, params, }: PropsWithChildren<{
+    params: ParamsType;
+}>) => null;

package/lib/modules/dialog/components/connection-gateway/electron.js

@@ -5,60 +5,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ConnectionGatewayElectronDialog = void 0;
-var _mobxReact = require("mobx-react");
-var _react = require("react");
-var _reactDom = require("react-dom");
-var _context = require("../../context");
-var _dialogs = require("../../dialogs");
 var _constant = require("../../../../utilities/constant");
-var _renderer = require("../../../../utilities/renderer");
-var _jsxRuntime = require("react/jsx-runtime");
-var ConnectionGatewayElectronDialog = exports.ConnectionGatewayElectronDialog = (0, _mobxReact.observer)(function (_ref) {
-  var children = _ref.children;
-  var store = (0, _react.useContext)(_context.StoreContext);
-  var height = store.connectorContainerBounds.height;
-  var browserRef = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    var node;
-    window.runtime.openRendererWindow('connection-gateway', function (dom, browserWindow) {
-      browserWindow.webContents.insertCSS("\n          ::-webkit-scrollbar {\n            display: none;\n          }\n        ");
-      browserRef.current = browserWindow;
-      browserWindow.focus();
-      _dialogs.dialogWindows.set(_constant.DialogKey.CONNECTION_GATEWAY, browserWindow);
-      node = dom;
-      (0, _renderer.handleWillClose)(browserWindow, function () {
-        (0, _reactDom.unmountComponentAtNode)(node);
-        _dialogs.dialogWindows["delete"](_constant.DialogKey.CONNECTION_GATEWAY);
-        store.closeConnectionDialog();
-      });
-      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
-        value: store,
-        children: children
-      }), dom);
-    }, {
-      frame: false,
-      width: 400,
-      height: height,
-      titleBarStyle: 'default',
-      trafficLightPosition: {
-        x: 0,
-        y: 0
-      },
-      resizable: false,
-      transparent: true
-    });
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('connection-gateway');
-    };
-  }, []);
-  (0, _react.useEffect)(function () {
-    var _browserRef$current;
-    if (!height) return;
-    (_browserRef$current = browserRef.current) === null || _browserRef$current === void 0 || _browserRef$current.setBounds({
-      width: 400,
-      height: height
-    }, true);
-  }, [height]);
+var _useElectron = require("../../hooks/useElectron");
+var ConnectionGatewayElectronDialog = exports.ConnectionGatewayElectronDialog = function ConnectionGatewayElectronDialog(_ref) {
+  var children = _ref.children,
+    params = _ref.params;
+  var config = {
+    maximizable: false,
+    minimizable: false,
+    fullscreenable: false,
+    width: 400,
+    height: 500,
+    trafficLightPosition: {
+      x: 0,
+      y: 0
+    }
+  };
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.DialogKey.CONNECTION_GATEWAY,
+    config: config,
+    children: children,
+    onOpened: function onOpened(_ref2) {
+      var browserWindow = _ref2.browserWindow;
+      browserWindow === null || browserWindow === void 0 || browserWindow.focus();
+      browserWindow === null || browserWindow === void 0 || browserWindow.setAlwaysOnTop(true);
+    }
+  });
   return null;
-});
+};

package/lib/modules/dialog/components/connection-gateway/index.d.ts

@@ -1,3 +1,7 @@
 import { FC } from 'react';
-import './index.css';
-export declare const ConnectionGatewayDialog: FC<{}>;
+export type ParamsType = {
+    type: 'phone' | 'computer';
+};
+export declare const ConnectionGatewayDialog: FC<{
+    params: ParamsType;
+}>;