Merge pull request #114 from team-reactype/development

1.0 merge
open-source-labs · May 10, 2019 · 79554a5 · 79554a5
2 parents 3c2429b + 9a79ef5
commit 79554a5
Show file tree

Hide file tree

Showing 6 changed files with 290 additions and 257 deletions.
diff --git a/main.js b/main.js
@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require("path");
 
 const {
   app, BrowserWindow, Menu, shell, dialog, ipcMain,
@@ -63,11 +63,15 @@ const createWindow = () => {
     width,
     height,
     webPreferences: {
-      zoomFactor: 0.9,
+      zoomFactor: 0.7,
       'node-Integration': false,
     },
     show: false,
-    icon: path.join(__dirname, '/src/public/icons/mac/icon.icns'),
+    icon: path.join(__dirname, "/src/public/icons/mac/icon.icns"),
+    win: {
+      icon: path.join(__dirname, "/src/public/icons/win/icon.ico"),
+      target: ["portable"]
+    }
   });
 
   // and load the index.html of the app.

diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
@@ -12,11 +12,13 @@ import { IconButton } from "@material-ui/core";
 const styles = (theme: any) => ({
   root: {
     width: "80%",
-    marginTop: theme.spacing.unit * 3
+    marginTop: theme.spacing.unit * 3,
+    marginRight: "100px"
     // overflowX: "auto"
   },
   table: {
-    minWidth: 500
+    minWidth: 500,
+    marginRight: "100px"
   }
 });
 

diff --git a/src/components/Props.tsx b/src/components/Props.tsx
@@ -1,16 +1,16 @@
-import React, { Component, Fragment } from "react";
-import { connect } from "react-redux";
-import { withStyles } from "@material-ui/core/styles";
-import FormControl from "@material-ui/core/FormControl";
-import Grid from "@material-ui/core/Grid";
-import TextField from "@material-ui/core/TextField";
-import Button from "@material-ui/core/Button";
-import Select from "@material-ui/core/Select";
-import Switch from "@material-ui/core/Switch";
-import InputLabel from "@material-ui/core/InputLabel";
-import { addProp, deleteProp } from "../actions/components.ts";
-import DataTable from "./DataTable.tsx";
-import { ComponentInt } from "../utils/interfaces.ts";
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import FormControl from '@material-ui/core/FormControl';
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import Select from '@material-ui/core/Select';
+import Switch from '@material-ui/core/Switch';
+import InputLabel from '@material-ui/core/InputLabel';
+import { addProp, deleteProp } from '../actions/components.ts';
+import DataTable from './DataTable.tsx';
+import { ComponentInt } from '../utils/interfaces.ts';
 
 interface PropInt {
   addProp: any;
@@ -21,125 +21,126 @@ interface PropInt {
 
 const styles = (theme: any): any => ({
   root: {
-    display: "flex",
-    justifyContent: "center",
-    flexWrap: "wrap"
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
   },
   chip: {
-    color: "#eee",
-    backgroundColor: "#333333"
+    color: '#eee',
+    backgroundColor: '#333333',
   },
   column: {
-    display: "inline-flex",
-    alignItems: "baseline"
+    display: 'inline-flex',
+    alignItems: 'baseline',
   },
   icon: {
-    fontSize: "20px",
-    color: "#eee",
-    opacity: "0.7",
-    transition: "all .2s ease",
+    fontSize: '20px',
+    color: '#eee',
+    opacity: '0.7',
+    transition: 'all .2s ease',
 
-    "&:hover": {
-      color: "red"
-    }
+    '&:hover': {
+      color: 'red',
+    },
   },
   cssLabel: {
-    color: "white",
+    color: 'white',
 
-    "&$cssFocused": {
-      color: "green"
-    }
+    '&$cssFocused': {
+      color: 'green',
+    },
   },
   cssFocused: {},
   input: {
-    color: "#eee",
-    marginBottom: "10px",
-    width: "60%"
+    color: '#eee',
+    marginBottom: '10px',
+    width: '60%',
   },
   light: {
-    color: "#eee"
+    color: '#eee',
   },
   avatar: {
-    color: "#eee",
-    fontSize: "10px"
-  }
+    color: '#eee',
+    fontSize: '10px',
+  },
 });
 
 const mapDispatchToProps = (dispatch: any) => ({
   addProp: ({
     key,
     value,
     required,
-    type
+    type,
   }: {
-    key: string;
-    value: string;
-    required: boolean;
-    type: string;
-  }) =>
-    dispatch(
-      addProp({
-        key,
-        value,
-        required,
-        type
-      })
-    ),
-  deleteProp: (propId: number) => dispatch(deleteProp(propId))
+  key: string;
+  value: string;
+  required: boolean;
+  type: string;
+  }) => dispatch(
+    addProp({
+      key,
+      value,
+      required,
+      type,
+    }),
+  ),
+  deleteProp: (propId: number) => dispatch(deleteProp(propId)),
 });
 
 const mapStateToProps = (store: any) => ({
-  focusComponent: store.workspace.focusComponent
+  focusComponent: store.workspace.focusComponent,
 });
 
 const availablePropTypes = {
-  string: "STR",
-  number: "NUM",
-  object: "OBJ",
-  array: "ARR",
-  boolean: "BOOL",
-  function: "FUNC",
+  string: 'STR',
+  number: 'NUM',
+  object: 'OBJ',
+  array: 'ARR',
+  boolean: 'BOOL',
+  function: 'FUNC',
   // symbol: 'SYM',
-  node: "NODE",
-  element: "ELEM",
-  any: "ANY",
-  tuple: "TUP",
-  enum: "ENUM"
+  node: 'NODE',
+  element: 'ELEM',
+  any: 'ANY',
+  tuple: 'TUP',
+  enum: 'ENUM',
 };
 
 const typeOptions = [
   <option value="" key="" />,
   ...Object.keys(availablePropTypes).map(type => (
-    <option value={type} key={type} style={{ color: "#000" }}>
+    <option value={type} key={type} style={{ color: '#000' }}>
       {type}
     </option>
-  ))
+  )),
 ];
 
 class Props extends Component<PropInt> {
   state = {
-    propKey: "",
-    propValue: "",
+    propKey: '',
+    propValue: '',
     propRequired: true,
-    propType: ""
+    propType: '',
   };
 
   handleChange = (event: any) => {
     this.setState({
-      [event.target.id]: event.target.value.trim()
+      [event.target.id]: event.target.value.trim(),
     });
   };
 
   togglePropRequired = () => {
     this.setState({
-      propRequired: !this.state.propRequired
+      propRequired: !this.state.propRequired,
     });
   };
 
   handleAddProp = (event: any) => {
     event.preventDefault();
 
-    const { propKey, propValue, propRequired, propType } = this.state;
+    const {
+      propKey, propValue, propRequired, propType,
+    } = this.state;
 
     // check if prop exists with same key. CANNOT have duplicates
     const savedPropKeys = this.props.focusComponent.props.map(p => p.key);
@@ -150,53 +151,55 @@ class Props extends Component<PropInt> {
 
     // check if prop starts with digits. Digits at string start breaks indexedDB
     if (/^\d/.test(propKey)) {
-      window.alert("Props are not allowed to begin with digits");
+      window.alert('Props are not allowed to begin with digits');
       return;
     }
 
     this.props.addProp({
       key: propKey,
       value: propValue,
       required: propRequired,
-      type: propType
+      type: propType,
     });
 
     this.setState({
-      propKey: "",
-      propValue: "",
+      propKey: '',
+      propValue: '',
       propRequired: true,
-      propType: ""
+      propType: '',
     });
   };
 
   render() {
-    const { focusComponent, classes, deleteProp, addProp } = this.props;
+    const {
+      focusComponent, classes, deleteProp, addProp,
+    } = this.props;
 
-    const rowHeader = ["_Key", "Value", "Type", "Required"];
+    const rowHeader = ['_Key', 'Value', 'Type', 'Required'];
     // prepare the saved Props in a nice way, so you can sent them to TableData
     const propsRows = focusComponent.props.map(prop => ({
       _Key: prop.key,
       Value: prop.value,
       Type: prop.type,
       Required: prop.required,
-      id: prop.id
+      id: prop.id,
     }));
 
     return (
-      <div className={"htmlattr"}>
-        {" "}
+      <div className={'htmlattr'}>
+        {' '}
         {Object.keys(focusComponent).length < 1 ? (
-          <div style={{ marginTop: "20px", width: "90%" }}>
+          <div style={{ marginTop: '20px', width: '90%' }}>
             Click a component to view its props.
           </div>
         ) : (
           <Fragment>
             <div
               className="props-container"
-              style={{ marginTop: "20px", width: "90%", height: "80%" }}
+              style={{ marginTop: '20px', width: '90%', height: '80%' }}
             >
               <Grid container spacing={8}>
-                <Grid item xs={4}>
+                <Grid item xs={3}>
                   <form className="props-input" onSubmit={this.handleAddProp}>
                     <Grid container spacing={8}>
                       <Grid item xs={6}>
@@ -209,10 +212,10 @@ class Props extends Component<PropInt> {
                           value={this.state.propKey}
                           required
                           InputProps={{
-                            className: classes.input
+                            className: classes.input,
                           }}
                           InputLabelProps={{
-                            className: classes.input
+                            className: classes.input,
                           }}
                         />
                       </Grid>
@@ -223,20 +226,17 @@ class Props extends Component<PropInt> {
                           margin="normal"
                           onChange={this.handleChange}
                           InputProps={{
-                            className: classes.input
+                            className: classes.input,
                           }}
                           InputLabelProps={{
-                            className: classes.input
+                            className: classes.input,
                           }}
                           value={this.state.propValue}
                         />
                       </Grid>
                       <Grid item xs={6}>
                         <FormControl required>
-                          <InputLabel
-                            className={classes.light}
-                            htmlFor="propType"
-                          >
+                          <InputLabel className={classes.light} htmlFor="propType">
                             Type
                           </InputLabel>
                           <Select
@@ -254,10 +254,7 @@ class Props extends Component<PropInt> {
                       </Grid>
                       <Grid item xs={6}>
                         <div className={classes.column}>
-                          <InputLabel
-                            className={classes.light}
-                            htmlFor="propRequired"
-                          >
+                          <InputLabel className={classes.light} htmlFor="propRequired">
                             Required?
                           </InputLabel>
                           <Switch
@@ -291,6 +288,7 @@ class Props extends Component<PropInt> {
                     deletePropHandler={deleteProp}
                   />
                 </Grid>
+                <Grid item xs={1} />
               </Grid>
             </div>
           </Fragment>
@@ -302,5 +300,5 @@ class Props extends Component<PropInt> {
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
+  mapDispatchToProps,
 )(withStyles(styles)(Props));