Fixed addprops native mode bug

Author: tonyito

src/components/bottom/BottomPanel.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { handleClose, deleteProp, addProp, toggleNative } from '../../actions/actionCreators';
+import { handleClose, deleteProp, addProp, toggleNative, changeComponentFocusChild } from '../../actions/actionCreators';
 import BottomTabs from './BottomTabs';
 import { PropsInt, PropInt } from '../../interfaces/Interfaces';
 import { toggleCodeEdit } from '../../actions/actionCreators';
@@ -12,7 +12,7 @@ const mapDispatchToProps = (dispatch: any) => ({
   deleteProp: (id: number) => dispatch(deleteProp(id)),
   handleNotificationClose: () => dispatch(handleClose()),
   toggleNative: () => dispatch(toggleNative()),
-  toggleCodeEdit: () => dispatch(toggleCodeEdit())
+  toggleCodeEdit: () => dispatch(toggleCodeEdit()),
 });
 
 const mapStateToProps = (store: any) => ({
@@ -31,6 +31,10 @@ interface BottomPanelPropsInt extends PropsInt {
   native: boolean;
   toggleCodeEdit(): void;
   codeReadOnly: boolean;
+  changeComponentFocusChild(arg: {
+    componentId: number;
+    childId: number;
+  }): void;
 }
 
 class BottomPanel extends Component<BottomPanelPropsInt> {
@@ -46,7 +50,8 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
       toggleNative,
       native,
       toggleCodeEdit,
-      codeReadOnly
+      codeReadOnly,
+      changeComponentFocusChild
     } = this.props;
 
     return (

src/components/bottom/BottomTabs.tsx

@@ -8,7 +8,7 @@ import Props from './Props';
 import HtmlAttr from './HtmlAttr';
 import CodePreview from './CodePreview';
 import Switch from '@material-ui/core/Switch';
-import { ComponentsInt, PropInt, PropsInt } from '../../interfaces/Interfaces';
+import { ComponentsInt, PropsInt } from '../../interfaces/Interfaces';
 import Box from '@material-ui/core/Box';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -36,7 +36,7 @@ const styles = (theme: Theme): any => ({
     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)',
+    boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
   },
   bottomHeader: {
     flex: 1,
@@ -211,17 +211,23 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
           <FormGroup>
             <FormControlLabel
               className={classes.switch}
-              control={<Switch checked={native} color="primary" onChange={() => {
-                toggleNative();
-              }} />}
+              control={
+                <Switch
+                  checked={native}
+                  color="primary"
+                  onChange={() => {
+                    toggleNative();
+                  }}
+                />
+              }
               label="Native Mode"
               labelPlacement="start"
             />
           </FormGroup>
         </Box>
         {value === 0 && (
           <div
-            id='treeWrapper'
+            id="treeWrapper"
             style={{
               width: '80%',
               height: '100%'

src/components/bottom/Props.tsx

@@ -7,14 +7,18 @@ import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import Select from '@material-ui/core/Select';
 import InputLabel from '@material-ui/core/InputLabel';
-import { addProp, deleteProp } from '../../actions/actionCreators';
+import { addProp, changeComponentFocusChild, deleteProp } from '../../actions/actionCreators';
 import DataTable from './DataTable';
 import { PropInt, PropsInt } from '../../interfaces/Interfaces';
 
 interface PropsPropsInt extends PropsInt {
   classes: any;
   addProp(arg: PropInt): void;
   deleteProp(propId: number): void;
+  changeComponentFocusChild(arg: {
+    componentId: number;
+    childId: number;
+  }): void;
 }
 
 const styles = () => ({
@@ -136,11 +140,19 @@ const styles = () => ({
 
 const mapDispatchToProps = (dispatch: any) => ({
   addProp: (prop: PropInt) => dispatch(addProp(prop)),
-  deleteProp: (propId: number) => dispatch(deleteProp(propId))
+  deleteProp: (propId: number) => dispatch(deleteProp(propId)),
+  changeComponentFocusChild: ({
+    componentId,
+    childId
+  }: {
+    componentId: number;
+    childId: number;
+  }) => dispatch(changeComponentFocusChild({ componentId, childId })),
 });
 
 const mapStateToProps = (store: any) => ({
-  focusComponent: store.workspace.focusComponent
+  focusComponent: store.workspace.focusComponent,
+  focusChild: store.workspace.focusChild
 });
 
 // available types for select drop-down for button types
@@ -187,7 +199,7 @@ class Props extends Component<PropsPropsInt, StateInt> {
 
   // using useState to locally check a clickedValue
 
-  handleChange = (event: MouseEvent | any) => {
+  handleChange = (event: any) => {
     if (event.target.id === 'propVariable') {
       this.setState({
         [event.target.id]: event.target.value.trim()
@@ -239,12 +251,15 @@ class Props extends Component<PropsPropsInt, StateInt> {
       type: propType
     });
 
+    this.props.changeComponentFocusChild({ componentId: this.props.focusComponent.id , childId: this.props.focusChild.childId});
     this.setState({
       propVariable: '',
       propValue: '',
       propRequired: true,
       propType: ''
     });
+
+    
   };
 
   render() {