From 599e6f9ea93ac8fca5cd54e95ee71ad9129f88f0 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Wed, 9 Apr 2025 15:44:34 +0000 Subject: [PATCH] improve modal window rendering params handlers --- .../app/src/cores/windows/windows.core.jsx | 3 - .../src/layouts/components/modals/index.jsx | 12 +- .../layouts/components/modals/modal/index.jsx | 174 +++++++++--------- .../components/modals/modal/index.less | 11 +- packages/app/src/statics/methods.jsx | 6 +- 5 files changed, 105 insertions(+), 101 deletions(-) diff --git a/packages/app/src/cores/windows/windows.core.jsx b/packages/app/src/cores/windows/windows.core.jsx index 0d570118..2a9dd880 100644 --- a/packages/app/src/cores/windows/windows.core.jsx +++ b/packages/app/src/cores/windows/windows.core.jsx @@ -171,17 +171,14 @@ export default class WindowManager extends Core { } // remove the element from the DOM - this.console.debug(`Removing element from DOM for window ${id}`) win.node.unmount() this.root.removeChild(element) // remove the window from the list - this.console.debug(`Removing window from list for window ${id}`) this.windows = this.windows.filter((node) => { return node.id !== id }) - this.console.debug(`Window ${id} closed`) return true } } diff --git a/packages/app/src/layouts/components/modals/index.jsx b/packages/app/src/layouts/components/modals/index.jsx index 7d40272b..762e19ed 100755 --- a/packages/app/src/layouts/components/modals/index.jsx +++ b/packages/app/src/layouts/components/modals/index.jsx @@ -93,19 +93,23 @@ export default () => { app.cores.window_mng.render( id, { - app.cores.window_mng.close(id) - }} - framed={framed} className={className} + framed={framed} confirmOnOutsideClick={confirmOnOutsideClick} confirmOnClickTitle={confirmOnClickTitle} confirmOnClickContent={confirmOnClickContent} + onClose={() => { + app.cores.window_mng.close(id) + }} > {React.isValidElement(render) ? React.cloneElement(render, props) : React.createElement(render, props)} , + { + useFrame: false, + closeOnClickOutside: false, + }, ) } diff --git a/packages/app/src/layouts/components/modals/modal/index.jsx b/packages/app/src/layouts/components/modals/modal/index.jsx index ff39d2cb..4d94e908 100644 --- a/packages/app/src/layouts/components/modals/modal/index.jsx +++ b/packages/app/src/layouts/components/modals/modal/index.jsx @@ -7,104 +7,106 @@ import { Icons } from "@components/Icons" import "./index.less" class Modal extends React.Component { - state = { - visible: false, - } + state = { + visible: false, + } - contentRef = React.createRef() + contentRef = React.createRef() - escTimeout = null + escTimeout = null - componentDidMount() { - setTimeout(() => { - this.setState({ - visible: true, - }) - }, 10) + componentDidMount() { + setTimeout(() => { + this.setState({ + visible: true, + }) + }, 10) - document.addEventListener("keydown", this.handleEsc, false) - } + document.addEventListener("keydown", this.handleEsc, false) + } - componentWillUnmount() { - document.removeEventListener("keydown", this.handleEsc, false) - } + componentWillUnmount() { + document.removeEventListener("keydown", this.handleEsc, false) + } - close = () => { - this.setState({ - visible: false, - }) + close = () => { + this.setState({ + visible: false, + }) - setTimeout(() => { - if (typeof this.props.onClose === "function") { - this.props.onClose() - } - }, 250) - } + setTimeout(() => { + if (typeof this.props.onClose === "function") { + this.props.onClose() + } + }, 250) + } - handleEsc = (e) => { - if (e.key === "Escape") { - if (this.escTimeout !== null) { - clearTimeout(this.escTimeout) - return this.close() - } + handleEsc = (e) => { + if (e.key === "Escape") { + if (this.escTimeout !== null) { + clearTimeout(this.escTimeout) + return this.close() + } - this.escTimeout = setTimeout(() => { - this.escTimeout = null - }, 250) - } - } + this.escTimeout = setTimeout(() => { + this.escTimeout = null + }, 250) + } + } - handleClickOutside = (e) => { - if (this.props.confirmOnOutsideClick) { - return AntdModal.confirm({ - title: this.props.confirmOnClickTitle ?? "Are you sure?", - content: this.props.confirmOnClickContent ?? "Are you sure you want to close this window?", - onOk: () => { - this.close() - } - }) - } + handleClickOutside = (e) => { + console.log(e) + // check if event click is outside of content of the modal + if (this.contentRef.current.contains(e.target)) { + return false + } - return this.close() - } + if (this.props.confirmOnOutsideClick) { + return AntdModal.confirm({ + title: this.props.confirmOnClickTitle ?? "Are you sure?", + content: + this.props.confirmOnClickContent ?? + "Are you sure you want to close this window?", + onOk: () => { + this.close() + }, + }) + } - render() { - return
-
-
- { - this.props.includeCloseButton &&
- -
- } + return this.close() + } - { - React.cloneElement(this.props.children, { - close: this.close - }) - } -
-
- } + render() { + return ( +
+
+
+ {this.props.includeCloseButton && ( +
+ +
+ )} + + {React.cloneElement(this.props.children, { + close: this.close, + })} +
+
+ ) + } } -export default Modal \ No newline at end of file +export default Modal diff --git a/packages/app/src/layouts/components/modals/modal/index.less b/packages/app/src/layouts/components/modals/modal/index.less index 6d711fb4..fd4eb9fb 100644 --- a/packages/app/src/layouts/components/modals/modal/index.less +++ b/packages/app/src/layouts/components/modals/modal/index.less @@ -23,6 +23,8 @@ #mask_trigger { position: fixed; + z-index: 450; + top: 0; left: 0; @@ -60,6 +62,8 @@ .app_modal_content { position: relative; + z-index: 500; + box-sizing: border-box; display: flex; @@ -109,13 +113,6 @@ -webkit-box-shadow: @card-shadow; -moz-box-shadow: @card-shadow; } - - .searcher { - box-sizing: border-box; - - width: 48vw; - height: 80vh; - } } } diff --git a/packages/app/src/statics/methods.jsx b/packages/app/src/statics/methods.jsx index 3d5a03d1..2161f85f 100644 --- a/packages/app/src/statics/methods.jsx +++ b/packages/app/src/statics/methods.jsx @@ -1,6 +1,10 @@ import { Lightbox } from "react-modal-image" -import { NotificationsCenter, PostCreator, Searcher } from "@components" + +import NotificationsCenter from "@components/NotificationsCenter" +import PostCreator from "@components/PostCreator" +import Searcher from "@components/Searcher" import AppsMenu from "@components/AppsMenu" + import config from "@config" import deleteInternalStorage from "@utils/deleteInternalStorage"