Skip to content

Commit 4532d07

Browse files
ChristianEdwardPadillaChristianEdwardPadilla
committed
Merge pull request #99 from ChristianEdwardPadilla/development
removed comments, changed html attr styling
2 parents 5a3d752 + 59f36c4 commit 4532d07

File tree

5 files changed

+113
-146
lines changed

5 files changed

+113
-146
lines changed

‎main.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,6 @@ function openFile() {
3333
mainWindow.webContents.send('new-file', file);
3434
}
3535

36-
// export files
37-
function exportComponents() {
38-
console.log('hi from exportComponents');
39-
}
40-
4136
// Choose directory
4237
ipcMain.on('choose_app_dir', (event) => {
4338
const directory = dialog.showOpenDialog(mainWindow, {

‎src/components/HtmlAttr.jsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const styles = theme => ({
2626
input: {
2727
color: '#fff',
2828
opacity: '0.7',
29-
marginBottom: '15px',
29+
marginBottom: '17px',
3030
},
3131
});
3232

@@ -46,7 +46,6 @@ class HtmlAttr extends Component {
4646
}, {});
4747

4848
handleSave = attr => {
49-
console.log(attr, this.state[attr]);
5049
this.props.updateHtmlAttr({ attr, value: this.state[attr] });
5150
this.setState({
5251
[attr]: '',

‎src/components/SortChildren.jsx‎

Lines changed: 110 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,168 +1,152 @@
1+
'use strict';
12

2-
"use strict" ;
3-
4-
import React, { Component} from "react";
5-
import { connect } from "react-redux";
6-
import { updateChildrenSort } from "../actions/components";
7-
import { width } from "window-size";
8-
import cloneDeep from "../utils/cloneDeep";
3+
import React, { Component } from 'react';
4+
import { connect } from 'react-redux';
5+
import { updateChildrenSort } from '../actions/components';
6+
import { width } from 'window-size';
7+
import cloneDeep from '../utils/cloneDeep';
98

109
const mapStateToProps = store => ({
1110
focusComponent: store.workspace.focusComponent,
1211
});
1312

1413
const mapDispatchToProps = dispatch => ({
15-
updateChildrenSort: ({ newSortValues }) => dispatch(updateChildrenSort({ newSortValues }))
14+
updateChildrenSort: ({ newSortValues }) => dispatch(updateChildrenSort({ newSortValues })),
1615
});
1716

1817
class SortChildren extends Component {
1918
constructor(props) {
2019
super(props);
2120

22-
this.state = {
23-
draggedIndex: null,
24-
draggedOverIndex: null
21+
this.state = {
22+
draggedIndex: null,
23+
draggedOverIndex: null,
2524
};
26-
} // end constrcutor
27-
28-
setLocalArray = () =>{
29-
const localArray = this.props.focusComponent.childrenArray.map((child,idx) => {
30-
return {childId: child.childId, childSort: child.childSort}
31-
} )
32-
return localArray ;
33-
}
25+
} // end constrcutor
3426

27+
setLocalArray = () => {
28+
const localArray = this.props.focusComponent.childrenArray.map((child, idx) => {
29+
return { childId: child.childId, childSort: child.childSort };
30+
});
31+
return localArray;
32+
};
3533

36-
onDragStart = (e,idx) => {
37-
38-
this.setState({draggedIndex:idx})
34+
onDragStart = (e, idx) => {
35+
this.setState({ draggedIndex: idx });
3936

40-
e.dataTransfer.effectAllowed = "move";
41-
e.dataTransfer.setData("text/html", e.target.parentNode);
37+
e.dataTransfer.effectAllowed = 'move';
38+
e.dataTransfer.setData('text/html', e.target.parentNode);
4239
e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
4340
};
44-
4541

46-
onDragOver = (idx) => {
47-
48-
this.setState({draggedOverIndex:idx})
49-
// console.log(`onDragOver idx=${idx} this.state.draggedOverIndex:${this.state.draggedOverIndex}`)
42+
onDragOver = idx => {
43+
this.setState({ draggedOverIndex: idx });
5044
};
5145

5246
onDragEnd(e) {
5347
console.log(`dragEnd this
5448
state.draggedIndex: ${this.state.draggedIndex}
55-
this.state.draggedOverIndex: ${this.state.draggedOverIndex}`
56-
)
57-
//const {draggedIndex, draggedOverIndex } = this.state;
58-
if (this.state.draggedIndex === this.state.draggedOverIndex
59-
// || !this.state.draggedIndex || this.state.draggedOverIndex
60-
) {
49+
this.state.draggedOverIndex: ${this.state.draggedOverIndex}`);
50+
if (
51+
this.state.draggedIndex === this.state.draggedOverIndex
52+
// || !this.state.draggedIndex || this.state.draggedOverIndex
53+
) {
6154
return;
6255
}
6356

64-
let currentSortValues = this.setLocalArray();
65-
// console.log(`currentSortValues`,JSON.stringify((currentSortValues)))
57+
let currentSortValues = this.setLocalArray();
6658

67-
// remove the dragged Item and save it, we will use add it back in a moment.
68-
const draggedBaby = currentSortValues[this.state.draggedIndex] ;
69-
currentSortValues.splice(this.state.draggedIndex,1) ;
70-
71-
// put back the dragge item after the dragged Over
72-
currentSortValues.splice(this.state.draggedOverIndex, 0, draggedBaby)
73-
//console.log(`currentSortValues after reAdding the dragged baby `,JSON.stringify(currentSortValues))
59+
// remove the dragged Item and save it, we will use add it back in a moment.
60+
const draggedBaby = currentSortValues[this.state.draggedIndex];
61+
currentSortValues.splice(this.state.draggedIndex, 1);
7462

75-
currentSortValues = currentSortValues.map((child,idx) => {
76-
return {childId:child.childId, childSort: idx+1}
77-
})
63+
// put back the dragge item after the dragged Over
64+
currentSortValues.splice(this.state.draggedOverIndex, 0, draggedBaby);
7865

79-
console.log(`currentSortValues after updating the sort `,JSON.stringify(currentSortValues))
66+
currentSortValues = currentSortValues.map((child, idx) => {
67+
return { childId: child.childId, childSort: idx + 1 };
68+
});
8069

81-
this.props.updateChildrenSort({newSortValues: currentSortValues});
70+
console.log(`currentSortValues after updating the sort `, JSON.stringify(currentSortValues));
8271

83-
this.setState({draggedIndex: 0, draggedOverIndex: 0 })
72+
this.props.updateChildrenSort({ newSortValues: currentSortValues });
8473

74+
this.setState({ draggedIndex: 0, draggedOverIndex: 0 });
8575
}
8676

87-
render() {
88-
const ulStyle = {
89-
margin: 0,
90-
padding: 0,
91-
listStyle: "none",
92-
}
77+
render() {
78+
const ulStyle = {
79+
margin: 0,
80+
padding: 0,
81+
listStyle: 'none',
82+
};
9383

94-
const liStyle = {
95-
backgroundColor: "#383838",
96-
padding: "10px 20px",
97-
position: "relative",
98-
display: "flex",
99-
alignItems: "flex-start",
100-
lineHeight: 1,
101-
cursor: "move",
102-
}
103-
//const children = this.props.focusComponent.childrenArray;
104-
// const List = children
105-
const List = cloneDeep(this.props.focusComponent.childrenArray)
106-
.sort( (a,b) => a.childSort - b.childSort )
107-
.map( (child,idx) => {
108-
return (
109-
<li
110-
style={liStyle}
111-
id={child.childId}
112-
key={idx}
113-
>
114-
<div className="drag" draggable
115-
onDragStart={e => this.onDragStart(e,idx) }
116-
onDragOver ={e => this.onDragOver(idx)}
117-
onDragEnd ={e => this.onDragEnd() }
118-
>
119-
{child.componentName + child.childId}
120-
</div>
121-
122-
</li>
123-
)})
124-
return (
125-
<div
126-
style={{
127-
minWidth: '200px',
84+
const liStyle = {
85+
backgroundColor: '#383838',
86+
padding: '10px 20px',
12887
position: 'relative',
129-
float: 'left',
130-
marginTop: '20px',
131-
marginRIght: '20px',
132-
}}
133-
>
134-
<h3>Childrens List</h3>
135-
<ul style={ulStyle}>
136-
137-
{cloneDeep(this.props.focusComponent.childrenArray)
138-
.sort( (a,b) => a.childSort - b.childSort )
139-
.map( (child,idx) => {
140-
return (
141-
<li
142-
style={liStyle}
143-
id={child.childId}
144-
key={idx}
145-
>
146-
<div className="drag" draggable
147-
onDragStart={e => this.onDragStart(e,idx) }
148-
onDragOver ={e => this.onDragOver(idx)}
149-
onDragEnd ={e => this.onDragEnd() }
150-
>
151-
{child.componentName + child.childId}
152-
</div>
153-
154-
</li>
155-
)})}
156-
157-
158-
{/* {List} */}
159-
</ul>
160-
</div>
161-
)
88+
display: 'flex',
89+
alignItems: 'flex-start',
90+
lineHeight: 1,
91+
cursor: 'move',
92+
};
93+
//const children = this.props.focusComponent.childrenArray;
94+
// const List = children
95+
const List = cloneDeep(this.props.focusComponent.childrenArray)
96+
.sort((a, b) => a.childSort - b.childSort)
97+
.map((child, idx) => {
98+
return (
99+
<li style={liStyle} id={child.childId} key={idx}>
100+
<div
101+
className="drag"
102+
draggable
103+
onDragStart={e => this.onDragStart(e, idx)}
104+
onDragOver={e => this.onDragOver(idx)}
105+
onDragEnd={e => this.onDragEnd()}
106+
>
107+
{child.componentName + child.childId}
108+
</div>
109+
</li>
110+
);
111+
});
112+
return (
113+
<div
114+
style={{
115+
minWidth: '200px',
116+
position: 'relative',
117+
float: 'left',
118+
marginTop: '20px',
119+
marginRIght: '20px',
120+
}}
121+
>
122+
<h3>Childrens List</h3>
123+
<ul style={ulStyle}>
124+
{cloneDeep(this.props.focusComponent.childrenArray)
125+
.sort((a, b) => a.childSort - b.childSort)
126+
.map((child, idx) => {
127+
return (
128+
<li style={liStyle} id={child.childId} key={idx}>
129+
<div
130+
className="drag"
131+
draggable
132+
onDragStart={e => this.onDragStart(e, idx)}
133+
onDragOver={e => this.onDragOver(idx)}
134+
onDragEnd={e => this.onDragEnd()}
135+
>
136+
{child.componentName + child.childId}
137+
</div>
138+
</li>
139+
);
140+
})}
141+
142+
{/* {List} */}
143+
</ul>
144+
</div>
145+
);
162146
}
163-
}
147+
}
164148

165149
export default connect(
166150
mapStateToProps,
167-
mapDispatchToProps
168-
)(SortChildren);
151+
mapDispatchToProps,
152+
)(SortChildren);

‎src/containers/LeftContainer.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,6 @@ class LeftContainer extends Component<PropsInt, StateInt> {
131131
chooseAppDir = () => IPC.send('choose_app_dir');
132132

133133
showGenerateAppModal = () => {
134-
console.log('clicked on export button');
135134
const { closeModal, chooseGenOptions } = this;
136135
const { genOptions } = this.state;
137136
const children = (

‎src/utils/componentReducer.util.ts‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ const initialComponentState: ComponentInt = {
2222
position: {
2323
x: 25,
2424
y: 25,
25-
width: 600,
26-
height: 400,
25+
width: 800,
26+
height: 550,
2727
},
2828
childrenArray: [],
2929
nextChildId: 1,
@@ -128,7 +128,6 @@ export const addChild = (
128128
console.log(`Did not add html child: ${htmlElement} the GetSize function indicated that it isnt in our DB`);
129129
return;
130130
}
131-
// console.log(`htmlElemPosition: ${JSON.stringify(htmlElemPosition)}`);
132131
}
133132

134133
const newPosition =
@@ -186,10 +185,6 @@ export const deleteChild = (
186185
state: ApplicationStateInt,
187186
{ parentId = state.focusComponent.id, childId = state.focusChild.childId, calledFromDeleteComponent = false },
188187
) => {
189-
console.log(`delete child here. state.focusChild.childId = ${state.focusChild.childId}
190-
state.focusComponent.id=${
191-
state.focusComponent.id
192-
} myPrms: parentId:${parentId} childId${childId} calledFromDeleteComponent:${calledFromDeleteComponent}`);
193188
/** ************************************************
194189
if no parameters are provided we default to delete the FOCUSED CHILD of the FOCUSED COMPONENTS
195190
however when deleting component we wnt to delete ALL the places where it's used, so we call this function
@@ -339,13 +334,11 @@ export const deleteComponent = (state: ApplicationStateInt, { componentId }: { c
339334
}
340335

341336
const indexToDelete = state.components.findIndex(comp => comp.id == componentId);
342-
console.log('index to delete: ', indexToDelete);
343337

344338
const componentsCopy = cloneDeep(state.components);
345339
componentsCopy.splice(indexToDelete, 1);
346340
const totalComponents = state.totalComponents - 1;
347341

348-
console.log(`Real delete component action here : id:${componentId}`);
349342
return {
350343
...state,
351344
totalComponents,
@@ -548,9 +541,6 @@ export const updateHtmlAttr = (state: ApplicationStateInt, { attr, value }: { at
548541
};
549542

550543
export const updateChildrenSort = (state: ApplicationStateInt, { newSortValues }: { newSortValues: any }) => {
551-
console.log('hello from updateChildrenSort. newSortValues: ', newSortValues);
552-
553-
// const modifiedChildrenArray:ChildrenInt = JSON.parse(JSON.stringify(state.focusComponent.childrenArray)) ;
554544
const modifiedChildrenArray: ChildrenInt = cloneDeep(state.focusComponent.childrenArray);
555545

556546
for (let i = 0; i < modifiedChildrenArray.length; i += 1) {

0 commit comments

Comments
 (0)