Skip to content

Commit c12aa66

Browse files
ChristianEdwardPadillaChristianEdwardPadilla
committed
tolga breaking changes
2 parents 59ce481 + 639d41c commit c12aa66

16 files changed

+773
-453
lines changed

‎src/components/MainContainerHeader.jsx renamed to ‎src/components/ApplicationActions.jsx

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,52 @@
1-
import React from 'react';
1+
import React from "react";
22
// import PropTypes from 'prop-types';
3-
import Button from '@material-ui/core/Button';
4-
import ZoomInIcon from '@material-ui/icons/ZoomIn';
5-
import ZoomOutIcon from '@material-ui/icons/ZoomOut';
6-
import ImageSearchIcon from '@material-ui/icons/ImageSearch';
7-
import OpenWithIcon from '@material-ui/icons/OpenWith';
8-
import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
9-
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
10-
import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
11-
import GetAppIcon from '@material-ui/icons/GetApp';
12-
import { withStyles } from '@material-ui/core/styles';
13-
import Tooltip from '@material-ui/core/Tooltip';
3+
import Button from "@material-ui/core/Button";
4+
import ZoomInIcon from "@material-ui/icons/ZoomIn";
5+
import ZoomOutIcon from "@material-ui/icons/ZoomOut";
6+
import ImageSearchIcon from "@material-ui/icons/ImageSearch";
7+
import OpenWithIcon from "@material-ui/icons/OpenWith";
8+
import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";
9+
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
10+
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
11+
import GetAppIcon from "@material-ui/icons/GetApp";
12+
import { withStyles } from "@material-ui/core/styles";
13+
import Tooltip from "@material-ui/core/Tooltip";
1414

1515
const styles = () => ({
1616
iconSmall: {
17-
fontSize: 10,
17+
fontSize: 10
1818
},
1919
button: {
2020
// borderRight: '1px solid grey',
21-
borderRadius: '0px',
22-
backgroundColor: '#212121',
21+
borderRadius: "0px",
22+
backgroundColor: "#212121",
2323

24-
'&:hover > span > svg': {
25-
color: '#1de9b6',
26-
transition: 'all .2s ease',
24+
"&:hover > span > svg": {
25+
color: "#1de9b6",
26+
transition: "all .2s ease"
2727
},
28-
'&:hover': {
29-
backgroundColor: '#212121',
28+
"&:hover": {
29+
backgroundColor: "#212121"
3030
},
31-
'&:disabled': {
32-
backgroundColor: '#424242',
31+
"&:disabled": {
32+
backgroundColor: "#424242"
3333
},
3434

35-
'&:disabled > span > svg': {
36-
color: '#eee',
37-
opacity: '0.3',
38-
},
35+
"&:disabled > span > svg": {
36+
color: "#eee",
37+
opacity: "0.3"
38+
}
3939
},
4040
light: {
41-
color: '#eee',
41+
color: "#eee"
4242
// opacity: '0.7',
4343
},
4444
dark: {
45-
color: '#1de9b6',
46-
},
45+
color: "#1de9b6"
46+
}
4747
});
4848

49-
50-
const MainContainerHeader = (props) => {
49+
const MainContainerHeader = props => {
5150
const {
5251
classes,
5352
image,
@@ -56,7 +55,7 @@ const MainContainerHeader = (props) => {
5655
totalComponents,
5756
showGenerateAppModal,
5857
collapseColumn,
59-
rightColumnOpen,
58+
rightColumnOpen
6059
} = props;
6160

6261
return (
@@ -74,14 +73,18 @@ const MainContainerHeader = (props) => {
7473
</Button>
7574
</div>
7675
</Tooltip>
77-
<Tooltip title={image ? 'update image' : 'upload image'}>
76+
<Tooltip title={image ? "update image" : "upload image"}>
7877
<div>
79-
<Button color="default" className={classes.button} onClick={updateImage}>
78+
<Button
79+
color="default"
80+
className={classes.button}
81+
onClick={updateImage}
82+
>
8083
<ImageSearchIcon className={classes.light} />
8184
</Button>
8285
</div>
8386
</Tooltip>
84-
<Tooltip title={'export'}>
87+
<Tooltip title={"export"}>
8588
<div>
8689
<Button
8790
color="default"

‎src/components/BottomPanel.jsx

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1-
import React, { Component } from 'react';
2-
import { connect } from 'react-redux';
3-
import { handleClose, deleteCompProp, addCompProp } from '../actions/components';
4-
import RightTabs from './RightTabs.jsx';
1+
import React, { Component } from "react";
2+
import { connect } from "react-redux";
3+
import {
4+
handleClose,
5+
deleteCompProp,
6+
addCompProp
7+
} from "../actions/components";
8+
import RightTabs from "./RightTabs.jsx";
9+
import { some } from "bluebird-lst";
510

6-
const IPC = require('electron').ipcRenderer;
11+
const IPC = require("electron").ipcRenderer;
712

813
const mapDispatchToProps = dispatch => ({
914
handleNotificationClose: () => dispatch(handleClose()),
1015
deleteProp: ({ id, index }) => dispatch(deleteCompProp({ id, index })),
11-
addProp: prop => dispatch(addCompProp(prop)),
16+
addProp: prop => dispatch(addCompProp(prop))
1217
});
1318

1419
const mapStateToProps = store => ({
1520
// successOpen: store.workspace.successOpen,
1621
// errorOpen: store.workspace.errorOpen,
1722
// appDir: store.workspace.appDir,
23+
focusChild: store.workspace.focusChild
1824
});
1925

2026
class BottomPanel extends Component {
@@ -24,7 +30,7 @@ class BottomPanel extends Component {
2430
// };
2531

2632
viewAppDir = () => {
27-
IPC.send('view_app_dir', this.props.appDir);
33+
IPC.send("view_app_dir", this.props.appDir);
2834
};
2935

3036
render() {
@@ -37,16 +43,18 @@ class BottomPanel extends Component {
3743
focusComponent,
3844
deleteProp,
3945
addProp,
46+
focusChild
4047
// rightColumnOpen
4148
} = this.props;
4249

4350
return (
44-
<div className="bottom-panel" style={{ width: '100%' }}>
51+
<div className="bottom-panel" style={{ width: "100%" }}>
4552
<RightTabs
4653
components={components}
4754
focusComponent={focusComponent}
4855
deleteProp={deleteProp}
4956
addProp={addProp}
57+
focusChild={focusChild}
5058
// rightColumnOpen={rightColumnOpen}
5159
/>
5260
{/* <Snackbars
@@ -63,5 +71,5 @@ class BottomPanel extends Component {
6371

6472
export default connect(
6573
mapStateToProps,
66-
mapDispatchToProps,
74+
mapDispatchToProps
6775
)(BottomPanel);

‎src/components/DataTable.jsx

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
import React from 'react';
1+
import React from "react";
22
// import PropTypes from 'prop-types';
3-
import { withStyles } from '@material-ui/core/styles';
4-
import Table from '@material-ui/core/Table';
5-
import TableBody from '@material-ui/core/TableBody';
6-
import TableCell from '@material-ui/core/TableCell';
7-
import TableHead from '@material-ui/core/TableHead';
8-
import TableRow from '@material-ui/core/TableRow';
9-
import Paper from '@material-ui/core/Paper';
10-
import Button from '@material-ui/core/Button';
3+
import { withStyles } from "@material-ui/core/styles";
4+
import Table from "@material-ui/core/Table";
5+
import TableBody from "@material-ui/core/TableBody";
6+
import TableCell from "@material-ui/core/TableCell";
7+
import TableHead from "@material-ui/core/TableHead";
8+
import TableRow from "@material-ui/core/TableRow";
9+
import Paper from "@material-ui/core/Paper";
10+
import Button from "@material-ui/core/Button";
11+
import DeleteIcon from "@material-ui/icons/Delete";
12+
import { IconButton } from "@material-ui/core";
1113

1214
const styles = theme => ({
1315
root: {
14-
width: '100%',
16+
width: "80%",
1517
marginTop: theme.spacing.unit * 3,
16-
overflowX: 'auto',
18+
overflowX: "auto"
1719
},
1820
table: {
19-
minWidth: 700,
20-
},
21+
minWidth: 500
22+
}
2123
});
2224

2325
/** **************************
@@ -26,9 +28,7 @@ const styles = theme => ({
2628
* ****************************** */
2729

2830
function dataTable(props) {
29-
const {
30-
classes, rowData, rowHeader, deletePropHandler,
31-
} = props;
31+
const { classes, rowData, rowHeader, deletePropHandler } = props;
3232

3333
const renderHeader = rowHeader.map((col, idx) => (
3434
<TableCell key={`head_+${idx}`}>{col}</TableCell>
@@ -38,24 +38,33 @@ function dataTable(props) {
3838
if (!row) return;
3939
// for some reason we must put each value in a div.
4040
return rowHeader.map((header, idx) => (
41-
<TableCell key={`td_${idx}`}>
42-
<div>{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div>
41+
<TableCell align={"center"} key={`td_${idx}`}>
42+
{/* <div align={'center'} padding = {'none'} >{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div> */}
43+
{/* {row[header]} */}
44+
{typeof row[header] === "string" ? row[header] : row[header].toString()}
4345
</TableCell>
4446
));
4547
}
46-
48+
//style={{height: 30}}
4749
const renderRows = rowData.map(row => (
4850
<TableRow key={`row-${row.id}`}>
4951
{renderRowCells(row)}
50-
<TableCell>
51-
<Button onClick={() => deletePropHandler(row.id)}>Delete</Button>
52+
<TableCell align={"center"} padding={"none"}>
53+
<IconButton
54+
color="default"
55+
fontSize="small"
56+
onClick={() => deletePropHandler(row.id)}
57+
>
58+
<DeleteIcon />
59+
</IconButton>
60+
{/* <Button style={{height: 20}} onClick={() => deletePropHandler(row.id)}>Delete</Button> */}
5261
</TableCell>
5362
</TableRow>
5463
));
5564

5665
return (
5766
<Paper className={classes.root}>
58-
<Table className={classes.table}>
67+
<Table className={classes.table} selectable={"true"}>
5968
<TableHead>
6069
<TableRow>{renderHeader}</TableRow>
6170
</TableHead>

‎src/components/GrandchildRectangle.jsx

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
import React, { Component } from 'react';
2-
import { Rect, Group } from 'react-konva';
1+
import React, { Component } from "react";
2+
import { Rect, Group } from "react-konva";
33

44
class GrandchildRectangle extends Component {
55
getComponentColor(componentId) {
6-
const color = this.props.components.find(comp => comp.id == componentId).color;
6+
const color = this.props.components.find(comp => comp.id == componentId)
7+
.color;
78
return color;
89
}
910

1011
getPseudoChild() {
11-
return this.props.components.find(comp => comp.id === this.props.childComponentId);
12+
return this.props.components.find(
13+
comp => comp.id === this.props.childComponentId
14+
);
1215
}
1316

1417
render() {
@@ -25,7 +28,7 @@ class GrandchildRectangle extends Component {
2528
width,
2629
height,
2730
focusChild,
28-
components,
31+
components
2932
} = this.props;
3033

3134
// the Group is responsible for dragging of all children
@@ -51,17 +54,21 @@ class GrandchildRectangle extends Component {
5154
scaleY={1}
5255
width={width}
5356
height={height}
54-
stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
57+
stroke={
58+
childType === "COMP"
59+
? this.getComponentColor(childComponentId)
60+
: "#000000"
61+
}
5562
// fill={color}
5663
// opacity={0.8}
5764
strokeWidth={4}
5865
strokeScaleEnabled={false}
5966
draggable={false}
6067
/>
61-
{childType === 'COMP'
62-
&& components
68+
{childType === "COMP" &&
69+
components
6370
.find(comp => comp.title === childComponentName)
64-
.childrenArray.filter(child => child.childId !== '-1')
71+
.childrenArray.filter(child => child.childId !== "-1")
6572
.map((grandchild, i) => (
6673
<GrandchildRectangle
6774
key={i}
@@ -72,17 +79,21 @@ class GrandchildRectangle extends Component {
7279
childComponentId={grandchild.childComponentId}
7380
focusChild={focusChild}
7481
childId={childId}
75-
width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
82+
width={
83+
grandchild.position.width *
84+
(width / this.getPseudoChild().position.width)
85+
}
7686
height={
77-
grandchild.position.height * (height / this.getPseudoChild().position.height)
87+
grandchild.position.height *
88+
(height / this.getPseudoChild().position.height)
7889
}
7990
x={
80-
(grandchild.position.x - this.getPseudoChild().position.x)
81-
* (width / this.getPseudoChild().position.width)
91+
(grandchild.position.x - this.getPseudoChild().position.x) *
92+
(width / this.getPseudoChild().position.width)
8293
}
8394
y={
84-
(grandchild.position.y - this.getPseudoChild().position.y)
85-
* (height / this.getPseudoChild().position.height)
95+
(grandchild.position.y - this.getPseudoChild().position.y) *
96+
(height / this.getPseudoChild().position.height)
8697
}
8798
/>
8899
))}

0 commit comments

Comments
 (0)