✨ completed share logic

💄 add modal confirm
Kreedzt · Dec 6, 2023 · cf54fc1 · cf54fc1
1 parent afb3af8
commit cf54fc1
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 21 deletions.
diff --git a/src/components/hotkey/HotkeyConfigItem.tsx b/src/components/hotkey/HotkeyConfigItem.tsx
@@ -8,20 +8,25 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import ToggleOnIcon from '@mui/icons-material/ToggleOn';
 import ToggleOffIcon from '@mui/icons-material/ToggleOff';
+import ShareIcon from '@mui/icons-material/Share';
 import { IHotkeyProfileItem } from '../../share/types';
 
+type TEventCallback = (id: string) => void;
+
 type HotkeyListItemProps = {
   data: IHotkeyProfileItem;
-  onActive: (id: string) => void;
-  onEdit: (id: string) => void;
-  onDelete: (id: string) => void;
+  onActive: TEventCallback;
+  onEdit: TEventCallback;
+  onDelete: TEventCallback;
+  onShare: TEventCallback;
 };
 
 const HotkeyConfigItem: FC<HotkeyListItemProps> = ({
   data,
   onActive,
   onEdit,
   onDelete,
+  onShare,
 }) => {
   return (
     <ListItem
@@ -39,7 +44,17 @@ const HotkeyConfigItem: FC<HotkeyListItemProps> = ({
               onClick={() => onActive(data.id)}
             >
               <ToggleOffIcon />
-            {/* <ToggleOnIcon /> */}
+              {/* <ToggleOnIcon /> */}
+            </IconButton>
+          </Tooltip>
+
+          <Tooltip title="分享">
+            <IconButton
+              edge="end"
+              aria-label="share"
+              onClick={() => onShare(data.id)}
+            >
+              <ShareIcon />
             </IconButton>
           </Tooltip>
 

diff --git a/src/components/hotkey/HotkeyConfigList.tsx b/src/components/hotkey/HotkeyConfigList.tsx
@@ -3,18 +3,22 @@ import List from '@mui/material/List';
 import { IHotkeyProfileItem } from '../../share/types';
 import HotkeyConfigItem from './HotkeyConfigItem';
 
+type TEventCallback = (id: string) => void;
+
 type HotkeyListProps = {
   data: IHotkeyProfileItem[];
-  onActive: (id: string) => void;
-  onEdit: (id: string) => void;
-  onDelete: (id: string) => void;
+  onActive: TEventCallback;
+  onEdit: TEventCallback;
+  onDelete: TEventCallback;
+  onShare: TEventCallback;
 };
 
 const HotkeyConfigList: FC<HotkeyListProps> = ({
   data,
   onActive,
   onEdit,
   onDelete,
+  onShare,
 }) => {
   return (
     <List dense={true}>
@@ -26,6 +30,7 @@ const HotkeyConfigList: FC<HotkeyListProps> = ({
             onActive={onActive}
             onEdit={onEdit}
             onDelete={onDelete}
+            onShare={onShare}
           />
         );
       })}

diff --git a/src/pages/dashboard/HotkeyList.tsx b/src/pages/dashboard/HotkeyList.tsx
@@ -1,13 +1,20 @@
 import React, { FC, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import HotkeyConfigCard from '../../components/hotkey/HotkeyConfigCard';
+import Stack from '@mui/material/Stack';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
-import { createProfile, deleteProfile, getProfile, hotKeyConfig } from '../../store/config';
+import {
+  createProfile,
+  deleteProfile,
+  getProfile,
+  hotKeyConfig,
+} from '../../store/config';
 import HotkeyConfigList from '../../components/hotkey/HotkeyConfigList';
 import { StoreServiceInst } from '../../services/store';
 import { MessageServiceInst } from '../../services/message';
 import { ShareServiceInst } from '../../services/share';
+import { showGlobalDialog } from '../../store/dialog';
 
 const HotkeyList: FC = () => {
   const navigate = useNavigate();
@@ -19,8 +26,17 @@ const HotkeyList: FC = () => {
     if (!profile) {
       return;
     }
-    await StoreServiceInst.writeConfig2Game(profile);
-    MessageServiceInst.success('写入成功!');
+
+    showGlobalDialog({
+      title: '应用热键集配置',
+      content: `确定应用${profile.title}配置到游戏配置吗? 该操作不可逆`,
+      confirmText: '确认',
+      cancelText: '取消',
+      onConfirm: async () => {
+        await StoreServiceInst.writeConfig2Game(profile);
+        MessageServiceInst.success('写入成功!');
+      },
+    });
   }, []);
 
   const onEdit = useCallback(
@@ -32,7 +48,20 @@ const HotkeyList: FC = () => {
 
   const onDelete = useCallback(async (id: string) => {
     console.log('onDelete', id);
-    await deleteProfile(id);
+    const profile = getProfile(id);
+    if (!profile) {
+      return;
+    }
+    showGlobalDialog({
+      title: '删除热键集',
+      content: `确定删除${profile.title}吗? 删除的热键集无法找回`,
+      confirmText: '删除',
+      cancelText: '取消',
+      onConfirm: async () => {
+        await deleteProfile(id);
+        MessageServiceInst.success('删除成功!');
+      },
+    });
   }, []);
 
   const onShare = useCallback(async (id: string) => {
@@ -60,18 +89,23 @@ const HotkeyList: FC = () => {
 
   return (
     <div>
-      <Grid item xs={12}>
+      <Stack direction="row" spacing={2}>
         <Link to="/dashboard/add">
           <Button>添加热键集</Button>
         </Link>
-      </Grid>
+
+        <Button onClick={onReadShare} color="secondary">
+          从剪贴板读取
+        </Button>
+      </Stack>
       <Grid container>
         <Grid item xs={12}>
           <HotkeyConfigList
             data={list}
             onActive={onActive}
             onEdit={onEdit}
             onDelete={onDelete}
+            onShare={onShare}
           />
         </Grid>
       </Grid>

diff --git a/src/pages/root/GlobalDialog.tsx b/src/pages/root/GlobalDialog.tsx
@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import {
+  globalDialogConfig,
+  globalDialogVisible,
+  hideGlobalDialog,
+} from '../../store/dialog';
+import { batch } from '@preact/signals-react';
+
+type GlobalDialogProps = {};
+
+const GlobalDialog: FC<GlobalDialogProps> = () => {
+  return (
+    <Dialog open={globalDialogVisible.value}>
+      <DialogTitle>{globalDialogConfig.value.title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          {globalDialogConfig.value.content}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            batch(() => {
+              globalDialogConfig.value.onCancel?.();
+              hideGlobalDialog();
+            });
+          }}
+        >
+          {globalDialogConfig.value.cancelText}
+        </Button>
+        <Button
+          onClick={() => {
+            batch(() => {
+              globalDialogConfig.value.onConfirm?.();
+              hideGlobalDialog();
+            });
+          }}
+        >
+          {globalDialogConfig.value.confirmText}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default GlobalDialog;
diff --git a/src/pages/root/GlobalSnackbar.tsx b/src/pages/root/GlobalSnackbar.tsx
@@ -32,7 +32,7 @@ const GlobalSnackbar: FC<GlobalSnackbarProps> = () => {
         autoHideDuration={3000}
         onClose={onClose}
       >
-        <Alert onClose={onClose} security={globalMessage.value.type}>
+        <Alert onClose={onClose} severity={globalMessage.value.type}>
           {globalMessage.value.title}
         </Alert>
       </Snackbar>

diff --git a/src/pages/root/Root.tsx b/src/pages/root/Root.tsx
@@ -6,6 +6,7 @@ import ListItemText from '@mui/material/ListItemText';
 import { initConfig } from '../../store/config';
 import { routes } from '../../routes';
 import GlobalSnackbar from './GlobalSnackbar';
+import GlobalDialog from './GlobalDialog';
 
 type RootProps = {
   //
@@ -30,6 +31,7 @@ const Root: FC<RootProps> = () => {
         </MenuList>
       </div>
       <GlobalSnackbar />
+      <GlobalDialog />
       <div className="flex-1 h-screen p-2 overflow-y-auto">
         <Outlet />
       </div>

diff --git a/src/store/config.ts b/src/store/config.ts
@@ -25,7 +25,10 @@ export const createProfile = async (profile: IHotkeyProfileItem) => {
     id: nanoid(),
   };
 
-  hotKeyConfig.value.hotkeys = [...hotKeyConfig.value.hotkeys, newProfile];
+  hotKeyConfig.value = {
+    ...hotKeyConfig.value,
+    hotkeys: [...hotKeyConfig.value.hotkeys, newProfile],
+  };
 
   await saveProfile();
 };

diff --git a/src/store/dialog.ts b/src/store/dialog.ts
@@ -0,0 +1,38 @@
+import { batch, signal } from '@preact/signals-react';
+
+export const globalDialogVisible = signal(false);
+
+export const globalDialogConfig = signal<{
+  title: string;
+  content: string;
+  confirmText: string;
+  cancelText: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+}>({
+  title: '',
+  content: '',
+  confirmText: '确认',
+  cancelText: '取消',
+});
+
+export const showGlobalDialog = (params: {
+  title: string;
+  content: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+}) => {
+  batch(() => {
+    globalDialogVisible.value = true;
+    globalDialogConfig.value = {
+      ...globalDialogConfig.value,
+      ...params,
+    };
+  });
+};
+
+export const hideGlobalDialog = () => {
+  globalDialogVisible.value = false;
+};
diff --git a/src/store/message.ts b/src/store/message.ts
@@ -1,4 +1,4 @@
-import { signal } from '@preact/signals-react';
+import { batch, signal } from '@preact/signals-react';
 
 export const globalMessageVisible = signal<boolean>(false);
 
@@ -14,12 +14,14 @@ export const showGlobalMessage = (params: {
   title: string;
   type: 'success' | 'error' | 'warning' | 'info';
 }) => {
-  globalMessage.value = {
-    title: params.title,
-    type: params.type,
-  };
+  batch(() => {
+    globalMessage.value = {
+      title: params.title,
+      type: params.type,
+    };
 
-  globalMessageVisible.value = true;
+    globalMessageVisible.value = true;
+  });
 };
 
 export const hideGlobalMessage = () => {