fab auto hide

src/views/Action/Draggable.js

@@ -30,14 +30,28 @@ export default function Draggable(props) {
       let x = origin.x + dx;
       let y = origin.y + dy;
       const { w, h } = props.windowSize;
-      x = limitNumber(x, 0, w - props.width);
+      x = limitNumber(x, -props.width / 2, w - props.width / 2);
-      y = limitNumber(y, 0, h - props.height);
+      y = limitNumber(y, -props.height / 2, h - props.height / 2);
       setPosition({ x, y });
     }
   };
 
   const handlePointerUp = (e) => {
     setOrigin(null);
+    if (props.name !== "fab") {
+      return;
+    }
+
+    const { w, h } = props.windowSize;
+    let { x: left, y: top } = position;
+    const right = w - left - props.width;
+    const bottom = h - top - props.height;
+    const min = Math.min(left, top, right, bottom);
+    left === min && (left = -props.width / 2);
+    top === min && (top = -props.height / 2);
+    right === min && (left = w - props.width / 2);
+    bottom === min && (top = h - props.height / 2);
+    setPosition({ x: left, y: top });
   };
 
   const handleClick = (e) => {
@@ -59,8 +73,8 @@ export default function Draggable(props) {
   useEffect(() => {
     const { w, h } = props.windowSize;
     setPosition(({ x, y }) => ({
-      x: limitNumber(x, 0, w - props.width),
+      x: limitNumber(x, -props.width / 2, w - props.width / 2),
-      y: limitNumber(y, 0, h - props.height),
+      y: limitNumber(y, -props.height / 2, h - props.height / 2),
     }));
   }, [props.windowSize, props.width, props.height]);
 
@@ -71,6 +85,10 @@ export default function Draggable(props) {
         left: position.x,
         top: position.y,
         zIndex: 2147483647,
+        display: props.show ? "block" : "none",
+        transitionProperty: origin ? "none" : "all",
+        transitionDuration: "1s",
+        transitionDelay: "1s",
       }}
       onClick={handleClick}
     >

src/views/Action/index.js

@@ -1,7 +1,7 @@
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
 import Fab from "@mui/material/Fab";
-import TranslateIcon from '@mui/icons-material/Translate';
+import TranslateIcon from "@mui/icons-material/Translate";
 import ThemeProvider from "../../hooks/Theme";
 import Draggable from "./Draggable";
 import IconButton from "@mui/material/IconButton";
@@ -67,65 +67,66 @@ export default function Action() {
     windowSize,
     width: fabWidth,
     height: fabWidth,
-    left: window.innerWidth - fabWidth - fabWidth,
+    left: window.innerWidth - fabWidth,
-    top: window.innerHeight - fabWidth - fabWidth,
+    top: window.innerHeight - fabWidth,
   };
 
   return (
     <StoragesProvider>
       <ThemeProvider>
-        {showPopup ? (
+        <Draggable
-          <Draggable
+          key="pop"
-            key="pop"
+          name="pop"
-            {...popProps}
+          {...popProps}
-            onStart={handleStart}
+          show={showPopup}
-            onMove={handleMove}
+          onStart={handleStart}
-            handler={
+          onMove={handleMove}
-              <Paper style={{ cursor: "move" }} elevation={3}>
+          handler={
-                <Stack
+            <Paper style={{ cursor: "move" }} elevation={3}>
-                  direction="row"
+              <Stack
-                  justifyContent="space-between"
+                direction="row"
-                  alignItems="center"
+                justifyContent="space-between"
-                  spacing={2}
+                alignItems="center"
-                >
+                spacing={2}
-                  <Box style={{ marginLeft: 16 }}>
-                    {process.env.REACT_APP_NAME}
-                  </Box>
-                  <IconButton
-                    onClick={() => {
-                      setShowPopup(false);
-                    }}
-                  >
-                    <CloseIcon />
-                  </IconButton>
-                </Stack>
-              </Paper>
-            }
-          >
-            <Paper>
-              <Popup />
-            </Paper>
-          </Draggable>
-        ) : (
-          <Draggable
-            key="fab"
-            {...fabProps}
-            onStart={handleStart}
-            onMove={handleMove}
-            handler={
-              <Fab
-                color="primary"
-                onClick={(e) => {
-                  if (!moved) {
-                    setShowPopup((pre) => !pre);
-                  }
-                }}
               >
-                <TranslateIcon />
+                <Box style={{ marginLeft: 16 }}>
-              </Fab>
+                  {process.env.REACT_APP_NAME}
-            }
+                </Box>
-          />
+                <IconButton
-        )}
+                  onClick={() => {
+                    setShowPopup(false);
+                  }}
+                >
+                  <CloseIcon />
+                </IconButton>
+              </Stack>
+            </Paper>
+          }
+        >
+          <Paper>
+            <Popup />
+          </Paper>
+        </Draggable>
+        <Draggable
+          key="fab"
+          name="fab"
+          {...fabProps}
+          show={!showPopup}
+          onStart={handleStart}
+          onMove={handleMove}
+          handler={
+            <Fab
+              color="primary"
+              onClick={(e) => {
+                if (!moved) {
+                  setShowPopup((pre) => !pre);
+                }
+              }}
+            >
+              <TranslateIcon />
+            </Fab>
+          }
+        />
       </ThemeProvider>
     </StoragesProvider>
   );