Merge branch 'development' of https://github.com/team-reactype/ReacType into development

Author: Tolga Mizrakci

package-lock.json

@@ -213,10 +213,11 @@ export const openExpansionPanel = component => ({
 //   type: DELETE_ALL_DATA,
 // });
 
-export const deleteProp = ({ id, index }) => ({
-  type: DELETE_PROP,
-  payload: { id, index },
-});
+
+
+export const deleteProp = ( propId ) => (dispatch) => {
+;    dispatch({ type: DELETE_PROP, payload:  propId  });
+};
 
 export const addProp = prop => ({
   type: ADD_PROP,

src/actions/components.js

@@ -12,16 +12,16 @@ const mapDispatchToProps = dispatch => ({
 });
 
 const mapStateToProps = store => ({
-  successOpen: store.workspace.successOpen,
-  errorOpen: store.workspace.errorOpen,
-  appDir: store.workspace.appDir,
+  // successOpen: store.workspace.successOpen,
+  // errorOpen: store.workspace.errorOpen,
+  // appDir: store.workspace.appDir,
 });
 
 class BottomPanel extends Component {
-  state = {
-    successOpen: false,
-    errorOpen: false,
-  };
+  // state = {
+  //   successOpen: false,
+  //   errorOpen: false,
+  // };
 
   viewAppDir = () => {
     IPC.send('view_app_dir', this.props.appDir);

src/components/BottomPanel.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+
+
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing.unit * 3,
+    overflowX: 'auto',
+  },
+  table: {
+    minWidth: 700,
+  },
+});
+
+
+/****************************
+ * cannot have a row header or a key in the data  called "key" 
+ * ,ust have unique id 
+ * ****************************** */
+
+function dataTable(props) {
+  const { classes , rowData, rowHeader , deletePropHandler } = props;
+  
+  // console.log(classes)
+  console.log(`rowHeader`)
+  console.log(rowHeader)
+   console.log(`rowData`)
+   console.log(rowData)
+
+   const renderHeader = rowHeader.map( (col,idx) =>  {
+    return <TableCell key={`head_+${idx}`}>{col}</TableCell>
+   })
+
+  function renderRowCells  (row) {
+    if(!row) return; 
+    // for some reason we must put each value in a div. 
+    return (
+      rowHeader.map( (header,idx) => 
+        <TableCell key={'td_'+ idx}>
+          <div>
+            { typeof row[header] == 'string' ? row[header] : row[header].toString()  }
+          </div>
+          </TableCell>
+        )
+    )
+ }
+  
+  const renderRows = 
+  rowData.map((row) => 
+        <TableRow key={`row-${row.id}`}>
+        {renderRowCells(row)}    
+         <TableCell>  
+          <Button onClick={ ()=>deletePropHandler(row.id) } >
+          Delete
+          </Button> 
+        </TableCell> 
+        </TableRow> 
+ )
+
+  return (
+    <Paper className={classes.root}>
+      <Table className={classes.table}>
+        <TableHead>
+          <TableRow>
+           {renderHeader}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {renderRows}
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+}
+
+// dataTable.propTypes = {
+//   classes: PropTypes.object.isRequired,
+// };
+
+export default withStyles(styles)(dataTable);

src/components/DataTable.jsx

@@ -7,6 +7,10 @@ class GrandchildRectangle extends Component {
     return color;
   }
 
+  getPseudoChild() {
+    return this.props.components.find(comp => comp.id === this.props.childComponentId);
+  }
+
   render() {
     const {
       x,
@@ -64,12 +68,20 @@ class GrandchildRectangle extends Component {
               childComponentId={grandchild.childComponentId}
               focusChild={focusChild}
               childId={childId}
-              x={grandchild.position.x * (width / (window.innerWidth / 2))}
-              y={grandchild.position.y * (height / window.innerHeight)}
-              scaleX={1}
-              scaleY={1}
-              width={grandchild.position.width * (width / (window.innerWidth / 2))}
-              height={grandchild.position.height * (height / window.innerHeight)}
+              // x={grandchild.position.x * (width / window.innerWidth)}
+              // y={grandchild.position.y * (height / window.innerHeight)}
+              // width={grandchild.position.width * (width / window.innerWidth)}
+              // height={grandchild.position.height * (height / window.innerHeight)}
+              width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
+              height={grandchild.position.height * (height / this.getPseudoChild().position.height)}
+              x={
+                (grandchild.position.x - this.getPseudoChild().position.x)
+                * (width / this.getPseudoChild().position.width)
+              }
+              y={
+                (grandchild.position.y - this.getPseudoChild().position.y)
+                * (height / this.getPseudoChild().position.height)
+              }
             />
           ))}
       </Group>

src/components/GrandchildRectangle.jsx

@@ -1,16 +1,9 @@
-import React, { Component, createRef, Fragment } from "react";
+import React, { Component, createRef, Fragment } from 'react';
 // import PropTypes from 'prop-types';
 import {
-  Stage,
-  Layer,
-  Line,
-  Group,
-  Label,
-  Text,
-  Rect,
-  Transformer
-} from "react-konva";
-import Rectangle from "./Rectangle.jsx";
+  Stage, Layer, Line, Group, Label, Text, Rect, Transformer,
+} from 'react-konva';
+import Rectangle from './Rectangle.jsx';
 
 class KonvaStage extends Component {
   constructor(props) {
@@ -20,7 +13,7 @@ class KonvaStage extends Component {
       stageHeight: 1000,
       blockSnapSize: 5,
       grid: [],
-      gridStroke: 1
+      gridStroke: 1,
     };
   }
 
@@ -29,120 +22,112 @@ class KonvaStage extends Component {
     // here we should add listener for "container" resize
     // take a look here https://developers.google.com/web/updates/2016/10/resizeobserver
     // for simplicity I will just listen window resize
-    window.addEventListener("resize", this.checkSize);
+    window.addEventListener('resize', this.checkSize);
     this.createGrid();
   }
 
   componentWillUnmount() {
-    window.removeEventListener("resize", this.checkSize);
+    window.removeEventListener('resize', this.checkSize);
   }
 
   checkSize = () => {
     const width = this.container.offsetWidth;
     const height = this.container.offsetHeight;
     this.setState({
       stageWidth: width,
-      stageHeight: height
+      stageHeight: height,
     });
   };
 
-  handleStageMouseDown = e => {
+  handleStageMouseDown = (e) => {
     // // clicked on stage - clear selection
     if (e.target === e.target.getStage()) {
       // add functionality for allowing no focusChild
-      console.log("user clicked on canvas:");
+      console.log('user clicked on canvas:');
       return;
     }
     // // clicked on transformer - do nothing
-    const clickedOnTransformer =
-      e.target.getParent().className === "Transformer";
+    const clickedOnTransformer = e.target.getParent().className === 'Transformer';
     if (clickedOnTransformer) {
-      console.log("user clicked on transformer");
-      console.log("HELLOOOO", e.target.getParent().className);
+      console.log('user clicked on transformer');
+      console.log('HELLOOOO', e.target.getParent().className);
       return;
     }
 
     // find clicked rect by its name
     const rectChildId = e.target.attrs.childId;
-    console.log("user clicked on child rectangle with Id: ", rectChildId);
+    console.log('user clicked on child rectangle with childId: ', rectChildId);
     this.props.changeFocusChild({ childId: rectChildId });
     this.props.changeComponentFocusChild({
       componentId: this.props.focusComponent.id,
-      childId: rectChildId
+      childId: rectChildId,
     });
   };
 
   createGrid = () => {
-    let output = [];
+    const output = [];
     for (let i = 0; i < this.state.stageWidth / this.state.blockSnapSize; i++) {
       output.push(
         <Line
           points={[
             Math.round(i * this.state.blockSnapSize) + 0.5,
             0,
             Math.round(i * this.state.blockSnapSize) + 0.5,
-            this.state.stageHeight
+            this.state.stageHeight,
           ]}
-          stroke={"#ddd"}
+          stroke={'#ddd'}
           strokeWidth={this.state.gridStroke}
-          key={i + "vertical"}
-        />
+          key={`${i}vertical`}
+        />,
       );
     }
-    for (
-      let j = 0;
-      j < this.state.stageHeight / this.state.blockSnapSize;
-      j++
-    ) {
+    for (let j = 0; j < this.state.stageHeight / this.state.blockSnapSize; j++) {
       output.push(
         <Line
           points={[
             0,
             Math.round(j * this.state.blockSnapSize),
             this.state.stageWidth,
-            Math.round(j * this.state.blockSnapSize)
+            Math.round(j * this.state.blockSnapSize),
           ]}
-          stroke={"#ddd"}
+          stroke={'#ddd'}
           strokeWidth={this.state.gridStroke}
-          key={j + "horizontal"}
-        />
+          key={`${j}horizontal`}
+        />,
       );
     }
-    console.log("calling function to render grid");
+    console.log('calling function to render grid');
     this.setState({
-      grid: output
+      grid: output,
     });
   };
 
   render() {
     const {
-      components,
-      handleTransform,
-      focusComponent,
-      focusChild
+      components, handleTransform, focusComponent, focusChild,
     } = this.props;
 
     return (
       <div
         style={{
-          width: "100%",
-          height: "100%"
+          width: '100%',
+          height: '100%',
         }}
-        ref={node => {
+        ref={(node) => {
           this.container = node;
         }}
       >
         <Stage
-          className={"canvasStage"}
-          ref={node => {
+          className={'canvasStage'}
+          ref={(node) => {
             this.stage = node;
           }}
           onMouseDown={this.handleStageMouseDown}
           width={this.state.stageWidth}
           height={this.state.stageHeight}
         >
           <Layer
-            ref={node => {
+            ref={(node) => {
               this.layer = node;
             }}
           >
@@ -171,10 +156,8 @@ class KonvaStage extends Component {
                 />
               ))
               .sort(
-                (rectA, rectB) =>
-                  rectA.props.width * rectA.props.height <
-                  rectB.props.width * rectB.props.height
-              )
+                (rectA, rectB) => rectA.props.width * rectA.props.height < rectB.props.width * rectB.props.height,
+              ) // shouldnt this be subtraction instead of < ? see MDN
             // reasoning for the sort:
             // Konva determines zIndex (which rect is clicked on if rects overlap) based on rendering order
             // as long as the smallest components are rendered last they will always be accessible over the big boys

src/components/KonvaStage.jsx

@@ -49,7 +49,7 @@ const LeftColExpansionPanel = (props) => {
               style={{ color }}
             />
             <ListItemSecondaryAction>
-              {isFocused() || !selectableChildren.includes(id) ? (
+              { id == 1 || isFocused() || !selectableChildren.includes(id) ? (
                 <div />
               ) : (
                 <IconButton aria-label="Add">