merged Shlomo deletions

Author: ChristianEdwardPadilla

README.md

@@ -1,14 +1,15 @@
 # ReacType
 
-
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/team-reactype/ReacType/pulls)
 ![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)
 
 **ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type checking of **TypeScript**.
 
 **ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _canvas display_, an _application tree_, and a _component code preview_. The user can create components and load _instances_ of these components, as well as nested HTML elements, onto the canvas. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
 
- Download for [MacOS](), [Windows](), [Linux]().
+Download for [MacOS](), [Windows](), [Linux]().
+
+![Image of ReacType Application](src/public/images/TreeImageComponent.png)
 
 ### How to use
 

src/actions/components.ts

@@ -1,7 +1,5 @@
 import {
   ComponentInt,
-  ChildInt,
-  ApplicationStateInt,
   ComponentsInt,
   PropInt
 } from "../utils/interfaces";

src/components/App.tsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import '../public/styles/style.css';
-// import { MuiThemeProvider } from '@material-ui/core/styles';
 import AppContainer from '../containers/AppContainer';
 
 export const App: React.SFC = () => (

src/components/BottomPanel.tsx

@@ -0,0 +1,61 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import {
+  handleClose,
+  deleteCompProp,
+  addCompProp
+} from "../actions/components.ts";
+import BottomTabs from "./BottomTabs.tsx";
+import { ComponentInt, ComponentsInt, ChildInt } from "../utils/interfaces";
+
+const IPC = require("electron").ipcRenderer;
+
+const mapDispatchToProps = (dispatch: any) => ({
+  handleNotificationClose: () => dispatch(handleClose()),
+  deleteProp: ({ id, index }: { id: number; index: number }) =>
+    dispatch(deleteCompProp({ id, index })),
+  addProp: (prop: any) => dispatch(addCompProp(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;
+}
+
+class BottomPanel extends Component<PropsInt> {
+
+  render() {
+    const {
+      components,
+      focusComponent,
+      deleteProp,
+      addProp,
+      focusChild
+    } = this.props;
+
+    return (
+      <div className="bottom-panel" style={{ width: "100%" }}>
+        <BottomTabs
+          components={components}
+          focusComponent={focusComponent}
+          deleteProp={deleteProp}
+          addProp={addProp}
+          focusChild={focusChild}
+        />
+      </div>
+    );
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BottomPanel);

src/components/BottomTabs.jsx

@@ -3,22 +3,36 @@ 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.jsx';
-import HtmlAttr from './HtmlAttr.jsx';
-// import Tree from "./Tree.jsx";
+import Props from './Props.tsx';
+import HtmlAttr from './HtmlAttr.tsx';
+import CodePreview from './CodePreview.tsx';
+import { ComponentInt, ComponentsInt, ChildInt } from '../utils/interfaces';
 
-const styles = theme => ({
+interface PropsInt {
+  focusChild: ChildInt;
+  components: ComponentsInt;
+  focusComponent: ComponentInt;
+  deleteProp: any;
+  addProp: any;
+  classes: any;
+}
+
+interface TreeInt {
+  name: string;
+  attributes: { [key: string]: { value: string } };
+  children: TreeInt[];
+}
+
+const styles = (theme: any): any => ({
   root: {
     flexGrow: 1,
-    // backgroundColor: "#212121",
     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',
-    // backgroundColor: "#424242"
   },
   tabsIndicator: {
     backgroundColor: '#1de9b6',

src/components/CodePreview.tsx

@@ -1,8 +1,8 @@
 import React, { Component, Fragment } from 'react';
-import { withStyles } from '@material-ui/core/styles';
 import { format } from 'prettier';
-import componentRender from '../utils/componentRender.util.ts';
+import componentRender from '../utils/componentRender.util';
 import { ComponentInt, ComponentsInt } from '../utils/interfaces';
+/****   SortCHildren will be fixed , dont XXX the file  *** */
 import SortChildren from './SortChildren.jsx';
 
 type Props = {

src/components/DataTable.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+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 DeleteIcon from "@material-ui/icons/Delete";
+import { IconButton } from "@material-ui/core";
+
+const styles = (theme: any) => ({
+  root: {
+    width: "80%",
+    marginTop: theme.spacing.unit * 3
+    // overflowX: "auto"
+  },
+  table: {
+    minWidth: 500
+  }
+});
+
+/** **************************
+ * cannot have a row header or a key in the data  called "key"
+ * ,ust have unique id
+ * ****************************** */
+
+function dataTable(props: any) {
+  const { classes, rowData, rowHeader, deletePropHandler } = props;
+
+  const renderHeader = rowHeader.map((col: any, idx: number) => (
+    <TableCell key={`head_+${idx}`}>{col}</TableCell>
+  ));
+
+  function renderRowCells(row: any) {
+    if (!row) return;
+    // for some reason we must put each value in a div.
+    return rowHeader.map((header: string, idx: number) => (
+      <TableCell align={"center"} key={`td_${idx}`}>
+        {/* <div  align={'center'} padding = {'none'} >{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div> */}
+        {/* {row[header]} */}
+        {typeof row[header] === "string" ? row[header] : row[header].toString()}
+      </TableCell>
+    ));
+  }
+  // style={{height: 30}}
+  const renderRows = rowData.map((row: any) => (
+    <TableRow key={`row-${row.id}`}>
+      {renderRowCells(row)}
+      <TableCell align={"center"} padding={"none"}>
+        <IconButton
+          color="default"
+          fontSize="small"
+          onClick={() => deletePropHandler(row.id)}
+        >
+          <DeleteIcon />
+        </IconButton>
+        {/* <Button style={{height: 20}} onClick={() => deletePropHandler(row.id)}>Delete</Button> */}
+      </TableCell>
+    </TableRow>
+  ));
+
+  return (
+    <Paper className={classes.root}>
+      <Table className={classes.table} selectable={"true"}>
+        <TableHead>
+          <TableRow>{renderHeader}</TableRow>
+        </TableHead>
+        <TableBody>{renderRows}</TableBody>
+      </Table>
+    </Paper>
+  );
+}
+
+export default withStyles(styles)(dataTable);

src/components/GrandchildRectangle.jsx

@@ -1,15 +1,14 @@
 import React, { Component } from 'react';
 import { Rect, Group } from 'react-konva';
-// import findComponentById from '../utils/findComponentById.ts';
+import { ComponentsInt } from '../utils/interfaces';
 
 class GrandchildRectangle extends Component {
   state = {
     imageHeight: 0,
     imageWidth: 0,
   };
 
-  getComponentColor(componentId) {
-    // const color = findComponentById(componentId, this.props.components).color;
+  getComponentColor(componentId: number) {
     const color = this.props.components.find(comp => comp.id === componentId).color;
     return color;
   }

src/components/HTMLComponentPanel.tsx

@@ -1,21 +1,16 @@
 import React, { Component } from "react";
-import { connect } from "react-redux";
-import { compose } from "redux";
 import { withStyles } from "@material-ui/core/styles";
-// import TextField from '@material-ui/core/TextField';
 import IconButton from "@material-ui/core/IconButton";
 import ImageIcon from "@material-ui/icons/Image";
 import FormIcon from "@material-ui/icons/Description";
 import ButtonIcon from "@material-ui/icons/EditAttributes";
 import LinkIcon from "@material-ui/icons/Link";
 import ListIcon from "@material-ui/icons/List";
 import ParagraphIcon from "@material-ui/icons/LocalParking";
-// import Typography from '@material-ui/core/Typography';
 import Grid from "@material-ui/core/Grid";
-// import Paper from '@material-ui/core/Paper';
 import Tab from "@material-ui/core/Tab";
 import Chip from "@material-ui/core/Chip";
-// import theme from './theme.ts';
+
 
 interface PropsInt {
   classes: any;