Skip to content

Commit 22c66be

Browse files
buddhajjigaebuddhajjigae
authored
Merge pull request #8 from xkevinpark/feat/mock-state
Added state props panel and tab options for right container
2 parents a499bbc + 06c3a8e commit 22c66be

File tree

7 files changed

+631
-126
lines changed

7 files changed

+631
-126
lines changed

‎app/src/components/right/StatePropsPanel.tsx

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
// CARET
2+
import React, {
3+
Component,
4+
useState,
5+
useContext,
6+
useEffect,
7+
useCallback
8+
} from 'react';
9+
import {
10+
createStyles,
11+
makeStyles,
12+
styled,
13+
Theme
14+
} from '@material-ui/core/styles';
15+
import Button from '@material-ui/core/Button';
16+
import {
17+
Checkbox,
18+
FormControl,
19+
FormControlLabel,
20+
FormHelperText,
21+
FormLabel,
22+
Grid,
23+
MenuItem,
24+
Input,
25+
InputLabel,
26+
Select,
27+
TextField
28+
} from '@material-ui/core';
29+
30+
import StateContext from '../../context/context';
31+
import ComponentPanelItem from './ComponentPanelItem';
32+
import ComponentPanelRoutingItem from './ComponentPanelRoutingItem';
33+
34+
const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
35+
const classes = useStyles();
36+
const [state, dispatch] = useContext(StateContext);
37+
const [compName, setCompName] = useState('');
38+
const [newStateProp, setNewStateProp] = useState({});
39+
const [isRoot, setIsRoot] = useState(false);
40+
41+
const debug = () => {
42+
console.log('state:', state);
43+
console.log('state.canvasFocus:', state.canvasFocus);
44+
const currentId = state.canvasFocus.componentId;
45+
console.log(
46+
'state.canvasFocus.components[currentId-1]:',
47+
state.components[currentId - 1]
48+
);
49+
console.log('key', document.getElementById('textfield-key').value);
50+
console.log('value', document.getElementById('textfield-value').value);
51+
console.log(document.getElementById('type-input').innerHTML);
52+
console.log('newStateProp:', newStateProp);
53+
};
54+
55+
const submitNewState = () => {
56+
// currently focused component's id
57+
const currentId = state.canvasFocus.componentId;
58+
59+
// current component
60+
const currentComponent = state.components[currentId - 1];
61+
// grab user inputs for key, value, type
62+
const key = document.getElementById('textfield-key').value;
63+
const value = document.getElementById('textfield-value').value;
64+
const type = document.getElementById('type-input').innerHTML;
65+
66+
// FOR CONSIDERING USER INPUT DATA VISUALIZATION:
67+
// case 1: [{ name: 'John Doe'}, {age: 99}, {alive: true}]
68+
// case 2: [{ key: 'name', value: 'John Doe', type: 'string'}, {key: 'age', value: 99, type: 'number'}, {key: 'alive', value: true, type: 'boolean'}]
69+
70+
// store key, value, type in newStateProp obj
71+
newStateProp.key = key;
72+
newStateProp.value = value;
73+
newStateProp.type = type;
74+
75+
setNewStateProp(newStateProp);
76+
// store this newStateProp obj to our Component's stateProps array
77+
currentComponent.stateProps.push(newStateProp);
78+
// set newStateProp to empty for any new state prop entries
79+
setNewStateProp({});
80+
console.log('currentComponent.stateProps:', currentComponent.stateProps);
81+
};
82+
83+
return (
84+
<div style={{ border: `${3}px solid red` }}>
85+
<div>
86+
<FormControl>
87+
<label>Create New State</label>
88+
<br />
89+
<br />
90+
<TextField id="textfield-key" label="key:" variant="outlined" />
91+
<TextField id="textfield-value" label="value:" variant="outlined" />
92+
<FormControl required className={classes.formControl}>
93+
<InputLabel id="select-required-label">Type</InputLabel>
94+
<Select
95+
labelId="select-required-label"
96+
id="type-input"
97+
className={classes.selectEmpty}
98+
>
99+
<MenuItem value="">
100+
<em>Types</em>
101+
</MenuItem>
102+
<MenuItem id="type-selector" value={`string`}>
103+
String
104+
</MenuItem>
105+
<MenuItem id="type-selector" value={`number`}>
106+
Number
107+
</MenuItem>
108+
<MenuItem id="type-selector" value={`boolean`}>
109+
Boolean
110+
</MenuItem>
111+
<MenuItem id="type-selector" value={`array`}>
112+
Array
113+
</MenuItem>
114+
<MenuItem id="type-selector" value={`undefined`}>
115+
Undefined
116+
</MenuItem>
117+
<MenuItem id="type-selector" value={`any`}>
118+
Any
119+
</MenuItem>
120+
</Select>
121+
<FormHelperText>Required</FormHelperText>
122+
</FormControl>
123+
<MyButton type="submit" onClick={debug}>
124+
debug
125+
</MyButton>
126+
<br></br>
127+
<br></br>
128+
<MyButton type="submit" onClick={submitNewState}>
129+
create
130+
</MyButton>
131+
<br></br>
132+
<br></br>
133+
</FormControl>
134+
</div>
135+
<hr></hr>
136+
<br></br>
137+
<br></br>
138+
<div>
139+
<label>Current State</label>
140+
<br></br>
141+
<label>
142+
Name: {state.components[state.canvasFocus.componentId - 1].name}
143+
</label>
144+
</div>
145+
</div>
146+
);
147+
};
148+
149+
const useStyles = makeStyles((theme: Theme) => {
150+
return createStyles({
151+
inputField: {
152+
marginTop: '10px',
153+
borderRadius: '5px',
154+
whiteSpace: 'nowrap',
155+
overflowX: 'hidden',
156+
textOverflow: 'ellipsis',
157+
backgroundColor: 'rgba(255,255,255,0.15)',
158+
margin: '0px 0px 0px 10px',
159+
width: '140px',
160+
height: '30px',
161+
borderColor: 'white'
162+
},
163+
inputWrapper: {
164+
textAlign: 'center',
165+
display: 'flex',
166+
flexDirection: 'column',
167+
alignItems: 'center',
168+
justifyContent: 'space-between',
169+
marginBottom: '15px'
170+
},
171+
addComponentWrapper: {
172+
padding: 'auto',
173+
marginLeft: '21px',
174+
display: 'inline-block',
175+
width: '100%'
176+
},
177+
rootCheckBox: {
178+
borderColor: '#186BB4',
179+
padding: '0px'
180+
},
181+
rootCheckBoxLabel: {
182+
borderColor: '#186BB4'
183+
},
184+
panelWrapper: {
185+
width: '100%',
186+
marginTop: '15px',
187+
display: 'flex',
188+
flexDirection: 'column',
189+
alignItems: 'center'
190+
},
191+
panelWrapperList: {
192+
minHeight: '120px',
193+
marginLeft: '-15px',
194+
marginRight: '-15px',
195+
width: '300px',
196+
display: 'flex',
197+
flexDirection: 'column',
198+
alignItems: 'center'
199+
},
200+
dragComponents: {
201+
display: 'flex',
202+
flexDirection: 'column',
203+
alignItems: 'center',
204+
textAlign: 'center',
205+
width: '500px',
206+
backgroundColor: '#186BB4',
207+
border: '5px solid #186BB4'
208+
},
209+
panelSubheader: {
210+
textAlign: 'center',
211+
color: '#fff'
212+
},
213+
input: {},
214+
newComponent: {
215+
color: '#155084',
216+
fontSize: '95%',
217+
marginBottom: '20px'
218+
},
219+
inputLabel: {
220+
fontSize: '1em',
221+
marginLeft: '10px'
222+
},
223+
btnGroup: {
224+
display: 'flex',
225+
flexDirection: 'column'
226+
},
227+
addComponentButton: {
228+
backgroundColor: 'transparent',
229+
height: '40px',
230+
width: '100px',
231+
fontFamily: '"Raleway", sans-serif',
232+
fontSize: '90%',
233+
textAlign: 'center',
234+
margin: '-20px 0px 5px 150px',
235+
borderStyle: 'none',
236+
transition: '0.3s',
237+
borderRadius: '25px'
238+
},
239+
rootToggle: {
240+
color: '#696969',
241+
fontSize: '0.85rem'
242+
},
243+
lightThemeFontColor: {
244+
color: '#186BB4'
245+
},
246+
darkThemeFontColor: {
247+
color: '#fff'
248+
},
249+
// CARET
250+
formControl: {
251+
margin: theme.spacing(1),
252+
minWidth: 120
253+
},
254+
selectEmpty: {
255+
marginTop: theme.spacing(2)
256+
}
257+
});
258+
});
259+
260+
const MyButton = styled(Button)({
261+
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
262+
border: 0,
263+
borderRadius: 3,
264+
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
265+
color: 'white',
266+
height: 24,
267+
width: 40,
268+
padding: '0 30px'
269+
});
270+
271+
export default StatePropsPanel;

‎app/src/components/right/TabPanel.tsx

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React, { ReactNode, useState } from 'react';
2+
3+
import { makeStyles, Theme } from '@material-ui/core/styles';
4+
import AppBar from '@material-ui/core/AppBar';
5+
import Tabs from '@material-ui/core/Tabs';
6+
import Tab from '@material-ui/core/Tab';
7+
import Typography from '@material-ui/core/Typography';
8+
import Box from '@material-ui/core/Box';
9+
10+
import StatePropsPanel from './StatePropsPanel';
11+
import ComponentPanel from './ComponentPanel';
12+
13+
interface TabPanelProps {
14+
children?: ReactNode;
15+
index: any;
16+
value: any;
17+
}
18+
19+
const TabPanelItem = (props: TabPanelProps) => {
20+
const { children, index, value, ...other } = props;
21+
return (
22+
<div
23+
role="tabpanel"
24+
hidden={value !== index}
25+
id={`nav-tabpanel-${index}`}
26+
aria-labelledby={`nav-tab-${index}`}
27+
{...other}
28+
>
29+
{value === index && (
30+
<Box p={0}>
31+
<Typography>{children}</Typography>
32+
</Box>
33+
)}
34+
</div>
35+
);
36+
};
37+
38+
const a11yProps = (index: any) => {
39+
return {
40+
id: `nav-tab-${index}`,
41+
'aria-controls': `nav-tabpanel-${index}`
42+
};
43+
};
44+
45+
interface LinkTabProps {
46+
label?: string;
47+
href?: string;
48+
}
49+
50+
const LinkTab = (props: LinkTabProps) => {
51+
return (
52+
<Tab
53+
component="a"
54+
onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
55+
event.preventDefault();
56+
}}
57+
{...props}
58+
/>
59+
);
60+
};
61+
62+
const useStyles = makeStyles((theme: Theme) => ({
63+
root: {
64+
flexGrow: 1,
65+
backgroundColor: theme.palette.background.paper
66+
}
67+
}));
68+
69+
const TabPanel = () => {
70+
const classes = useStyles();
71+
const [value, setValue] = useState(0);
72+
73+
const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
74+
setValue(newValue);
75+
};
76+
77+
return (
78+
<div className={classes.root}>
79+
<AppBar position="static">
80+
<Tabs
81+
variant="fullWidth"
82+
value={value}
83+
onChange={handleChange}
84+
aria-label="nav tabs example"
85+
>
86+
<LinkTab label="default" {...a11yProps(0)} />
87+
<LinkTab label="create new state" {...a11yProps(1)} />
88+
</Tabs>
89+
</AppBar>
90+
<TabPanelItem value={value} index={0}>
91+
{/* <ComponentPanel/> */}
92+
</TabPanelItem>
93+
<TabPanelItem value={value} index={1}>
94+
<StatePropsPanel />
95+
</TabPanelItem>
96+
</div>
97+
);
98+
};
99+
100+
export default TabPanel;

0 commit comments

Comments
 (0)