Merge branch 'fix/modal' into 'main'

修复Modal开局弹出的问题

See merge request mycard/Neos!335

package-lock.json

@@ -2684,9 +2684,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001520",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz",
-      "integrity": "sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==",
+      "version": "1.0.30001587",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
+      "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==",
       "funding": [
         {
           "type": "opencollective",
@@ -8908,9 +8908,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001520",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz",
-      "integrity": "sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA=="
+      "version": "1.0.30001587",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
+      "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA=="
     },
     "chalk": {
       "version": "4.1.2",

src/ui/Duel/Message/NeosModal/index.module.scss

@@ -19,6 +19,10 @@
   }
 }
 
+.hidden {
+  visibility: hidden;
+}
+
 .wrap {
   pointer-events: none;
 }

src/ui/Duel/Message/NeosModal/index.tsx

@@ -5,22 +5,24 @@ import { useEffect, useState } from "react";
 
 import styles from "./index.module.scss";
 
-interface Props extends ModalProps {
-  canBeMinimized?: boolean;
-}
-
-export const NeosModal: React.FC<Props> = (props) => {
-  const { canBeMinimized = true } = props;
+export const NeosModal: React.FC<ModalProps> = (props) => {
   const [mini, setMini] = useState(false);
 
-  // 为了修antd的bug，先让isOpen发生变化，再让它变回来
+  // 为了修antd的bug，先让isOpen发生变化，同时设置visibility为`hidden`，再让它变回来
   const [realOpen, setRealOpen] = useState(true);
-  useEffect(() => setRealOpen(false), []);
+  const [hidden, setHidden] = useState(true);
+  useEffect(() => {
+    setRealOpen(false);
+    setHidden(false);
+  }, []);
   useEffect(() => setRealOpen(!!props.open), [props.open]);
 
   return (
     <Modal
-      className={classNames(styles.modal, { [styles["mini"]]: mini })}
+      className={classNames(styles.modal, {
+        [styles["mini"]]: mini,
+        [styles["hidden"]]: hidden,
+      })}
       centered
       maskClosable={true}
       onCancel={() => setMini(!mini)}
@@ -28,7 +30,7 @@ export const NeosModal: React.FC<Props> = (props) => {
       bodyStyle={{ padding: "10px 0" }}
       mask={!mini}
       wrapClassName={classNames({ [styles.wrap]: mini })}
-      closable={canBeMinimized}
+      closable={true}
       {...props}
       open={realOpen}
     />