Skip to content

Commit 866d831

Browse files
Zack VandiverZack Vandiver
Zack Vandiver
authored and
Zack Vandiver
committed
Added MUI_Item folder
1 parent 2c887b6 commit 866d831

File tree

2 files changed

+194
-5
lines changed

2 files changed

+194
-5
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import * as Icons from '@mui/icons-material';
1212
import { useDispatch, useSelector } from 'react-redux';
1313
import { addChild } from '../../redux/reducers/slice/appStateSlice';
1414
import { emitEvent } from '../../helperFunctions/socket';
15+
import { RootState } from '../../redux/store';
1516

1617
const useStyles = makeStyles({
1718
HTMLPanelItem: {
@@ -40,10 +41,8 @@ const HTMLItem: React.FC<{
4041
}> = ({ name, id, icon, handleDelete }) => {
4142
const IconComponent = Icons[icon];
4243

43-
4444
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode); // current roomCode
4545

46-
4746
const classes = useStyles();
4847
const [modal, setModal] = useState(null);
4948
const [{ isDragging }, drag] = useDrag({
@@ -113,7 +112,6 @@ const HTMLItem: React.FC<{
113112
);
114113
};
115114

116-
117115
const dispatch = useDispatch();
118116

119117
const handleClick = () => {
@@ -140,7 +138,10 @@ const HTMLItem: React.FC<{
140138
{id <= 20 && (
141139
<div
142140
ref={drag}
143-
style={{ backgroundColor: '#2D313A', backgroundImage: 'linear-gradient(160deg, #2D313A 0%, #1E2024 100%)'}}
141+
style={{
142+
backgroundColor: '#2D313A',
143+
backgroundImage: 'linear-gradient(160deg, #2D313A 0%, #1E2024 100%)'
144+
}}
144145
className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
145146
id="HTMLItem"
146147
onClick={() => {
@@ -183,4 +184,3 @@ const HTMLItem: React.FC<{
183184
};
184185

185186
export default HTMLItem;
186-

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

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
import React, { useState } from 'react';
2+
import Grid from '@mui/material/Grid';
3+
import List from '@mui/material/List';
4+
import ListItem from '@mui/material/ListItem';
5+
import ListItemText from '@mui/material/ListItemText';
6+
import makeStyles from '@mui/styles/makeStyles';
7+
import { useDrag } from 'react-dnd';
8+
9+
import { ItemTypes } from '../../constants/ItemTypes';
10+
import { RootState } from '../../redux/store';
11+
import * as Icons from '@mui/icons-material'; // Assuming a collection of MUI icons
12+
import CodeIcon from '@mui/icons-material/Code'; // Default icon if specific icon not provided
13+
import { useDispatch, useSelector } from 'react-redux';
14+
import { addChild } from '../../redux/reducers/slice/appStateSlice';
15+
import createModal from '../right/createModal'; // Modal creation utility
16+
import { emitEvent } from '../../helperFunctions/socket'; // Event emission utility
17+
18+
// Define component styles using MUI styling solutions
19+
const useStyles = makeStyles({
20+
MUIPanelItem: {
21+
height: 'auto',
22+
width: 'auto',
23+
fontSize: 'medium',
24+
display: 'flex',
25+
flexDirection: 'row',
26+
justifyContent: 'space-evenly',
27+
textAlign: 'center',
28+
cursor: 'grab'
29+
},
30+
lightThemeFontColor: {
31+
color: '#8F8F8F'
32+
},
33+
darkThemeFontColor: {
34+
color: '#8F8F8F'
35+
}
36+
});
37+
38+
const MUIItem: React.FC<{
39+
name: string;
40+
id: number;
41+
icon: any;
42+
handleDelete: (id: number) => void;
43+
}> = ({ name, id, icon, handleDelete }) => {
44+
const IconComponent = Icons[icon];
45+
46+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode); // current roomCode
47+
48+
// Use drag and drop functionality
49+
const classes = useStyles();
50+
const [modal, setModal] = useState(null);
51+
const [{ isDragging }, drag] = useDrag({
52+
item: {
53+
type: ItemTypes.INSTANCE,
54+
newInstance: true,
55+
instanceType: 'MUI Component', // MUI Element? - we should carefully consider what we call this
56+
name,
57+
icon,
58+
instanceTypeId: id
59+
},
60+
collect: (monitor: any) => ({
61+
isDragging: !!monitor.isDragging()
62+
})
63+
});
64+
65+
const closeModal = () => setModal(null);
66+
const deleteAllInstances = (deleteID: number) => {
67+
const children = (
68+
<List className="export-preference">
69+
<ListItem
70+
id="export-modal"
71+
key={`clear${deleteID}`}
72+
onClick={() => handleDelete(deleteID)}
73+
style={{
74+
border: '1px solid #C6C6C6',
75+
marginBottom: '2%',
76+
marginTop: '5%'
77+
}}
78+
>
79+
<ListItemText
80+
primary={'Yes, delete all instances'}
81+
style={{ textAlign: 'center' }}
82+
onClick={closeModal}
83+
/>
84+
</ListItem>
85+
<ListItem
86+
id="export-modal"
87+
key={`close${deleteID}`}
88+
onClick={closeModal}
89+
style={{
90+
border: '1px solid #C6C6C6',
91+
marginBottom: '2%',
92+
marginTop: '5%'
93+
}}
94+
>
95+
<ListItemText
96+
primary={'No, do not delete element'}
97+
style={{ textAlign: 'center' }}
98+
onClick={closeModal}
99+
/>
100+
</ListItem>
101+
</List>
102+
);
103+
setModal(
104+
createModal({
105+
closeModal,
106+
children,
107+
message:
108+
'Deleting this element will delete all instances of this element within the application.\nDo you still wish to proceed?',
109+
primBtnLabel: null,
110+
primBtnAction: null,
111+
secBtnAction: null,
112+
secBtnLabel: null,
113+
open: true
114+
})
115+
);
116+
};
117+
118+
const dispatch = useDispatch();
119+
120+
const handleClick = () => {
121+
const childData = {
122+
type: 'MUI Component',
123+
typeId: id,
124+
childId: null,
125+
contextParam: {
126+
allContext: []
127+
}
128+
};
129+
130+
dispatch(addChild(childData));
131+
if (roomCode) {
132+
// Emit 'addChildAction' event to the server
133+
emitEvent('addChildAction', roomCode, childData);
134+
}
135+
};
136+
137+
// id over/under 20 logic
138+
// html-g{name} - html grid name = item
139+
return (
140+
<Grid item xs={5} key={`html-g${name}`} id="HTMLgrid">
141+
{id <= 20 && (
142+
<div
143+
ref={drag}
144+
style={{
145+
backgroundColor: '#2D313A',
146+
backgroundImage: 'linear-gradient(160deg, #2D313A 0%, #1E2024 100%)'
147+
}}
148+
className={`${classes.MUIPanelItem} ${classes.darkThemeFontColor}`}
149+
id="HTMLItem"
150+
onClick={() => {
151+
handleClick();
152+
}}
153+
>
154+
{typeof IconComponent !== 'undefined' && (
155+
<IconComponent fontSize="small" align-items="center" />
156+
)}
157+
{name}
158+
</div>
159+
)}
160+
161+
{id > 20 && (
162+
<div
163+
ref={drag}
164+
style={{ borderColor: '#C6C6C6' }}
165+
className={`${classes.MUIPanelItem} ${classes.darkThemeFontColor}`}
166+
id="HTMLItem"
167+
onClick={() => {
168+
handleClick();
169+
}}
170+
>
171+
{typeof CodeIcon !== 'undefined' && (
172+
<CodeIcon fontSize="small" align-items="center" />
173+
)}
174+
{name}
175+
<button
176+
id="newElement"
177+
style={{ color: '#C6C6C6' }}
178+
onClick={() => deleteAllInstances(id)}
179+
>
180+
X
181+
</button>
182+
</div>
183+
)}
184+
{modal}
185+
</Grid>
186+
);
187+
};
188+
189+
export default MUIItem;

0 commit comments

Comments
 (0)