Skip to content

Commit 6f943a1

Browse files
williamdyoonxkevinpark
williamdyoon
and
xkevinpark
committed
linked mock state interface to root component; wip
Co-authored-by: Kevin Park <[email protected]>
1 parent 18302b9 commit 6f943a1

File tree

3 files changed

+531
-48
lines changed

3 files changed

+531
-48
lines changed

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

Lines changed: 388 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,388 @@
1+
// from ComponentPanel.tsx
2+
import React, {
3+
Component,
4+
useState,
5+
useContext,
6+
useEffect,
7+
useCallback
8+
} from 'react';
9+
import StateContext from '../../context/context';
10+
import Grid from '@material-ui/core/Grid';
11+
import ComponentPanelItem from './ComponentPanelItem';
12+
import ComponentPanelRoutingItem from './ComponentPanelRoutingItem';
13+
import FormControlLabel from '@material-ui/core/FormControlLabel';
14+
import Checkbox from '@material-ui/core/Checkbox';
15+
import { makeStyles, styled } from '@material-ui/core/styles';
16+
import Button from '@material-ui/core/Button';
17+
import { TextField } from '@material-ui/core';
18+
import {
19+
FormControl,
20+
FormLabel,
21+
FormHelperText,
22+
Input,
23+
InputLabel
24+
} from '@material-ui/core';
25+
26+
// type ClockState = {
27+
// name: string;
28+
// time: Date; // <-- date is a type 'Date' it just knows an actual Date (e.g. 2021-04-21T14:33:00PDT)
29+
// };
30+
31+
// export class Clock extends Component<{}, ClockState> {
32+
// componentWillMount() {
33+
// this.tick();
34+
// }
35+
// componentDidMount() {
36+
// setInterval(() => this.tick(), 30000);
37+
// }
38+
// tick() {
39+
// this.setState({
40+
// time: new Date()
41+
// });
42+
// }
43+
// render() {
44+
// return <p>current time is {this.state.time.toLocaleTimeString()}</p>;
45+
// }
46+
// }
47+
48+
// const initialState: State = {
49+
// name: '',
50+
// isLoggedIn: false,
51+
// components: [
52+
// {
53+
// id: 1,
54+
// name: 'App',
55+
// style: {},
56+
// code: '<div>Drag in a component or HTML element into the canvas!</div>',
57+
// children: [],
58+
// isPage: true,
59+
// past: [],
60+
// future: [],
61+
// },
62+
// ],
63+
// projectType: 'Classic React',
64+
// rootComponents: [1],
65+
// canvasFocus: { componentId: 1, childId: null },
66+
// nextComponentId: 2,
67+
// nextChildId: 1,
68+
// nextTopSeparatorId: 1000,
69+
// HTMLTypes,
70+
// };
71+
72+
// state/props that we are adding in the 'new component'
73+
// this is
74+
75+
const MockStateInterface = ({ isThemeLight }): JSX.Element => {
76+
const classes = useStyles();
77+
const [state, dispatch] = useContext(StateContext);
78+
const [compName, setCompName] = useState('');
79+
const [keyName, setKeyName] = useState('');
80+
const [valueName, setValueName] = useState('');
81+
const [typeName, setTypeName] = useState('');
82+
const [isRoot, setIsRoot] = useState(false);
83+
84+
// const createOption = (inputName: String) => {
85+
// let inputNameClean = inputName.replace(/\s+/g, ''); // removes spaces
86+
// const formattedName =
87+
// inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1); // capitalizes first letter
88+
// dispatch({
89+
// type: 'ADD COMPONENT',
90+
// payload: { componentName: formattedName, root: isRoot }
91+
// });
92+
// setIsRoot(false);
93+
// setCompName('');
94+
// };
95+
// const keyBindCreateComponent = useCallback(e => {
96+
// if (e.key === 'Enter') {
97+
// e.preventDefault();
98+
// document.getElementById('addComponentButton').click();
99+
// }
100+
// }, []);
101+
// useEffect(() => {
102+
// document.addEventListener('keydown', keyBindCreateComponent);
103+
// return () => {
104+
// document.removeEventListener('keydown', keyBindCreateComponent);
105+
// };
106+
// }, []);
107+
// const isFocus = (targetId: Number) => {
108+
// return state.canvasFocus.componentId === targetId ? true : false;
109+
// };
110+
111+
// state components isPage: true indicates root-ness of component
112+
113+
// we need to be able to add mockState objects into the root components
114+
// display the mockState objects of selected root component
115+
116+
// State = {
117+
// name: '',
118+
// isLoggedIn: false,
119+
// components: [
120+
// {
121+
// id: 1,
122+
// name: 'App',
123+
// style: {},
124+
// code: '<div>Drag in a component or HTML element into the canvas!</div>',
125+
// children: [],
126+
// isPage: true,
127+
// past: [],
128+
// future: [],
129+
// mockState: {} // property can be mutated; only available in parent component
130+
// }
131+
// ],
132+
// };
133+
134+
const debug = () => {
135+
console.log('state:', state);
136+
console.log('state.canvasFocus:', state.canvasFocus);
137+
const currentId = state.canvasFocus.componentId;
138+
console.log(
139+
'state.canvasFocus.components[currentId-1]:',
140+
state.components[currentId - 1]
141+
);
142+
console.log('keyName:', keyName);
143+
console.log('valueName:', valueName);
144+
console.log('typeName:', typeName);
145+
};
146+
147+
const handleKeyInput = (e: React.ChangeEvent<HTMLInputElement>) => {
148+
setKeyName(e.target.value);
149+
};
150+
const handleValueInput = (e: React.ChangeEvent<HTMLInputElement>) => {
151+
setValueName(e.target.value);
152+
};
153+
const handleTypeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
154+
setTypeName(e.target.value);
155+
};
156+
const submitMockState = () => {
157+
const currentId = state.canvasFocus.componentId;
158+
state.components[currentId - 1].mockState.props[keyName] = valueName;
159+
state.components[currentId - 1].mockState.type = typeName;
160+
161+
// mockState: {
162+
// props: {},
163+
// type: ''
164+
// }
165+
};
166+
167+
return (
168+
<div style={{ border: 3 + 'px solid red' }}>
169+
<div>
170+
<FormControl>
171+
<label>Create New State</label>
172+
{/* <TextField
173+
id="outlined-basic"
174+
label="key:"
175+
variant="outlined"
176+
value={keyName}
177+
/>
178+
<TextField
179+
id="outlined-basic"
180+
label="value:"
181+
variant="outlined"
182+
value={valueName}
183+
/>
184+
<TextField
185+
id="outlined-basic"
186+
label="type:"
187+
variant="outlined"
188+
value={typeName}
189+
/> */}
190+
<div className={classes.inputWrapper}>
191+
<input
192+
color={'primary'}
193+
className={
194+
isThemeLight
195+
? `${classes.inputField} ${classes.lightThemeFontColor}`
196+
: `${classes.inputField} ${classes.darkThemeFontColor}`
197+
}
198+
// InputProps={{ className: classes.input }}
199+
value={keyName}
200+
onChange={handleKeyInput}
201+
/>
202+
</div>
203+
<div className={classes.inputWrapper}>
204+
<input
205+
color={'primary'}
206+
className={
207+
isThemeLight
208+
? `${classes.inputField} ${classes.lightThemeFontColor}`
209+
: `${classes.inputField} ${classes.darkThemeFontColor}`
210+
}
211+
// InputProps={{ className: classes.input }}
212+
value={valueName}
213+
onChange={handleValueInput}
214+
/>
215+
</div>
216+
<div className={classes.inputWrapper}>
217+
<input
218+
color={'primary'}
219+
className={
220+
isThemeLight
221+
? `${classes.inputField} ${classes.lightThemeFontColor}`
222+
: `${classes.inputField} ${classes.darkThemeFontColor}`
223+
}
224+
// InputProps={{ className: classes.input }}
225+
value={typeName}
226+
onChange={handleTypeInput}
227+
/>
228+
</div>
229+
<div>
230+
{/* <FormControlLabel
231+
value="top"
232+
control={
233+
<Checkbox
234+
className={
235+
isThemeLight
236+
? `${classes.rootCheckBox} ${classes.lightThemeFontColor}`
237+
: `${classes.rootCheckBox} ${classes.darkThemeFontColor}`
238+
}
239+
color="primary"
240+
/>
241+
}
242+
className={
243+
isThemeLight
244+
? `${classes.rootCheckBoxLabel} ${classes.lightThemeFontColor}`
245+
: `${classes.rootCheckBoxLabel} ${classes.darkThemeFontColor}`
246+
}
247+
labelPlacement="top"
248+
/> */}
249+
</div>
250+
<MyButton type="submit" onClick={debug}>
251+
debug
252+
</MyButton>
253+
<br></br>
254+
<br></br>
255+
<MyButton type="submit" onClick={submitMockState}>
256+
create
257+
</MyButton>
258+
<br></br>
259+
<br></br>
260+
</FormControl>
261+
</div>
262+
<hr></hr>
263+
<br></br>
264+
<br></br>
265+
<div>
266+
<label>Current State</label>
267+
<br></br>
268+
<label>
269+
Name: {state.components[state.canvasFocus.componentId - 1].name}
270+
</label>
271+
</div>
272+
</div>
273+
);
274+
};
275+
276+
const useStyles = makeStyles({
277+
inputField: {
278+
marginTop: '10px',
279+
borderRadius: '5px',
280+
whiteSpace: 'nowrap',
281+
overflowX: 'hidden',
282+
textOverflow: 'ellipsis',
283+
backgroundColor: 'rgba(255,255,255,0.15)',
284+
margin: '0px 0px 0px 10px',
285+
width: '140px',
286+
height: '30px',
287+
borderColor: 'white'
288+
},
289+
inputWrapper: {
290+
textAlign: 'center',
291+
display: 'flex',
292+
flexDirection: 'column',
293+
alignItems: 'center',
294+
justifyContent: 'space-between',
295+
marginBottom: '15px'
296+
},
297+
addComponentWrapper: {
298+
padding: 'auto',
299+
marginLeft: '21px',
300+
display: 'inline-block',
301+
width: '100%'
302+
},
303+
rootCheckBox: {
304+
borderColor: '#186BB4',
305+
padding: '0px'
306+
},
307+
rootCheckBoxLabel: {
308+
borderColor: '#186BB4'
309+
},
310+
panelWrapper: {
311+
width: '100%',
312+
marginTop: '15px',
313+
display: 'flex',
314+
flexDirection: 'column',
315+
alignItems: 'center'
316+
},
317+
panelWrapperList: {
318+
minHeight: '120px',
319+
marginLeft: '-15px',
320+
marginRight: '-15px',
321+
width: '300px',
322+
display: 'flex',
323+
flexDirection: 'column',
324+
alignItems: 'center'
325+
},
326+
dragComponents: {
327+
display: 'flex',
328+
flexDirection: 'column',
329+
alignItems: 'center',
330+
textAlign: 'center',
331+
width: '500px',
332+
backgroundColor: '#186BB4',
333+
border: '5px solid #186BB4'
334+
},
335+
panelSubheader: {
336+
textAlign: 'center',
337+
color: '#fff'
338+
},
339+
input: {},
340+
newComponent: {
341+
color: '#155084',
342+
fontSize: '95%',
343+
marginBottom: '20px'
344+
},
345+
inputLabel: {
346+
fontSize: '1em',
347+
marginLeft: '10px'
348+
},
349+
btnGroup: {
350+
display: 'flex',
351+
flexDirection: 'column'
352+
},
353+
addComponentButton: {
354+
backgroundColor: 'transparent',
355+
height: '40px',
356+
width: '100px',
357+
fontFamily: '"Raleway", sans-serif',
358+
fontSize: '90%',
359+
textAlign: 'center',
360+
margin: '-20px 0px 5px 150px',
361+
borderStyle: 'none',
362+
transition: '0.3s',
363+
borderRadius: '25px'
364+
},
365+
rootToggle: {
366+
color: '#696969',
367+
fontSize: '0.85rem'
368+
},
369+
lightThemeFontColor: {
370+
color: '#186BB4'
371+
},
372+
darkThemeFontColor: {
373+
color: '#fff'
374+
}
375+
});
376+
377+
const MyButton = styled(Button)({
378+
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
379+
border: 0,
380+
borderRadius: 3,
381+
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
382+
color: 'white',
383+
height: 24,
384+
width: 40,
385+
padding: '0 30px'
386+
});
387+
388+
export default MockStateInterface;

0 commit comments

Comments
 (0)