root/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2026-01-29 08:45:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(settings page): add loading state (#1157)

Browse Source 
* feat(settings page): add loading state

* fix: type
This commit is contained in:
Eric Huang
2024-06-09 06:26:07 +08:00
committed by GitHub
parent ca323371a7
commit 2913b911e3
4 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/setting/mods/setting-comp.tsx
View File

@@ -1,4 +1,4 @@
import React, { ReactNode } from "react";
import React, { ReactNode, useState } from "react";
import {
Box,
List,
@@ -8,13 +8,15 @@ import {
ListSubheader,
} from "@mui/material";
import { ChevronRightRounded } from "@mui/icons-material";
import CircularProgress from "@mui/material/CircularProgress";
import isAsyncFunction from "@/utils/is-async-function";
interface ItemProps {
label: ReactNode;
extra?: ReactNode;
children?: ReactNode;
secondary?: ReactNode;
onClick?: () => void;
onClick?: () => void | Promise<any>;
}
export const SettingItem: React.FC<ItemProps> = (props) => {
@@ -28,11 +30,27 @@ export const SettingItem: React.FC<ItemProps> = (props) => {
</Box>
);
const [isLoading, setIsLoading] = useState(false);
const handleClick = () => {
if (onClick) {
if (isAsyncFunction(onClick)) {
setIsLoading(true);
onClick()!.finally(() => setIsLoading(false));
} else {
onClick();
}
}
};
return clickable ? (
<ListItem disablePadding>
<ListItemButton onClick={onClick}>
<ListItemButton onClick={handleClick} disabled={isLoading}>
<ListItemText primary={primary} secondary={secondary} />
<ChevronRightRounded />
{isLoading ? (
<CircularProgress color="inherit" size={20} />
) : (
<ChevronRightRounded />
)}
</ListItemButton>
</ListItem>
) : (