86 lines
2.0 KiB
TypeScript
86 lines
2.0 KiB
TypeScript
import React, { ReactNode, useState } from "react";
|
|
import {
|
|
Box,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemText,
|
|
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 | Promise<any>;
|
|
}
|
|
|
|
export const SettingItem: React.FC<ItemProps> = (props) => {
|
|
const { label, extra, children, secondary, onClick } = props;
|
|
const clickable = !!onClick;
|
|
|
|
const primary = (
|
|
<Box sx={{ display: "flex", alignItems: "center", fontSize: "14px" }}>
|
|
<span>{label}</span>
|
|
{extra ? extra : null}
|
|
</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={handleClick} disabled={isLoading}>
|
|
<ListItemText primary={primary} secondary={secondary} />
|
|
{isLoading ? (
|
|
<CircularProgress color="inherit" size={20} />
|
|
) : (
|
|
<ChevronRightRounded />
|
|
)}
|
|
</ListItemButton>
|
|
</ListItem>
|
|
) : (
|
|
<ListItem sx={{ pt: "5px", pb: "5px" }}>
|
|
<ListItemText primary={primary} secondary={secondary} />
|
|
{children}
|
|
</ListItem>
|
|
);
|
|
};
|
|
|
|
export const SettingList: React.FC<{
|
|
title: string;
|
|
children: ReactNode;
|
|
}> = (props) => (
|
|
<List>
|
|
<ListSubheader
|
|
sx={[
|
|
{ background: "transparent", fontSize: "16px", fontWeight: "700" },
|
|
({ palette }) => {
|
|
return {
|
|
color: palette.text.primary,
|
|
};
|
|
},
|
|
]}
|
|
disableSticky
|
|
>
|
|
{props.title}
|
|
</ListSubheader>
|
|
|
|
{props.children}
|
|
</List>
|
|
);
|