аккордеон - на ревью

This commit is contained in:
Nikolai 2022-09-27 23:42:56 +03:00
parent b11bfddbd7
commit fa15d37dd9
2 changed files with 143 additions and 55 deletions

@ -8,6 +8,11 @@ import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow"; import TableRow from "@mui/material/TableRow";
import Radio from "@mui/material/Radio"; import Radio from "@mui/material/Radio";
import Skeleton from "@mui/material/Skeleton"; import Skeleton from "@mui/material/Skeleton";
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ClearIcon from '@mui/icons-material/Clear';
import { getRoles_mock, TMockData } from "../../../../api/roles"; import { getRoles_mock, TMockData } from "../../../../api/roles";
import theme from "../../../../theme" import theme from "../../../../theme"
@ -29,6 +34,28 @@ const Users: React.FC = () => {
}) })
}; };
const [accordionHeader, setAccordionHeader] = React.useState<string>("none");
const [accordionState, setAccordionState] = React.useState<boolean>(true);
const [accordionText, setAccordionText] = React.useState<string>("");
const handleChangeAccordion = (text:string) => {
if( text == "" ) {
setAccordionState( true );
setAccordionHeader("none");
}
else {
handleToggleAccordion();
setAccordionHeader("flex")
}
accordionState
? setAccordionText( text )
: setAccordionText( "" )
}
const handleToggleAccordion = () => {
setAccordionState( !accordionState );
}
handleChangeData(); handleChangeData();
return ( return (
@ -43,6 +70,7 @@ const Users: React.FC = () => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
marginBottom: "35px",
border: "2px solid", border: "2px solid",
fontWeight: "normal", fontWeight: "normal",
borderColor: theme.palette.golden.main, borderColor: theme.palette.golden.main,
@ -54,61 +82,98 @@ const Users: React.FC = () => {
ИНФОРМАЦИЯ О ПРОЕКТЕ ИНФОРМАЦИЯ О ПРОЕКТЕ
</Button> </Button>
{
data.length <Accordion sx={{
? ( width: "90%",
<Table sx={{ backgroundColor: theme.palette.content.main
width: "90%", }} expanded={ accordionState }>
border: "2px solid", <AccordionSummary
borderColor: theme.palette.secondary.main, sx = {{ display: accordionHeader }}
marginTop: "35px", expandIcon={
}} aria-label="simple table"> <ExpandMoreIcon sx={{
<TableHead> color: theme.palette.secondary.main
<TableRow sx={{ }}
borderBottom: "2px solid", onClick={ () => handleToggleAccordion() }
borderColor: theme.palette.grayLight.main, />
height: "100px" }
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography sx={{
width: "100%",
color: theme.palette.secondary.main
}}>
{ accordionText }
</Typography>
<Box sx={{
display: "flex",
alignItems: "right"
}}>
<ClearIcon
sx={{ color: theme.palette.secondary.main }}
onClick={ () => handleChangeAccordion("") }
/>
</Box>
</AccordionSummary>
<AccordionDetails>
<Table sx={{
width: "100%",
border: "2px solid",
borderColor: theme.palette.secondary.main,
}} aria-label="simple table">
<TableHead>
<TableRow sx={{
borderBottom: "2px solid",
borderColor: theme.palette.grayLight.main,
height: "100px"
}}>
<TableCell>
<Typography
variant="h4"
sx={{
color: theme.palette.secondary.main,
}}> }}>
<TableCell> Имя
<Typography </Typography>
variant="h4" </TableCell>
sx={{ <TableCell>
color: theme.palette.secondary.main, <Typography
}}> variant="h4"
Имя sx={{
</Typography> color: theme.palette.secondary.main,
</TableCell> }}>
<TableCell> Описание
<Typography </Typography>
variant="h4" </TableCell>
sx={{ <TableCell>
color: theme.palette.secondary.main, <Typography
}}> variant="h4"
Описание sx={{
</Typography> color: theme.palette.secondary.main,
</TableCell> }}>
<TableCell> Отобразить
<Typography </Typography>
variant="h4" </TableCell>
sx={{ </TableRow>
color: theme.palette.secondary.main, </TableHead>
}}>
Отобразить
</Typography>
</TableCell>
</TableRow>
</TableHead>
<TableBody> <TableBody>
{ {
data.length
? (
data.map(function(item, i) { data.map(function(item, i) {
return( return(
<TableRow sx={{ <TableRow sx={{
borderTop: "2px solid", borderTop: "2px solid",
borderColor: theme.palette.grayLight.main, borderColor: theme.palette.grayLight.main,
height: "100px" height: "100px",
}}> cursor: "pointer"
}}
key={ item.key }
onClick={ () => handleChangeAccordion( item.desc ) }>
<TableCell> <TableCell>
<Typography sx={{ <Typography sx={{
color: theme.palette.secondary.main color: theme.palette.secondary.main
@ -137,14 +202,34 @@ const Users: React.FC = () => {
</TableRow> </TableRow>
); );
}) })
}
) : (
</TableBody> <TableRow sx={{
</Table> borderTop: "2px solid",
) : ( borderColor: theme.palette.grayLight.main,
<Skeleton variant="circular" width={410} height={200} /> height: "100px"
) }}>
} <TableCell colSpan={3}>
<Skeleton variant="rectangular"
sx={{
width: "100%",
minWidth: "100%",
minHeight: "200px",
marginTop: "15px",
marginBottom: "15px"
}}
/>
</TableCell>
</TableRow>
)
}
</TableBody>
</Table>
</AccordionDetails>
</Accordion>
<Box sx={{ <Box sx={{
width: "90%", width: "90%",

@ -1,15 +1,18 @@
const MOCK_DATA_USERS = [ const MOCK_DATA_USERS = [
{ {
key: 0,
id: "someid1", id: "someid1",
name: "admin", name: "admin",
desc:"Администратор сервиса" desc:"Администратор сервиса"
}, },
{ {
key: 1,
id: "someid2", id: "someid2",
name: "manager", name: "manager",
desc:"Менеджер сервиса" desc:"Менеджер сервиса"
}, },
{ {
key: 2,
id: "someid3", id: "someid3",
name: "user", name: "user",
desc:"Пользователь сервиса" desc:"Пользователь сервиса"