feat: add clearone feature

flytam · Apr 30, 2023 · 7b7552e · 7b7552e
1 parent 640b1bc
commit 7b7552e
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 14 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -118,10 +118,39 @@ function App() {
         }}
       >
         <Clear
+          type="one"
           onClick={async () => {
-            await confirmDialog();
+            const ts = clipBoardList[activeIndexList[0]].timestamp;
+            if (ts) {
+              await confirmDialog({
+                title: "确认删除当前选中记录",
+                description: "清除后无法恢复，请确认是否继续",
+              });
+              clearOne(ts);
+            }
+          }}
+          sx={{
+            position: "fixed",
+            zIndex: 100,
+            right: "80px",
+            bottom: "20px",
+          }}
+        />
+        <Clear
+          type="all"
+          onClick={async () => {
+            await confirmDialog({
+              title: "确认清除剪切板记录",
+              description: "清除后无法恢复，请确认是否继续",
+            });
             clearAll();
           }}
+          sx={{
+            position: "fixed",
+            zIndex: 100,
+            right: "20px",
+            bottom: "20px",
+          }}
         />
 
         <FilterTab

diff --git a/src/components/Clear.tsx b/src/components/Clear.tsx
@@ -1,24 +1,26 @@
-import { colors, IconButton, Tooltip } from "@mui/material";
+import { colors, IconButton, SxProps, Theme, Tooltip } from "@mui/material";
 import { FC } from "react";
-import { ClearAll } from "@mui/icons-material";
+import { ClearAll, Clear as ClearIcon } from "@mui/icons-material";
 
 export const Clear: FC<{
   onClick: () => void;
-}> = ({ onClick }) => {
+  sx?: SxProps<Theme>;
+  type: "all" | "one";
+}> = ({ onClick, sx = {}, type }) => {
   return (
-    <Tooltip title="清空所有记录">
+    <Tooltip
+      title={type === "all" ? "清空所有记录" : "删除当前选中记录"}
+      placement="left-start"
+    >
       <IconButton
         component="label"
         onClick={onClick}
         sx={{
-          position: "fixed",
-          zIndex: 100,
-          right: "20px",
-          bottom: "20px",
           background: colors.grey[300],
+          ...sx,
         }}
       >
-        <ClearAll />
+        {type === "all" ? <ClearAll /> : <ClearIcon />}
       </IconButton>
     </Tooltip>
   );

diff --git a/src/utils/confirm.tsx b/src/utils/confirm.tsx
@@ -10,7 +10,12 @@ import { useBoolean } from "ahooks";
 import { useEffect } from "react";
 import ReactDOM from "react-dom/client";
 
-export const confirmDialog = () => {
+interface Options {
+  title: string;
+  description?: string;
+}
+
+export const confirmDialog = (options: Options) => {
   return new Promise<void>((resolve, reject) => {
     const Ele = () => {
       const [open, { setTrue, setFalse }] = useBoolean(false);
@@ -30,6 +35,7 @@ export const confirmDialog = () => {
         setFalse();
         resolve();
       };
+      const { title, description } = options;
 
       return (
         <Dialog
@@ -38,15 +44,15 @@ export const confirmDialog = () => {
           aria-labelledby="alert-dialog-title"
           aria-describedby="alert-dialog-description"
         >
-          <DialogTitle id="alert-dialog-title">确认清除剪切板记录</DialogTitle>
+          <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
           <DialogContent>
             <DialogContentText id="alert-dialog-description">
-              清除后无法恢复，请确认是否继续
+              {description}
             </DialogContentText>
           </DialogContent>
           <DialogActions>
             <Button onClick={handleClose}>取消</Button>
-            <Button onClick={handleOK} autoFocus>
+            <Button onClick={handleOK} color="warning" autoFocus>
               确定
             </Button>
           </DialogActions>