Skip to content

Commit 8caa7c3

Browse files
tonyitotonyito
committed
Resolved merge conflicts
2 parents 2b8e4ed + 1a40a57 commit 8caa7c3

File tree

9 files changed

+297
-162
lines changed

9 files changed

+297
-162
lines changed

‎src/actions/components.ts

Lines changed: 51 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
ADD_CHILD,
99
DELETE_CHILD,
1010
DELETE_COMPONENT,
11+
TOGGLE_STATE,
1112
CHANGE_FOCUS_COMPONENT,
1213
CHANGE_FOCUS_CHILD,
1314
CHANGE_COMPONENT_FOCUS_CHILD,
@@ -24,6 +25,7 @@ import {
2425
ADD_PROP,
2526
DELETE_ALL_DATA,
2627
UPDATE_HTML_ATTR,
28+
2729
UPDATE_CHILDREN_SORT,
2830
CHANGE_IMAGE_SOURCE,
2931
DELETE_IMAGE
@@ -57,7 +59,7 @@ export const addComponent = ({ title }: { title: string }) => (dispatch: (arg: A
5759
export const addChild = ({
5860
title,
5961
childType,
60-
HTMLInfo,
62+
HTMLInfo
6163
}: {
6264
title: string;
6365
childType: string;
@@ -73,7 +75,7 @@ export const deleteChild = ({}) => (dispatch: (arg: Action) => void) => {
7375

7476
export const deleteComponent = ({
7577
componentId,
76-
stateComponents,
78+
stateComponents
7779
}: {
7880
componentId: number;
7981
stateComponents: ComponentsInt;
@@ -88,8 +90,8 @@ stateComponents: ComponentsInt;
8890
payload: {
8991
parentId: parent.id,
9092
childId: child.childId,
91-
calledFromDeleteComponent: true,
92-
},
93+
calledFromDeleteComponent: true
94+
}
9395
});
9496
});
9597
});
@@ -111,14 +113,14 @@ export const changeFocusChild = ({ childId }: { childId: number }) => (dispatch:
111113

112114
export const changeComponentFocusChild = ({
113115
componentId,
114-
childId,
116+
childId
115117
}: {
116118
componentId: number;
117119
childId: number;
118120
}) => (dispatch: (arg: Action) => void) => {
119121
dispatch({
120122
type: CHANGE_COMPONENT_FOCUS_CHILD,
121-
payload: { componentId, childId },
123+
payload: { componentId, childId }
122124
});
123125
};
124126

@@ -131,7 +133,7 @@ export const exportFiles = ({
131133
components,
132134
path,
133135
appName,
134-
exportAppBool,
136+
exportAppBool
135137
}: {
136138
components: ComponentsInt;
137139
path: string;
@@ -140,31 +142,38 @@ exportAppBool: boolean;
140142
}) => (dispatch: (arg: Action) => void) => {
141143
// this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
142144
dispatch({
143-
type: EXPORT_FILES,
145+
type: EXPORT_FILES
144146
});
145147

146148
createFiles(components, path, appName, exportAppBool)
147-
.then(dir => dispatch({
148-
type: EXPORT_FILES_SUCCESS,
149-
payload: { status: true, dir: dir[0] },
150-
}))
151-
.catch(err => dispatch({
152-
type: EXPORT_FILES_ERROR,
153-
payload: { status: true, err },
154-
}));
149+
.then(dir =>
150+
dispatch({
151+
type: EXPORT_FILES_SUCCESS,
152+
payload: { status: true, dir: dir[0] }
153+
})
154+
)
155+
.catch(err =>
156+
dispatch({
157+
type: EXPORT_FILES_ERROR,
158+
payload: { status: true, err }
159+
})
160+
);
155161
};
156162

157163
export const handleClose = () => ({
158164
type: HANDLE_CLOSE,
159-
payload: false,
165+
payload: false
160166
});
161167

162168
export const handleTransform = (
163169
componentId: number,
164170
childId: number,
165171
{
166-
x, y, width, height,
167-
}: { x: number; y: number; width: number; height: number },
172+
x,
173+
y,
174+
width,
175+
height
176+
}: { x: number; y: number; width: number; height: number }
168177
) => ({
169178
type: HANDLE_TRANSFORM,
170179
payload: {
@@ -173,16 +182,16 @@ export const handleTransform = (
173182
x,
174183
y,
175184
width,
176-
height,
177-
},
185+
height
186+
}
178187
});
179188

180189
export const createApplication = ({
181190
path,
182191
components = [],
183192
genOption,
184193
appName = 'reactype_app',
185-
exportAppBool,
194+
exportAppBool
186195
}: {
187196
path: string;
188197
components: ComponentsInt;
@@ -197,13 +206,13 @@ exportAppBool: boolean;
197206
appName,
198207
path,
199208
components,
200-
exportAppBool,
201-
}),
209+
exportAppBool
210+
})
202211
);
203212
} else if (genOption) {
204213
exportAppBool = true;
205214
dispatch({
206-
type: CREATE_APPLICATION,
215+
type: CREATE_APPLICATION
207216
});
208217
createApplicationUtil({
209218
path,
@@ -212,48 +221,54 @@ exportAppBool: boolean;
212221
})
213222
.then(() => {
214223
dispatch({
215-
type: CREATE_APPLICATION_SUCCESS,
224+
type: CREATE_APPLICATION_SUCCESS
216225
});
217226
dispatch(
218227
exportFiles({
219228
appName,
220229
path,
221230
components,
222-
exportAppBool,
223-
}),
231+
exportAppBool
232+
})
224233
);
225234
})
226-
.catch(err => dispatch({
227-
type: CREATE_APPLICATION_ERROR,
228-
payload: { status: true, err },
229-
}));
235+
.catch(err =>
236+
dispatch({
237+
type: CREATE_APPLICATION_ERROR,
238+
payload: { status: true, err }
239+
})
240+
);
230241
}
231242
};
232243

233244
export const openExpansionPanel = (component: ComponentInt) => ({
234245
type: OPEN_EXPANSION_PANEL,
235-
payload: { component },
246+
payload: { component }
236247
});
237248

238249
export const deleteAllData = () => ({
239-
type: DELETE_ALL_DATA,
250+
type: DELETE_ALL_DATA
240251
});
241252

242253
export const deleteProp = (propId: number) => (dispatch: (arg: Action) => void) => {
243254
dispatch({ type: DELETE_PROP, payload: propId });
244255
};
245256

257+
export const toggleComponentState = (index: string) => (dispatch: any) => {
258+
dispatch({ type: TOGGLE_STATE, payload: index });
259+
};
260+
246261
export const addProp = (prop: PropInt) => ({
247262
type: ADD_PROP,
248-
payload: { ...prop },
263+
payload: { ...prop }
249264
});
250265

251266
export const updateHtmlAttr = ({ attr, value }: { attr: string; value: string }) => (
252267
dispatch: (arg: Action) => void,
253268
) => {
254269
dispatch({
255270
type: UPDATE_HTML_ATTR,
256-
payload: { attr, value },
271+
payload: { attr, value }
257272
});
258273
};
259274

‎src/components/LeftColExpansionPanel.tsx

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,12 @@ import AddIcon from '@material-ui/icons/Add';
1010
import DeleteIcon from '@material-ui/icons/Delete';
1111
import Button from '@material-ui/core/Button';
1212
import Tooltip from '@material-ui/core/Tooltip';
13-
import Switch from '@material-ui/core/Switch'; // for state toggling
13+
import Switch from '@material-ui/core/Switch'; // for state/class toggling
1414
import InputLabel from '@material-ui/core/InputLabel'; // labeling of state/class toggles
15-
import Select from '@material-ui/core/Select'; // for Class/Functional drop down
16-
import MenuItem from '@material-ui/core/MenuItem'; // for drop down item selections
1715

1816
// import { ComponentInt, ComponentsInt, ChildInt } from '../utils/Interfaces'; // unused
1917

18+
// TODO: ASSIGN SPECIFIC TYPING TO INCOMING PROPS (REMOVE ANY)
2019
const LeftColExpansionPanel = (props: any) => {
2120
const {
2221
classes,
@@ -26,8 +25,10 @@ const LeftColExpansionPanel = (props: any) => {
2625
changeFocusComponent,
2726
selectableChildren,
2827
components,
29-
deleteComponent
28+
deleteComponent,
29+
toggleComponentState
3030
} = props;
31+
3132
const { title, id, color } = component;
3233

3334
function isFocused() {
@@ -66,6 +67,7 @@ const LeftColExpansionPanel = (props: any) => {
6667
<Typography type='body2' style={{ color }}>
6768
{title}
6869
</Typography>
70+
{/* TOGGLE FOR STATEFULNESS */}
6971
<InputLabel
7072
htmlFor='stateful'
7173
style={{
@@ -80,17 +82,16 @@ const LeftColExpansionPanel = (props: any) => {
8082
State?
8183
</InputLabel>
8284
<Switch
83-
// checked={stateful}
84-
// onChange={e => ONCHANGE FUNCTION PENDING ON STATE REDUCER
85-
// updateComponent(id, { stateful: e.target.checked })
86-
// }
85+
onChange={e => toggleComponentState(props.id)}
8786
value='stateful'
8887
color='primary'
89-
id='stateful'
88+
id={props.id.toString()}
89+
// id={props.index.toString()}
9090
/>
9191
<div>
92+
{/* TOGGLE FOR CLASS BASED */}
9293
<InputLabel
93-
id='label'
94+
htmlFor='classBased'
9495
style={{
9596
color: '#fff',
9697
marginBottom: '10px',
@@ -100,23 +101,17 @@ const LeftColExpansionPanel = (props: any) => {
100101
fontSize: '18px'
101102
}}
102103
>
103-
Component Type
104+
Class?
104105
</InputLabel>
105-
<Select
106-
id='select'
107-
value='class'
108-
style={{
109-
color: '#fff',
110-
marginBottom: '10px',
111-
marginTop: '0px',
112-
marginLeft: '11px',
113-
padding: '0px',
114-
fontSize: '18px'
115-
}}
116-
>
117-
<MenuItem value='class'>Class</MenuItem>
118-
<MenuItem value='functional'>Functional</MenuItem>
119-
</Select>
106+
<Switch
107+
// checked={classBased}
108+
// onChange={e => ONCHANGE FUNCTION PENDING ON CLASS REDUCER
109+
// updateComponent(id, { classBased: e.target.checked })
110+
// }
111+
value='classBased'
112+
color='primary'
113+
id={props.index.toString()}
114+
/>
120115
</div>
121116
</div>
122117
}

‎src/containers/AppContainer.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
22
import { connect } from 'react-redux';
33
import { MuiThemeProvider } from '@material-ui/core/styles';
44
import LinearProgress from '@material-ui/core/LinearProgress';
5+
56
import LeftContainer from './LeftContainer.tsx';
67
import MainContainer from './MainContainer.tsx';
78
import theme from '../components/theme.ts';
@@ -108,7 +109,7 @@ class AppContainer extends Component<Props, State> {
108109
// uses component childIds and parentIds arrays (numbers) to build component-filled children and parents arrays
109110
return (
110111
<MuiThemeProvider theme={theme}>
111-
<div className="app-container">
112+
<div className='app-container'>
112113
<LeftContainer
113114
components={components}
114115
totalComponents={totalComponents}
@@ -125,7 +126,7 @@ class AppContainer extends Component<Props, State> {
125126
width: '100%'
126127
}}
127128
>
128-
<LinearProgress color="secondary" />
129+
<LinearProgress color='secondary' />
129130
</div>
130131
) : null}
131132
</div>

0 commit comments

Comments
 (0)