Skip to content

Commit fd2a682

Browse files
JesseWowczukJesseWowczuk
committed
updated with Zack
1 parent fae0062 commit fd2a682

File tree

3 files changed

+1621
-1413
lines changed

3 files changed

+1621
-1413
lines changed

‎app/src/components/bottom/MUIProps.tsx

Lines changed: 243 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useMemo } from 'react';
1+
import React, { useCallback, useMemo } from 'react';
22
import { Button, TextField } from '@mui/material';
33
import { Send } from '@mui/icons-material';
44
import MUITypes from '../../redux/MUITypes';
@@ -7,16 +7,20 @@ import { emitEvent } from '../../helperFunctions/socket';
77
import { RootState } from '../../redux/store';
88
import { useSelector, useDispatch } from 'react-redux';
99
import makeStyles from '@mui/styles/makeStyles';
10-
import MUIPropsSlice, { initialState } from '../../redux/reducers/slice/MUIpropsSlice';
11-
12-
10+
import FormSelector from '../../components/form/Selector';
11+
import MUIPropsSlice, {
12+
initialState
13+
} from '../../redux/reducers/slice/MUIpropsSlice';
14+
import { setSize, setColor } from '../../redux/reducers/slice/MUIpropsSlice';
15+
import FormControl from '@mui/material/FormControl';
1316

1417
const MUIProps = ({ isThemeLight }): JSX.Element => {
1518
const classes = useStyles(isThemeLight);
1619
const dispatch = useDispatch();
1720
const propState = useSelector((store: RootState) => store.MUIpropsSlice);
1821
const state = useSelector((store: RootState) => store.appState);
1922
const currFocus = getFocus().child;
23+
const style = useSelector((store: RootState) => store.styleSlice);
2024

2125
function getFocus() {
2226
// find and store component's name based on canvasFocus.componentId
@@ -67,7 +71,7 @@ const MUIProps = ({ isThemeLight }): JSX.Element => {
6771
}
6872
}
6973
return focusTarget;
70-
};
74+
}
7175

7276
// let configTarget;
7377

@@ -99,25 +103,52 @@ const MUIProps = ({ isThemeLight }): JSX.Element => {
99103
return isLinked;
100104
};
101105

102-
console.log(configTarget.child.name);
103-
console.log(configTarget.child)
104-
// console.log('config whatever', )
105-
// console.log('configTarget', configTarget);
106-
// console.log('muiComponent?', configTarget.children[1].typeId); // give the ID of the MUI component
107-
// set a variable to equal the index value of the component in the MUITypes array
108-
const propsIndex = MUITypes.findIndex(item => item.name === configTarget.child.name);
106+
const arrayOfState = Object.keys(initialState);
107+
console.log('arrayofstate', arrayOfState);
109108

110-
const arrayOfState = Object.keys(initialState);
111-
// console.log(arrayOfState)
112-
// const matchedState = arrayOfState.filter((state) => MUITypes[propsIndex].propOptions.includes(state));
109+
const handleMUIChange = (selectedValue: string) => {
110+
// Dispatch an action to set the size state
111+
dispatch(setSize(selectedValue));
112+
};
113113

114-
// console.log(arrayOfState);
115-
// const arrayOfState = ['color'];
116-
console.log('arrayofstate', arrayOfState);
114+
// null or undefined when no focus, render this:
115+
if (!currFocus) {
116+
return (
117+
<div className="column right" id="rightContainer" style={style.style}>
118+
<div className="rightPanelWrapper">
119+
<div>
120+
<div className={classes.rootConfigHeader}>
121+
<h4
122+
className={
123+
isThemeLight
124+
? classes.lightThemeFontColor
125+
: classes.darkThemeFontColor
126+
}
127+
>
128+
Parent MUI Component:
129+
<br />
130+
<br />
131+
<span className={classes.rootCompName}>
132+
{configTarget.name}
133+
</span>
134+
<p style={{ fontSize: '16px' }}>
135+
Drag or click an MUI Component to the canvas to see what
136+
happens!
137+
</p>
138+
</h4>
139+
</div>
140+
</div>
141+
</div>
142+
</div>
143+
);
144+
}
117145

146+
const propsIndex = MUITypes.findIndex(
147+
(item) => item.name === configTarget.child.name
148+
);
149+
// focused on customize tab
118150
return (
119151
<div>
120-
121152
<div className={classes.configHeader}>
122153
<h4
123154
className={
@@ -134,26 +165,181 @@ console.log('arrayofstate', arrayOfState);
134165
</h4>
135166
</div>
136167
<div style={{ display: 'flex', flexDirection: 'column' }}>
137-
{MUITypes[propsIndex].propOptions
138-
.filter(propOption => arrayOfState.includes(propOption)) // Add this filter method
139-
.map((propOption) => (
140-
<Button
141-
key={propOption}
142-
// onClick={() => handleComponentSelect(propOption)}
143-
sx={{ marginBottom: '0.5rem' }}
144-
>
145-
{propOption}
146-
</Button>
147-
))}
148-
</div>
149-
<Button
150-
onClick={() => console.log('Save button clicked')}
151-
variant="contained"
152-
endIcon={<Send />}
153-
sx={{ marginTop: '1rem' }}
154-
>
155-
Save
156-
</Button>
168+
{MUITypes[propsIndex].propOptions
169+
.filter((propOption) => arrayOfState.includes(propOption)) // Add this filter method
170+
.map((propOption) => {
171+
if (propOption === 'size') {
172+
return (
173+
<FormSelector
174+
key={propOption}
175+
classes={classes}
176+
selectValue={setSize}
177+
onSelect={handleMUIChange}
178+
title="Size:"
179+
name="size"
180+
items={[
181+
{ value: '', text: 'default' },
182+
{ value: 'small', text: 'small' },
183+
{ value: 'medium', text: 'medium' },
184+
{ value: 'large', text: 'large' }
185+
]}
186+
/>
187+
);
188+
} else if (propOption === 'color') {
189+
return (
190+
<FormSelector
191+
key={propOption}
192+
classes={classes}
193+
selectValue={setColor}
194+
onSelect={handleMUIChange}
195+
title="Color:"
196+
name="color"
197+
items={[
198+
{ value: '', text: 'default' },
199+
{ value: 'primary', text: 'primary' },
200+
{ value: 'secondary', text: 'secondary' },
201+
{ value: 'error', text: 'error' },
202+
{ value: 'info', text: 'info' },
203+
{ value: 'success', text: 'success' },
204+
{ value: 'warning', text: 'warning' }
205+
]}
206+
/>
207+
);
208+
} else if (propOption === 'disabled') {
209+
return (
210+
<FormSelector
211+
key={propOption}
212+
classes={classes}
213+
selectValue={setColor}
214+
onSelect={handleMUIChange}
215+
title="Disabled:"
216+
name="disabled"
217+
items={[
218+
{ value: 'false', text: 'false' },
219+
{ value: 'true', text: 'true' }
220+
]}
221+
/>
222+
);
223+
} else if (propOption === 'disableElevation') {
224+
return (
225+
<FormSelector
226+
key={propOption}
227+
classes={classes}
228+
selectValue={setColor}
229+
onSelect={handleMUIChange}
230+
title="Disabled Elevation:"
231+
name="disableElevation"
232+
items={[
233+
{ value: 'false', text: 'false' },
234+
{ value: 'true', text: 'true' }
235+
]}
236+
/>
237+
);
238+
} else if (propOption === 'disableFocusRipple') {
239+
return (
240+
<FormSelector
241+
key={propOption}
242+
classes={classes}
243+
selectValue={setColor}
244+
onSelect={handleMUIChange}
245+
title="Disabled Focus Ripple:"
246+
name="disableFocusRipple"
247+
items={[
248+
{ value: 'false', text: 'false' },
249+
{ value: 'true', text: 'true' }
250+
]}
251+
/>
252+
);
253+
} else if (propOption === 'disableRipple') {
254+
return (
255+
<FormSelector
256+
key={propOption}
257+
classes={classes}
258+
selectValue={setColor}
259+
onSelect={handleMUIChange}
260+
title="Disabled Ripple:"
261+
name="disableRipple"
262+
items={[
263+
{ value: 'false', text: 'false' },
264+
{ value: 'true', text: 'true' }
265+
]}
266+
/>
267+
);
268+
} else if (propOption === 'fullWidth') {
269+
return (
270+
<FormSelector
271+
key={propOption}
272+
classes={classes}
273+
selectValue={setColor}
274+
onSelect={handleMUIChange}
275+
title="Full Width:"
276+
name="fullWidth"
277+
items={[
278+
{ value: 'false', text: 'false' },
279+
{ value: 'true', text: 'true' }
280+
]}
281+
/>
282+
);
283+
} else if (propOption === 'href') {
284+
return (
285+
<div className={classes.configRow}>
286+
<div
287+
className={
288+
isThemeLight
289+
? `${classes.configType} ${classes.lightThemeFontColor}`
290+
: `${classes.configType} ${classes.darkThemeFontColor}`
291+
}
292+
>
293+
<h3>href:</h3>
294+
</div>
295+
<div className={classes.configValue}>
296+
<FormControl className={classes.formControl}>
297+
<TextField
298+
name="href"
299+
className={classes.select}
300+
inputProps={{
301+
className: isThemeLight
302+
? `${classes.selectInput} ${classes.lightThemeFontColor}`
303+
: `${classes.selectInput} ${classes.darkThemeFontColor}`
304+
}}
305+
// value={BGColor}
306+
// onChange={handleChange}
307+
placeholder="www.reactype.dev"
308+
/>
309+
</FormControl>
310+
</div>
311+
</div>
312+
);
313+
} else if (propOption === 'variant') {
314+
return (
315+
<FormSelector
316+
key={propOption}
317+
classes={classes}
318+
selectValue={setColor}
319+
onSelect={handleMUIChange}
320+
title="Variant:"
321+
name="variant"
322+
items={[
323+
{ value: 'false', text: 'false' },
324+
{ value: 'true', text: 'true' }
325+
]}
326+
/>
327+
);
328+
} else {
329+
return (
330+
<Button
331+
// key={propOption}
332+
// onClick={() => console.log('Save button clicked')}
333+
// variant="contained"
334+
// endIcon={<Send />}
335+
// sx={{ marginTop: '1rem' }}
336+
>
337+
{propOption}
338+
</Button>
339+
);
340+
}
341+
})}
342+
</div>
157343
</div>
158344
);
159345
};
@@ -166,6 +352,10 @@ const useStyles = makeStyles({
166352
color: '#C6C6C6'
167353
}
168354
},
355+
selectFieldWidth: {
356+
width: '200px',
357+
paddingLeft: '100px',
358+
},
169359
selectInput: {
170360
paddingTop: '15px',
171361
paddingLeft: '15px'
@@ -244,4 +434,18 @@ const useStyles = makeStyles({
244434

245435
export default MUIProps;
246436

437+
// console.log(configTarget.child.name);
438+
// console.log(configTarget.child);
439+
// console.log('config whatever', )
440+
// console.log('configTarget', configTarget);
441+
// console.log('muiComponent?', configTarget.children[1].typeId); // give the ID of the MUI component
442+
// set a variable to equal the index value of the component in the MUITypes array
443+
// const propsIndex = MUITypes.findIndex(
444+
// (item) => item.name === configTarget.child.name
445+
// );
446+
// const childInstanceId = useSelector(state => state.canvasFocus.childId);
447+
// console.log(arrayOfState)
448+
// const matchedState = arrayOfState.filter((state) => MUITypes[propsIndex].propOptions.includes(state));
247449

450+
// console.log(arrayOfState);
451+
// const arrayOfState = ['color'];

0 commit comments

Comments
 (0)