Skip to content

Commit b5e6ea6

Browse files
fredosaucefredosauce
committed
updated left panel functionality
1 parent 5aa3ae5 commit b5e6ea6

File tree

6 files changed

+396
-29
lines changed

6 files changed

+396
-29
lines changed

‎src/components/left/ComponentPanelItemNew.tsx

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,17 @@ import Grid from '@material-ui/core/Grid';
44
import { useDrag } from 'react-dnd';
55
import { ItemTypes } from '../../constants/ItemTypes';
66

7-
const ComponentPanelItem = (): JSX.Element => {
7+
const ComponentPanelItem: React.FC<{name: String, id: Number, root: Boolean, focusClick: any}> = ({name, id, root, focusClick}) => {
88
// useDrag hook allows components in left panel to be drag source
99
const [{ isDragging }, drag] = useDrag({
1010
item: {
1111
type: ItemTypes.INSTANCE,
12-
newInstance: true
13-
// category,
12+
newInstance: true,
13+
category: 'Component',
14+
name,
15+
id
1416
},
17+
canDrag: !root,
1518
collect: (monitor: any) => ({
1619
isDragging: !!monitor.isDragging()
1720
})
@@ -20,18 +23,23 @@ const ComponentPanelItem = (): JSX.Element => {
2023
<Grid
2124
item
2225
ref={drag}
23-
xs={12}
26+
xs={8}
2427
style={{
2528
color: 'white',
2629
// this is experimental for version: BLADERUNNER THEME
27-
backgroundColor: 'none',
28-
borderRadius: '10px',
30+
backgroundColor: 'transparent',
2931
// minWidth: '340px',
30-
minHeight: '100px',
31-
border: '2px solid white'
32+
height: '80px',
33+
marginBottom: '15px',
34+
border: root ? '2px dotted rgba(255,255,255, 0.45)' : '2px solid rgba(255,255,255, 1)',
35+
borderRadius: root ? '' : '8px',
3236
}}
3337
>
34-
Component Panel
38+
39+
<div className="compPanelItem" onClick={focusClick}>
40+
<h3>{id} {name}</h3>
41+
</div>
42+
3543
</Grid>
3644
);
3745
};

‎src/components/left/ComponentPanelNew.tsx

Lines changed: 233 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,241 @@
1-
import React from 'react';
2-
1+
import React, { useState } from 'react';
2+
import ImageIcon from '@material-ui/icons/Image';
3+
import ParagraphIcon from '@material-ui/icons/LocalParking';
4+
import FormIcon from '@material-ui/icons/Description';
35
import Grid from '@material-ui/core/Grid';
4-
56
import ComponentPanelItem from './ComponentPanelItemNew';
7+
import { useDrag } from 'react-dnd';
8+
import TextField from '@material-ui/core/TextField';
9+
import Button from '@material-ui/core/Button';
10+
import FormControlLabel from '@material-ui/core/FormControlLabel';
11+
import Switch from '@material-ui/core/Switch';
12+
import { dialog } from 'electron';
13+
14+
import { makeStyles } from '@material-ui/core/styles';
15+
16+
const useStyles = makeStyles({
17+
inputField: {
18+
marginRight: '10px',
19+
borderColor: 'white'
20+
},
21+
inputWrapper: {
22+
height: '120px',
23+
textAlign: 'center',
24+
display: 'flex',
25+
justifyContent: 'space-evenly',
26+
},
27+
panelWrapper: {
28+
marginTop: '35px',
29+
width: '100%',
30+
},
31+
panelWrapperList: {
32+
height: '850px',
33+
overflowY: 'scroll',
34+
},
35+
input: {
36+
color: '#fff',
37+
marginBottom: '10px',
38+
borderRadius: '5px',
39+
paddingLeft: '15px',
40+
paddingTop: '5px',
41+
paddingBottom: '5px',
42+
paddingRight: '10px',
43+
whiteSpace: 'nowrap',
44+
overflowX: 'hidden',
45+
textOverflow: 'ellipsis',
46+
border: '1px solid #33eb91'
47+
},
48+
inputLabel: {
49+
fontSize: '14px',
50+
zIndex: '20',
51+
color: '#fff',
52+
marginTop: '-10px'
53+
},
54+
btnGroup: {
55+
display: 'flex',
56+
flexDirection: 'column'
57+
},
58+
button: {
59+
fontSize: '1rem'
60+
},
61+
rootToggle: {
62+
color: '#01d46d',
63+
fontSize: '0.85rem'
64+
},
65+
compPanelItem: {
66+
'&:hover': {
67+
cursor: 'pointer',
68+
backgroundColor: 'red'
69+
}
70+
}
71+
})
72+
73+
const initialState: any = {
74+
components: [
75+
{
76+
id: 1,
77+
name: 'index',
78+
style: {},
79+
nextChildId: 1,
80+
children: []
81+
},
82+
{
83+
id: 2,
84+
name: 'Article',
85+
style: {},
86+
nextChildId: 1,
87+
children: []
88+
},
89+
{
90+
id: 3,
91+
name: 'Section',
92+
style: {},
93+
nextChildId: 1,
94+
children: []
95+
}
96+
],
97+
rootComponents: [1],
98+
canvasFocus: { componentId: 1, childId: null },
99+
nextComponentId: 4
100+
};
6101

7102
const ComponentPanel = (): JSX.Element => {
103+
const classes = useStyles();
104+
105+
//state hooks for inputted component name, component id and array of components
106+
const [errorStatus, setErrorStatus] = useState(false);
107+
const [errorMsg, setErrorMsg] = useState('');
108+
const [compName, setCompName] = useState('');
109+
const [isRoot, setIsRoot] = useState(false);
110+
111+
const [appState, setAppState] = useState(initialState);
112+
113+
const triggerError = (type: String) => {
114+
setErrorStatus(true);
115+
if(type === 'empty') {
116+
setErrorMsg('Component name cannot be blank.');
117+
} else if (type === 'dupe') {
118+
setErrorMsg('Component name already exists.');
119+
}
120+
}
121+
122+
const resetError = () => {
123+
setErrorStatus(false);
124+
}
125+
126+
const handleNameInput = (e: React.ChangeEvent<HTMLInputElement>) => {
127+
resetError();
128+
console.log(e.target.value);
129+
setCompName(e.target.value);
130+
}
131+
132+
const checkNameDupe = (inputName: String) => {
133+
let checkList = appState.components.slice();
134+
// checks to see if inputted comp name already exists
135+
let dupe = false;
136+
checkList.forEach(comp => {
137+
if(comp.name.toLowerCase() === inputName.toLowerCase()) {
138+
dupe = true;
139+
}
140+
});
141+
return dupe;
142+
}
143+
const toggleRootStatus = (e: React.ChangeEvent<HTMLInputElement>) => {
144+
setIsRoot( isRoot ? false : true);
145+
}
146+
147+
const createOption = (inputName: String) => {
148+
// create deep clone of state
149+
let stateCopy = JSON.parse(JSON.stringify(appState));
150+
// create temporary component object,
151+
// assigning id to nextComponentId
152+
let tmpOption = {
153+
id: stateCopy.nextComponentId,
154+
name: inputName.charAt(0).toUpperCase() + inputName.slice(1),
155+
style: {},
156+
nextChildId: 1,
157+
children: []
158+
}
159+
stateCopy.components.push(tmpOption);
160+
// check if root option is toggled, pushing id to rootComponents if so
161+
if (isRoot) {
162+
stateCopy.rootComponents.push(stateCopy.nextComponentId);
163+
// reset toggle
164+
setIsRoot(false);
165+
}
166+
//increment nextComponentId;
167+
stateCopy.nextComponentId++;
168+
// reset name field
169+
setCompName('');
170+
setAppState(stateCopy);
171+
}
172+
173+
const handleNameSubmit = () => {
174+
if (compName.trim() === '') {
175+
//window.alert('Please specify a name for your component');
176+
triggerError('empty');
177+
return;
178+
} else if (checkNameDupe(compName)) {
179+
triggerError('dupe');
180+
return;
181+
}
182+
createOption(compName);
183+
resetError();
184+
}
185+
186+
const reportFocus = (targetId: Number) => {
187+
const focusTarget = appState.components.filter(comp => {
188+
return comp.id === targetId;
189+
});
190+
console.log('FOCUSING ON COMPONENT: ');
191+
console.log(focusTarget[0]);
192+
}
193+
8194
return (
9-
<Grid
10-
container
11-
direction="row"
12-
justify="center"
13-
alignItems="center"
14-
style={{
15-
minWidth: '470px',
16-
padding: '20px'
17-
}}
18-
>
19-
<ComponentPanelItem />
20-
<ComponentPanelItem />
21-
<ComponentPanelItem />
22-
</Grid>
23-
// </div>
195+
<div className={classes.panelWrapper}>
196+
<div className={classes.inputWrapper}>
197+
<TextField
198+
color={'primary'}
199+
label="COMPONENT NAME"
200+
variant="outlined"
201+
className={classes.inputField}
202+
InputProps={{className: classes.input}}
203+
InputLabelProps={{className: classes.inputLabel}}
204+
value={compName}
205+
error={errorStatus}
206+
helperText={errorStatus ? errorMsg : ''}
207+
onChange={handleNameInput}/>
208+
<div className={classes.btnGroup}>
209+
<Button className={classes.button} color="primary" onClick={handleNameSubmit}>CREATE</Button>
210+
<FormControlLabel
211+
control={<Switch checked={isRoot} onChange={toggleRootStatus} color="primary"/>}
212+
className={classes.rootToggle}
213+
label="ROOT"
214+
/>
215+
</div>
216+
</div >
217+
<div className={classes.panelWrapperList}>
218+
<Grid
219+
container
220+
direction="row"
221+
justify="center"
222+
alignItems="center"
223+
>
224+
{appState.components.map(comp => (
225+
226+
<ComponentPanelItem
227+
className={classes.compPanelItem}
228+
key={`comp-${comp.id}`}
229+
name={comp.name}
230+
id={comp.id}
231+
root={appState.rootComponents.includes(comp.id)}
232+
focusClick={()=> reportFocus(comp.id)}
233+
/>
234+
235+
))}
236+
</Grid>
237+
</div>
238+
</div>
24239
);
25240
}
26241

0 commit comments

Comments
 (0)