Skip to content

Commit 8c975e7

Browse files
andrewjcho84andrewjcho84
authored
Merge pull request #17 from tsully/reusable
Automatic React code generation and export code modal
2 parents 7a0ef8c + 9afd806 commit 8c975e7

20 files changed

+647
-161
lines changed

‎main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -317,4 +317,4 @@ app.on('activate', () => {
317317
});
318318

319319
// bypass ssl certification validation error
320-
// app.commandLine.appendSwitch('ignore-certificate-errors', 'true');
320+
app.commandLine.appendSwitch('ignore-certificate-errors', 'true');

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,7 @@
212212
"sass-loader": "^7.0.3",
213213
"style-loader": "^0.20.3",
214214
"ts-jest": "^25.3.0",
215+
"ts-node": "^8.10.2",
215216
"typescript": "^3.8.3",
216217
"webpack": "^4.42.0",
217218
"webpack-cli": "^3.3.11"

‎src/components/bottom/BottomPanelNew.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { useContext } from 'react';
2+
import { stateContext } from '../../context/context';
3+
import BottomTabs from './BottomTabsNew';
4+
// import BottomTabs from './BottomTabs';
5+
6+
// const IPC = require('electron').ipcRenderer;
7+
8+
const BottomPanel = () => {
9+
return (
10+
<div className="bottom-panel" style={{ width: '100%' }}>
11+
<BottomTabs />
12+
</div>
13+
);
14+
};
15+
16+
export default BottomPanel;

‎src/components/bottom/BottomTabsNew.tsx

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import React, { useState } from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Tabs from '@material-ui/core/Tabs';
4+
import Tab from '@material-ui/core/Tab';
5+
// import Tree from 'react-d3-tree';
6+
import CodePreview from './CodePreviewNew';
7+
import Box from '@material-ui/core/Box';
8+
9+
const BottomTabs = () => {
10+
// state that controls which tab the user is on
11+
const [tab, setTab] = useState(0);
12+
const classes = useStyles();
13+
treeWrapper: HTMLDivElement;
14+
15+
// method changes the
16+
const handleChange = (event: React.ChangeEvent, value: number) => {
17+
setTab(value);
18+
};
19+
20+
return (
21+
<div className={classes.root}>
22+
<Box display="flex" justifyContent="space-between">
23+
<Tabs
24+
value={tab}
25+
onChange={handleChange}
26+
classes={{
27+
root: classes.tabsRoot,
28+
indicator: classes.tabsIndicator
29+
}}
30+
>
31+
<Tab
32+
disableRipple
33+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
34+
label="Code Preview"
35+
/>
36+
<Tab
37+
disableRipple
38+
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
39+
label="Application Tree"
40+
/>
41+
</Tabs>
42+
</Box>
43+
{tab === 0 && (
44+
<CodePreview />
45+
// <div>Code Preview</div>
46+
)}
47+
{tab === 1 && (
48+
// <div
49+
// id="treeWrapper"
50+
// style={{
51+
// width: '80%',
52+
// height: '100%'
53+
// }}
54+
// ref={node => (this.treeWrapper = node)}
55+
// >
56+
// <Tree
57+
// data={[this.generateComponentTree(focusComponent.id, components)]}
58+
// separation={{ siblings: 0.3, nonSiblings: 0.3 }}
59+
// transitionDuration={0}
60+
// translate={this.state.translate}
61+
// onClick={this.handleClick}
62+
// styles={{
63+
// nodes: {
64+
// node: {
65+
// name: {
66+
// fill: '#D3D3D3',
67+
// stroke: '#D3D3D3',
68+
// strokeWidth: 1
69+
// }
70+
// },
71+
// leafNode: {
72+
// name: {
73+
// fill: '#D3D3D3',
74+
// stroke: '#D3D3D3',
75+
// strokeWidth: 1
76+
// }
77+
// }
78+
// }
79+
// }}
80+
// />
81+
// </div>
82+
<div>Tree</div>
83+
)}
84+
</div>
85+
);
86+
};
87+
88+
const useStyles = makeStyles(theme => ({
89+
root: {
90+
flexGrow: 1,
91+
backgroundColor: '#333333',
92+
height: '100%',
93+
color: '#fff',
94+
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
95+
},
96+
bottomHeader: {
97+
flex: 1,
98+
flexDirection: 'row',
99+
alignItems: 'center',
100+
Width: '200px'
101+
},
102+
tabsRoot: {
103+
borderBottom: '0.5px solid #424242'
104+
},
105+
tabsIndicator: {
106+
backgroundColor: '#1de9b6'
107+
},
108+
tabRoot: {
109+
textTransform: 'initial',
110+
minWidth: 40,
111+
fontWeight: theme.typography.fontWeightRegular,
112+
marginRight: theme.spacing(4), // JZ: updated syntax as per deprecation warning
113+
114+
fontFamily: [
115+
'-apple-system',
116+
'BlinkMacSystemFont',
117+
'"Segoe UI"',
118+
'Roboto',
119+
'"Helvetica Neue"',
120+
'Arial',
121+
'sans-serif',
122+
'"Apple Color Emoji"',
123+
'"Segoe UI Emoji"',
124+
'"Segoe UI Symbol"'
125+
].join(','),
126+
'&:hover': {
127+
color: '#1de9b6',
128+
opacity: 1
129+
},
130+
'&$tabSelected': {
131+
color: '#33eb91',
132+
fontWeight: theme.typography.fontWeightMedium
133+
},
134+
'&:focus': {
135+
color: '#4aedc4'
136+
}
137+
},
138+
tabSelected: {},
139+
typography: {
140+
padding: theme.spacing(3) // JZ: updated syntax as per deprecation warning
141+
},
142+
padding: {
143+
padding: `0 ${theme.spacing(2)}px` // JZ: updated syntax as per deprecation warning
144+
},
145+
switch: {
146+
marginRight: '10px',
147+
marginTop: '2px'
148+
}
149+
}));
150+
151+
export default BottomTabs;

‎src/components/bottom/CodePreview.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import 'ace-builds/src-noconflict/mode-javascript';
77
import 'ace-builds/src-noconflict/theme-monokai';
88
import Button from '@material-ui/core/Button';
99
import { withStyles } from '@material-ui/core/styles';
10+
// TODO: import useContext
1011

1112
type CodePreviewProps = {
1213
focusComponent: ComponentInt;
@@ -17,6 +18,7 @@ type CodePreviewProps = {
1718
toggleCodeEdit(): void;
1819
codeReadOnly: boolean;
1920
};
21+
2022
// comment out delete
2123
class CodePreview extends Component<CodePreviewProps> {
2224
//checking if the code has been asigned yet or not

‎src/components/bottom/CodePreviewNew.tsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React, { useContext } from 'react';
2+
import { stateContext } from '../../context/context';
3+
import { format } from 'prettier';
4+
import componentRender from '../../utils/componentRender.util';
5+
import AceEditor from 'react-ace';
6+
import { makeStyles } from '@material-ui/core/styles';
7+
import 'ace-builds/src-noconflict/mode-javascript';
8+
import 'ace-builds/src-noconflict/theme-monokai';
9+
import Button from '@material-ui/core/Button';
10+
import { Component } from '../../interfaces/InterfacesNew';
11+
12+
const CodePreview = () => {
13+
const [state, dispatch] = useContext(stateContext);
14+
const currentComponent = state.components.find(
15+
(elem: Component) => elem.id === state.canvasFocus.componentId
16+
);
17+
18+
return (
19+
<div
20+
style={{
21+
height: '90%',
22+
paddingLeft: '0px',
23+
paddingTop: '1rem',
24+
paddingBottom: '1rem',
25+
overflow: 'auto',
26+
maxWidth: '100%',
27+
display: 'flex',
28+
justifyContent: 'center'
29+
}}
30+
>
31+
<AceEditor
32+
mode="javascript"
33+
theme="monokai"
34+
width="100%"
35+
height="100%"
36+
style={{
37+
border: '2px solid #33eb91',
38+
borderRadius: '8px'
39+
}}
40+
// onChange={code =>
41+
// this.props.updateCode({
42+
// componentId: this.props.focusComponent.id,
43+
// code
44+
// })
45+
// }
46+
value={currentComponent.code}
47+
name="Code_div"
48+
// readOnly={this.props.codeReadOnly}
49+
readOnly={true}
50+
editorProps={{ $blockScrolling: true }}
51+
fontSize={16}
52+
tabSize={2}
53+
/>
54+
</div>
55+
);
56+
};
57+
58+
const useStyles = makeStyles(theme => ({}));
59+
60+
export default CodePreview;

‎src/components/bottom/test.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { useState } from 'react';
2+
import { makeStyles } from '@material-ui/styles';
3+
import Card from '@material-ui/core/Card';
4+
import CardActions from '@material-ui/core/CardActions';
5+
import CardContent from '@material-ui/core/CardContent';
6+
import Button from '@material-ui/core/Button';
7+
import Typography from '@material-ui/core/Typography';
8+
const useStyles = makeStyles(theme => ({card: {width: 135,height: 135,textAlign: 'center'},cardActions: {justifyContent: 'center'}}));
9+
export default
10+
function BasicComponentStyles() {
11+
const classes = useStyles();const [count, setCount] = useState(0);
12+
const onIncrement = () => {setCount(count + 1);};
13+
return ({count}Increment);
14+
}
15+
16+
17+
//The useStyles() hook is built using the makeStyles() function—which takes the exact same styles argument as withStyles(). By calling useStyles() within the component, you have your classes object. Another important thing to point out is that makeStyles is imported from @material-ui/styles, not @material-ui/core/styles.

‎src/components/left/ComponentPanelItemNew.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ const useStyles = makeStyles({
1818
left: '-35px',
1919
top: '30px'
2020
}
21-
})
21+
});
2222

2323
const ComponentPanelItem: React.FC<{
2424
name: string;
2525
id: number;
2626
root: boolean;
27-
isFocus: boolean
27+
isFocus: boolean;
2828
}> = ({ name, id, root, isFocus }) => {
2929
const classes = useStyles();
3030
const [state, dispatch] = useContext(stateContext);
@@ -36,7 +36,7 @@ const ComponentPanelItem: React.FC<{
3636
instanceType: 'Component',
3737
instanceTypeId: id
3838
},
39-
canDrag: !root,
39+
canDrag: !root && !isFocus,
4040
collect: (monitor: any) => ({
4141
isDragging: !!monitor.isDragging()
4242
})
@@ -65,12 +65,10 @@ const ComponentPanelItem: React.FC<{
6565
: '2px solid rgba(255,255,255, 0.75)',
6666
borderRadius: '8px'
6767
}}
68-
>
68+
>
6969
<div className="compPanelItem" onClick={handleClick}>
70-
{isFocus && <div className={classes.focusMark}></div>}
71-
<h3>
72-
{name}
73-
</h3>
70+
{isFocus && <div className={classes.focusMark}></div>}
71+
<h3>{name}</h3>
7472
</div>
7573
</Grid>
7674
);

‎src/components/main/CanvasComponentNew.tsx

Lines changed: 0 additions & 67 deletions
This file was deleted.

0 commit comments

Comments
 (0)