Merge pull request #17 from ChristianEdwardPadilla/development

add button not visible when focused

Author: ChristianEdwardPadilla

src/components/KonvaStage.jsx

@@ -6,7 +6,6 @@ import {
 import TransformerComponent from './TransformerComponent.jsx';
 import Rectangle from './Rectangle.jsx';
 
-
 class KonvaStage extends Component {
   state = {
     x: undefined,
@@ -60,7 +59,13 @@ class KonvaStage extends Component {
 
   render() {
     const {
-      components, handleTransform, image, draggable, scaleX, scaleY, focusComponent,
+      components,
+      handleTransform,
+      image,
+      draggable,
+      scaleX,
+      scaleY,
+      focusComponent,
     } = this.props;
     const { selectedShapeName } = this.state;
 
@@ -80,21 +85,23 @@ class KonvaStage extends Component {
             ref={(node) => {
               this.group = node;
             }}
-            draggable={draggable}>
-            <Image image={image} />
-            {components.map((comp, i) => <Rectangle
-              draggable={comp.draggable}
-              selectedShapeName={selectedShapeName}
-              key={i}
-              componentId={comp.id}
-              x={comp.position.x}
-              y={comp.position.y}
-              width={comp.position.width}
-              height={comp.position.height}
-              title={comp.title}
-              color={comp.color}
-              handleTransform={handleTransform}
-            />)}
+            draggable={draggable}
+          >
+            {components.map((comp, i) => (
+              <Rectangle
+                draggable={comp.draggable}
+                selectedShapeName={selectedShapeName}
+                key={i}
+                componentId={comp.id}
+                x={comp.position.x}
+                y={comp.position.y}
+                width={comp.position.width}
+                height={comp.position.height}
+                title={comp.title}
+                color={comp.color}
+                handleTransform={handleTransform}
+              />
+            ))}
             <TransformerComponent
               focusComponent={focusComponent}
               selectedShapeName={selectedShapeName}

src/components/LeftColExpansionPanel.jsx

@@ -19,27 +19,36 @@ import { changeFocusChild } from '../actions/components';
 
 const LeftColExpansionPanel = (props) => {
   const {
-    index, classes, focusComponent, component, deleteComponent, addChild,
-    changeFocusComponent } = props;
+    index,
+    classes,
+    focusComponent,
+    component,
+    deleteComponent,
+    addChild,
+    changeFocusComponent,
+  } = props;
   const { title, id, color } = component;
 
+  function isFocused() {
+    return focusComponent.title === title ? 'focused' : '';
+  }
+
   return (
     <div className={classes.root}>
-      <Grid item xs={12} md={6} style={{color: 'red'}}>
-        <List
-          style={{color: 'red'}}
-        >
-          <ListItem button component="a"
-              // style={
-              //   if (components.find(comp => comp.title === focusComponent.title))
-              // }
-              style={{color: 'red'}}
-              onClick={()=> {
-                console.log({ title })                
-                changeFocusComponent({ title })
-
-              }}
-            >
+      <Grid item xs={12} md={6} style={{ color: 'red' }}>
+        <List style={{ color: 'red' }}>
+          <ListItem
+            button
+            component="a"
+            // style={
+            //   if (components.find(comp => comp.title === focusComponent.title))
+            // }
+            style={{ color: 'red' }}
+            onClick={() => {
+              console.log({ title });
+              changeFocusComponent({ title });
+            }}
+          >
             <ListItemText
               disableTypography
               className={classes.light}
@@ -48,20 +57,24 @@ const LeftColExpansionPanel = (props) => {
                   {title}
                 </Typography>
               }
-              secondary={'focused'}
+              secondary={isFocused()}
               style={{ color }}
             />
             <ListItemSecondaryAction>
-              <IconButton aria-label="Add">
-                <AddIcon
-                  style={{ color, float: 'right' }}
-                  onClick={() => {
-                    console.log(title);
-                    addChild( { title } );
-                    changeFocusChild( { title } );
-                  }}
-                />
-              </IconButton>
+              {isFocused() ? (
+                <div />
+              ) : (
+                <IconButton aria-label="Add">
+                  <AddIcon
+                    style={{ color, float: 'right' }}
+                    onClick={() => {
+                      console.log(title);
+                      addChild({ title });
+                      changeFocusChild({ title });
+                    }}
+                  />
+                </IconButton>
+              )}
             </ListItemSecondaryAction>
           </ListItem>
         </List>