Skip to content

Commit 1244e09

Browse files
ibeeliotibeeliot
authored
Merge pull request #6 from jzuniga206/feature
Added Toggle for Component State and Func/Class Functionality
2 parents 6538460 + 25e7cd7 commit 1244e09

File tree

2 files changed

+187
-131
lines changed

2 files changed

+187
-131
lines changed

‎src/components/LeftColExpansionPanel.tsx

Lines changed: 104 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
1-
import React, { Fragment } from "react";
2-
import { withStyles } from "@material-ui/core/styles";
3-
import Typography from "@material-ui/core/Typography";
4-
import List from "@material-ui/core/List";
5-
import ListItem from "@material-ui/core/ListItem";
6-
import ListItemText from "@material-ui/core/ListItemText";
7-
import IconButton from "@material-ui/core/IconButton";
8-
import Grid from "@material-ui/core/Grid";
9-
import AddIcon from "@material-ui/icons/Add";
10-
import DeleteIcon from "@material-ui/icons/Delete";
11-
import Button from "@material-ui/core/Button";
12-
import Tooltip from "@material-ui/core/Tooltip";
13-
import { ComponentInt, ComponentsInt, ChildInt } from "../utils/Interfaces.ts";
1+
import React, { Fragment } from 'react';
2+
import { withStyles } from '@material-ui/core/styles';
3+
import Typography from '@material-ui/core/Typography';
4+
import List from '@material-ui/core/List';
5+
import ListItem from '@material-ui/core/ListItem';
6+
import ListItemText from '@material-ui/core/ListItemText';
7+
import IconButton from '@material-ui/core/IconButton';
8+
import Grid from '@material-ui/core/Grid';
9+
import AddIcon from '@material-ui/icons/Add';
10+
import DeleteIcon from '@material-ui/icons/Delete';
11+
import Button from '@material-ui/core/Button';
12+
import Tooltip from '@material-ui/core/Tooltip';
13+
import Switch from '@material-ui/core/Switch'; // for state toggling
14+
import InputLabel from '@material-ui/core/InputLabel'; // labeling of state/class toggles
15+
import Select from '@material-ui/core/Select'; // for Class/Functional drop down
16+
import MenuItem from '@material-ui/core/MenuItem'; // for drop down item selections
17+
18+
// import { ComponentInt, ComponentsInt, ChildInt } from '../utils/Interfaces'; // unused
1419

1520
const LeftColExpansionPanel = (props: any) => {
1621
const {
@@ -26,29 +31,29 @@ const LeftColExpansionPanel = (props: any) => {
2631
const { title, id, color } = component;
2732

2833
function isFocused() {
29-
return focusComponent.id === id ? "focused" : "";
34+
return focusComponent.id === id ? 'focused' : '';
3035
}
3136

3237
return (
3338
<Grid
3439
container
3540
spacing={16}
36-
direction="row"
37-
justify="flex-start"
38-
alignItems="center"
41+
direction='row'
42+
justify='flex-start'
43+
alignItems='center'
3944
>
4045
<Grid item xs={9}>
4146
<div
4247
className={classes.root}
4348
style={
44-
!isFocused() ? {} : { boxShadow: "0 10px 10px rgba(0,0,0,0.25)" }
49+
!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.25)' }
4550
}
4651
>
47-
<Grid item xs={12} style={{ color: "red" }}>
48-
<List style={{ color: "red" }}>
52+
<Grid item xs={12} style={{ color: 'red' }}>
53+
<List style={{ color: 'red' }}>
4954
<ListItem
5055
button
51-
style={{ color: "red" }}
56+
style={{ color: 'red' }}
5257
onClick={() => {
5358
changeFocusComponent({ title });
5459
}}
@@ -57,9 +62,63 @@ const LeftColExpansionPanel = (props: any) => {
5762
disableTypography
5863
className={classes.light}
5964
primary={
60-
<Typography type="body2" style={{ color }}>
61-
{title}
62-
</Typography>
65+
<div>
66+
<Typography type='body2' style={{ color }}>
67+
{title}
68+
</Typography>
69+
<InputLabel
70+
htmlFor='stateful'
71+
style={{
72+
color: '#fff',
73+
marginBottom: '10px',
74+
marginTop: '0px',
75+
marginLeft: '11px',
76+
padding: '0px',
77+
fontSize: '18px'
78+
}}
79+
>
80+
State?
81+
</InputLabel>
82+
<Switch
83+
// checked={stateful}
84+
// onChange={e => ONCHANGE FUNCTION PENDING ON STATE REDUCER
85+
// updateComponent(id, { stateful: e.target.checked })
86+
// }
87+
value='stateful'
88+
color='primary'
89+
id='stateful'
90+
/>
91+
<div>
92+
<InputLabel
93+
id='label'
94+
style={{
95+
color: '#fff',
96+
marginBottom: '10px',
97+
marginTop: '0px',
98+
marginLeft: '11px',
99+
padding: '0px',
100+
fontSize: '18px'
101+
}}
102+
>
103+
Component Type
104+
</InputLabel>
105+
<Select
106+
id='select'
107+
value='class'
108+
style={{
109+
color: '#fff',
110+
marginBottom: '10px',
111+
marginTop: '0px',
112+
marginLeft: '11px',
113+
padding: '0px',
114+
fontSize: '18px'
115+
}}
116+
>
117+
<MenuItem value='class'>Class</MenuItem>
118+
<MenuItem value='functional'>Functional</MenuItem>
119+
</Select>
120+
</div>
121+
</div>
63122
}
64123
style={{ color }}
65124
/>
@@ -71,10 +130,10 @@ const LeftColExpansionPanel = (props: any) => {
71130
) : (
72131
<Fragment>
73132
<Button
74-
variant="text"
75-
size="small"
76-
color="default"
77-
aria-label="Delete"
133+
variant='text'
134+
size='small'
135+
color='default'
136+
aria-label='Delete'
78137
className={classes.margin}
79138
onClick={() =>
80139
deleteComponent({
@@ -83,14 +142,14 @@ const LeftColExpansionPanel = (props: any) => {
83142
})
84143
}
85144
style={{
86-
color: "#D3D3D3",
87-
marginBottom: "10px",
88-
marginTop: "0px",
89-
marginLeft: "11px",
90-
padding: "0px"
145+
color: '#D3D3D3',
146+
marginBottom: '10px',
147+
marginTop: '0px',
148+
marginLeft: '11px',
149+
padding: '0px'
91150
}}
92151
>
93-
<DeleteIcon style={{ color: "#D3D3D3" }} />
152+
<DeleteIcon style={{ color: '#D3D3D3' }} />
94153
Delete Component
95154
</Button>
96155
</Fragment>
@@ -103,17 +162,17 @@ const LeftColExpansionPanel = (props: any) => {
103162
<div />
104163
) : (
105164
<Tooltip
106-
title="add as child"
107-
aria-label="add as child"
108-
placement="left"
165+
title='add as child'
166+
aria-label='add as child'
167+
placement='left'
109168
>
110169
<IconButton
111-
aria-label="Add"
170+
aria-label='Add'
112171
onClick={() => {
113-
addChild({ title, childType: "COMP" });
172+
addChild({ title, childType: 'COMP' });
114173
}}
115174
>
116-
<AddIcon style={{ color, float: "right" }} />
175+
<AddIcon style={{ color, float: 'right' }} />
117176
</IconButton>
118177
</Tooltip>
119178
)}
@@ -125,14 +184,14 @@ const LeftColExpansionPanel = (props: any) => {
125184
function styles(): any {
126185
return {
127186
root: {
128-
width: "100%",
187+
width: '100%',
129188
marginTop: 10,
130-
backgroundColor: "#333333"
189+
backgroundColor: '#333333'
131190
},
132191
light: {
133-
color: "#eee",
134-
"&:hover": {
135-
color: "#1de9b6"
192+
color: '#eee',
193+
'&:hover': {
194+
color: '#1de9b6'
136195
}
137196
}
138197
};

0 commit comments

Comments
 (0)