аккордеон - на ревью
This commit is contained in:
parent
b11bfddbd7
commit
fa15d37dd9
@ -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:"Пользователь сервиса"
|
||||||
|
Loading…
Reference in New Issue
Block a user