Skip to content

Commit d7fb6df

Browse files
tonyitotonyito
committed
Fixed bugs for editing
1 parent 3e605e2 commit d7fb6df

File tree

10 files changed

+285
-114
lines changed

10 files changed

+285
-114
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@
104104
"cli-spinner": "^0.2.8",
105105
"commander": "^2.17.1",
106106
"concurrently": "^5.1.0",
107+
"csstype": "^2.6.9",
107108
"d3": "^5.9.2",
108109
"electron-reload": "^1.4.0",
109110
"enzyme": "^3.4.1",

‎src/actionTypes/index.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,6 @@ export const TOGGLE_STATE: string = 'TOGGLE_STATE';
3333
export const TOGGLE_CLASS: string = 'TOGGLE_CLASS';
3434
export const CHANGE_TUTORIAL: string = 'CHANGE_TUTORIAL';
3535
export const UNDO: string = 'UNDO';
36-
export const REDO: string = 'REDO';
36+
export const REDO: string = 'REDO';
37+
export const EDIT_MODE: string = 'EDIT_MODE';
38+
export const EDIT_COMPONENT: string = 'EDIT_COMPONENT';

‎src/actions/components.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ import {
3636
CHANGE_TUTORIAL,
3737
UNDO,
3838
REDO,
39+
EDIT_MODE,
40+
EDIT_COMPONENT
3941
} from '../actionTypes/index';
4042

4143
import { loadState } from '../localStorage'; //this is a warning from 'localStorage' being a .js file instead of .ts. Convert to .ts to remove this warning.
@@ -299,6 +301,19 @@ export const redo = () => ({
299301
type: REDO,
300302
});
301303

304+
export const toggleEditMode = ({ id }: { id: number }) => (
305+
dispatch: (arg: Action) => void
306+
) => {
307+
dispatch({ type: EDIT_MODE, payload: { id } });
308+
};
309+
310+
export const editComponent = ({ id, title }: { id: number, title: string }) => (
311+
dispatch: (arg: Action) => void
312+
) => {
313+
dispatch({ type: EDIT_COMPONENT , payload: { id, title } });
314+
};
315+
316+
302317
export const updateHtmlAttr = ({
303318
attr,
304319
value,

‎src/components/LeftColExpansionPanel.tsx

Lines changed: 118 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Fragment } from 'react';
22
import { withStyles } from '@material-ui/core/styles';
33
import Typography from '@material-ui/core/Typography';
4+
import TextField from '@material-ui/core/TextField';
45
import List from '@material-ui/core/List';
56
import ListItem from '@material-ui/core/ListItem';
67
import ListItemText from '@material-ui/core/ListItemText';
@@ -25,8 +26,12 @@ interface LeftColExpPanPropsInt extends PropsInt {
2526
componentId: number;
2627
stateComponents: ComponentsInt;
2728
}): void;
28-
toggleComponentState(arg: {id: number}): void;
29-
toggleComponentClass(arg: {id: number}): void;
29+
toggleComponentState(arg: { id: number }): void;
30+
toggleComponentClass(arg: { id: number }): void;
31+
editMode: number;
32+
toggleEditMode(arg: { id: number }): void;
33+
handleChangeName(event: string): void;
34+
handleEditComponent(): void;
3035
}
3136
//interface created but never used
3237
// interface TypographyProps {
@@ -44,7 +49,11 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
4449
selectableChildren,
4550
deleteComponent,
4651
toggleComponentState,
47-
toggleComponentClass
52+
toggleComponentClass,
53+
editMode,
54+
toggleEditMode,
55+
handleChangeName,
56+
handleEditComponent,
4857
} = props;
4958
const { title, id, color, stateful, classBased } = component;
5059
function isFocused() {
@@ -53,14 +62,23 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
5362
// boolean flag to determine if the component card is focused or not
5463
// state/class toggles will be displayed when a component is focused
5564
const focusedToggle = isFocused() === 'focused' ? true : false;
65+
66+
const handleEdit = () => {
67+
if (editMode !== id) {
68+
handleChangeName(title);
69+
toggleEditMode({ id });
70+
} else {
71+
toggleEditMode({ id: -1 });
72+
}
73+
};
5674
return (
5775
<Grid
5876
container
59-
direction='row'
60-
justify='center'
61-
alignItems='center'
77+
direction="row"
78+
justify="center"
79+
alignItems="center"
6280
style={{
63-
minWidth: '470px'
81+
minWidth: '470px',
6482
}}
6583
>
6684
<Grid item xs={9}>
@@ -71,7 +89,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
7189
focusedToggle
7290
? {
7391
boxShadow: '4px 4px 4px rgba(0, 0, 0, .4)',
74-
borderRadius: '8px'
92+
borderRadius: '8px',
7593
}
7694
: {}
7795
}
@@ -93,48 +111,86 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
93111
backgroundColor: 'none',
94112
borderRadius: '10px',
95113
minWidth: '340px',
96-
border: `2px solid ${color}`
114+
border: `2px solid ${color}`,
97115
}}
98116
>
99-
<List style={{ color: 'red' }}>
117+
<List
118+
style={
119+
{
120+
// color: 'red'
121+
}
122+
}
123+
>
100124
<ListItem
101125
// button // commented out to disable materialUI hover shading effect. TBD if any adverse effects occur
102-
style={{ color: 'red' }}
126+
// style={{ color: 'red' }}
103127
onClick={() => {
104-
changeFocusComponent({ title });
128+
if (focusComponent.title !== title)
129+
changeFocusComponent({ title });
105130
}}
106131
>
107132
<ListItemText
108-
disableTypography
109-
className={classes.light}
133+
// disableTypography
134+
// className={classes.light}
110135
primary={
111136
<div>
112-
<Typography
113-
//type='body2'
114-
style={{
115-
color: '#fff',
116-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)',
117-
fontSize: '1.40rem'
118-
}}
119-
>
120-
{title}
121-
</Typography>
137+
{editMode !== id ? (
138+
<Typography
139+
//type='body2'
140+
onDoubleClick={() => handleEdit()}
141+
style={{
142+
color: '#fff',
143+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)',
144+
fontSize: '1.40rem',
145+
}}
146+
>
147+
{title}
148+
</Typography>
149+
) : (
150+
<TextField
151+
id="filled"
152+
label="Change Component Name"
153+
defaultValue={title}
154+
variant="outlined"
155+
className={classes.text}
156+
InputProps={{
157+
className: classes.light,
158+
}}
159+
InputLabelProps={{
160+
className: classes.inputLabel,
161+
}}
162+
autoFocus
163+
onChange={e => handleChangeName(e.target.value)}
164+
onKeyPress={ev => {
165+
if (ev.key === 'Enter') {
166+
handleEditComponent();
167+
ev.preventDefault();
168+
}
169+
}}
170+
onKeyUp={ev => {
171+
if (ev.keyCode === 27) {
172+
handleEdit();
173+
ev.preventDefault();
174+
}
175+
}}
176+
/>
177+
)}
122178
{/* ALL OF THE STATE/CLASS TOGGLES AND LABELS ARE ONLY RENDERED IF THEIR COMPONENT IS THE FOCUSED COMPONENT
123179
TO DO : IMPROVE DRYNESS OF CODE BY RENDERING ALL FOUR MATERIAL ELEMENTS (LABELS/SWITCH) IN ONE CONDITIONAL
124180
*/}
125181
{/* LABEL AND TOGGLE(SWITCH) FOR STATEFULNESS */}
126182
{focusedToggle ? (
127183
<span style={{ display: 'inline-flex' }}>
128184
<InputLabel
129-
htmlFor='stateful'
185+
htmlFor="stateful"
130186
style={{
131187
color: '#fff',
132188
marginBottom: '0px',
133189
marginTop: '10px',
134190
marginLeft: '11px',
135191
padding: '0px',
136192
fontSize: '18px',
137-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)'
193+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)',
138194
}}
139195
>
140196
State?
@@ -145,20 +201,20 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
145201
toggleComponentState({ id });
146202
changeFocusComponent({ title });
147203
}}
148-
value='stateful'
149-
color='primary'
204+
value="stateful"
205+
color="primary"
150206
// id={props.id.toString()}
151207
/>
152208
<InputLabel
153-
htmlFor='classBased'
209+
htmlFor="classBased"
154210
style={{
155211
color: '#fff',
156212
marginBottom: '0px',
157213
marginTop: '10px',
158214
marginLeft: '11px',
159215
padding: '0px',
160216
fontSize: '18px',
161-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)'
217+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)',
162218
}}
163219
>
164220
Class?
@@ -169,44 +225,44 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
169225
toggleComponentClass({ id });
170226
changeFocusComponent({ title });
171227
}}
172-
value='classBased'
173-
color='primary'
228+
value="classBased"
229+
color="primary"
174230
/>
175231
</span>
176232
) : (
177233
''
178234
)}
179235
{focusedToggle && component.id !== 1 ? (
180236
<Button
181-
variant='text'
182-
size='small'
183-
color='default'
184-
aria-label='Delete'
237+
variant="text"
238+
size="small"
239+
color="default"
240+
aria-label="Delete"
185241
className={classes.margin}
186242
onClick={() =>
187243
deleteComponent({
188244
componentId: id,
189-
stateComponents: components
245+
stateComponents: components,
190246
})
191247
}
192248
style={{
193249
color: 'white',
194250
marginBottom: '0px',
195-
marginTop: '4px'
251+
marginTop: '4px',
196252
}}
197253
>
198254
<DeleteIcon
199255
style={{
200256
color: '#b30000',
201-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)'
257+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',
202258
}}
203259
/>
204260
<div
205261
style={{
206262
marginTop: '4px',
207263
marginLeft: '5px',
208264
fontSize: '15px',
209-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)'
265+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)',
210266
}}
211267
>
212268
Delete Component
@@ -230,12 +286,12 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
230286
<div />
231287
) : (
232288
<Tooltip
233-
title='add as child'
234-
aria-label='add as child'
235-
placement='left'
289+
title="add as child"
290+
aria-label="add as child"
291+
placement="left"
236292
>
237293
<IconButton
238-
aria-label='Add'
294+
aria-label="Add"
239295
onClick={() => {
240296
addChild({ title, childType: 'COMP' });
241297
}}
@@ -253,14 +309,28 @@ function styles(): object {
253309
root: {
254310
width: '100%',
255311
marginTop: 10,
256-
backgroundColor: '#333333'
257312
},
258313
light: {
259314
color: '#eee',
260315
'&:hover': {
261-
color: '#1de9b6'
262-
}
263-
}
316+
color: '#1de9b6',
317+
},
318+
},
319+
inputLabel: {
320+
fontSize: '16px',
321+
color: '#fff',
322+
},
323+
text: {
324+
'& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
325+
borderColor: 'white',
326+
},
327+
'&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
328+
borderColor: 'white',
329+
},
330+
'& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
331+
borderColor: 'white',
332+
},
333+
},
264334
};
265335
}
266336
export default withStyles(styles)(LeftColExpansionPanel);

‎src/components/Props.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,22 @@ import React, { Component, Fragment } from 'react';
22
import { connect } from 'react-redux';
33
import { withStyles, Theme } from '@material-ui/core/styles';
44
import FormControl from '@material-ui/core/FormControl';
5-
import Grow from '@material-ui/core/Grow';
6-
import Paper from '@material-ui/core/Paper';
75
import Grid from '@material-ui/core/Grid';
86
import TextField from '@material-ui/core/TextField';
97
import Button from '@material-ui/core/Button';
10-
import Input from '@material-ui/core/Input';
118
import Select from '@material-ui/core/Select';
12-
import Switch from '@material-ui/core/Switch';
139
import InputLabel from '@material-ui/core/InputLabel';
1410
import { addProp, deleteProp } from '../actions/components';
1511
import DataTable from './DataTable';
16-
import { ComponentInt, PropInt, PropsInt } from '../utils/Interfaces';
12+
import { PropInt, PropsInt } from '../utils/Interfaces';
1713

1814
interface PropsPropsInt extends PropsInt {
1915
classes: any;
2016
addProp(arg: PropInt): void;
2117
deleteProp(propId: number): void;
2218
}
2319

24-
const styles = (theme: any) => ({
20+
const styles = () => ({
2521
root: {
2622
display: 'flex',
2723
justifyContent: 'center',

0 commit comments

Comments
 (0)