Merge branch 'staging' of https://github.com/oslabs-beta/ReacType into feature

Author: jzuniga206

src/components/BottomPanel.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { handleClose, deleteProp, addProp } from '../actions/components';
 import BottomTabs from './BottomTabs';
 import { PropsInt, PropInt } from '../utils/Interfaces';
+import { changeFocusComponent } from '../utils/componentReducer.util';
 
 const IPC = require('electron').ipcRenderer;
 
@@ -20,11 +21,19 @@ const mapStateToProps = (store: any) => ({
 interface BottomPanelPropsInt extends PropsInt {
   deleteProp(id: number): void;
   addProp(prop: PropInt): void;
+  changeFocusComponent(arg: { title: string }): void;
 }
 
 class BottomPanel extends Component<BottomPanelPropsInt> {
   render() {
-    const { components, focusComponent, deleteProp, addProp, focusChild } = this.props;
+    const {
+      components,
+      focusComponent,
+      deleteProp,
+      addProp,
+      focusChild,
+      changeFocusComponent
+    } = this.props;
 
     return (
       <div className="bottom-panel" style={{ width: '100%' }}>
@@ -34,6 +43,7 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
           deleteProp={deleteProp}
           addProp={addProp}
           focusChild={focusChild}
+          changeFocusComponent={changeFocusComponent}
         />
       </div>
     );

src/components/BottomTabs.tsx

@@ -12,6 +12,7 @@ interface BottomTabsPropsInt extends PropsInt {
   deleteProp(id: number): void;
   addProp(prop: PropInt): void;
   classes: any;
+  changeFocusComponent(arg: { title: string }): void;
 }
 
 // interface TreeInt {
@@ -102,6 +103,10 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
     this.setState({ value });
   };
 
+  handleClick = (event: any, node: any) => {
+    this.props.changeFocusComponent({ title: event.name });
+  };
+
   generateComponentTree(componentId: number, components: ComponentsInt) {
     const component = components.find(comp => comp.id === componentId);
     const tree: any = { name: component.title, attributes: {}, children: [] };
@@ -177,6 +182,7 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
               separation={{ siblings: 0.3, nonSiblings: 0.3 }}
               transitionDuration={0}
               translate={this.state.translate}
+              onClick={this.handleClick}
               styles={{
                 nodes: {
                   node: {