Skip to content

Commit 4c95b7a

Browse files
sean1292sean1292
committed
started toggleCodeEDit functionality
1 parent 2922332 commit 4c95b7a

File tree

7 files changed

+121
-45
lines changed

7 files changed

+121
-45
lines changed

‎src/actionTypes/index.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
export const ADD_CHILD: string = 'ADD_CHILD';
22
export const ADD_COMPONENT: string = 'ADD_COMPONENT';
33
export const ADD_PROP: string = 'ADD_PROP';
4-
export const CHANGE_COMPONENT_FOCUS_CHILD: string = 'CHANGE_COMPONENT_FOCUS_CHILD';
4+
export const CHANGE_COMPONENT_FOCUS_CHILD: string =
5+
'CHANGE_COMPONENT_FOCUS_CHILD';
56
export const CHANGE_FOCUS_CHILD: string = 'CHANGE_FOCUS_CHILD';
67
export const CHANGE_FOCUS_COMPONENT: string = 'CHANGE_FOCUS_COMPONENT';
78
export const CHANGE_IMAGE_PATH: string = 'CHANGE_IMAGE_PATH';
89
export const CHANGE_IMAGE_SOURCE: string = 'CHANGE_IMAGE_SOURCE';
910
export const CHANGE_TUTORIAL: string = 'CHANGE_TUTORIAL';
11+
export const CODE_EDIT: string = 'CODE_EDIT';
1012
export const CREATE_APPLICATION: string = 'CREATE_APPLICATION';
1113
export const CREATE_APPLICATION_ERROR: string = 'CREATE_APPLICATION_ERROR';
1214
export const CREATE_APPLICATION_SUCCESS: string = 'CREATE_APPLICATION_SUCCESS';

‎src/actions/actionCreators.ts

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
ComponentsInt,
44
PropInt,
55
ChildInt,
6-
Action,
6+
Action
77
} from '../interfaces/Interfaces';
88

99
import {
@@ -15,6 +15,7 @@ import {
1515
CHANGE_FOCUS_COMPONENT,
1616
CHANGE_IMAGE_SOURCE,
1717
CHANGE_TUTORIAL,
18+
CODE_EDIT,
1819
CREATE_APPLICATION,
1920
CREATE_APPLICATION_ERROR,
2021
CREATE_APPLICATION_SUCCESS,
@@ -36,7 +37,7 @@ import {
3637
TOGGLE_STATE,
3738
UNDO,
3839
UPDATE_HTML_ATTR,
39-
UPDATE_CODE,
40+
UPDATE_CODE
4041
} from '../actionTypes/index';
4142
import { loadState } from '../localStorage';
4243
import createFiles from '../utils/createFiles.util';
@@ -62,17 +63,17 @@ export const addComponent = ({ title }: { title: string }) => (
6263

6364
export const addProp = (prop: PropInt) => ({
6465
type: ADD_PROP,
65-
payload: { ...prop },
66+
payload: { ...prop }
6667
});
6768

6869
export const changeTutorial = (tutorial: number) => ({
6970
type: CHANGE_TUTORIAL,
70-
payload: { tutorial },
71+
payload: { tutorial }
7172
});
7273

7374
export const changeImagePath = (imageSource: string) => ({
7475
type: CHANGE_IMAGE_SOURCE,
75-
payload: { imageSource },
76+
payload: { imageSource }
7677
});
7778

7879
export const deleteChild = ({}) => (dispatch: (arg: Action) => void) => {
@@ -195,7 +196,7 @@ export const deleteAllData = () => ({
195196
});
196197

197198
export const deleteImage = () => ({
198-
type: DELETE_IMAGE,
199+
type: DELETE_IMAGE
199200
});
200201

201202
export const deleteProp = (propId: number) => (
@@ -214,7 +215,7 @@ export const exportFiles = ({
214215
components,
215216
path,
216217
appName,
217-
exportAppBool,
218+
exportAppBool
218219
}: {
219220
components: ComponentsInt;
220221
path: string;
@@ -223,26 +224,26 @@ export const exportFiles = ({
223224
}) => (dispatch: (arg: Action) => void) => {
224225
// this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
225226
dispatch({
226-
type: EXPORT_FILES,
227+
type: EXPORT_FILES
227228
});
228229
createFiles(components, path, appName, exportAppBool)
229230
.then((dir: any) =>
230231
dispatch({
231232
type: EXPORT_FILES_SUCCESS,
232-
payload: { status: true, dir: dir[0] },
233+
payload: { status: true, dir: dir[0] }
233234
})
234235
)
235236
.catch((err: string) =>
236237
dispatch({
237238
type: EXPORT_FILES_ERROR,
238-
payload: { status: true, err },
239+
payload: { status: true, err }
239240
})
240241
);
241242
};
242243

243244
export const handleClose = () => ({
244245
type: HANDLE_CLOSE,
245-
payload: false,
246+
payload: false
246247
});
247248

248249
export const handleTransform = (
@@ -252,7 +253,7 @@ export const handleTransform = (
252253
x,
253254
y,
254255
width,
255-
height,
256+
height
256257
}: { x: number; y: number; width: number; height: number }
257258
) => ({
258259
type: HANDLE_TRANSFORM,
@@ -262,8 +263,8 @@ export const handleTransform = (
262263
x,
263264
y,
264265
width,
265-
height,
266-
},
266+
height
267+
}
267268
});
268269

269270
export const loadInitData = () => (dispatch: (arg: Action) => void) => {
@@ -273,8 +274,8 @@ export const loadInitData = () => (dispatch: (arg: Action) => void) => {
273274
payload: {
274275
data: data
275276
? { ...data.workspace, history: [], historyIndex: 0, future: [] } //erase history upon opening app
276-
: {},
277-
},
277+
: {}
278+
}
278279
});
279280
});
280281
};
@@ -302,7 +303,11 @@ export const toggleEditMode = ({ id }: { id: number }) => (
302303
};
303304
//action creators for undo and redo
304305
export const undo = () => ({
305-
type: UNDO,
306+
type: UNDO
307+
});
308+
309+
export const toggleCodeEdit = () => ({
310+
type: CODE_EDIT
306311
});
307312

308313
export const updateCode = ({

‎src/components/bottom/BottomPanel.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import { connect } from 'react-redux';
33
import { handleClose, deleteProp, addProp } from '../../actions/actionCreators';
44
import BottomTabs from './BottomTabs';
55
import { PropsInt, PropInt } from '../../interfaces/Interfaces';
6+
import { toggleCodeEdit } from '../../actions/actionCreators';
67

78
const IPC = require('electron').ipcRenderer;
89

910
const mapDispatchToProps = (dispatch: any) => ({
1011
handleNotificationClose: () => dispatch(handleClose()),
1112
deleteProp: (id: number) => dispatch(deleteProp(id)),
12-
addProp: (prop: PropInt) => dispatch(addProp(prop))
13+
addProp: (prop: PropInt) => dispatch(addProp(prop)),
14+
toggleCodeEdit: () => dispatch(toggleCodeEdit())
1315
});
1416

1517
const mapStateToProps = (store: any) => ({
@@ -22,6 +24,7 @@ interface BottomPanelPropsInt extends PropsInt {
2224
addProp(prop: PropInt): void;
2325
changeFocusComponent(arg: { title: string }): void;
2426
updateCode(arg: { componentId: number; code: string }): void;
27+
toggleCodeEdit();
2528
}
2629

2730
class BottomPanel extends Component<BottomPanelPropsInt> {

‎src/components/bottom/CodePreview.tsx

Lines changed: 81 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,38 +5,41 @@ import { ComponentInt, ComponentsInt } from '../../interfaces/Interfaces';
55
import AceEditor from 'react-ace';
66
import 'ace-builds/src-noconflict/mode-javascript';
77
import 'ace-builds/src-noconflict/theme-monokai';
8+
import Button from '@material-ui/core/Button';
9+
import { withStyles } from '@material-ui/core/styles';
10+
import { mergeClasses } from '@material-ui/styles';
811

912
type CodePreviewProps = {
1013
focusComponent: ComponentInt;
1114
components: ComponentsInt;
1215
updateCode(arg: { componentId: number; code: string }): void;
1316
changeFocusComponent(arg: { title: string }): void;
17+
classes: any;
1418
};
1519
interface StateInt {
16-
code: string;
20+
readOnly: boolean;
1721
}
1822

1923
class CodePreview extends Component<CodePreviewProps, StateInt> {
2024
constructor(props: CodePreviewProps) {
2125
super(props);
2226
this.state = {
23-
code: ''
27+
readOnly: false
2428
};
2529
}
2630

2731
//checking if the code has been asigned yet or not
2832
//if no then generate code and asign to a focus component
2933
componentDidMount() {
30-
if (
31-
this.props.focusComponent.code == '' ||
32-
this.props.focusComponent.changed
33-
) {
34+
if (this.props.focusComponent.changed) {
35+
this.setState({ readOnly: !this.state.readOnly });
3436
this.generateNewCode();
3537
}
3638
}
3739

3840
componentDidUpdate(prevProp: CodePreviewProps) {
3941
if (this.props.focusComponent.changed !== prevProp.focusComponent.changed) {
42+
this.setState({ readOnly: !this.state.readOnly });
4043
this.generateNewCode();
4144
}
4245
}
@@ -63,20 +66,25 @@ class CodePreview extends Component<CodePreviewProps, StateInt> {
6366
return (
6467
<div
6568
style={{
66-
height: '80%',
69+
height: '90%',
6770
paddingLeft: '0px',
68-
paddingTop: '10px',
71+
paddingTop: '1rem',
72+
paddingBottom: '1rem',
6973
overflow: 'auto',
7074
maxWidth: '60%',
71-
border: '2px solid #33eb91',
72-
borderRadius: '5px'
75+
display: 'flex',
76+
justifyContent: 'center'
7377
}}
7478
>
7579
<AceEditor
7680
mode="javascript"
7781
theme="monokai"
78-
width="100%%"
82+
width="100%"
7983
height="100%"
84+
style={{
85+
border: '2px solid #33eb91',
86+
borderRadius: '8px'
87+
}}
8088
onChange={code =>
8189
this.props.updateCode({
8290
componentId: this.props.focusComponent.id,
@@ -85,21 +93,73 @@ class CodePreview extends Component<CodePreviewProps, StateInt> {
8593
}
8694
value={this.props.focusComponent.code}
8795
name="Code_div"
96+
readOnly={this.state.readOnly}
8897
editorProps={{ $blockScrolling: true }}
8998
fontSize={16}
9099
/>
91-
{/* <Button
92-
color="primary"
93-
aria-label="Add"
94-
type="submit"
95-
// disabled={!this.state.propKey || !this.state.propType}
96-
variant="contained"
97-
size="large"
98-
className={classes.addProp}
99-
></Button> */}
100+
<div style={{ display: 'flex', flexDirection: 'column' }}>
101+
<Button
102+
color="primary"
103+
aria-label="Add"
104+
type="submit"
105+
// disabled={!this.state.propKey || !this.state.propType}
106+
variant="contained"
107+
size="large"
108+
style={{ justifySelf: 'center' }}
109+
className={this.props.classes.startEdit}
110+
onClick={e => {
111+
this.setState({ readOnly: !this.state.readOnly });
112+
}}
113+
>
114+
{this.state.readOnly ? 'Enter Edit Mode' : 'Exit Edit Mode'}
115+
</Button>
116+
<div
117+
style={{
118+
width: '25rem',
119+
marginLeft: '3rem',
120+
marginTop: '1rem',
121+
color: '##fff'
122+
}}
123+
>
124+
<p>
125+
<strong>
126+
<u>Warning</u>:
127+
</strong>
128+
<span>
129+
{' '}
130+
all of the changes added in the "Edit Mode" will be overridden
131+
if:
132+
</span>
133+
</p>
134+
<ul>
135+
<li>Class or State toggles are changed</li>
136+
<li>
137+
HTML Elements, Props, or Children are added to this component
138+
</li>
139+
</ul>
140+
</div>
141+
</div>
100142
</div>
101143
);
102144
}
103145
}
104146

105-
export default CodePreview;
147+
const styles = () => ({
148+
startEdit: {
149+
width: '25rem',
150+
marginLeft: '3rem',
151+
marginRight: '3rem',
152+
height: '4rem',
153+
transition: 'all 0.1s ease-out',
154+
border: '2px solid #33eb91',
155+
background: 'transparent',
156+
color: '#fff',
157+
'&:hover': {
158+
transform: 'scale(1.1)',
159+
fontSize: '1.2rem',
160+
backgroundColor: '#33eb91',
161+
color: '#006400'
162+
}
163+
}
164+
});
165+
export default withStyles(styles)(CodePreview);

‎src/interfaces/Interfaces.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export interface ApplicationStateInt {
8282
history: ApplicationStateInt[];
8383
historyIndex: number;
8484
future: ApplicationStateInt[];
85+
codeReadOnly: boolean;
8586
}
8687

8788
//Global Action interface \

‎src/reducers/bottomReducers.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@ import {
44
ChildInt,
55
ComponentInt,
66
ComponentsInt,
7-
PropInt,
7+
PropInt
88
} from '../interfaces/Interfaces';
99
import { createHistory } from '../helperFunctions/createHistory';
1010

11-
1211
export const addProp = (
1312
state: ApplicationStateInt,
1413
{
@@ -104,7 +103,12 @@ export const deleteProp = (state: ApplicationStateInt, propId: number) => {
104103
export const handleClose = (state: ApplicationStateInt, status: string) => ({
105104
...state,
106105
errorOpen: status,
107-
successOpen: status,
106+
successOpen: status
107+
});
108+
109+
export const toggleCodeEdit = (state: ApplicationStateInt) => ({
110+
...state,
111+
codeReadOnly: !state.codeReadOnly
108112
});
109113

110114
export const updateChildrenSort = (
@@ -141,7 +145,7 @@ export const updateChildrenSort = (
141145
return {
142146
...state,
143147
components: modifiedComponentsArray,
144-
focusComponent: modifiedComponent,
148+
focusComponent: modifiedComponent
145149
};
146150
};
147151

‎src/reducers/initialState.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@ export const initialApplicationState: ApplicationStateInt = {
6363
loading: false,
6464
history: [],
6565
historyIndex: 0,
66-
future: []
66+
future: [],
67+
codeReadOnly: true
6768
};
6869

6970
export const initialComponentState: ComponentInt = {

0 commit comments

Comments
 (0)