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

src/Components/LoggedIn/Content/Users/index.tsx

@@ -8,6 +8,11 @@ import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
 import Radio from "@mui/material/Radio";
 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 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();
 
   return (
@@ -43,6 +70,7 @@ const Users: React.FC = () =>  {
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "center",
+            marginBottom: "35px",
             border: "2px solid",
             fontWeight: "normal",
             borderColor: theme.palette.golden.main,
@@ -54,61 +82,98 @@ const Users: React.FC = () =>  {
           ИНФОРМАЦИЯ О ПРОЕКТЕ
         </Button>
 
-      { 
-        data.length
-          ? ( 
-            <Table sx={{ 
-              width: "90%",
-              border: "2px solid",
-              borderColor: theme.palette.secondary.main,
-              marginTop: "35px",
-            }} aria-label="simple table">
-              <TableHead>
-                <TableRow sx={{
-                  borderBottom: "2px solid",
-                  borderColor: theme.palette.grayLight.main,
-                  height: "100px"
+      
+        <Accordion sx={{
+          width: "90%",
+          backgroundColor: theme.palette.content.main
+        }} expanded={ accordionState }>
+          <AccordionSummary
+            sx = {{ display: accordionHeader }}
+            expandIcon={
+              <ExpandMoreIcon sx={{
+                color: theme.palette.secondary.main
+              }} 
+              onClick={ () => handleToggleAccordion() }
+              />
+            }
+            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 
-                      variant="h4" 
-                      sx={{
-                      color: theme.palette.secondary.main,
-                    }}>
-                      Имя
-                    </Typography>
-                  </TableCell>
-                  <TableCell>
-                    <Typography 
-                      variant="h4" 
-                      sx={{
-                      color: theme.palette.secondary.main,
-                    }}>
-                      Описание
-                    </Typography>
-                  </TableCell>
-                  <TableCell>
-                    <Typography 
-                      variant="h4" 
-                      sx={{
-                      color: theme.palette.secondary.main,
-                    }}>
-                      Отобразить
-                    </Typography>
-                  </TableCell>
-                </TableRow>
-              </TableHead>
+                  Имя
+                </Typography>
+              </TableCell>
+              <TableCell>
+                <Typography 
+                  variant="h4" 
+                  sx={{
+                  color: theme.palette.secondary.main,
+                }}>
+                  Описание
+                </Typography>
+              </TableCell>
+              <TableCell>
+                <Typography 
+                  variant="h4" 
+                  sx={{
+                  color: theme.palette.secondary.main,
+                }}>
+                  Отобразить
+                </Typography>
+              </TableCell>
+            </TableRow>
+          </TableHead>
 
-              <TableBody>
+          <TableBody>
 
-              { 
+          { 
+          data.length
+            ? ( 
                 data.map(function(item, i)  {
                   return(
                     <TableRow sx={{
                       borderTop: "2px solid",
                       borderColor: theme.palette.grayLight.main,
-                      height: "100px"
-                    }}>
+                      height: "100px",
+                      cursor: "pointer"
+                    }} 
+                    key={ item.key } 
+                    onClick={ () => handleChangeAccordion( item.desc ) }>
                       <TableCell>
                         <Typography sx={{
                           color: theme.palette.secondary.main
@@ -137,14 +202,34 @@ const Users: React.FC = () =>  {
                     </TableRow>
                   );
                 })
-              }
-      
-              </TableBody>
-            </Table>
-          ) : ( 
-            <Skeleton variant="circular" width={410} height={200} />
-           )
-      }
+
+              ) : ( 
+                <TableRow sx={{
+                  borderTop: "2px solid",
+                  borderColor: theme.palette.grayLight.main,
+                  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={{
         width: "90%",

src/api/roles.ts

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