feat: add show more & confirm delete

flytam · Mar 31, 2023 · 221a855 · 221a855
1 parent 3745cfb
commit 221a855
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React + TS</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <div id="dialog"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,6 +8,7 @@ import { useKeyPress } from "ahooks";
 import { useThemeProvider } from "./hooks/useThemeProvider";
 import { Clear } from "./components/Clear";
 import { isInViewport } from "observe-element-in-viewport";
+import { confirmDialog } from "./utils/confirm";
 
 function App() {
   const [clipBoardType, setClipBoard] = useState<{
@@ -99,7 +100,12 @@ function App() {
           flexDirection: "column",
         }}
       >
-        <Clear onClick={clearAll} />
+        <Clear
+          onClick={async () => {
+            await confirmDialog();
+            clearAll();
+          }}
+        />
 
         <FilterTab
           value={clipBoardType.type}

diff --git a/src/components/ClipBoardItemContent.tsx b/src/components/ClipBoardItemContent.tsx
@@ -1,14 +1,40 @@
-import { Box, colors, ListItemText, Typography } from "@mui/material";
-import { FC } from "react";
+import {
+  Box,
+  Button,
+  colors,
+  Drawer,
+  ListItemText,
+  Typography,
+} from "@mui/material";
+import { FC, useEffect, useRef } from "react";
 import { ClipBoardData } from "../hooks/useClipboardData";
 import { ClipBoardDataType } from "../utils/clipboard";
 
 import { PhotoProvider, PhotoView } from "react-photo-view";
 import "react-photo-view/dist/react-photo-view.css";
+import { useBoolean, useMutationObserver } from "ahooks";
 
 export const ClipBoardItemContent: FC<{
   item: ClipBoardData;
 }> = ({ item }) => {
+  const [showMore, { toggle: toggleShowMore }] = useBoolean(false);
+
+  const [
+    showMoreButton,
+    { setTrue: setShowMoreButtonShow, setFalse: setHideMoreButtonShow },
+  ] = useBoolean(false);
+
+  const ref = useRef<HTMLDivElement>();
+
+  useEffect(() => {
+    console.log("hhhhh", ref.current?.offsetHeight, ref.current?.scrollHeight);
+    if (ref.current && ref.current.offsetHeight < ref.current.scrollHeight) {
+      setShowMoreButtonShow();
+    } else {
+      setHideMoreButtonShow();
+    }
+  }, [item.type === ClipBoardDataType.text ? item.data : null, ref.current]);
+
   if (item.type === ClipBoardDataType.image) {
     return (
       <Box
@@ -46,20 +72,51 @@ export const ClipBoardItemContent: FC<{
   }
 
   return (
-    <ListItemText
+    <Box
       sx={{
-        padding: 0,
-        maxHeight: "200px",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        display: "-webkit-box",
-        WebkitLineClamp: 3,
-        WebkitBoxOrient: "vertical",
-        width: "200px",
+        width: "100%",
       }}
-      inset
-      disableTypography
-      primary={item.data}
-    />
+    >
+      <ListItemText
+        ref={ref}
+        sx={{
+          width: "100%",
+          padding: 0,
+          maxHeight: "200px",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          display: "-webkit-box",
+          WebkitLineClamp: 3,
+          WebkitBoxOrient: "vertical",
+        }}
+        inset
+        disableTypography
+        primary={item.data}
+      />
+      {showMoreButton ? (
+        <>
+          <Button
+            onClick={(e) => {
+              toggleShowMore();
+              e.stopPropagation();
+              e.preventDefault();
+            }}
+            variant="text"
+          >
+            更多
+          </Button>
+          <Drawer anchor={"right"} open={showMore} onClose={toggleShowMore}>
+            <Box
+              sx={{
+                width: "500px",
+                padding: "16px",
+              }}
+            >
+              {item.data}
+            </Box>
+          </Drawer>
+        </>
+      ) : null}
+    </Box>
   );
 };
diff --git a/src/components/ClipBoardList.tsx b/src/components/ClipBoardList.tsx
@@ -6,14 +6,7 @@ import {
   colors,
 } from "@mui/material";
 import { useDocumentVisibility } from "ahooks";
-import {
-  FC,
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from "react";
+import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
 import { ClipBoardData } from "../hooks/useClipboardData";
 import { ClipBoardRawData } from "../utils/clipboard";
 import { timeAgo } from "../utils/format";

diff --git a/src/utils/confirm.tsx b/src/utils/confirm.tsx
@@ -0,0 +1,63 @@
+import {
+  Dialog,
+  DialogTitle,
+  Button,
+  DialogActions,
+  DialogContentText,
+  DialogContent,
+} from "@mui/material";
+import { useBoolean } from "ahooks";
+import { useEffect } from "react";
+import ReactDOM from "react-dom/client";
+
+export const confirmDialog = () => {
+  return new Promise<void>((resolve, reject) => {
+    const Ele = () => {
+      const [open, { setTrue, setFalse }] = useBoolean(false);
+      useEffect(() => {
+        setTrue();
+      }, []);
+
+      const handleClose = () => {
+        setFalse();
+        setTimeout(() => {
+          root.unmount();
+        }, 200);
+        reject();
+      };
+
+      const handleOK = () => {
+        setFalse();
+        resolve();
+      };
+
+      return (
+        <Dialog
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogTitle id="alert-dialog-title">确认清除剪切板记录</DialogTitle>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+              清除后无法恢复，请确认是否继续
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose}>取消</Button>
+            <Button onClick={handleOK} autoFocus>
+              确定
+            </Button>
+          </DialogActions>
+        </Dialog>
+      );
+    };
+
+    const root = ReactDOM.createRoot(
+      document.getElementById("dialog") as HTMLElement
+    );
+
+    root.render(<Ele />);
+  });
+};