Merge branch 'stretch' of https://github.com/oslabs-beta/ReacType into native

Author: tonyito

main.js

@@ -55,7 +55,6 @@ function redo() {
   mainWindow.webContents.send('redo');
 }
 
-
 function toggleTutorial() {
   mainWindow.webContents.send('tutorial_clicked');
 }
@@ -122,16 +121,17 @@ const createWindow = () => {
     {
       label: 'Edit',
       submenu: [
-        { 
+        {
           label: 'Undo',
-          accelerator: process.platform === 'darwin' ? 'Cmd+Z' : 'Ctrl+Z',  //these hotkeys are a tad bit glitchy
+          accelerator: process.platform === 'darwin' ? 'Cmd+Z' : 'Ctrl+Z', //these hotkeys are a tad bit glitchy
           click() {
             undo();
           }
         },
-        { 
+        {
           label: 'Redo',
-          accelerator: process.platform === 'darwin' ? 'Cmd+Shift+Z' : 'Ctrl+Shift+Z',
+          accelerator:
+            process.platform === 'darwin' ? 'Cmd+Shift+Z' : 'Ctrl+Shift+Z',
           click() {
             redo();
           }
@@ -142,8 +142,8 @@ const createWindow = () => {
         { role: 'paste' },
         { role: 'pasteandmatchstyle' },
         { role: 'delete' },
-        { role: 'selectall' },
-      ],
+        { role: 'selectall' }
+      ]
     },
     {
       label: 'View',
@@ -172,9 +172,9 @@ const createWindow = () => {
           }
         },
         {
-            label: 'Tutorial',
-            click() {
-              toggleTutorial();
+          label: 'Tutorial',
+          click() {
+            toggleTutorial();
           }
         }
       ]
@@ -242,10 +242,11 @@ const createWindow = () => {
     mainWindow = null;
   });
 
+  // UNCOMMENT THIS DURING DEVELOPMENT TO ENABLE CONSOLE TO OPEN UPON LAUNCH
   // dev tools opened on every browser creation
-  mainWindow.webContents.once('dom-ready', () => {
-    mainWindow.webContents.openDevTools();
-  });
+  // mainWindow.webContents.once('dom-ready', () => {
+  //   mainWindow.webContents.openDevTools();
+  // });
 };
 
 // This method will be called when Electron has finished
@@ -269,7 +270,7 @@ app.on('ready', () => {
   }
   globalShortcut.register('Escape', () => {
     escape();
-  })
+  });
 });
 
 // Quit when all windows are closed.

src/actions/__tests__/actionCreator.test.tsx

@@ -115,14 +115,6 @@ describe('Testing All of The Action Creators', () => {
     expect(actions.editComponent(payld)).toEqual(expectedAction);
   });
 
-  it('handleClose returns a proper action', () => {
-    const expectedAction = {
-      type: types.HANDLE_CLOSE,
-      payload: false
-    };
-    expect(actions.handleClose()).toEqual(expectedAction);
-  });
-
   it('handleTransform returns a proper action', () => {
     const payld = { x: 100, y: 200, width: 50, height: 75 };
     const componentId = 2;

src/actions/actionCreators.ts

@@ -241,11 +241,6 @@ export const exportFiles = ({
     );
 };
 
-export const handleClose = (): Action => ({
-  type: HANDLE_CLOSE,
-  payload: false
-});
-
 export const handleTransform = (
   componentId: number,
   childId: number,

src/components/bottom/AddChildProps.tsx

@@ -64,15 +64,6 @@ class AddChildProps extends Component<ChildPropsTypes> {
           data={focusComponent.childrenArray}
           title="Add Your Child Props Here!"
         />
-
-        {/* BUTTON FUNCTIONALITY PENDING
-        <button
-          onClick={() => {
-            this.tableRef.current.onQueryChange();
-          }}
-        >
-          Sean Sucks
-        </button> */}
       </div>
     );
   }

src/components/bottom/BottomPanel.tsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import {
-  handleClose,
   deleteProp,
   addProp,
   toggleNative,
@@ -16,7 +15,6 @@ const IPC = require('electron').ipcRenderer;
 const mapDispatchToProps = (dispatch: any) => ({
   addProp: (prop: PropInt) => dispatch(addProp(prop)),
   deleteProp: (id: number) => dispatch(deleteProp(id)),
-  handleNotificationClose: () => dispatch(handleClose()),
   toggleNative: () => dispatch(toggleNative()),
   toggleCodeEdit: () => dispatch(toggleCodeEdit())
 });

src/components/bottom/BottomTabs.tsx

@@ -7,11 +7,8 @@ import Tree from 'react-d3-tree';
 import Props from './Props';
 import HtmlAttr from './HtmlAttr';
 import CodePreview from './CodePreview';
-import Switch from '@material-ui/core/Switch';
 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';
 
 interface BottomTabsPropsInt extends PropsInt {
   deleteProp(id: number): void;
@@ -30,70 +27,6 @@ interface StateInt {
   translate: { x: number; y: number };
 }
 
-const styles = (theme: Theme): any => ({
-  root: {
-    flexGrow: 1,
-    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)'
-  },
-  bottomHeader: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    Width: '200px'
-  },
-  tabsRoot: {
-    borderBottom: '0.5px solid #424242'
-  },
-  tabsIndicator: {
-    backgroundColor: '#1de9b6'
-  },
-  tabRoot: {
-    textTransform: 'initial',
-    minWidth: 40,
-    fontWeight: theme.typography.fontWeightRegular,
-    // marginRight: theme.spacing.unit * 4,
-    marginRight: theme.spacing(4), // JZ: updated syntax as per deprecation warning
-
-    fontFamily: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      '"Segoe UI"',
-      'Roboto',
-      '"Helvetica Neue"',
-      'Arial',
-      'sans-serif',
-      '"Apple Color Emoji"',
-      '"Segoe UI Emoji"',
-      '"Segoe UI Symbol"'
-    ].join(','),
-    '&:hover': {
-      color: '#1de9b6',
-      opacity: 1
-    },
-    '&$tabSelected': {
-      color: '#33eb91',
-      fontWeight: theme.typography.fontWeightMedium
-    },
-    '&:focus': {
-      color: '#4aedc4'
-    }
-  },
-  tabSelected: {},
-  typography: {
-    padding: theme.spacing(3) // JZ: updated syntax as per deprecation warning
-  },
-  padding: {
-    padding: `0 ${theme.spacing(2)}px` // JZ: updated syntax as per deprecation warning
-  },
-  switch: {
-    marginRight: '10px',
-    marginTop: '2px'
-  }
-});
-
 class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
   constructor(props: BottomTabsPropsInt) {
     super(props);
@@ -103,6 +36,7 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
     };
   }
   treeWrapper: HTMLDivElement;
+
   componentDidMount() {
     // dynamically center the tree based on the div size
     const dimensions = this.treeWrapper.getBoundingClientRect();
@@ -209,31 +143,7 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
                 htmlAttribCount ? `(${htmlAttribCount})` : ''
               } `}
             />
-            {/* <Tab
-              disableRipple
-              classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-              label="Add Child Props"
-            /> */}
           </Tabs>
-          {
-            // REACT NATIVE TOGGLE REMOVED AND MOVED TO LEFTCONTAINER. REMOVE THIS CODE IF NO ADVERSE EFFECTS FOUND
-            /* <FormGroup>
-            <FormControlLabel
-              className={classes.switch}
-              control={
-                <Switch
-                  checked={native}
-                  color="primary"
-                  onChange={() => {
-                    toggleNative();
-                  }}
-                />
-              }
-              label="Native Mode"
-              labelPlacement="start"
-            />
-          </FormGroup> */
-          }
         </Box>
         {value === 0 && (
           <div
@@ -292,4 +202,67 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
   }
 }
 
+const styles = (theme: Theme): any => ({
+  root: {
+    flexGrow: 1,
+    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)'
+  },
+  bottomHeader: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    Width: '200px'
+  },
+  tabsRoot: {
+    borderBottom: '0.5px solid #424242'
+  },
+  tabsIndicator: {
+    backgroundColor: '#1de9b6'
+  },
+  tabRoot: {
+    textTransform: 'initial',
+    minWidth: 40,
+    fontWeight: theme.typography.fontWeightRegular,
+    marginRight: theme.spacing(4), // JZ: updated syntax as per deprecation warning
+
+    fontFamily: [
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"'
+    ].join(','),
+    '&:hover': {
+      color: '#1de9b6',
+      opacity: 1
+    },
+    '&$tabSelected': {
+      color: '#33eb91',
+      fontWeight: theme.typography.fontWeightMedium
+    },
+    '&:focus': {
+      color: '#4aedc4'
+    }
+  },
+  tabSelected: {},
+  typography: {
+    padding: theme.spacing(3) // JZ: updated syntax as per deprecation warning
+  },
+  padding: {
+    padding: `0 ${theme.spacing(2)}px` // JZ: updated syntax as per deprecation warning
+  },
+  switch: {
+    marginRight: '10px',
+    marginTop: '2px'
+  }
+});
+
 export default withStyles(styles)(BottomTabs);

src/components/bottom/CodePreview.tsx

@@ -85,6 +85,7 @@ class CodePreview extends Component<CodePreviewProps> {
           readOnly={this.props.codeReadOnly}
           editorProps={{ $blockScrolling: true }}
           fontSize={16}
+          tabSize={2}
         />
         <div style={{ display: 'flex', flexDirection: 'column' }}>
           <Button