Skip to content

Commit 7c0038e

Browse files
JesseWowczukJesseWowczuk
committed
Jesse 5/1, removed material UI components from canvas, re-created material UI tab on the left sidebar. then re-located all material UI components into the left sidebar and separated each component into individual accordions.
> > Co-author-by: Heather Pfeiffer <[email protected]> Co-author-by: Jesse Wowczuk <JesseWowczuk> Co-author-by: Zack Vandiver <[email protected]> Co-author-by: Sean Ryan <[email protected]> Co-author-by: Austin Alvarez <[email protected]>
1 parent f4dbc82 commit 7c0038e

File tree

2 files changed

+69
-30
lines changed

2 files changed

+69
-30
lines changed

‎app/src/components/left/MUIDragDropPanel.tsx

Lines changed: 63 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import AccordionDetails from '@mui/material/AccordionDetails';
1111
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
1212
import { makeStyles } from '@mui/styles';
1313
import ComponentDrag from './ComponentDrag';
14+
import { Icon } from '@mui/material';
1415

1516
const useStyles = makeStyles({
1617
accordion: {
@@ -45,13 +46,39 @@ const MUIDragDropPanel = (props): JSX.Element => {
4546
(type) => type.name !== 'separator'
4647
);
4748

48-
const muiTypesToRender = state.MUITypes.filter(
49-
(type) => type.name !== 'separator'
49+
const muiInputToRender = state.MUITypes.filter(
50+
(type) => type.name !== 'separator' && type.id >= 21 && type.id <= 33
51+
);
52+
53+
const muiDataDisplayToRender = state.MUITypes.filter(
54+
(type) => type.name !== 'separator' && type.id >= 34 && type.id <= 43
55+
);
56+
57+
const muiFeedbackToRender = state.MUITypes.filter(
58+
(type) => type.name !== 'separator' && type.id >= 44 && type.id <= 49
59+
);
60+
61+
const muiSurfacesToRender = state.MUITypes.filter(
62+
(type) => type.name !== 'separator' && type.id >= 50 && type.id <= 53
63+
);
64+
65+
const muiNavigationToRender = state.MUITypes.filter(
66+
(type) => type.name !== 'separator' && type.id >= 54 && type.id <= 62
67+
);
68+
69+
70+
const muiLayoutToRender = state.MUITypes.filter(
71+
(type) => type.name !== 'separator' && type.id >= 63 && type.id <= 70
72+
);
73+
74+
const muiUtilsToRender = state.MUITypes.filter(
75+
(type) => type.name !== 'separator' && type.id >= 71 && type.id <= 80
5076
);
5177

5278
return (
53-
<div className={'HTMLItems'}>
54-
<div id="HTMLItemsTopHalf">
79+
<div className={'MUIItems'}>
80+
<div id="MUIItemsPanel">
81+
5582
{/* Root Components */}
5683
<Accordion className={classes.accordion}>
5784
<AccordionSummary
@@ -67,7 +94,7 @@ const MUIDragDropPanel = (props): JSX.Element => {
6794
</AccordionDetails>
6895
</Accordion>
6996

70-
{/* MUI Components */}
97+
{/* Inputs Components */}
7198
<Accordion className={classes.accordion}>
7299
<AccordionSummary
73100
expandIcon={<ExpandMoreIcon />}
@@ -79,7 +106,7 @@ const MUIDragDropPanel = (props): JSX.Element => {
79106
</AccordionSummary>
80107
<AccordionDetails>
81108
<Grid container justifyContent="center">
82-
{muiTypesToRender.map((option) => {
109+
{muiInputToRender.map((option) => {
83110
return (
84111
<MUIItem
85112
name={option.name}
@@ -93,18 +120,20 @@ const MUIDragDropPanel = (props): JSX.Element => {
93120
</Grid>
94121
</AccordionDetails>
95122
</Accordion>
123+
124+
{/* Data Display Component*/}
96125
<Accordion className={classes.accordion}>
97126
<AccordionSummary
98127
expandIcon={<ExpandMoreIcon />}
99-
aria-controls="panel2a-content"
100-
id="panel2a-header"
128+
aria-controls="panel3a-content"
129+
id="panel3a-header"
101130
className={classes.accordionSummary}
102131
>
103132
<h3>Data Display</h3>
104133
</AccordionSummary>
105134
<AccordionDetails>
106135
<Grid container justifyContent="center">
107-
{muiTypesToRender.map((option) => {
136+
{muiDataDisplayToRender.map((option) => {
108137
return (
109138
<MUIItem
110139
name={option.name}
@@ -118,18 +147,20 @@ const MUIDragDropPanel = (props): JSX.Element => {
118147
</Grid>
119148
</AccordionDetails>
120149
</Accordion>
150+
151+
{/* Feedback Component*/}
121152
<Accordion className={classes.accordion}>
122153
<AccordionSummary
123154
expandIcon={<ExpandMoreIcon />}
124-
aria-controls="panel2a-content"
125-
id="panel2a-header"
155+
aria-controls="panel4a-content"
156+
id="panel4a-header"
126157
className={classes.accordionSummary}
127158
>
128159
<h3>Feedback</h3>
129160
</AccordionSummary>
130161
<AccordionDetails>
131162
<Grid container justifyContent="center">
132-
{muiTypesToRender.map((option) => {
163+
{muiFeedbackToRender.map((option) => {
133164
return (
134165
<MUIItem
135166
name={option.name}
@@ -143,18 +174,20 @@ const MUIDragDropPanel = (props): JSX.Element => {
143174
</Grid>
144175
</AccordionDetails>
145176
</Accordion>
177+
178+
{/* Surfaces Component*/}
146179
<Accordion className={classes.accordion}>
147180
<AccordionSummary
148181
expandIcon={<ExpandMoreIcon />}
149-
aria-controls="panel2a-content"
150-
id="panel2a-header"
182+
aria-controls="panel5a-content"
183+
id="panel5a-header"
151184
className={classes.accordionSummary}
152185
>
153186
<h3>Surfaces</h3>
154187
</AccordionSummary>
155188
<AccordionDetails>
156189
<Grid container justifyContent="center">
157-
{muiTypesToRender.map((option) => {
190+
{muiSurfacesToRender.map((option) => {
158191
return (
159192
<MUIItem
160193
name={option.name}
@@ -168,18 +201,20 @@ const MUIDragDropPanel = (props): JSX.Element => {
168201
</Grid>
169202
</AccordionDetails>
170203
</Accordion>
204+
205+
{/* Navigation Component*/}
171206
<Accordion className={classes.accordion}>
172207
<AccordionSummary
173208
expandIcon={<ExpandMoreIcon />}
174-
aria-controls="panel2a-content"
175-
id="panel2a-header"
209+
aria-controls="panel6a-content"
210+
id="panel6a-header"
176211
className={classes.accordionSummary}
177212
>
178213
<h3>Navigation</h3>
179214
</AccordionSummary>
180215
<AccordionDetails>
181216
<Grid container justifyContent="center">
182-
{muiTypesToRender.map((option) => {
217+
{muiNavigationToRender.map((option) => {
183218
return (
184219
<MUIItem
185220
name={option.name}
@@ -193,18 +228,20 @@ const MUIDragDropPanel = (props): JSX.Element => {
193228
</Grid>
194229
</AccordionDetails>
195230
</Accordion>
231+
232+
{/* Layout Component*/}
196233
<Accordion className={classes.accordion}>
197234
<AccordionSummary
198235
expandIcon={<ExpandMoreIcon />}
199-
aria-controls="panel2a-content"
200-
id="panel2a-header"
236+
aria-controls="panel7a-content"
237+
id="panel7a-header"
201238
className={classes.accordionSummary}
202239
>
203240
<h3>Layout</h3>
204241
</AccordionSummary>
205242
<AccordionDetails>
206243
<Grid container justifyContent="center">
207-
{muiTypesToRender.map((option) => {
244+
{muiLayoutToRender.map((option) => {
208245
return (
209246
<MUIItem
210247
name={option.name}
@@ -218,18 +255,20 @@ const MUIDragDropPanel = (props): JSX.Element => {
218255
</Grid>
219256
</AccordionDetails>
220257
</Accordion>
258+
259+
{/* Utils Component */}
221260
<Accordion className={classes.accordion}>
222261
<AccordionSummary
223262
expandIcon={<ExpandMoreIcon />}
224-
aria-controls="panel2a-content"
225-
id="panel2a-header"
263+
aria-controls="panel8a-content"
264+
id="panel8a-header"
226265
className={classes.accordionSummary}
227266
>
228267
<h3>Utils</h3>
229268
</AccordionSummary>
230269
<AccordionDetails>
231270
<Grid container justifyContent="center">
232-
{muiTypesToRender.map((option) => {
271+
{muiUtilsToRender.map((option) => {
233272
return (
234273
<MUIItem
235274
name={option.name}

‎app/src/redux/MUITypes.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ SURFACES
4545
NAVIGATION
4646
54. Bottom Navigation
4747
55. Breadcrumbs
48-
56. Drawer
49-
57. Link
50-
58. Menu
48+
56. Drawer
49+
57. Link
50+
58. Menu
5151
59. Pagination
5252
60. Speed Dial
5353
61. Stepper
@@ -2174,10 +2174,10 @@ const MUITypes: MUIType[] = [
21742174
},
21752175
{
21762176
id: 49,
2177-
tag: 'simplesnackbar',
2178-
name: 'SimpleSnackbar',
2177+
tag: 'snackbar',
2178+
name: 'Snackbar',
21792179
style: {},
2180-
placeHolderShort: 'simplesnackbar',
2180+
placeHolderShort: 'snackbar',
21812181
placeHolderLong: 'Material UI Simple Snackbar Component',
21822182
icon: 'Info',
21832183
framework: 'reactClassic',

0 commit comments

Comments
 (0)