Merge pull request #77 from ChristianEdwardPadilla/development

CodePreview tab

Author: ChristianEdwardPadilla

src/components/BottomPanel.jsx

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { some } from 'bluebird-lst';
 import { handleClose, deleteCompProp, addCompProp } from '../actions/components';
-import RightTabs from './RightTabs.jsx';
+import BottomTabs from './BottomTabs';
 
 const IPC = require('electron').ipcRenderer;
 
@@ -46,7 +45,7 @@ class BottomPanel extends Component {
 
     return (
       <div className="bottom-panel" style={{ width: '100%' }}>
-        <RightTabs
+        <BottomTabs
           components={components}
           focusComponent={focusComponent}
           deleteProp={deleteProp}

src/components/RightTabs.jsx renamed to src/components/BottomTabs.jsx

@@ -62,7 +62,7 @@ const styles = theme => ({
   },
 });
 
-class RightTabs extends Component {
+class BottomTabs extends Component {
   state = {
     value: 0,
   };
@@ -98,9 +98,7 @@ class RightTabs extends Component {
       newChildrenArray.push(newTree);
       tree.children = newChildrenArray;
       if (component.childrenArray[i].childType === 'COMP') {
-        const newFocusComp = components.find(
-          comp => comp.title === component.childrenArray[i].componentName,
-        );
+        const newFocusComp = components.find(comp => comp.title === component.childrenArray[i].componentName);
         this.findChildren(newFocusComp, components, newTree);
       }
     }
@@ -111,7 +109,7 @@ class RightTabs extends Component {
     const component = components.find(comp => comp.id === componentId);
     const tree = { name: component.title, attributes: {}, children: [] };
 
-    component.childrenArray.forEach((child) => {
+    component.childrenArray.forEach(child => {
       if (child.childType === 'COMP') {
         tree.children.push(this.generateComponentTree(child.childComponentId, components));
       } else {
@@ -133,6 +131,11 @@ class RightTabs extends Component {
     } = this.props;
     const { value } = this.state;
 
+    // display count on the tab. user can see without clicking into tab
+    const propCount = focusComponent.props.length;
+    const htmlAttribCount = focusComponent.childrenArray.filter(child => child.childType === 'HTML').length;
+
+    // const counters = focusComponent.ch
     const tree = {
       name: focusComponent.title,
       attributes: {},
@@ -154,7 +157,7 @@ class RightTabs extends Component {
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label="Component Props"
+            label={`Component Props ${propCount ? `(${propCount})` : ''} `}
           />
           <Tab
             disableRipple
@@ -164,7 +167,7 @@ class RightTabs extends Component {
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label="HTML Element Attributes"
+            label={`HTML Element Attributes ${htmlAttribCount ? `(${htmlAttribCount})` : ''} `}
           />
         </Tabs>
 
@@ -206,13 +209,10 @@ class RightTabs extends Component {
         )}
         {value === 1 && <Props />}
         {value === 3 && focusChild.childType === 'HTML' && <HtmlAttr />}
-        {value === 3
-          && focusChild.childType !== 'HTML' && (
-            <p>Please select an HTML element to view attributes</p>
-        )}
+        {value === 3 && focusChild.childType !== 'HTML' && <p>Please select an HTML element to view attributes</p>}
       </div>
     );
   }
 }
 
-export default withStyles(styles)(RightTabs);
+export default withStyles(styles)(BottomTabs);

src/components/CodePreview.tsx

@@ -0,0 +1,29 @@
+import React, { Component, Fragment } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { format } from 'prettier';
+import componentRender from '../utils/componentRender.util';
+
+class CodePreview extends Component {
+  render(): JSX.Element {
+    const { focusComponent, components } = this.props;
+    return (
+      <div
+        style={{
+          width: '500px',
+          height: '290px',
+          direction: 'rtl',
+          paddingLeft: '20px',
+          color: '#D3D3D3',
+          fontSize: 16,
+          overflow: 'auto',
+        }}
+      >
+        <pre style={{ direction: 'ltr' }}>
+          {format(componentRender(focusComponent, components))}
+        </pre>
+      </div>
+    );
+  }
+}
+
+export default CodePreview;

src/components/KonvaStage.tsx

@@ -221,7 +221,7 @@ class KonvaStage extends Component {
                   imageSource={child.htmlElement == 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null}
                 />
               ))
-              .sort((rectA, rectB) => rectA.props.width * rectA.props.height < rectB.props.width * rectB.props.height) // shouldnt this be subtraction instead of < ? see MDN
+              .sort((rectA, rectB) => rectB.props.width * rectB.props.height - rectA.props.width * rectA.props.height)
             // 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/__tests__/App.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 // import '../../setupTests';
 import { shallow } from 'enzyme';
-import App from '../App.tsx';
-import AppContainer from '../../containers/AppContainer.tsx';
+import App from '../App';
+import AppContainer from '../../containers/AppContainer';
 
 it('contains a AppContainer', () => {
   // wrapped version of react component

src/containers/LeftContainer.tsx

@@ -10,13 +10,10 @@ import { withStyles } from '@material-ui/core/styles';
 import LeftColExpansionPanel from '../components/LeftColExpansionPanel.jsx';
 import HTMLComponentPanel from '../components/HTMLComponentPanel.jsx';
 import * as actions from '../actions/components';
-
 const mapDispatchToProps = dispatch => ({
   addComponent: ({ title }) => dispatch(actions.addComponent({ title })),
-  updateComponent: ({ id, index, newParentId = null, color = null, stateful = null }) =>
     dispatch(
       actions.updateComponent({
-        id,
         index,
         newParentId,
         color,

src/containers/MainContainer.tsx

@@ -5,8 +5,8 @@ import { MuiThemeProvider } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
-import BottomPanel from '../components/BottomPanel.jsx';
-import theme from '../components/theme.ts';
+import BottomPanel from '../components/BottomPanel';
+import theme from '../components/theme';
 import {
   openExpansionPanel,
   handleTransform,
@@ -16,8 +16,8 @@ import {
   deleteComponent,
   createApplication,
 } from '../actions/components';
-import KonvaStage from '../components/KonvaStage.jsx';
-import MainContainerHeader from '../components/MainContainerHeader.jsx';
+import KonvaStage from '../components/KonvaStage';
+import MainContainerHeader from '../components/MainContainerHeader';
 import createModal from '../utils/createModal.util';
 import SortChildren from '../components/SortChildren.jsx';
 

src/containers/RightContainer.tsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 // import PropTypes from 'prop-types';
 import { handleClose, deleteCompProp, addCompProp } from '../actions/components';
 // import Snackbars from '../components/Snackbars.jsx';
-// import RightTabs from '../components/RightTabs.jsx';
+// import BottomTabs from '../components/BottomTabs.jsx';
 
 const IPC = require('electron').ipcRenderer;
 

src/public/styles/style.css

@@ -4,6 +4,13 @@
   box-sizing: inherit;
 }
 
+* {
+  overflow: hidden;
+  overflow-y: hidden;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 html {
   box-sizing: border-box;
   overflow: hidden;
@@ -14,6 +21,7 @@ body {
   padding: 0;
   font-family: "Open sans", sans-serif;
   font-weight: 400;
+  overflow: hidden;
 }
 
 /*

webpack.config.development.js

@@ -15,6 +15,9 @@ module.exports = {
   context: SRC_DIR,
   entry: ['babel-polyfill', './index.js'],
   devtool: 'eval-source-map',
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
   output: {
     path: BUILD_DIR,
     filename: 'js/bundle.js',