fix(menu): release mouse on player modal X click (#993)

tabarra · Oct 17, 2024 · 8b2a28c · 8b2a28c
1 parent 5de3f07
commit 8b2a28c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/nui/src/components/PlayerModal/PlayerModal.tsx b/nui/src/components/PlayerModal/PlayerModal.tsx
@@ -76,15 +76,14 @@ const StyledCloseButton = styled(IconButton)(({ theme }) => ({
   right: theme.spacing(2),
 }));
 
-const PlayerModal: React.FC = () => {
+type PlayerModalProps = {
+  onClose: () => void
+};
+const PlayerModal: React.FC<PlayerModalProps> = ({onClose}) => {
   const setModalOpen = useSetPlayerModalVisibility();
   const playerDetails = usePlayerDetailsValue();
   const assocPlayer = useAssociatedPlayerValue();
 
-  const handleClose = () => {
-    setModalOpen(false);
-  };
-
   if (!assocPlayer) return null;
 
   const error = (playerDetails as any).error;
@@ -94,7 +93,7 @@ const PlayerModal: React.FC = () => {
       <DialogTitle style={{ borderBottom: "1px solid rgba(221,221,221,0.54)" }}>
         [{assocPlayer.id}]{" "}
         {playerDetails?.player?.displayName ?? assocPlayer.displayName}
-        <StyledCloseButton onClick={handleClose} size="large">
+        <StyledCloseButton onClick={onClose} size="large">
           <Close />
         </StyledCloseButton>
       </DialogTitle>

diff --git a/nui/src/provider/PlayerModalProvider.tsx b/nui/src/provider/PlayerModalProvider.tsx
@@ -79,6 +79,14 @@ export const PlayerModalProvider: React.FC<PlayerModalProviderProps> = ({
     });
   }, []);
 
+  const handleClose = () => {
+    if (curPage === txAdminMenuPage.PlayerModalOnly) {
+      closeMenu();
+    } else {
+      setModalOpen(false);
+    }
+  }
+
   return (
     <PlayerContext.Provider
       value={{
@@ -89,13 +97,7 @@ export const PlayerModalProvider: React.FC<PlayerModalProviderProps> = ({
       <Dialog
         open={modalOpen}
         fullWidth
-        onClose={() => {
-          if (curPage === txAdminMenuPage.PlayerModalOnly) {
-            closeMenu();
-          } else {
-            setModalOpen(false);
-          }
-        }}
+        onClose={handleClose}
         maxWidth="md"
         PaperProps={{
           style: {
@@ -108,7 +110,7 @@ export const PlayerModalProvider: React.FC<PlayerModalProviderProps> = ({
         }}
       >
         <React.Suspense fallback={<LoadingModal />}>
-          <PlayerModal />
+          <PlayerModal onClose={handleClose} />
         </React.Suspense>
       </Dialog>
       {children}