Save menu work (#91)

* remove mouse down propagation * make the close part of the button
yhattav · Jan 18, 2025 · e1e6aec · e1e6aec
1 parent 1569c26
commit e1e6aec
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 31 deletions.
diff --git a/src/components/GravitySimulator/GravitySimulator.tsx b/src/components/GravitySimulator/GravitySimulator.tsx
@@ -294,7 +294,6 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
     isSettingsPanelOpen,
     setIsSettingsPanelOpen,
     isSaveModalOpen,
-    setIsSaveModalOpen,
     shareableLink,
     handleExportScenario,
     handleSaveScenario,
@@ -521,10 +520,6 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
     setIsJsonPanelOpen(false);
   }, []);
 
-  const handleSaveModalClose = useCallback(() => {
-    setIsSaveModalOpen(false);
-  }, []);
-
   const content = (
     <>
       <div
@@ -577,6 +572,7 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
             isAudioLoaded={isAudioLoaded}
             onAudioToggle={handleAudioToggle}
             disableSound={disableSound}
+            isSaveModalOpen={isSaveModalOpen}
           />
         )}
 
@@ -633,7 +629,6 @@ export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
 
             <SaveScenarioModal
               isOpen={isSaveModalOpen}
-              onClose={handleSaveModalClose}
               onSave={handleSaveScenario}
               shareableLink={shareableLink}
             />

diff --git a/src/components/SaveScenarioModal/SaveScenarioModal.tsx b/src/components/SaveScenarioModal/SaveScenarioModal.tsx
@@ -4,14 +4,12 @@ import { CopyOutlined, CheckOutlined } from "@ant-design/icons";
 
 interface SaveScenarioModalProps {
   isOpen: boolean;
-  onClose: () => void;
   onSave: (name: string) => void;
   shareableLink: string;
 }
 
 export const SaveScenarioModal: React.FC<SaveScenarioModalProps> = ({
   isOpen,
-  onClose,
   onSave,
   shareableLink,
 }) => {
@@ -41,6 +39,7 @@ export const SaveScenarioModal: React.FC<SaveScenarioModalProps> = ({
           exit={{ opacity: 0, y: -20 }}
           transition={{ type: "spring", damping: 20, stiffness: 300 }}
           onClick={(e) => e.stopPropagation()}
+          onMouseDown={(e) => e.stopPropagation()}
           className="floating-panel"
           style={{
             position: "absolute",
@@ -122,22 +121,6 @@ export const SaveScenarioModal: React.FC<SaveScenarioModalProps> = ({
               Save
             </button>
           </form>
-
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "flex-end",
-              marginTop: "15px",
-            }}
-          >
-            <button
-              onClick={onClose}
-              className="action-button"
-              style={{ background: "rgba(255, 255, 255, 0.1)" }}
-            >
-              Close
-            </button>
-          </div>
         </motion.div>
       )}
     </AnimatePresence>

diff --git a/src/components/SimulatorControls/SimulatorControls.tsx b/src/components/SimulatorControls/SimulatorControls.tsx
@@ -3,7 +3,7 @@ import { motion } from "framer-motion";
 import { MdFullscreen, MdFullscreenExit, MdInvertColors } from "react-icons/md";
 import { BiReset } from "react-icons/bi";
 import { BsPlayFill, BsPauseFill, BsFillCameraFill } from "react-icons/bs";
-import { AiOutlineExport } from "react-icons/ai";
+import { AiOutlineExport, AiOutlineClose } from "react-icons/ai";
 import { VscLibrary } from "react-icons/vsc";
 import { SettingOutlined } from "@ant-design/icons";
 import { MusicPlayer } from "../MusicPlayer/MusicPlayer";
@@ -25,6 +25,7 @@ interface SimulatorControlsProps {
   isAudioLoaded?: boolean;
   onAudioToggle?: (e: React.MouseEvent) => void;
   disableSound?: boolean;
+  isSaveModalOpen?: boolean;
 }
 
 interface ControlButton {
@@ -71,6 +72,7 @@ export const SimulatorControls: React.FC<SimulatorControlsProps> = ({
   isAudioLoaded,
   onAudioToggle,
   disableSound,
+  isSaveModalOpen,
 }) => {
   const handleClick = useCallback(
     <T extends Element>(handler: (e: React.MouseEvent<T>) => void) =>
@@ -124,8 +126,14 @@ export const SimulatorControls: React.FC<SimulatorControlsProps> = ({
     },
     {
       icon: <AiOutlineExport size={20} />,
-      title: "Export Scenario",
+      title: isSaveModalOpen ? "Close Export" : "Export Scenario",
       onClick: handleClick(onExport),
+      dynamicIcon: true,
+      alternateIcon: isSaveModalOpen ? (
+        <AiOutlineClose size={20} />
+      ) : (
+        <AiOutlineExport size={20} />
+      ),
     },
     {
       icon: <MdInvertColors size={20} />,

diff --git a/src/hooks/useScenarioManagement.ts b/src/hooks/useScenarioManagement.ts
@@ -86,12 +86,16 @@ export const useScenarioManagement = ({
   const handleExportScenario = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
-      const scenario = getCurrentScenario();
-      setShareableLink(createShareableLink(scenario));
-      setIsPaused(true);
-      setIsSaveModalOpen(true);
+      if (isSaveModalOpen) {
+        setIsSaveModalOpen(false);
+      } else {
+        const scenario = getCurrentScenario();
+        setShareableLink(createShareableLink(scenario));
+        setIsPaused(true);
+        setIsSaveModalOpen(true);
+      }
     },
-    [getCurrentScenario, setIsPaused]
+    [getCurrentScenario, setIsPaused, isSaveModalOpen]
   );
 
   const handleSaveScenario = useCallback(