Skip to content

Commit f19643c

Browse files
ZackVandiverZackVandiver
committed
Merged with demo feature branch
2 parents fb59853 + 853cb6a commit f19643c

File tree

15 files changed

+1592
-161
lines changed

15 files changed

+1592
-161
lines changed

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const useStyles = makeStyles({
1212
flexDirection: 'column',
1313
alignItems: 'center',
1414
flexGrow: 1,
15-
overflow: 'auto'
15+
overflow: 'auto',
1616
},
1717
panelWrapperList: {
1818
minHeight: 'auto'
@@ -21,14 +21,15 @@ const useStyles = makeStyles({
2121
color: '#fff'
2222
},
2323
darkThemeFontColor: {
24-
color: '#fff'
24+
color: '#00008B,'
2525
}
2626
});
2727

2828
const ComponentDrag = ({ isVisible, isThemeLight }): JSX.Element | null => {
2929
const classes = useStyles();
3030
const state = useSelector((store: RootState) => store.appState);
3131

32+
3233
const isFocus = (targetId: Number) => {
3334
return state.canvasFocus.componentId === targetId ? true : false;
3435
};
@@ -71,3 +72,19 @@ const ComponentDrag = ({ isVisible, isThemeLight }): JSX.Element | null => {
7172

7273
export default ComponentDrag;
7374

75+
76+
const propsArray4 = [
77+
{ Name: "align",
78+
Type: "'center' | 'inherit' | 'justify' | 'left' | 'right'",
79+
Default: "'inherit'",
80+
Description: "Set the text-align on the component." },
81+
{ Name: "children", Type: "node" },
82+
{ Name: "classes", Type: "object" },
83+
{ Name: "component", Type: "elementType", Description: "The component used for the root node." },
84+
{ Name: "gutterBottom", Type: "bool", Default: "false", Description: "If true, the text will have a bottom margin." },
85+
{ Name: "noWrap", Type: "bool", Default: "false", Description: "If true, the text will not wrap, but instead will truncate with a text overflow ellipsis." },
86+
{ Name: "paragraph", Type: "bool", Default: "false", Description: "If true, the element will be a paragraph element." },
87+
{ Name: "sx", Type: "Array<func | object | bool> | func | object" },
88+
{ Name: "variant", Type: "'body1' | 'body2' | 'button' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'inherit' | 'overline' | 'subtitle1' | 'subtitle2' | string", Default: "'body1'", Description: "Applies the theme typography styles." },
89+
{ Name: "variantMapping", Type: "object", Default: "{ h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body1: 'p', body2: 'p', inherit: 'p' }", Description: "The component maps the variant prop to a range of different HTML element types." }
90+
];

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

Lines changed: 151 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,157 @@ const MUIDragDropPanel = (props): JSX.Element => {
7575
id="panel2a-header"
7676
className={classes.accordionSummary}
7777
>
78-
<h3>MUI Components</h3>
78+
<h3>Inputs</h3>
79+
</AccordionSummary>
80+
<AccordionDetails>
81+
<Grid container justifyContent="center">
82+
{muiTypesToRender.map((option) => {
83+
return (
84+
<MUIItem
85+
name={option.name}
86+
key={`mui-${option.name}`}
87+
id={option.id}
88+
icon={option.icon}
89+
handleDelete={handleDelete}
90+
/>
91+
);
92+
})}
93+
</Grid>
94+
</AccordionDetails>
95+
</Accordion>
96+
<Accordion className={classes.accordion}>
97+
<AccordionSummary
98+
expandIcon={<ExpandMoreIcon />}
99+
aria-controls="panel2a-content"
100+
id="panel2a-header"
101+
className={classes.accordionSummary}
102+
>
103+
<h3>Data Display</h3>
104+
</AccordionSummary>
105+
<AccordionDetails>
106+
<Grid container justifyContent="center">
107+
{muiTypesToRender.map((option) => {
108+
return (
109+
<MUIItem
110+
name={option.name}
111+
key={`mui-${option.name}`}
112+
id={option.id}
113+
icon={option.icon}
114+
handleDelete={handleDelete}
115+
/>
116+
);
117+
})}
118+
</Grid>
119+
</AccordionDetails>
120+
</Accordion>
121+
<Accordion className={classes.accordion}>
122+
<AccordionSummary
123+
expandIcon={<ExpandMoreIcon />}
124+
aria-controls="panel2a-content"
125+
id="panel2a-header"
126+
className={classes.accordionSummary}
127+
>
128+
<h3>Feedback</h3>
129+
</AccordionSummary>
130+
<AccordionDetails>
131+
<Grid container justifyContent="center">
132+
{muiTypesToRender.map((option) => {
133+
return (
134+
<MUIItem
135+
name={option.name}
136+
key={`mui-${option.name}`}
137+
id={option.id}
138+
icon={option.icon}
139+
handleDelete={handleDelete}
140+
/>
141+
);
142+
})}
143+
</Grid>
144+
</AccordionDetails>
145+
</Accordion>
146+
<Accordion className={classes.accordion}>
147+
<AccordionSummary
148+
expandIcon={<ExpandMoreIcon />}
149+
aria-controls="panel2a-content"
150+
id="panel2a-header"
151+
className={classes.accordionSummary}
152+
>
153+
<h3>Surfaces</h3>
154+
</AccordionSummary>
155+
<AccordionDetails>
156+
<Grid container justifyContent="center">
157+
{muiTypesToRender.map((option) => {
158+
return (
159+
<MUIItem
160+
name={option.name}
161+
key={`mui-${option.name}`}
162+
id={option.id}
163+
icon={option.icon}
164+
handleDelete={handleDelete}
165+
/>
166+
);
167+
})}
168+
</Grid>
169+
</AccordionDetails>
170+
</Accordion>
171+
<Accordion className={classes.accordion}>
172+
<AccordionSummary
173+
expandIcon={<ExpandMoreIcon />}
174+
aria-controls="panel2a-content"
175+
id="panel2a-header"
176+
className={classes.accordionSummary}
177+
>
178+
<h3>Navigation</h3>
179+
</AccordionSummary>
180+
<AccordionDetails>
181+
<Grid container justifyContent="center">
182+
{muiTypesToRender.map((option) => {
183+
return (
184+
<MUIItem
185+
name={option.name}
186+
key={`mui-${option.name}`}
187+
id={option.id}
188+
icon={option.icon}
189+
handleDelete={handleDelete}
190+
/>
191+
);
192+
})}
193+
</Grid>
194+
</AccordionDetails>
195+
</Accordion>
196+
<Accordion className={classes.accordion}>
197+
<AccordionSummary
198+
expandIcon={<ExpandMoreIcon />}
199+
aria-controls="panel2a-content"
200+
id="panel2a-header"
201+
className={classes.accordionSummary}
202+
>
203+
<h3>Layout</h3>
204+
</AccordionSummary>
205+
<AccordionDetails>
206+
<Grid container justifyContent="center">
207+
{muiTypesToRender.map((option) => {
208+
return (
209+
<MUIItem
210+
name={option.name}
211+
key={`mui-${option.name}`}
212+
id={option.id}
213+
icon={option.icon}
214+
handleDelete={handleDelete}
215+
/>
216+
);
217+
})}
218+
</Grid>
219+
</AccordionDetails>
220+
</Accordion>
221+
<Accordion className={classes.accordion}>
222+
<AccordionSummary
223+
expandIcon={<ExpandMoreIcon />}
224+
aria-controls="panel2a-content"
225+
id="panel2a-header"
226+
className={classes.accordionSummary}
227+
>
228+
<h3>Utils</h3>
79229
</AccordionSummary>
80230
<AccordionDetails>
81231
<Grid container justifyContent="center">

‎app/src/components/main/CanvasContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
3838
backgroundSize: '8px 8px',
3939
backgroundPosition: '-19px -19px',
4040
borderBottom: 'none',
41-
overflow: 'auto'
41+
overflow: 'auto',
4242
};
4343

4444
//containerRef references the container that will ultimately have the scroll functionality

0 commit comments

Comments
 (0)