Skip to content

Commit f88a27b

Browse files
SkilzszSkilzsz
authored
Merge pull request #13 from oslabs-beta/rose
Rose
2 parents 427cee2 + e512aa8 commit f88a27b

File tree

4 files changed

+35
-50
lines changed

4 files changed

+35
-50
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const DragDropPanel = (props): JSX.Element => {
5252
name={option.name}
5353
key={`html-${option.name}`}
5454
id={option.id}
55-
Icon={option.icon}
55+
icon={option.icon}
5656
handleDelete={handleDelete}
5757
/>
5858
);
@@ -81,7 +81,7 @@ const DragDropPanel = (props): JSX.Element => {
8181
name={option.name}
8282
key={`html-${option.name}`}
8383
id={option.id}
84-
Icon={option.icon}
84+
icon={option.icon}
8585
handleDelete={handleDelete}
8686
/>
8787
);
@@ -103,7 +103,7 @@ const DragDropPanel = (props): JSX.Element => {
103103
name={option.name}
104104
key={`html-${option.name}`}
105105
id={option.id}
106-
Icon={option.icon}
106+
icon={option.icon}
107107
handleDelete={handleDelete}
108108
/>
109109
);

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import { RootState } from '../../redux/store';
99
import createModal from '../right/createModal';
1010
import makeStyles from '@mui/styles/makeStyles';
1111
import { useDrag } from 'react-dnd';
12-
// import { useSelector } from 'react-redux';
1312
import { IconProps } from '@mui/material';
1413
import CodeIcon from '@mui/icons-material/Code';
14+
import * as Icons from '@mui/icons-material';
1515

1616
const useStyles = makeStyles({
1717
HTMLPanelItem: {
@@ -23,9 +23,6 @@ const useStyles = makeStyles({
2323
justifyContent: 'space-evenly',
2424
textAlign: 'center',
2525
cursor: 'grab'
26-
// '& > h3': {
27-
// display: 'inline-block'
28-
// }
2926
},
3027
lightThemeFontColor: {
3128
color: '#8F8F8F'
@@ -38,11 +35,14 @@ const useStyles = makeStyles({
3835
const HTMLItem: React.FC<{
3936
name: string;
4037
id: number;
41-
Icon: any;
38+
icon: any;
4239
handleDelete: (id: number) => void;
43-
}> = ({ name, id, Icon, handleDelete }) => {
44-
// console.log('Icon: ', Icon);
40+
}> = ({ name, id, icon, handleDelete }) => {
41+
//load mui icons base on string parameter
42+
const IconComponent = Icons[icon];
43+
4544
const classes = useStyles();
45+
4646
const [modal, setModal] = useState(null);
4747

4848
const [{ isDragging }, drag] = useDrag({
@@ -52,7 +52,7 @@ const HTMLItem: React.FC<{
5252
newInstance: true,
5353
instanceType: 'HTML Element',
5454
name,
55-
Icon,
55+
icon,
5656
instanceTypeId: id
5757
},
5858
collect: (monitor: any) => ({
@@ -130,6 +130,9 @@ const HTMLItem: React.FC<{
130130
id="HTMLItem"
131131
>
132132
{/* <Icon fontSize="small" align-items="center" /> */}
133+
{typeof IconComponent !== 'undefined' && (
134+
<IconComponent fontSize="small" align-items="center" />
135+
)}
133136
{name}
134137
</div>
135138
)}

‎app/src/interfaces/Interfaces.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export interface HTMLType {
9595
placeHolderShort: string | React.JSX.Element;
9696
placeHolderLong: string;
9797
// ? == optional type part of icon, cant comment out icon and it works
98-
Icon?: any;
98+
// Icon?: any;
9999
icon?: any;
100100
framework: string;
101101
nestable: boolean;

‎app/src/redux/HTMLTypes.ts

Lines changed: 20 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
1-
import ImageIcon from '@mui/icons-material/Image';
2-
import NotesOutlinedIcon from '@mui/icons-material/NotesOutlined';
3-
import FormIcon from '@mui/icons-material/Description';
4-
import HeaderIcon from '@mui/icons-material/TextFormat';
5-
import CodeIcon from '@mui/icons-material/Code';
6-
import ButtonIcon from '@mui/icons-material/EditAttributes';
7-
import ToggleOffOutlinedIcon from '@mui/icons-material/ToggleOffOutlined';
8-
import LinkIcon from '@mui/icons-material/Link';
9-
import FormatListBulletedOutlinedIcon from '@mui/icons-material/FormatListBulletedOutlined';
10-
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
11-
import FormatListNumberedOutlinedIcon from '@mui/icons-material/FormatListNumberedOutlined';
12-
import FeaturedPlayListOutlinedIcon from '@mui/icons-material/FeaturedPlayListOutlined';
13-
import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
14-
import RouteOutlinedIcon from '@mui/icons-material/RouteOutlined';
15-
import DatasetLinkedOutlinedIcon from '@mui/icons-material/DatasetLinkedOutlined';
16-
import ShortTextOutlinedIcon from '@mui/icons-material/ShortTextOutlined';
17-
import MoreOutlinedIcon from '@mui/icons-material/MoreOutlined';
18-
191
import { HTMLType } from '../interfaces/Interfaces';
202

213
//properties for all HTML components
@@ -28,7 +10,7 @@ const HTMLTypes: HTMLType[] = [
2810
style: {},
2911
placeHolderShort: 'div',
3012
placeHolderLong: '',
31-
icon: CodeIcon,
13+
icon: 'Code',
3214
framework: 'reactClassic',
3315
nestable: true
3416
},
@@ -52,7 +34,7 @@ const HTMLTypes: HTMLType[] = [
5234
style: {},
5335
placeHolderShort: 'link',
5436
placeHolderLong: '',
55-
icon: LinkIcon,
37+
icon: 'Link',
5638
framework: 'reactClassic',
5739
nestable: false
5840
},
@@ -63,7 +45,7 @@ const HTMLTypes: HTMLType[] = [
6345
style: {},
6446
placeHolderShort: 'header 1',
6547
placeHolderLong: '',
66-
icon: HeaderIcon,
48+
icon: 'TextFormat',
6749
framework: 'reactClassic',
6850
nestable: false
6951
},
@@ -74,7 +56,7 @@ const HTMLTypes: HTMLType[] = [
7456
style: {},
7557
placeHolderShort: 'header 2',
7658
placeHolderLong: '',
77-
icon: HeaderIcon,
59+
icon: 'TextFormat',
7860
framework: 'reactClassic',
7961
nestable: false
8062
},
@@ -85,7 +67,7 @@ const HTMLTypes: HTMLType[] = [
8567
style: {},
8668
placeHolderShort: 'span',
8769
placeHolderLong: '',
88-
icon: ShortTextOutlinedIcon,
70+
icon: 'ShortTextOutlined',
8971
framework: 'reactClassic',
9072
nestable: false
9173
},
@@ -96,7 +78,7 @@ const HTMLTypes: HTMLType[] = [
9678
style: {},
9779
placeHolderShort: 'paragraph',
9880
placeHolderLong: '',
99-
icon: NotesOutlinedIcon,
81+
icon: 'NotesOutlined',
10082
framework: 'reactClassic',
10183
nestable: false
10284
},
@@ -107,7 +89,7 @@ const HTMLTypes: HTMLType[] = [
10789
style: {},
10890
placeHolderShort: 'form',
10991
placeHolderLong: '',
110-
icon: FormIcon,
92+
icon: 'Description',
11193
framework: 'reactClassic',
11294
nestable: true
11395
},
@@ -118,7 +100,7 @@ const HTMLTypes: HTMLType[] = [
118100
style: {},
119101
placeHolderShort: 'input',
120102
placeHolderLong: '',
121-
icon: EditOutlinedIcon,
103+
icon: 'EditOutlined',
122104
framework: 'reactClassic',
123105
nestable: false
124106
},
@@ -129,7 +111,7 @@ const HTMLTypes: HTMLType[] = [
129111
style: {},
130112
placeHolderShort: 'button',
131113
placeHolderLong: '',
132-
icon: ButtonIcon,
114+
icon: 'EditAttributes',
133115
framework: 'reactClassic',
134116
nestable: false
135117
},
@@ -141,7 +123,7 @@ const HTMLTypes: HTMLType[] = [
141123
style: {},
142124
placeHolderShort: 'image',
143125
placeHolderLong: '',
144-
icon: ImageIcon,
126+
icon: 'Image',
145127
framework: 'reactClassic',
146128
nestable: false
147129
},
@@ -152,7 +134,7 @@ const HTMLTypes: HTMLType[] = [
152134
style: {},
153135
placeHolderShort: 'label',
154136
placeHolderLong: '',
155-
icon: MoreOutlinedIcon,
137+
icon: 'MoreOutlined',
156138
framework: 'reactClassic',
157139
nestable: false
158140
},
@@ -163,7 +145,7 @@ const HTMLTypes: HTMLType[] = [
163145
style: {},
164146
placeHolderShort: 'menu',
165147
placeHolderLong: '',
166-
icon: FeaturedPlayListOutlinedIcon,
148+
icon: 'FeaturedPlayListOutlined',
167149
framework: 'reactClassic',
168150
nestable: true
169151
},
@@ -174,7 +156,7 @@ const HTMLTypes: HTMLType[] = [
174156
style: {},
175157
placeHolderShort: 'ordered list',
176158
placeHolderLong: '',
177-
icon: FormatListNumberedOutlinedIcon,
159+
icon: 'FormatListNumberedOutlined',
178160
framework: 'reactClassic',
179161
nestable: true
180162
},
@@ -185,7 +167,7 @@ const HTMLTypes: HTMLType[] = [
185167
style: {},
186168
placeHolderShort: 'unordered list',
187169
placeHolderLong: '',
188-
icon: FormatListBulletedOutlinedIcon,
170+
icon: 'FormatListBulletedOutlined',
189171
framework: 'reactClassic',
190172
nestable: true
191173
},
@@ -196,7 +178,7 @@ const HTMLTypes: HTMLType[] = [
196178
style: {},
197179
placeHolderShort: 'list item',
198180
placeHolderLong: '',
199-
icon: ListAltOutlinedIcon,
181+
icon: 'ListAltOutlined',
200182
framework: 'reactClassic',
201183
nestable: true
202184
},
@@ -207,7 +189,7 @@ const HTMLTypes: HTMLType[] = [
207189
style: {},
208190
placeHolderShort: 'Switch',
209191
placeHolderLong: '',
210-
icon: ToggleOffOutlinedIcon,
192+
icon: 'ToggleOffOutlined',
211193
framework: 'reactClassic',
212194
nestable: true
213195
},
@@ -218,7 +200,7 @@ const HTMLTypes: HTMLType[] = [
218200
style: {},
219201
placeHolderShort: 'Route',
220202
placeHolderLong: '',
221-
icon: RouteOutlinedIcon,
203+
icon: 'RouteOutlined',
222204
framework: 'reactClassic',
223205
nestable: true
224206
},
@@ -229,7 +211,7 @@ const HTMLTypes: HTMLType[] = [
229211
style: {},
230212
placeHolderShort: 'LinkTo',
231213
placeHolderLong: '',
232-
icon: DatasetLinkedOutlinedIcon,
214+
icon: 'DatasetLinkedOutlined',
233215
framework: 'reactClassic',
234216
nestable: true
235217
},
@@ -240,7 +222,7 @@ const HTMLTypes: HTMLType[] = [
240222
style: {},
241223
placeHolderShort: 'LinkHref',
242224
placeHolderLong: '',
243-
icon: LinkIcon,
225+
icon: 'Link',
244226
framework: 'nextjs',
245227
nestable: true
246228
},
@@ -251,7 +233,7 @@ const HTMLTypes: HTMLType[] = [
251233
style: {},
252234
placeHolderShort: 'Image',
253235
placeHolderLong: '',
254-
icon: ImageIcon,
236+
icon: 'ImageIcon',
255237
framework: 'nextjs',
256238
nestable: false
257239
}

0 commit comments

Comments
 (0)