diff --git a/index.html b/index.html index e0d1c84..26a80d3 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,17 @@ - - - - - Vite + React + TS - - -
- - - + + + + + + Vite + React + TS + + + +
+
+ + + + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 637ea94..c78546a 100644 --- 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", }} > - + { + await confirmDialog(); + clearAll(); + }} + /> = ({ item }) => { + const [showMore, { toggle: toggleShowMore }] = useBoolean(false); + + const [ + showMoreButton, + { setTrue: setShowMoreButtonShow, setFalse: setHideMoreButtonShow }, + ] = useBoolean(false); + + const ref = useRef(); + + 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 ( + > + + {showMoreButton ? ( + <> + + + + {item.data} + + + + ) : null} + ); }; diff --git a/src/components/ClipBoardList.tsx b/src/components/ClipBoardList.tsx index aaff6fc..b2685ab 100644 --- 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 new file mode 100644 index 0000000..bf2cf70 --- /dev/null +++ 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((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 ( + + 确认清除剪切板记录 + + + 清除后无法恢复，请确认是否继续 + + + + + + + + ); + }; + + const root = ReactDOM.createRoot( + document.getElementById("dialog") as HTMLElement + ); + + root.render(); + }); +};