Skip to content

Commit 6e11f57

Browse files
tolgamizrakcitolgamizrakci
authored
Merge pull request #100 from tolgamizrakci/development
Development
2 parents 0d91c7a + ea74fd1 commit 6e11f57

20 files changed

+1197
-683
lines changed

‎src/components/BottomPanel.jsx‎ renamed to ‎src/components/BottomPanel.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,32 @@ import {
55
deleteCompProp,
66
addCompProp
77
} from "../actions/components.ts";
8-
import BottomTabs from "./BottomTabs";
8+
import BottomTabs from "./BottomTabs.tsx";
9+
import { ComponentInt, ComponentsInt, ChildInt } from "../utils/interfaces";
910

1011
const IPC = require("electron").ipcRenderer;
1112

12-
const mapDispatchToProps = dispatch => ({
13+
const mapDispatchToProps = (dispatch: any) => ({
1314
handleNotificationClose: () => dispatch(handleClose()),
14-
deleteProp: ({ id, index }) => dispatch(deleteCompProp({ id, index })),
15-
addProp: prop => dispatch(addCompProp(prop))
15+
deleteProp: ({ id, index }: { id: number; index: number }) =>
16+
dispatch(deleteCompProp({ id, index })),
17+
addProp: (prop: any) => dispatch(addCompProp(prop))
1618
});
1719

18-
const mapStateToProps = store => ({
20+
const mapStateToProps = (store: any) => ({
1921
focusChild: store.workspace.focusChild,
2022
components: store.workspace.components
2123
});
2224

23-
class BottomPanel extends Component {
25+
interface PropsInt {
26+
focusChild: ChildInt;
27+
components: ComponentsInt;
28+
focusComponent: ComponentInt;
29+
deleteProp: any;
30+
addProp: any;
31+
}
32+
33+
class BottomPanel extends Component<PropsInt> {
2434
// viewAppDir = () => {
2535
// IPC.send('view_app_dir', this.props.appDir);
2636
// };

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

Lines changed: 108 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,92 @@
1-
import React, { Component } from 'react';
2-
import { withStyles } from '@material-ui/core/styles';
3-
import Tabs from '@material-ui/core/Tabs';
4-
import Tab from '@material-ui/core/Tab';
5-
import Tree from 'react-d3-tree';
6-
import Props from './Props.jsx';
7-
import HtmlAttr from './HtmlAttr.jsx';
8-
import CodePreview from './CodePreview.tsx';
1+
import React, { Component } from "react";
2+
import { withStyles } from "@material-ui/core/styles";
3+
import Tabs from "@material-ui/core/Tabs";
4+
import Tab from "@material-ui/core/Tab";
5+
import Tree from "react-d3-tree";
6+
import Props from "./Props.tsx";
7+
import HtmlAttr from "./HtmlAttr.tsx";
8+
import CodePreview from "./CodePreview.tsx";
9+
import { ComponentInt, ComponentsInt, ChildInt } from "../utils/interfaces";
910
// import Tree from "./Tree.jsx";
1011

11-
const styles = theme => ({
12+
interface PropsInt {
13+
focusChild: ChildInt;
14+
components: ComponentsInt;
15+
focusComponent: ComponentInt;
16+
deleteProp: any;
17+
addProp: any;
18+
classes: any;
19+
}
20+
21+
// interface TreeAttributesInt {
22+
// key: string;
23+
// value: string;
24+
// }
25+
26+
interface TreeInt {
27+
name: string;
28+
attributes: { [key: string]: { value: string } };
29+
children: TreeInt[];
30+
}
31+
32+
const styles = (theme: any): any => ({
1233
root: {
1334
flexGrow: 1,
1435
// backgroundColor: "#212121",
15-
backgroundColor: '#333333',
16-
height: '100%',
17-
color: '#fff',
18-
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
36+
backgroundColor: "#333333",
37+
height: "100%",
38+
color: "#fff",
39+
boxShadow: "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)"
1940
},
2041
tabsRoot: {
21-
borderBottom: '0.5px solid #424242',
42+
borderBottom: "0.5px solid #424242"
2243
// backgroundColor: "#424242"
2344
},
2445
tabsIndicator: {
25-
backgroundColor: '#1de9b6',
46+
backgroundColor: "#1de9b6"
2647
},
2748
tabRoot: {
28-
textTransform: 'initial',
49+
textTransform: "initial",
2950
minWidth: 72,
3051
fontWeight: theme.typography.fontWeightRegular,
3152
marginRight: theme.spacing.unit * 4,
3253

3354
fontFamily: [
34-
'-apple-system',
35-
'BlinkMacSystemFont',
55+
"-apple-system",
56+
"BlinkMacSystemFont",
3657
'"Segoe UI"',
37-
'Roboto',
58+
"Roboto",
3859
'"Helvetica Neue"',
39-
'Arial',
40-
'sans-serif',
60+
"Arial",
61+
"sans-serif",
4162
'"Apple Color Emoji"',
4263
'"Segoe UI Emoji"',
43-
'"Segoe UI Symbol"',
44-
].join(','),
45-
'&:hover': {
46-
color: '#1de9b6',
47-
opacity: 1,
48-
},
49-
'&$tabSelected': {
50-
color: '#33eb91',
51-
fontWeight: theme.typography.fontWeightMedium,
64+
'"Segoe UI Symbol"'
65+
].join(","),
66+
"&:hover": {
67+
color: "#1de9b6",
68+
opacity: 1
5269
},
53-
'&:focus': {
54-
color: '#4aedc4',
70+
"&$tabSelected": {
71+
color: "#33eb91",
72+
fontWeight: theme.typography.fontWeightMedium
5573
},
74+
"&:focus": {
75+
color: "#4aedc4"
76+
}
5677
},
5778
tabSelected: {},
5879
typography: {
59-
padding: theme.spacing.unit * 3,
80+
padding: theme.spacing.unit * 3
6081
},
6182
padding: {
62-
padding: `0 ${theme.spacing.unit * 2}px`,
63-
},
83+
padding: `0 ${theme.spacing.unit * 2}px`
84+
}
6485
});
6586

66-
class BottomTabs extends Component {
87+
class BottomTabs extends Component<PropsInt> {
6788
state = {
68-
value: 0,
89+
value: 0
6990
};
7091

7192
componentDidMount() {
@@ -74,49 +95,55 @@ class BottomTabs extends Component {
7495
this.setState({
7596
translate: {
7697
x: dimensions.width / 12,
77-
y: dimensions.height / 2.2,
78-
},
98+
y: dimensions.height / 2.2
99+
}
79100
});
80101
}
81102

82-
handleChange = (event, value) => {
103+
handleChange = (event: any, value: number) => {
83104
this.setState({ value });
84105
};
85106

86-
findChildren(component, components, tree) {
107+
findChildren(component: ComponentInt, components: ComponentsInt, tree: any) {
87108
if (!component.childrenArray.length) {
88109
return tree;
89110
}
90111
const newChildrenArray = [];
91112

92113
for (let i = 0; i < component.childrenArray.length; i++) {
93114
const name = component.childrenArray[i].componentName;
94-
const newTree = {
115+
const newTree: TreeInt = {
95116
name,
96117
attributes: {},
97-
children: [],
118+
children: []
98119
};
99120
newChildrenArray.push(newTree);
100121
tree.children = newChildrenArray;
101-
if (component.childrenArray[i].childType === 'COMP') {
122+
if (component.childrenArray[i].childType === "COMP") {
102123
const newFocusComp = components.find(
103-
comp => comp.title === component.childrenArray[i].componentName,
124+
comp => comp.title === component.childrenArray[i].componentName
104125
);
105126
this.findChildren(newFocusComp, components, newTree);
106127
}
107128
}
108129
return tree;
109130
}
110131

111-
generateComponentTree(componentId, components) {
132+
generateComponentTree(componentId: number, components: ComponentsInt) {
112133
const component = components.find(comp => comp.id === componentId);
113134
const tree = { name: component.title, attributes: {}, children: [] };
114135

115-
component.childrenArray.forEach((child) => {
116-
if (child.childType === 'COMP') {
117-
tree.children.push(this.generateComponentTree(child.childComponentId, components));
136+
component.childrenArray.forEach(child => {
137+
if (child.childType === "COMP") {
138+
tree.children.push(
139+
this.generateComponentTree(child.childComponentId, components)
140+
);
118141
} else {
119-
tree.children.push({ name: child.componentName, attributes: {}, children: [] });
142+
tree.children.push({
143+
name: child.componentName,
144+
attributes: {},
145+
children: []
146+
});
120147
}
121148
});
122149
return tree;
@@ -129,21 +156,22 @@ class BottomTabs extends Component {
129156
focusComponent,
130157
deleteProp,
131158
addProp,
132-
focusChild,
159+
focusChild
133160
// rightColumnOpen
134161
} = this.props;
135162
const { value } = this.state;
136163

137164
// display count on the tab. user can see without clicking into tab
138165
const propCount = focusComponent.props.length;
139-
const htmlAttribCount = focusComponent.childrenArray.filter(child => child.childType === 'HTML')
140-
.length;
166+
const htmlAttribCount = focusComponent.childrenArray.filter(
167+
child => child.childType === "HTML"
168+
).length;
141169

142170
// const counters = focusComponent.ch
143171
const tree = {
144172
name: focusComponent.title,
145173
attributes: {},
146-
children: [],
174+
children: []
147175
};
148176

149177
return (
@@ -166,12 +194,14 @@ class BottomTabs extends Component {
166194
<Tab
167195
disableRipple
168196
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
169-
label={`Component Props ${propCount ? `(${propCount})` : ''} `}
197+
label={`Component Props ${propCount ? `(${propCount})` : ""} `}
170198
/>
171199
<Tab
172200
disableRipple
173201
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
174-
label={`HTML Element Attributes ${htmlAttribCount ? `(${htmlAttribCount})` : ''} `}
202+
label={`HTML Element Attributes ${
203+
htmlAttribCount ? `(${htmlAttribCount})` : ""
204+
} `}
175205
/>
176206
{/* <Tab
177207
disableRipple
@@ -184,8 +214,8 @@ class BottomTabs extends Component {
184214
<div
185215
id="treeWrapper"
186216
style={{
187-
width: '100%',
188-
height: '100%',
217+
width: "100%",
218+
height: "100%"
189219
}}
190220
ref={node => (this.treeWrapper = node)}
191221
>
@@ -199,30 +229,35 @@ class BottomTabs extends Component {
199229
nodes: {
200230
node: {
201231
name: {
202-
fill: '#D3D3D3',
203-
stroke: '#D3D3D3',
204-
strokeWidth: 1,
205-
},
232+
fill: "#D3D3D3",
233+
stroke: "#D3D3D3",
234+
strokeWidth: 1
235+
}
206236
},
207237
leafNode: {
208238
name: {
209-
fill: '#D3D3D3',
210-
stroke: '#D3D3D3',
211-
strokeWidth: 1,
212-
},
213-
},
214-
},
239+
fill: "#D3D3D3",
240+
stroke: "#D3D3D3",
241+
strokeWidth: 1
242+
}
243+
}
244+
}
215245
}}
216246
/>
217247
</div>
218248
)}
219-
{value === 1 && <CodePreview focusComponent={focusComponent} components={components} />}
249+
{value === 1 && (
250+
<CodePreview
251+
focusComponent={focusComponent}
252+
components={components}
253+
/>
254+
)}
220255
{value === 2 && <Props />}
221-
{value === 3 && focusChild.childType === 'HTML' && <HtmlAttr />}
222-
{value === 3
223-
&& focusChild.childType !== 'HTML' && (
256+
{value === 3 && focusChild.childType === "HTML" && <HtmlAttr />}
257+
{value === 3 &&
258+
focusChild.childType !== "HTML" && (
224259
<p>Please select an HTML element to view attributes</p>
225-
)}
260+
)}
226261
</div>
227262
);
228263
}

‎src/components/CodePreview.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
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-
import { ComponentInt, ComponentsInt } from '../utils/interfaces';
6-
import SortChildren from './SortChildren.jsx';
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+
import { ComponentInt, ComponentsInt } from "../utils/interfaces";
6+
// import SortChildren from './SortChildren.jsx';
77

88
type Props = {
99
focusComponent: ComponentInt;
@@ -20,22 +20,22 @@ class CodePreview extends Component<Props> {
2020
{/* <SortChildren /> */}
2121
<div
2222
style={{
23-
width: '800px',
24-
height: '290px',
25-
direction: 'rtl',
26-
paddingLeft: '20px',
27-
color: '#D3D3D3',
23+
width: "800px",
24+
height: "290px",
25+
direction: "rtl",
26+
paddingLeft: "20px",
27+
color: "#D3D3D3",
2828
fontSize: 16,
29-
overflow: 'auto',
29+
overflow: "auto"
3030
}}
3131
>
32-
<pre style={{ direction: 'ltr' }}>
32+
<pre style={{ direction: "ltr" }}>
3333
{format(componentRender(focusComponent, components), {
3434
singleQuote: true,
35-
trailingComma: 'es5',
35+
trailingComma: "es5",
3636
bracketSpacing: true,
3737
jsxBracketSameLine: true,
38-
parser: 'typescript',
38+
parser: "typescript"
3939
})}
4040
</pre>
4141
</div>

0 commit comments

Comments
 (0)