Skip to content

Commit be1ed6c

Browse files
jujuprojujupro
committed
render mui icons based on a given string name
1 parent a540bcd commit be1ed6c

File tree

4 files changed

+52
-49
lines changed

4 files changed

+52
-49
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: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
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';
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';
1818

1919
import { HTMLType } from '../interfaces/Interfaces';
2020

@@ -28,7 +28,7 @@ const HTMLTypes: HTMLType[] = [
2828
style: {},
2929
placeHolderShort: 'div',
3030
placeHolderLong: '',
31-
icon: CodeIcon,
31+
icon: 'Code',
3232
framework: 'reactClassic',
3333
nestable: true
3434
},
@@ -52,7 +52,7 @@ const HTMLTypes: HTMLType[] = [
5252
style: {},
5353
placeHolderShort: 'link',
5454
placeHolderLong: '',
55-
icon: LinkIcon,
55+
icon: 'Link',
5656
framework: 'reactClassic',
5757
nestable: false
5858
},
@@ -63,7 +63,7 @@ const HTMLTypes: HTMLType[] = [
6363
style: {},
6464
placeHolderShort: 'header 1',
6565
placeHolderLong: '',
66-
icon: HeaderIcon,
66+
icon: 'TextFormat',
6767
framework: 'reactClassic',
6868
nestable: false
6969
},
@@ -74,7 +74,7 @@ const HTMLTypes: HTMLType[] = [
7474
style: {},
7575
placeHolderShort: 'header 2',
7676
placeHolderLong: '',
77-
icon: HeaderIcon,
77+
icon: 'TextFormat',
7878
framework: 'reactClassic',
7979
nestable: false
8080
},
@@ -85,7 +85,7 @@ const HTMLTypes: HTMLType[] = [
8585
style: {},
8686
placeHolderShort: 'span',
8787
placeHolderLong: '',
88-
icon: ShortTextOutlinedIcon,
88+
icon: 'ShortTextOutlined',
8989
framework: 'reactClassic',
9090
nestable: false
9191
},
@@ -96,7 +96,7 @@ const HTMLTypes: HTMLType[] = [
9696
style: {},
9797
placeHolderShort: 'paragraph',
9898
placeHolderLong: '',
99-
icon: NotesOutlinedIcon,
99+
icon: 'NotesOutlined',
100100
framework: 'reactClassic',
101101
nestable: false
102102
},
@@ -107,7 +107,7 @@ const HTMLTypes: HTMLType[] = [
107107
style: {},
108108
placeHolderShort: 'form',
109109
placeHolderLong: '',
110-
icon: FormIcon,
110+
icon: 'Description',
111111
framework: 'reactClassic',
112112
nestable: true
113113
},
@@ -118,7 +118,7 @@ const HTMLTypes: HTMLType[] = [
118118
style: {},
119119
placeHolderShort: 'input',
120120
placeHolderLong: '',
121-
icon: EditOutlinedIcon,
121+
icon: 'EditOutlined',
122122
framework: 'reactClassic',
123123
nestable: false
124124
},
@@ -129,7 +129,7 @@ const HTMLTypes: HTMLType[] = [
129129
style: {},
130130
placeHolderShort: 'button',
131131
placeHolderLong: '',
132-
icon: ButtonIcon,
132+
icon: 'EditAttributes',
133133
framework: 'reactClassic',
134134
nestable: false
135135
},
@@ -141,7 +141,7 @@ const HTMLTypes: HTMLType[] = [
141141
style: {},
142142
placeHolderShort: 'image',
143143
placeHolderLong: '',
144-
icon: ImageIcon,
144+
icon: 'Image',
145145
framework: 'reactClassic',
146146
nestable: false
147147
},
@@ -152,7 +152,7 @@ const HTMLTypes: HTMLType[] = [
152152
style: {},
153153
placeHolderShort: 'label',
154154
placeHolderLong: '',
155-
icon: MoreOutlinedIcon,
155+
icon: 'MoreOutlined',
156156
framework: 'reactClassic',
157157
nestable: false
158158
},
@@ -163,7 +163,7 @@ const HTMLTypes: HTMLType[] = [
163163
style: {},
164164
placeHolderShort: 'menu',
165165
placeHolderLong: '',
166-
icon: FeaturedPlayListOutlinedIcon,
166+
icon: 'FeaturedPlayListOutlined',
167167
framework: 'reactClassic',
168168
nestable: true
169169
},
@@ -174,7 +174,7 @@ const HTMLTypes: HTMLType[] = [
174174
style: {},
175175
placeHolderShort: 'ordered list',
176176
placeHolderLong: '',
177-
icon: FormatListNumberedOutlinedIcon,
177+
icon: 'FormatListNumberedOutlined',
178178
framework: 'reactClassic',
179179
nestable: true
180180
},
@@ -185,7 +185,7 @@ const HTMLTypes: HTMLType[] = [
185185
style: {},
186186
placeHolderShort: 'unordered list',
187187
placeHolderLong: '',
188-
icon: FormatListBulletedOutlinedIcon,
188+
icon: 'FormatListBulletedOutlined',
189189
framework: 'reactClassic',
190190
nestable: true
191191
},
@@ -196,7 +196,7 @@ const HTMLTypes: HTMLType[] = [
196196
style: {},
197197
placeHolderShort: 'list item',
198198
placeHolderLong: '',
199-
icon: ListAltOutlinedIcon,
199+
icon: 'ListAltOutlined',
200200
framework: 'reactClassic',
201201
nestable: true
202202
},
@@ -207,7 +207,7 @@ const HTMLTypes: HTMLType[] = [
207207
style: {},
208208
placeHolderShort: 'Switch',
209209
placeHolderLong: '',
210-
icon: ToggleOffOutlinedIcon,
210+
icon: 'ToggleOffOutlined',
211211
framework: 'reactClassic',
212212
nestable: true
213213
},
@@ -218,7 +218,7 @@ const HTMLTypes: HTMLType[] = [
218218
style: {},
219219
placeHolderShort: 'Route',
220220
placeHolderLong: '',
221-
icon: RouteOutlinedIcon,
221+
icon: 'RouteOutlined',
222222
framework: 'reactClassic',
223223
nestable: true
224224
},
@@ -229,7 +229,7 @@ const HTMLTypes: HTMLType[] = [
229229
style: {},
230230
placeHolderShort: 'LinkTo',
231231
placeHolderLong: '',
232-
icon: DatasetLinkedOutlinedIcon,
232+
icon: 'DatasetLinkedOutlined',
233233
framework: 'reactClassic',
234234
nestable: true
235235
},
@@ -240,7 +240,7 @@ const HTMLTypes: HTMLType[] = [
240240
style: {},
241241
placeHolderShort: 'LinkHref',
242242
placeHolderLong: '',
243-
icon: LinkIcon,
243+
icon: 'Link',
244244
framework: 'nextjs',
245245
nestable: true
246246
},
@@ -251,7 +251,7 @@ const HTMLTypes: HTMLType[] = [
251251
style: {},
252252
placeHolderShort: 'Image',
253253
placeHolderLong: '',
254-
icon: ImageIcon,
254+
icon: 'ImageIcon',
255255
framework: 'nextjs',
256256
nestable: false
257257
}

0 commit comments

Comments
 (0)