Resolved merge conflicts

Author: tonyito

package-lock.json

@@ -1,10 +1,4 @@
-import {
-  ComponentInt,
-  ComponentsInt,
-  PropInt,
-  ChildInt,
-  Action
-} from '../utils/Interfaces';
+import { ComponentInt, ComponentsInt, PropInt, ChildInt, Action } from '../utils/Interfaces';
 
 import {
   LOAD_INIT_DATA,
@@ -61,9 +55,7 @@ export const loadInitData = () => (dispatch: (arg: Action) => void) => {
   });
 };
 
-export const addComponent = ({ title }: { title: string }) => (
-  dispatch: (arg: Action) => void
-) => {
+export const addComponent = ({ title }: { title: string }) => (dispatch: (arg: Action) => void) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
 };
 
@@ -181,12 +173,7 @@ export const handleClose = () => ({
 export const handleTransform = (
   componentId: number,
   childId: number,
-  {
-    x,
-    y,
-    width,
-    height
-  }: { x: number; y: number; width: number; height: number }
+  { x, y, width, height }: { x: number; y: number; width: number; height: number }
 ) => ({
   type: HANDLE_TRANSFORM,
   payload: {
@@ -263,21 +250,15 @@ export const deleteAllData = () => ({
   type: DELETE_ALL_DATA
 });
 
-export const deleteProp = (propId: number) => (
-  dispatch: (arg: Action) => void
-) => {
+export const deleteProp = (propId: number) => (dispatch: (arg: Action) => void) => {
   dispatch({ type: DELETE_PROP, payload: propId });
 };
 
-export const toggleComponentState = (id: string) => (
-  dispatch: (arg: Action) => void
-) => {
+export const toggleComponentState = (id: string) => (dispatch: (arg: Action) => void) => {
   dispatch({ type: TOGGLE_STATE, payload: id });
 };
 
-export const toggleComponentClass = (id: string) => (
-  dispatch: (arg: Action) => void
-) => {
+export const toggleComponentClass = (id: string) => (dispatch: (arg: Action) => void) => {
   dispatch({ type: TOGGLE_CLASS, payload: id });
 };
 
@@ -286,13 +267,9 @@ export const addProp = (prop: PropInt) => ({
   payload: { ...prop }
 });
 
-export const updateHtmlAttr = ({
-  attr,
-  value
-}: {
-  attr: string;
-  value: string;
-}) => (dispatch: (arg: Action) => void) => {
+export const updateHtmlAttr = ({ attr, value }: { attr: string; value: string }) => (
+  dispatch: (arg: Action) => void
+) => {
   dispatch({
     type: UPDATE_HTML_ATTR,
     payload: { attr, value }

src/actions/components.ts

@@ -2,30 +2,27 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { handleClose, deleteProp, addProp } from '../actions/components';
 import BottomTabs from './BottomTabs';
-import { ComponentInt, ComponentsInt, ChildInt } from '../utils/Interfaces';
+import { PropsInt, PropInt } from '../utils/Interfaces';
 
 const IPC = require('electron').ipcRenderer;
 
 const mapDispatchToProps = (dispatch: any) => ({
   handleNotificationClose: () => dispatch(handleClose()),
   deleteProp: (id: number) => dispatch(deleteProp(id)),
-  addProp: (prop: any) => dispatch(addProp(prop))
+  addProp: (prop: PropInt) => dispatch(addProp(prop))
 });
 
 const mapStateToProps = (store: any) => ({
   focusChild: store.workspace.focusChild,
   components: store.workspace.components
 });
 
-interface PropsInt {
-  focusChild: ChildInt;
-  components: ComponentsInt;
-  focusComponent: ComponentInt;
-  deleteProp: any;
-  addProp: any;
+interface BottomPanelPropsInt extends PropsInt {
+  deleteProp(id: number): void;
+  addProp(prop: PropInt): void;
 }
 
-class BottomPanel extends Component<PropsInt> {
+class BottomPanel extends Component<BottomPanelPropsInt> {
   render() {
     const { components, focusComponent, deleteProp, addProp, focusChild } = this.props;
 

src/components/BottomPanel.tsx

@@ -1,70 +1,72 @@
-import React, { Component } from "react";
-import { withStyles } from "@material-ui/core/styles";
-import Tabs from "@material-ui/core/Tabs";
-import Tab from "@material-ui/core/Tab";
-import Tree from "react-d3-tree";
-import Props from "./Props.tsx";
-import HtmlAttr from "./HtmlAttr.tsx";
-import CodePreview from "./CodePreview.tsx";
-import { ComponentInt, ComponentsInt, ChildInt } from "../utils/Interfaces.ts";
+import React, { Component } from 'react';
+import { withStyles, Theme } from '@material-ui/core/styles';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Tree from 'react-d3-tree';
+import Props from './Props';
+import HtmlAttr from './HtmlAttr';
+import CodePreview from './CodePreview';
+import { ComponentInt, ComponentsInt, PropInt, PropsInt } from '../utils/Interfaces';
 
-interface PropsInt {
-  focusChild: ChildInt;
-  components: ComponentsInt;
-  focusComponent: ComponentInt;
-  deleteProp: any;
-  addProp: any;
+interface BottomTabsPropsInt extends PropsInt {
+  deleteProp(id: number): void;
+  addProp(prop: PropInt): void;
   classes: any;
 }
 
-interface TreeInt {
-  name: string;
-  attributes: { [key: string]: { value: string } };
-  children: TreeInt[];
+// interface TreeInt {
+//   name: string;
+//   attributes: { [key: string]: { value: string } };
+//   children: TreeInt[];
+// }
+
+interface StateInt {
+  value: number;
+  translate: { x: number; y: number };
 }
 
-const styles = (theme: any): any => ({
+const styles = (theme: Theme): any => ({
   root: {
     flexGrow: 1,
-    backgroundColor: "#333333",
-    height: "100%",
-    color: "#fff",
-    boxShadow: "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)"
+    backgroundColor: '#333333',
+    height: '100%',
+    color: '#fff',
+    boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
   },
   tabsRoot: {
-    borderBottom: "0.5px solid #424242"
+    borderBottom: '0.5px solid #424242'
   },
   tabsIndicator: {
-    backgroundColor: "#1de9b6"
+    backgroundColor: '#1de9b6'
   },
   tabRoot: {
-    textTransform: "initial",
+    textTransform: 'initial',
     minWidth: 72,
     fontWeight: theme.typography.fontWeightRegular,
     marginRight: theme.spacing.unit * 4,
 
     fontFamily: [
-      "-apple-system",
-      "BlinkMacSystemFont",
+      '-apple-system',
+      'BlinkMacSystemFont',
       '"Segoe UI"',
-      "Roboto",
+      'Roboto',
       '"Helvetica Neue"',
-      "Arial",
-      "sans-serif",
+      'Arial',
+      'sans-serif',
       '"Apple Color Emoji"',
       '"Segoe UI Emoji"',
       '"Segoe UI Symbol"'
-    ].join(","),
-    "&:hover": {
-      color: "#1de9b6",
+    ].join(','),
+    '&:hover': {
+      color: '#1de9b6',
       opacity: 1
     },
-    "&$tabSelected": {
-      color: "#33eb91",
+    '&$tabSelected': {
+      color: '#33eb91',
       fontWeight: theme.typography.fontWeightMedium
     },
-    "&:focus": {
-      color: "#4aedc4"
+    '&:focus': {
+      color: '#4aedc4'
     }
   },
   tabSelected: {},
@@ -76,11 +78,15 @@ const styles = (theme: any): any => ({
   }
 });
 
-class BottomTabs extends Component<PropsInt> {
-  state = {
-    value: 0
-  };
-
+class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
+  constructor(props: BottomTabsPropsInt) {
+    super(props);
+    this.state = {
+      value: 0,
+      translate: { x: 0, y: 0 }
+    };
+  }
+  treeWrapper: HTMLDivElement;
   componentDidMount() {
     // dynamically center the tree based on the div size
     const dimensions = this.treeWrapper.getBoundingClientRect();
@@ -98,13 +104,11 @@ class BottomTabs extends Component<PropsInt> {
 
   generateComponentTree(componentId: number, components: ComponentsInt) {
     const component = components.find(comp => comp.id === componentId);
-    const tree = { name: component.title, attributes: {}, children: [] };
+    const tree: any = { name: component.title, attributes: {}, children: [] };
 
     component.childrenArray.forEach(child => {
-      if (child.childType === "COMP") {
-        tree.children.push(
-          this.generateComponentTree(child.childComponentId, components)
-        );
+      if (child.childType === 'COMP') {
+        tree.children.push(this.generateComponentTree(child.childComponentId, components));
       } else {
         tree.children.push({
           name: child.componentName,
@@ -116,22 +120,14 @@ class BottomTabs extends Component<PropsInt> {
     return tree;
   }
 
-  render() {
-    const {
-      classes,
-      components,
-      focusComponent,
-      deleteProp,
-      addProp,
-      focusChild
-    } = this.props;
+  render(): JSX.Element {
+    const { classes, components, focusComponent, deleteProp, addProp, focusChild } = this.props;
     const { value } = this.state;
 
     // display count on the tab. user can see without clicking into tab
     const propCount = focusComponent.props.length;
-    const htmlAttribCount = focusComponent.childrenArray.filter(
-      child => child.childType === "HTML"
-    ).length;
+    const htmlAttribCount = focusComponent.childrenArray.filter(child => child.childType === 'HTML')
+      .length;
 
     return (
       <div className={classes.root}>
@@ -153,14 +149,12 @@ class BottomTabs extends Component<PropsInt> {
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label={`Component Props ${propCount ? `(${propCount})` : ""} `}
+            label={`Component Props ${propCount ? `(${propCount})` : ''} `}
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label={`HTML Element Attributes ${
-              htmlAttribCount ? `(${htmlAttribCount})` : ""
-            } `}
+            label={`HTML Element Attributes ${htmlAttribCount ? `(${htmlAttribCount})` : ''} `}
           />
           {/* <Tab
             disableRipple
@@ -173,8 +167,8 @@ class BottomTabs extends Component<PropsInt> {
           <div
             id="treeWrapper"
             style={{
-              width: "100%",
-              height: "100%"
+              width: '100%',
+              height: '100%'
             }}
             ref={node => (this.treeWrapper = node)}
           >
@@ -187,15 +181,15 @@ class BottomTabs extends Component<PropsInt> {
                 nodes: {
                   node: {
                     name: {
-                      fill: "#D3D3D3",
-                      stroke: "#D3D3D3",
+                      fill: '#D3D3D3',
+                      stroke: '#D3D3D3',
                       strokeWidth: 1
                     }
                   },
                   leafNode: {
                     name: {
-                      fill: "#D3D3D3",
-                      stroke: "#D3D3D3",
+                      fill: '#D3D3D3',
+                      stroke: '#D3D3D3',
                       strokeWidth: 1
                     }
                   }
@@ -204,18 +198,12 @@ class BottomTabs extends Component<PropsInt> {
             />
           </div>
         )}
-        {value === 1 && (
-          <CodePreview
-            focusComponent={focusComponent}
-            components={components}
-          />
-        )}
+        {value === 1 && <CodePreview focusComponent={focusComponent} components={components} />}
         {value === 2 && <Props />}
-        {value === 3 && focusChild.childType === "HTML" && <HtmlAttr />}
-        {value === 3 &&
-          focusChild.childType !== "HTML" && (
-            <p>Please select an HTML element to view attributes</p>
-          )}
+        {value === 3 && focusChild.childType === 'HTML' && <HtmlAttr />}
+        {value === 3 && focusChild.childType !== 'HTML' && (
+          <p>Please select an HTML element to view attributes</p>
+        )}
       </div>
     );
   }