Skip to content

Commit b5bf798

Browse files
spincycle01ChristianEdwardPadilla
spincycle01
authored and
ChristianEdwardPadilla
committed
converted App.tsx to functional component, merged and removed 2 index.js files
2 parents d2c92db + b20b43d commit b5bf798

17 files changed

+191
-64
lines changed

‎src/components/BottomPanel.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { Component } from 'react';
22
import { connect } from 'react-redux';
3-
import { some } from 'bluebird-lst';
43
import { handleClose, deleteCompProp, addCompProp } from '../actions/components';
5-
import RightTabs from './RightTabs.jsx';
4+
import BottomTabs from './BottomTabs';
65

76
const IPC = require('electron').ipcRenderer;
87

@@ -46,7 +45,7 @@ class BottomPanel extends Component {
4645

4746
return (
4847
<div className="bottom-panel" style={{ width: '100%' }}>
49-
<RightTabs
48+
<BottomTabs
5049
components={components}
5150
focusComponent={focusComponent}
5251
deleteProp={deleteProp}

‎src/components/RightTabs.jsx renamed to ‎src/components/BottomTabs.jsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const styles = theme => ({
6262
},
6363
});
6464

65-
class RightTabs extends Component {
65+
class BottomTabs extends Component {
6666
state = {
6767
value: 0,
6868
};
@@ -98,9 +98,7 @@ class RightTabs extends Component {
9898
newChildrenArray.push(newTree);
9999
tree.children = newChildrenArray;
100100
if (component.childrenArray[i].childType === 'COMP') {
101-
const newFocusComp = components.find(
102-
comp => comp.title === component.childrenArray[i].componentName,
103-
);
101+
const newFocusComp = components.find(comp => comp.title === component.childrenArray[i].componentName);
104102
this.findChildren(newFocusComp, components, newTree);
105103
}
106104
}
@@ -111,7 +109,7 @@ class RightTabs extends Component {
111109
const component = components.find(comp => comp.id === componentId);
112110
const tree = { name: component.title, attributes: {}, children: [] };
113111

114-
component.childrenArray.forEach((child) => {
112+
component.childrenArray.forEach(child => {
115113
if (child.childType === 'COMP') {
116114
tree.children.push(this.generateComponentTree(child.childComponentId, components));
117115
} else {
@@ -133,6 +131,11 @@ class RightTabs extends Component {
133131
} = this.props;
134132
const { value } = this.state;
135133

134+
// display count on the tab. user can see without clicking into tab
135+
const propCount = focusComponent.props.length;
136+
const htmlAttribCount = focusComponent.childrenArray.filter(child => child.childType === 'HTML').length;
137+
138+
// const counters = focusComponent.ch
136139
const tree = {
137140
name: focusComponent.title,
138141
attributes: {},
@@ -154,7 +157,7 @@ class RightTabs extends Component {
154157
<Tab
155158
disableRipple
156159
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
157-
label="Component Props"
160+
label={`Component Props ${propCount ? `(${propCount})` : ''} `}
158161
/>
159162
<Tab
160163
disableRipple
@@ -164,7 +167,7 @@ class RightTabs extends Component {
164167
<Tab
165168
disableRipple
166169
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
167-
label="HTML Element Attributes"
170+
label={`HTML Element Attributes ${htmlAttribCount ? `(${htmlAttribCount})` : ''} `}
168171
/>
169172
</Tabs>
170173

@@ -206,13 +209,10 @@ class RightTabs extends Component {
206209
)}
207210
{value === 1 && <Props />}
208211
{value === 3 && focusChild.childType === 'HTML' && <HtmlAttr />}
209-
{value === 3
210-
&& focusChild.childType !== 'HTML' && (
211-
<p>Please select an HTML element to view attributes</p>
212-
)}
212+
{value === 3 && focusChild.childType !== 'HTML' && <p>Please select an HTML element to view attributes</p>}
213213
</div>
214214
);
215215
}
216216
}
217217

218-
export default withStyles(styles)(RightTabs);
218+
export default withStyles(styles)(BottomTabs);

‎src/components/CodePreview.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { Component, Fragment } from 'react';
2+
import { withStyles } from '@material-ui/core/styles';
3+
import { format } from 'prettier';
4+
import componentRender from '../utils/componentRender.util';
5+
6+
class CodePreview extends Component {
7+
render(): JSX.Element {
8+
const { focusComponent, components } = this.props;
9+
return (
10+
<div
11+
style={{
12+
width: '500px',
13+
height: '290px',
14+
direction: 'rtl',
15+
paddingLeft: '20px',
16+
color: '#D3D3D3',
17+
fontSize: 16,
18+
overflow: 'auto',
19+
}}
20+
>
21+
<pre style={{ direction: 'ltr' }}>
22+
{format(componentRender(focusComponent, components), {
23+
singleQuote: true,
24+
trailingComma: 'es5',
25+
bracketSpacing: true,
26+
jsxBracketSameLine: true,
27+
parser: 'typescript',
28+
})}
29+
</pre>
30+
</div>
31+
);
32+
}
33+
}
34+
35+
export default CodePreview;

‎src/components/KonvaStage.tsx

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Button from '@material-ui/core/Button';
33
import { Stage, Layer, Line, Group, Label, Text, Rect, Transformer } from 'react-konva';
44
import Rectangle from './Rectangle.jsx';
55
import cloneDeep from '../utils/cloneDeep.ts';
6+
import DeleteIcon from '@material-ui/icons/Delete';
7+
import Fab from '@material-ui/core/Fab';
68

79
class KonvaStage extends Component {
810
constructor(props) {
@@ -132,7 +134,7 @@ class KonvaStage extends Component {
132134
};
133135

134136
render() {
135-
const { components, handleTransform, focusComponent, focusChild, deleteChild } = this.props;
137+
const { components, handleTransform, focusComponent, focusChild, deleteChild, classes } = this.props;
136138

137139
return (
138140
<div
@@ -145,7 +147,7 @@ class KonvaStage extends Component {
145147
}}
146148
tabIndex="0" // required for keydown event to be heard by this.container
147149
>
148-
<Button
150+
{/* <Button
149151
onClick={deleteChild}
150152
style={{
151153
width: '150px',
@@ -156,7 +158,30 @@ class KonvaStage extends Component {
156158
}}
157159
>
158160
delete child
159-
</Button>
161+
</Button> */}
162+
<Fab
163+
variant="extended"
164+
size="small"
165+
color="inherit"
166+
aria-label="Delete"
167+
// className={classes.margin}
168+
style={{
169+
width: '150px',
170+
position: 'relative',
171+
float: 'right',
172+
marginTop: '10px',
173+
marginLeft: '10px',
174+
// background: "#dbdbdb",
175+
zIndex: 2,
176+
}}
177+
// style={{ maxWidth: "20px" }}
178+
onClick={deleteChild}
179+
>
180+
<DeleteIcon />
181+
Delete Child
182+
{/* {`Delete
183+
${focusChild.}`} */}
184+
</Fab>
160185
<Stage
161186
className={'canvasStage'}
162187
ref={node => {
@@ -196,7 +221,7 @@ class KonvaStage extends Component {
196221
imageSource={child.htmlElement == 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null}
197222
/>
198223
))
199-
.sort((rectA, rectB) => rectA.props.width * rectA.props.height < rectB.props.width * rectB.props.height) // shouldnt this be subtraction instead of < ? see MDN
224+
.sort((rectA, rectB) => rectB.props.width * rectB.props.height - rectA.props.width * rectA.props.height)
200225
// reasoning for the sort:
201226
// Konva determines zIndex (which rect is clicked on if rects overlap) based on rendering order
202227
// as long as the smallest components are rendered last they will always be accessible over the big boys

‎src/components/Rectangle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ class Rectangle extends Component {
140140
// fill={color}
141141
// opacity={0.8}
142142
onTransformEnd={event => this.handleResize(componentId, childId, event.target, blockSnapSize)}
143-
strokeWidth={4}
143+
strokeWidth={childType === 'COMP' ? 4 : 1}
144144
strokeScaleEnabled={false}
145145
draggable={false}
146146
fill={childId === -1 ? 'white' : null}

‎src/components/SortChildren.jsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
import React, { Component} from "react";
3+
import { connect } from "react-redux";
4+
5+
const mapStateToProps = store => ({
6+
focusComponent: store.workspace.focusComponent,
7+
});
8+
9+
10+
class SortChildren extends Component {
11+
// constructor(props) {
12+
// super(props);
13+
state = {test: 'myTestValue'};
14+
//}
15+
16+
17+
render() {
18+
const children = this.props.focusComponent.childrenArray;
19+
const List = children.map( (child,idx) => {
20+
console.log(`mappping...... ${idx} ${child.componentName + child.childId}`)
21+
return (
22+
<li
23+
Childid={child.Childid}
24+
key={idx}
25+
draggable='true'
26+
// onDragEnd={this.dragEnd.bind(this)}
27+
// onDragStart={this.dragStart.bind(this)}>{item}
28+
>
29+
{child.componentName + child.childId}
30+
</li>
31+
)})
32+
console.log('children')
33+
console.log(children)
34+
console.log('List')
35+
console.log(List)
36+
return (
37+
<div>
38+
<p>Childrens List</p>
39+
{/* <List/> */}
40+
</div>
41+
)
42+
43+
}
44+
45+
}
46+
47+
export default connect(
48+
mapStateToProps
49+
)(SortChildren);

‎src/components/__tests__/App.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
// import '../../setupTests';
33
import { shallow } from 'enzyme';
4-
import App from '../App.tsx';
5-
import AppContainer from '../../containers/AppContainer.tsx';
4+
import App from '../App';
5+
import AppContainer from '../../containers/AppContainer';
66

77
it('contains a AppContainer', () => {
88
// wrapped version of react component

‎src/containers/LeftContainer.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,10 @@ import { withStyles } from '@material-ui/core/styles';
1010
import LeftColExpansionPanel from '../components/LeftColExpansionPanel.jsx';
1111
import HTMLComponentPanel from '../components/HTMLComponentPanel.jsx';
1212
import * as actions from '../actions/components';
13-
1413
const mapDispatchToProps = dispatch => ({
1514
addComponent: ({ title }) => dispatch(actions.addComponent({ title })),
16-
updateComponent: ({ id, index, newParentId = null, color = null, stateful = null }) =>
1715
dispatch(
1816
actions.updateComponent({
19-
id,
2017
index,
2118
newParentId,
2219
color,

‎src/containers/MainContainer.tsx

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@ import React, { Component } from 'react';
22
import { connect } from 'react-redux';
33
import Button from '@material-ui/core/Button';
44
import { MuiThemeProvider } from '@material-ui/core/styles';
5-
import BottomPanel from '../components/BottomPanel.jsx';
65
import List from '@material-ui/core/List';
76
import ListItem from '@material-ui/core/ListItem';
87
import ListItemText from '@material-ui/core/ListItemText';
9-
import BottomPanel from '../components/BottomPanel.jsx';
10-
import theme from '../components/theme.ts';
8+
import BottomPanel from '../components/BottomPanel';
9+
import theme from '../components/theme';
1110
import {
1211
openExpansionPanel,
1312
handleTransform,
@@ -17,9 +16,10 @@ import {
1716
deleteComponent,
1817
createApplication,
1918
} from '../actions/components';
20-
import KonvaStage from '../components/KonvaStage.jsx';
21-
import MainContainerHeader from '../components/MainContainerHeader.jsx';
19+
import KonvaStage from '../components/KonvaStage';
20+
import MainContainerHeader from '../components/MainContainerHeader';
2221
import createModal from '../utils/createModal.util';
22+
import SortChildren from '../components/SortChildren.jsx';
2323

2424
const IPC = require('electron').ipcRenderer;
2525

@@ -50,7 +50,7 @@ const mapDispatchToProps = dispatch => ({
5050
});
5151

5252
const mapStateToProps = store => ({
53-
// totalComponents: store.workspace.totalComponents,
53+
// totalComponents: store.workspace.totalComponents,
5454
focusComponent: store.workspace.focusComponent,
5555
focusChild: store.workspace.focusChild,
5656
stateComponents: store.workspace.components,
@@ -139,15 +139,6 @@ class MainContainer extends Component {
139139
// });
140140
// };
141141

142-
// deleteImage = () => {
143-
// this.props.changeImagePath('');
144-
// this.setState({ image: '' });
145-
// };
146-
147-
closeModal = () => this.setState({ modal: null });
148-
149-
chooseAppDir = () => IPC.send('choose_app_dir');
150-
151142
chooseGenOptions = genOption => {
152143
// set option
153144
this.setState({ genOption });
@@ -168,7 +159,11 @@ class MainContainer extends Component {
168159
key={i}
169160
button
170161
onClick={() => chooseGenOptions(i)}
171-
style={{ border: '1px solid #3f51b5', marginBottom: '2%', marginTop: '5%' }}
162+
style={{
163+
border: '1px solid #3f51b5',
164+
marginBottom: '2%',
165+
marginTop: '5%',
166+
}}
172167
>
173168
<ListItemText primary={option} style={{ textAlign: 'center' }} />
174169
</ListItem>
@@ -197,6 +192,7 @@ class MainContainer extends Component {
197192
deleteChild,
198193
deleteComponent,
199194
stateComponents,
195+
classes,
200196
} = this.props;
201197
const { main, showGenerateAppModal } = this;
202198
const cursor = this.state.draggable ? 'move' : 'default';
@@ -231,6 +227,7 @@ class MainContainer extends Component {
231227
changeFocusChild={changeFocusChild}
232228
changeComponentFocusChild={changeComponentFocusChild}
233229
deleteChild={deleteChild}
230+
classes={classes}
234231
/>
235232
</div>
236233

‎src/containers/RightContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
33
// import PropTypes from 'prop-types';
44
import { handleClose, deleteCompProp, addCompProp } from '../actions/components';
55
// import Snackbars from '../components/Snackbars.jsx';
6-
// import RightTabs from '../components/RightTabs.jsx';
6+
// import BottomTabs from '../components/BottomTabs.jsx';
77

88
const IPC = require('electron').ipcRenderer;
99

0 commit comments

Comments
 (0)