@universal-tennis/ui-shared 0.1.56 → 0.1.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/stories/molecules/Cards/TeamDrawCard.js +5 -3
- package/dist/stories/molecules/Cards/TeamDrawCard.js.map +1 -1
- package/dist/stories/organisms/Tables/TeamDrawCardTable.d.ts +1 -1
- package/dist/stories/organisms/Tables/TeamDrawCardTable.js +72 -41
- package/dist/stories/organisms/Tables/TeamDrawCardTable.js.map +1 -1
- package/dist/stories/utils/constants.d.ts +2 -0
- package/dist/stories/utils/constants.js +3 -0
- package/dist/stories/utils/constants.js.map +1 -0
- package/package.json +1 -1
- package/src/stories/molecules/Cards/TeamDrawCard.tsx +5 -3
- package/src/stories/organisms/Tables/TeamDrawCardTable.tsx +85 -62
- package/src/stories/utils/constants.ts +2 -0
|
@@ -13,6 +13,7 @@ import React from 'react';
|
|
|
13
13
|
import Box from '@mui/material/Box';
|
|
14
14
|
import { styled } from '@mui/material/styles';
|
|
15
15
|
import WinnerIndicatorIcon from 'stories/atoms/Icons/WinnerIndicatorIcon';
|
|
16
|
+
import { teamDrawCardSideMargin, teamDrawCardBottomMargin } from 'stories/utils/constants';
|
|
16
17
|
import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
|
|
17
18
|
import SquareAvatarWithName from '../SquareAvatarWithName/SquareAvatarWithName';
|
|
18
19
|
const StyledCard = styled(Box)({
|
|
@@ -24,9 +25,10 @@ const StyledCard = styled(Box)({
|
|
|
24
25
|
height: '100px',
|
|
25
26
|
backgroundColor: 'var(--white)',
|
|
26
27
|
border: '1px solid var(--cool-grey-600)',
|
|
27
|
-
marginLeft:
|
|
28
|
-
marginRight:
|
|
29
|
-
position: 'relative'
|
|
28
|
+
marginLeft: `${teamDrawCardSideMargin}`,
|
|
29
|
+
marginRight: `${teamDrawCardSideMargin}`,
|
|
30
|
+
position: 'relative',
|
|
31
|
+
marginBottom: `${teamDrawCardBottomMargin}`
|
|
30
32
|
});
|
|
31
33
|
const BottomGrid = styled(Box)({
|
|
32
34
|
display: 'flex',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TeamDrawCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/TeamDrawCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAC1E,OAAO,UAAU,EAAE,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACpG,OAAO,oBAAoB,MAAM,8CAA8C,CAAC;AAGhF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,OAAO;IACf,eAAe,EAAE,cAAc;IAC/B,MAAM,EAAE,gCAAgC;IACxC,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"TeamDrawCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/TeamDrawCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,54 +9,85 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React from
|
|
13
|
-
import Box from
|
|
14
|
-
import Button from
|
|
15
|
-
import { styled } from
|
|
16
|
-
import Grid from
|
|
17
|
-
import ArrowForwardIosOutlinedIcon from
|
|
18
|
-
import ArrowBackIosOutlinedIcon from
|
|
19
|
-
import
|
|
12
|
+
import React from "react";
|
|
13
|
+
import Box from "@mui/material/Box";
|
|
14
|
+
import Button from "@mui/material/Button";
|
|
15
|
+
import { styled } from "@mui/material/styles";
|
|
16
|
+
import Grid from "@mui/material/Grid";
|
|
17
|
+
import ArrowForwardIosOutlinedIcon from "@mui/icons-material/ArrowForwardIosOutlined";
|
|
18
|
+
import ArrowBackIosOutlinedIcon from "@mui/icons-material/ArrowBackIosOutlined";
|
|
19
|
+
import { teamDrawCardSideMargin, teamDrawCardBottomMargin } from "stories/utils/constants";
|
|
20
|
+
import Typography from "../../atoms/Typography/Typography";
|
|
20
21
|
const StyledHeader = styled(Grid)({
|
|
21
|
-
alignItems:
|
|
22
|
-
justifyContent:
|
|
23
|
-
display:
|
|
22
|
+
alignItems: "center",
|
|
23
|
+
justifyContent: "center",
|
|
24
|
+
display: "flex"
|
|
24
25
|
});
|
|
25
26
|
const StyledGrid = styled(Grid)({
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
content: '"
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
position: "relative",
|
|
28
|
+
"&:nth-of-type(1)": {
|
|
29
|
+
"&:after": {
|
|
30
|
+
content: "''",
|
|
31
|
+
position: "absolute",
|
|
32
|
+
right: 0,
|
|
33
|
+
backgroundColor: "var(--cool-grey-600)",
|
|
34
|
+
height: "25%",
|
|
35
|
+
width: "1px",
|
|
36
|
+
top: `calc(12.5% - ${teamDrawCardBottomMargin}/2)`
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"&:nth-of-type(2)": {
|
|
40
|
+
"&:before": {
|
|
41
|
+
content: "''",
|
|
42
|
+
position: "absolute",
|
|
32
43
|
left: 0,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
44
|
+
backgroundColor: "var(--cool-grey-600)",
|
|
45
|
+
height: "25%",
|
|
46
|
+
width: "1px",
|
|
47
|
+
bottom: `calc(12.5% + ${teamDrawCardBottomMargin}/2)`
|
|
36
48
|
},
|
|
49
|
+
"&:after": {
|
|
50
|
+
content: "''",
|
|
51
|
+
position: "absolute",
|
|
52
|
+
right: 0,
|
|
53
|
+
backgroundColor: "var(--cool-grey-600)",
|
|
54
|
+
height: "50%",
|
|
55
|
+
width: "1px",
|
|
56
|
+
top: `calc(25% - ${teamDrawCardBottomMargin}/2)`
|
|
57
|
+
}
|
|
37
58
|
},
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
position:
|
|
59
|
+
"&:nth-last-child(-n+2) .team-draw-card": {
|
|
60
|
+
"&:before": {
|
|
61
|
+
position: "absolute",
|
|
41
62
|
content: '""',
|
|
42
|
-
width:
|
|
43
|
-
height:
|
|
44
|
-
|
|
45
|
-
top:
|
|
46
|
-
backgroundColor:
|
|
47
|
-
transform:
|
|
48
|
-
}
|
|
63
|
+
width: `${teamDrawCardSideMargin}`,
|
|
64
|
+
height: "1px",
|
|
65
|
+
left: 0,
|
|
66
|
+
top: "50%",
|
|
67
|
+
backgroundColor: "var(--cool-grey-600)",
|
|
68
|
+
transform: "translateX(-100%)"
|
|
69
|
+
}
|
|
49
70
|
},
|
|
71
|
+
"&:nth-of-type(-n+2) .team-draw-card": {
|
|
72
|
+
"&:after": {
|
|
73
|
+
position: "absolute",
|
|
74
|
+
content: '""',
|
|
75
|
+
width: `${teamDrawCardSideMargin}`,
|
|
76
|
+
height: "1px",
|
|
77
|
+
right: 0,
|
|
78
|
+
top: "50%",
|
|
79
|
+
backgroundColor: "var(--cool-grey-600)",
|
|
80
|
+
transform: "translateX(100%)"
|
|
81
|
+
}
|
|
82
|
+
}
|
|
50
83
|
});
|
|
51
84
|
const GridSections = styled(Box)({
|
|
52
|
-
display:
|
|
53
|
-
alignItems:
|
|
54
|
-
|
|
55
|
-
|
|
85
|
+
display: "flex",
|
|
86
|
+
alignItems: "center"
|
|
87
|
+
});
|
|
88
|
+
const TableMobileSection = styled(Grid)({
|
|
89
|
+
flexDirection: "column"
|
|
56
90
|
});
|
|
57
|
-
const TableMobileSection = styled(Grid) `
|
|
58
|
-
flex-direction: column;
|
|
59
|
-
`;
|
|
60
91
|
export default function TeamDrawCardTable(_a) {
|
|
61
92
|
var { headerRows, tableRows, isMobile } = _a, props = __rest(_a, ["headerRows", "tableRows", "isMobile"]);
|
|
62
93
|
const [activeStep, setActiveStep] = React.useState(0);
|
|
@@ -71,25 +102,25 @@ export default function TeamDrawCardTable(_a) {
|
|
|
71
102
|
const totalColumns = Math.floor(12 / headerRows.length);
|
|
72
103
|
const formatTableRows = tableRows.map((row, index) => {
|
|
73
104
|
if (index > 2)
|
|
74
|
-
return; // Table can only support 3 columns
|
|
105
|
+
return; // Table can only support 3 columns
|
|
75
106
|
const rowSectionsHeight = `${100 / tableRows[index].length}%`;
|
|
76
107
|
const sectionAmount = tableRows[index].length;
|
|
77
108
|
return (React.createElement(StyledGrid, { key: index, xs: totalColumns }, [...Array(sectionAmount)].map((section, idx) => (React.createElement(GridSections, { key: idx, sx: { height: rowSectionsHeight } }, row[idx])))));
|
|
78
109
|
});
|
|
79
110
|
const formatDesktopRows = (React.createElement(React.Fragment, null,
|
|
80
|
-
React.createElement(Grid, { container: true, sx: { height:
|
|
111
|
+
React.createElement(Grid, { container: true, sx: { height: "60px" } }, headerRows.map((row) => (React.createElement(StyledHeader, { key: row.name, xs: totalColumns },
|
|
81
112
|
React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, row.name))))),
|
|
82
113
|
React.createElement(Grid, { container: true }, formatTableRows)));
|
|
83
114
|
const formatMobileRows = (React.createElement(Box, null,
|
|
84
115
|
React.createElement(Grid, { container: true, justifyContent: "space-between" },
|
|
85
|
-
React.createElement(Button, { color: "inherit", disabled: activeStep === 0, onClick: handleBack, sx: { mr: 1, alignSelf:
|
|
116
|
+
React.createElement(Button, { color: "inherit", disabled: activeStep === 0, onClick: handleBack, sx: { mr: 1, alignSelf: "flex-start" } },
|
|
86
117
|
React.createElement(ArrowBackIosOutlinedIcon, null)),
|
|
87
118
|
React.createElement(StyledHeader, { xs: totalColumns },
|
|
88
119
|
React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, headerRows[activeStep].name)),
|
|
89
120
|
React.createElement(Button, { onClick: handleNext, disabled: activeStep === tableRows.length - 1 },
|
|
90
121
|
React.createElement(ArrowForwardIosOutlinedIcon, null))),
|
|
91
122
|
React.createElement(TableMobileSection, { container: true },
|
|
92
|
-
React.createElement(GridSections, { sx: { display:
|
|
123
|
+
React.createElement(GridSections, { sx: { display: "flex", flexDirection: "column", gap: "10px" } }, tableRows[activeStep]))));
|
|
93
124
|
return (React.createElement(Box, Object.assign({}, props, { sx: { flexGrow: 1 }, "aria-label": "draw table" }), isMobile ? formatMobileRows : formatDesktopRows));
|
|
94
125
|
}
|
|
95
126
|
//# sourceMappingURL=TeamDrawCardTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TeamDrawCardTable.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/TeamDrawCardTable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,2BAA2B,MAAM,6CAA6C,CAAC;AACtF,OAAO,wBAAwB,MAAM,0CAA0C,CAAC;AAChF,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAG3D,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC9B,
|
|
1
|
+
{"version":3,"file":"TeamDrawCardTable.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/TeamDrawCardTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/stories/utils/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC;AAC7C,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC"}
|
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import Box from '@mui/material/Box';
|
|
3
3
|
import { styled } from '@mui/material/styles';
|
|
4
4
|
import WinnerIndicatorIcon from 'stories/atoms/Icons/WinnerIndicatorIcon';
|
|
5
|
+
import { teamDrawCardSideMargin, teamDrawCardBottomMargin } from 'stories/utils/constants';
|
|
5
6
|
import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
|
|
6
7
|
import SquareAvatarWithName from '../SquareAvatarWithName/SquareAvatarWithName';
|
|
7
8
|
import { TeamDrawCardProps } from "./sharedTypes";
|
|
@@ -15,9 +16,10 @@ const StyledCard = styled(Box)({
|
|
|
15
16
|
height: '100px',
|
|
16
17
|
backgroundColor: 'var(--white)',
|
|
17
18
|
border: '1px solid var(--cool-grey-600)',
|
|
18
|
-
marginLeft:
|
|
19
|
-
marginRight:
|
|
20
|
-
position: 'relative'
|
|
19
|
+
marginLeft: `${teamDrawCardSideMargin}`,
|
|
20
|
+
marginRight: `${teamDrawCardSideMargin}`,
|
|
21
|
+
position: 'relative',
|
|
22
|
+
marginBottom: `${teamDrawCardBottomMargin}`
|
|
21
23
|
});
|
|
22
24
|
|
|
23
25
|
const BottomGrid = styled(Box)({
|
|
@@ -1,62 +1,90 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import Box from
|
|
3
|
-
import Button from
|
|
4
|
-
import { styled } from
|
|
5
|
-
import Grid from
|
|
6
|
-
import ArrowForwardIosOutlinedIcon from
|
|
7
|
-
import ArrowBackIosOutlinedIcon from
|
|
8
|
-
import
|
|
9
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Box from "@mui/material/Box";
|
|
3
|
+
import Button from "@mui/material/Button";
|
|
4
|
+
import { styled } from "@mui/material/styles";
|
|
5
|
+
import Grid from "@mui/material/Grid";
|
|
6
|
+
import ArrowForwardIosOutlinedIcon from "@mui/icons-material/ArrowForwardIosOutlined";
|
|
7
|
+
import ArrowBackIosOutlinedIcon from "@mui/icons-material/ArrowBackIosOutlined";
|
|
8
|
+
import { teamDrawCardSideMargin, teamDrawCardBottomMargin } from "stories/utils/constants";
|
|
9
|
+
import Typography from "../../atoms/Typography/Typography";
|
|
10
|
+
import { DrawCardTableProps } from "./sharedTypes";
|
|
10
11
|
|
|
11
12
|
const StyledHeader = styled(Grid)({
|
|
12
|
-
alignItems:
|
|
13
|
-
justifyContent:
|
|
14
|
-
display:
|
|
13
|
+
alignItems: "center",
|
|
14
|
+
justifyContent: "center",
|
|
15
|
+
display: "flex"
|
|
15
16
|
});
|
|
16
17
|
|
|
17
18
|
const StyledGrid = styled(Grid)({
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
content: '"
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
position: "relative",
|
|
20
|
+
"&:nth-of-type(1)": {
|
|
21
|
+
"&:after": {
|
|
22
|
+
content: "''",
|
|
23
|
+
position: "absolute",
|
|
24
|
+
right: 0,
|
|
25
|
+
backgroundColor: "var(--cool-grey-600)",
|
|
26
|
+
height: "25%",
|
|
27
|
+
width: "1px",
|
|
28
|
+
top: `calc(12.5% - ${teamDrawCardBottomMargin}/2)`
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
"&:nth-of-type(2)": {
|
|
32
|
+
"&:before": {
|
|
33
|
+
content: "''",
|
|
34
|
+
position: "absolute",
|
|
24
35
|
left: 0,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
36
|
+
backgroundColor: "var(--cool-grey-600)",
|
|
37
|
+
height: "25%",
|
|
38
|
+
width: "1px",
|
|
39
|
+
bottom: `calc(12.5% + ${teamDrawCardBottomMargin}/2)`
|
|
28
40
|
},
|
|
41
|
+
"&:after": {
|
|
42
|
+
content: "''",
|
|
43
|
+
position: "absolute",
|
|
44
|
+
right: 0,
|
|
45
|
+
backgroundColor: "var(--cool-grey-600)",
|
|
46
|
+
height: "50%",
|
|
47
|
+
width: "1px",
|
|
48
|
+
top: `calc(25% - ${teamDrawCardBottomMargin}/2)`
|
|
49
|
+
}
|
|
29
50
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
position:
|
|
51
|
+
"&:nth-last-child(-n+2) .team-draw-card": {
|
|
52
|
+
"&:before": {
|
|
53
|
+
position: "absolute",
|
|
33
54
|
content: '""',
|
|
34
|
-
width:
|
|
35
|
-
height:
|
|
36
|
-
|
|
37
|
-
top:
|
|
38
|
-
backgroundColor:
|
|
39
|
-
transform:
|
|
40
|
-
}
|
|
55
|
+
width: `${teamDrawCardSideMargin}`,
|
|
56
|
+
height: "1px",
|
|
57
|
+
left: 0,
|
|
58
|
+
top: "50%",
|
|
59
|
+
backgroundColor: "var(--cool-grey-600)",
|
|
60
|
+
transform: "translateX(-100%)"
|
|
61
|
+
}
|
|
41
62
|
},
|
|
63
|
+
"&:nth-of-type(-n+2) .team-draw-card": {
|
|
64
|
+
"&:after": {
|
|
65
|
+
position: "absolute",
|
|
66
|
+
content: '""',
|
|
67
|
+
width: `${teamDrawCardSideMargin}`,
|
|
68
|
+
height: "1px",
|
|
69
|
+
right: 0,
|
|
70
|
+
top: "50%",
|
|
71
|
+
backgroundColor: "var(--cool-grey-600)",
|
|
72
|
+
transform: "translateX(100%)"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
42
75
|
});
|
|
43
76
|
|
|
44
77
|
const GridSections = styled(Box)({
|
|
45
|
-
display:
|
|
46
|
-
alignItems:
|
|
47
|
-
paddingTop: '8px',
|
|
48
|
-
paddingBottom: '8px',
|
|
78
|
+
display: "flex",
|
|
79
|
+
alignItems: "center"
|
|
49
80
|
});
|
|
50
81
|
|
|
51
|
-
const TableMobileSection = styled(Grid)
|
|
52
|
-
|
|
53
|
-
|
|
82
|
+
const TableMobileSection = styled(Grid)({
|
|
83
|
+
flexDirection: "column"
|
|
84
|
+
});
|
|
54
85
|
|
|
55
86
|
export default function TeamDrawCardTable({
|
|
56
|
-
headerRows,
|
|
57
|
-
tableRows,
|
|
58
|
-
isMobile,
|
|
59
|
-
...props
|
|
87
|
+
headerRows, tableRows, isMobile, ...props
|
|
60
88
|
}: DrawCardTableProps) {
|
|
61
89
|
const [activeStep, setActiveStep] = React.useState(0);
|
|
62
90
|
|
|
@@ -70,10 +98,10 @@ export default function TeamDrawCardTable({
|
|
|
70
98
|
|
|
71
99
|
if (!headerRows || !tableRows) return null;
|
|
72
100
|
|
|
73
|
-
const totalColumns = Math.floor(12 / headerRows.length);
|
|
101
|
+
const totalColumns = Math.floor(12 / headerRows.length);
|
|
74
102
|
|
|
75
103
|
const formatTableRows = tableRows.map((row, index) => {
|
|
76
|
-
if (index > 2) return; // Table can only support 3 columns
|
|
104
|
+
if (index > 2) return; // Table can only support 3 columns
|
|
77
105
|
const rowSectionsHeight = `${100 / tableRows[index].length}%`;
|
|
78
106
|
const sectionAmount = tableRows[index].length;
|
|
79
107
|
|
|
@@ -89,42 +117,37 @@ export default function TeamDrawCardTable({
|
|
|
89
117
|
});
|
|
90
118
|
|
|
91
119
|
const formatDesktopRows = (
|
|
92
|
-
<>
|
|
93
|
-
<Grid container sx={{ height:
|
|
120
|
+
<>
|
|
121
|
+
<Grid container sx={{ height: "60px" }}>
|
|
94
122
|
{headerRows.map((row) => (
|
|
95
123
|
<StyledHeader key={row.name} xs={totalColumns}>
|
|
96
|
-
<Typography category="secondary" size="small-medium-cap">
|
|
124
|
+
<Typography category="secondary" size="small-medium-cap">
|
|
125
|
+
{row.name}
|
|
126
|
+
</Typography>
|
|
97
127
|
</StyledHeader>
|
|
98
128
|
))}
|
|
99
129
|
</Grid>
|
|
100
|
-
<Grid container>
|
|
101
|
-
|
|
102
|
-
</Grid>
|
|
103
|
-
</>
|
|
130
|
+
<Grid container>{formatTableRows}</Grid>
|
|
131
|
+
</>
|
|
104
132
|
);
|
|
105
|
-
|
|
133
|
+
|
|
106
134
|
const formatMobileRows = (
|
|
107
135
|
<Box>
|
|
108
136
|
<Grid container justifyContent="space-between">
|
|
109
|
-
<Button
|
|
110
|
-
color="inherit"
|
|
111
|
-
disabled={activeStep === 0}
|
|
112
|
-
onClick={handleBack}
|
|
113
|
-
sx={{ mr: 1, alignSelf: 'flex-start' }}
|
|
114
|
-
>
|
|
137
|
+
<Button color="inherit" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1, alignSelf: "flex-start" }}>
|
|
115
138
|
<ArrowBackIosOutlinedIcon />
|
|
116
139
|
</Button>
|
|
117
140
|
<StyledHeader xs={totalColumns}>
|
|
118
|
-
<Typography category="secondary" size="small-medium-cap">
|
|
141
|
+
<Typography category="secondary" size="small-medium-cap">
|
|
142
|
+
{headerRows[activeStep].name}
|
|
143
|
+
</Typography>
|
|
119
144
|
</StyledHeader>
|
|
120
145
|
<Button onClick={handleNext} disabled={activeStep === tableRows.length - 1}>
|
|
121
146
|
<ArrowForwardIosOutlinedIcon />
|
|
122
147
|
</Button>
|
|
123
148
|
</Grid>
|
|
124
149
|
<TableMobileSection container>
|
|
125
|
-
<GridSections sx={{ display:
|
|
126
|
-
{tableRows[activeStep]}
|
|
127
|
-
</GridSections>
|
|
150
|
+
<GridSections sx={{ display: "flex", flexDirection: "column", gap: "10px" }}>{tableRows[activeStep]}</GridSections>
|
|
128
151
|
</TableMobileSection>
|
|
129
152
|
</Box>
|
|
130
153
|
);
|