Skip to content

Commit 12db67e

Browse files
tonyitotonyito
authored
Merge pull request #23 from sean1292/staging
Fixed typing of Component Props
2 parents 8d3e4f4 + d652e57 commit 12db67e

19 files changed

+593
-20767
lines changed

‎package-lock.json

Lines changed: 0 additions & 19998 deletions
This file was deleted.

‎src/actions/components.ts

Lines changed: 9 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
import {
2-
ComponentInt,
3-
ComponentsInt,
4-
PropInt,
5-
ChildInt,
6-
Action
7-
} from '../utils/Interfaces';
1+
import { ComponentInt, ComponentsInt, PropInt, ChildInt, Action } from '../utils/Interfaces';
82

93
import {
104
LOAD_INIT_DATA,
@@ -55,9 +49,7 @@ export const loadInitData = () => (dispatch: (arg: Action) => void) => {
5549
});
5650
};
5751

58-
export const addComponent = ({ title }: { title: string }) => (
59-
dispatch: (arg: Action) => void
60-
) => {
52+
export const addComponent = ({ title }: { title: string }) => (dispatch: (arg: Action) => void) => {
6153
dispatch({ type: ADD_COMPONENT, payload: { title } });
6254
};
6355

@@ -175,12 +167,7 @@ export const handleClose = () => ({
175167
export const handleTransform = (
176168
componentId: number,
177169
childId: number,
178-
{
179-
x,
180-
y,
181-
width,
182-
height
183-
}: { x: number; y: number; width: number; height: number }
170+
{ x, y, width, height }: { x: number; y: number; width: number; height: number }
184171
) => ({
185172
type: HANDLE_TRANSFORM,
186173
payload: {
@@ -257,21 +244,15 @@ export const deleteAllData = () => ({
257244
type: DELETE_ALL_DATA
258245
});
259246

260-
export const deleteProp = (propId: number) => (
261-
dispatch: (arg: Action) => void
262-
) => {
247+
export const deleteProp = (propId: number) => (dispatch: (arg: Action) => void) => {
263248
dispatch({ type: DELETE_PROP, payload: propId });
264249
};
265250

266-
export const toggleComponentState = (id: string) => (
267-
dispatch: (arg: Action) => void
268-
) => {
251+
export const toggleComponentState = (id: string) => (dispatch: (arg: Action) => void) => {
269252
dispatch({ type: TOGGLE_STATE, payload: id });
270253
};
271254

272-
export const toggleComponentClass = (id: string) => (
273-
dispatch: (arg: Action) => void
274-
) => {
255+
export const toggleComponentClass = (id: string) => (dispatch: (arg: Action) => void) => {
275256
dispatch({ type: TOGGLE_CLASS, payload: id });
276257
};
277258

@@ -280,13 +261,9 @@ export const addProp = (prop: PropInt) => ({
280261
payload: { ...prop }
281262
});
282263

283-
export const updateHtmlAttr = ({
284-
attr,
285-
value
286-
}: {
287-
attr: string;
288-
value: string;
289-
}) => (dispatch: (arg: Action) => void) => {
264+
export const updateHtmlAttr = ({ attr, value }: { attr: string; value: string }) => (
265+
dispatch: (arg: Action) => void
266+
) => {
290267
dispatch({
291268
type: UPDATE_HTML_ATTR,
292269
payload: { attr, value }

‎src/components/BottomPanel.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,27 @@ import React, { Component } from 'react';
22
import { connect } from 'react-redux';
33
import { handleClose, deleteProp, addProp } from '../actions/components';
44
import BottomTabs from './BottomTabs';
5-
import { ComponentInt, ComponentsInt, ChildInt } from '../utils/Interfaces';
5+
import { PropsInt, PropInt } from '../utils/Interfaces';
66

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

99
const mapDispatchToProps = (dispatch: any) => ({
1010
handleNotificationClose: () => dispatch(handleClose()),
1111
deleteProp: (id: number) => dispatch(deleteProp(id)),
12-
addProp: (prop: any) => dispatch(addProp(prop))
12+
addProp: (prop: PropInt) => dispatch(addProp(prop))
1313
});
1414

1515
const mapStateToProps = (store: any) => ({
1616
focusChild: store.workspace.focusChild,
1717
components: store.workspace.components
1818
});
1919

20-
interface PropsInt {
21-
focusChild: ChildInt;
22-
components: ComponentsInt;
23-
focusComponent: ComponentInt;
24-
deleteProp: any;
25-
addProp: any;
20+
interface BottomPanelPropsInt extends PropsInt {
21+
deleteProp(id: number): void;
22+
addProp(prop: PropInt): void;
2623
}
2724

28-
class BottomPanel extends Component<PropsInt> {
25+
class BottomPanel extends Component<BottomPanelPropsInt> {
2926
render() {
3027
const { components, focusComponent, deleteProp, addProp, focusChild } = this.props;
3128

‎src/components/BottomTabs.tsx

Lines changed: 70 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,72 @@
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.ts";
1+
import React, { Component } from 'react';
2+
import { withStyles, Theme } 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';
7+
import HtmlAttr from './HtmlAttr';
8+
import CodePreview from './CodePreview';
9+
import { ComponentInt, ComponentsInt, PropInt, PropsInt } from '../utils/Interfaces';
1010

11-
interface PropsInt {
12-
focusChild: ChildInt;
13-
components: ComponentsInt;
14-
focusComponent: ComponentInt;
15-
deleteProp: any;
16-
addProp: any;
11+
interface BottomTabsPropsInt extends PropsInt {
12+
deleteProp(id: number): void;
13+
addProp(prop: PropInt): void;
1714
classes: any;
1815
}
1916

20-
interface TreeInt {
21-
name: string;
22-
attributes: { [key: string]: { value: string } };
23-
children: TreeInt[];
17+
// interface TreeInt {
18+
// name: string;
19+
// attributes: { [key: string]: { value: string } };
20+
// children: TreeInt[];
21+
// }
22+
23+
interface StateInt {
24+
value: number;
25+
translate: { x: number; y: number };
2426
}
2527

26-
const styles = (theme: any): any => ({
28+
const styles = (theme: Theme): any => ({
2729
root: {
2830
flexGrow: 1,
29-
backgroundColor: "#333333",
30-
height: "100%",
31-
color: "#fff",
32-
boxShadow: "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)"
31+
backgroundColor: '#333333',
32+
height: '100%',
33+
color: '#fff',
34+
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
3335
},
3436
tabsRoot: {
35-
borderBottom: "0.5px solid #424242"
37+
borderBottom: '0.5px solid #424242'
3638
},
3739
tabsIndicator: {
38-
backgroundColor: "#1de9b6"
40+
backgroundColor: '#1de9b6'
3941
},
4042
tabRoot: {
41-
textTransform: "initial",
43+
textTransform: 'initial',
4244
minWidth: 72,
4345
fontWeight: theme.typography.fontWeightRegular,
4446
marginRight: theme.spacing.unit * 4,
4547

4648
fontFamily: [
47-
"-apple-system",
48-
"BlinkMacSystemFont",
49+
'-apple-system',
50+
'BlinkMacSystemFont',
4951
'"Segoe UI"',
50-
"Roboto",
52+
'Roboto',
5153
'"Helvetica Neue"',
52-
"Arial",
53-
"sans-serif",
54+
'Arial',
55+
'sans-serif',
5456
'"Apple Color Emoji"',
5557
'"Segoe UI Emoji"',
5658
'"Segoe UI Symbol"'
57-
].join(","),
58-
"&:hover": {
59-
color: "#1de9b6",
59+
].join(','),
60+
'&:hover': {
61+
color: '#1de9b6',
6062
opacity: 1
6163
},
62-
"&$tabSelected": {
63-
color: "#33eb91",
64+
'&$tabSelected': {
65+
color: '#33eb91',
6466
fontWeight: theme.typography.fontWeightMedium
6567
},
66-
"&:focus": {
67-
color: "#4aedc4"
68+
'&:focus': {
69+
color: '#4aedc4'
6870
}
6971
},
7072
tabSelected: {},
@@ -76,11 +78,15 @@ const styles = (theme: any): any => ({
7678
}
7779
});
7880

79-
class BottomTabs extends Component<PropsInt> {
80-
state = {
81-
value: 0
82-
};
83-
81+
class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
82+
constructor(props: BottomTabsPropsInt) {
83+
super(props);
84+
this.state = {
85+
value: 0,
86+
translate: { x: 0, y: 0 }
87+
};
88+
}
89+
treeWrapper: HTMLDivElement;
8490
componentDidMount() {
8591
// dynamically center the tree based on the div size
8692
const dimensions = this.treeWrapper.getBoundingClientRect();
@@ -98,13 +104,11 @@ class BottomTabs extends Component<PropsInt> {
98104

99105
generateComponentTree(componentId: number, components: ComponentsInt) {
100106
const component = components.find(comp => comp.id === componentId);
101-
const tree = { name: component.title, attributes: {}, children: [] };
107+
const tree: any = { name: component.title, attributes: {}, children: [] };
102108

103109
component.childrenArray.forEach(child => {
104-
if (child.childType === "COMP") {
105-
tree.children.push(
106-
this.generateComponentTree(child.childComponentId, components)
107-
);
110+
if (child.childType === 'COMP') {
111+
tree.children.push(this.generateComponentTree(child.childComponentId, components));
108112
} else {
109113
tree.children.push({
110114
name: child.componentName,
@@ -116,22 +120,14 @@ class BottomTabs extends Component<PropsInt> {
116120
return tree;
117121
}
118122

119-
render() {
120-
const {
121-
classes,
122-
components,
123-
focusComponent,
124-
deleteProp,
125-
addProp,
126-
focusChild
127-
} = this.props;
123+
render(): JSX.Element {
124+
const { classes, components, focusComponent, deleteProp, addProp, focusChild } = this.props;
128125
const { value } = this.state;
129126

130127
// display count on the tab. user can see without clicking into tab
131128
const propCount = focusComponent.props.length;
132-
const htmlAttribCount = focusComponent.childrenArray.filter(
133-
child => child.childType === "HTML"
134-
).length;
129+
const htmlAttribCount = focusComponent.childrenArray.filter(child => child.childType === 'HTML')
130+
.length;
135131

136132
return (
137133
<div className={classes.root}>
@@ -153,14 +149,12 @@ class BottomTabs extends Component<PropsInt> {
153149
<Tab
154150
disableRipple
155151
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
156-
label={`Component Props ${propCount ? `(${propCount})` : ""} `}
152+
label={`Component Props ${propCount ? `(${propCount})` : ''} `}
157153
/>
158154
<Tab
159155
disableRipple
160156
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
161-
label={`HTML Element Attributes ${
162-
htmlAttribCount ? `(${htmlAttribCount})` : ""
163-
} `}
157+
label={`HTML Element Attributes ${htmlAttribCount ? `(${htmlAttribCount})` : ''} `}
164158
/>
165159
{/* <Tab
166160
disableRipple
@@ -173,8 +167,8 @@ class BottomTabs extends Component<PropsInt> {
173167
<div
174168
id="treeWrapper"
175169
style={{
176-
width: "100%",
177-
height: "100%"
170+
width: '100%',
171+
height: '100%'
178172
}}
179173
ref={node => (this.treeWrapper = node)}
180174
>
@@ -187,15 +181,15 @@ class BottomTabs extends Component<PropsInt> {
187181
nodes: {
188182
node: {
189183
name: {
190-
fill: "#D3D3D3",
191-
stroke: "#D3D3D3",
184+
fill: '#D3D3D3',
185+
stroke: '#D3D3D3',
192186
strokeWidth: 1
193187
}
194188
},
195189
leafNode: {
196190
name: {
197-
fill: "#D3D3D3",
198-
stroke: "#D3D3D3",
191+
fill: '#D3D3D3',
192+
stroke: '#D3D3D3',
199193
strokeWidth: 1
200194
}
201195
}
@@ -204,18 +198,12 @@ class BottomTabs extends Component<PropsInt> {
204198
/>
205199
</div>
206200
)}
207-
{value === 1 && (
208-
<CodePreview
209-
focusComponent={focusComponent}
210-
components={components}
211-
/>
212-
)}
201+
{value === 1 && <CodePreview focusComponent={focusComponent} components={components} />}
213202
{value === 2 && <Props />}
214-
{value === 3 && focusChild.childType === "HTML" && <HtmlAttr />}
215-
{value === 3 &&
216-
focusChild.childType !== "HTML" && (
217-
<p>Please select an HTML element to view attributes</p>
218-
)}
203+
{value === 3 && focusChild.childType === 'HTML' && <HtmlAttr />}
204+
{value === 3 && focusChild.childType !== 'HTML' && (
205+
<p>Please select an HTML element to view attributes</p>
206+
)}
219207
</div>
220208
);
221209
}

0 commit comments

Comments
 (0)