Skip to content

Commit 1deb1b2

Browse files
khuongdn16khuongdn16
authored
Merge pull request #6 from eddypjr/mobileViewport
Approved Merge Mobile Viewport
2 parents 50c2a72 + 8400b4a commit 1deb1b2

File tree

14 files changed

+36
-37
lines changed

14 files changed

+36
-37
lines changed

‎app/src/components/bottom/BottomTabs.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ const BottomTabs = () => {
7272
onChange={handleProjectChange}
7373
>
7474
<MenuItem value={'Classic React'}>Classic React</MenuItem>
75+
<MenuItem value={'React for Mobile'}>React for Mobile</MenuItem>
7576
<MenuItem value={'Gatsby.js'}>Gatsby.js</MenuItem>
7677
<MenuItem value={'Next.js'}>Next.js</MenuItem>
7778
</Select>

‎app/src/components/bottom/CodePreview.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import 'ace-builds/src-noconflict/theme-solarized_dark';
88
import 'ace-builds/src-noconflict/theme-solarized_light';
99
import 'ace-builds/src-noconflict/theme-terminal';
1010
import { Component } from '../../interfaces/Interfaces';
11+
import { EditorState } from 'draft-js';
12+
import { Editor } from 'react-draft-wysiwyg';
1113
import useResizeObserver from '../../tree/useResizeObserver';
1214
import { string } from 'prop-types';
1315

@@ -26,9 +28,10 @@ const CodePreview: React.FC<{
2628
(elem: Component) => elem.id === state.canvasFocus.componentId
2729
);
2830

29-
const handleCodeSnipChange = val => {
31+
const handleCodeSnipChange = (val) => {
3032
currentComponent.code = val;
3133
};
34+
3235
useEffect(() => {
3336
setDivHeight(height);
3437
}, [height])
@@ -40,7 +43,6 @@ const CodePreview: React.FC<{
4043
height: '100%',
4144
maxWidth: '100%',
4245
justifyContent: 'center',
43-
4446
}}
4547
>
4648
<AceEditor

‎app/src/components/left/HTMLPanel.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,6 @@ const HTMLPanel = (props): JSX.Element => {
188188
onChange={handleTagChange}
189189
className={isThemeLight ? `${classes.input} ${classes.lightThemeFontColor}` : `${classes.input} ${classes.darkThemeFontColor}`}
190190
style={{ marginBottom: '10px' }}
191-
192191
/>
193192

194193
{(!tag.charAt(0).match(/[A-Za-z]/) || !alphanumeric(tag) || tag.trim() === '' || checkNameDupe(tag))

‎app/src/components/main/Canvas.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ function Canvas() {
3232
// make a deep clone of state
3333
const deepCopiedState = JSON.parse(JSON.stringify(state));
3434
state.past.push(deepCopiedState.components[0].children);
35+
3536
};
3637

3738
// This hook will allow the user to drag items from the left panel on to the canvas

‎app/src/components/main/DirectChildHTML.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ function DirectChildHTML({
2424
(type: HTMLType) => type.id === typeId
2525
);
2626

27+
2728
// hook that allows component to be draggable
2829
const [{ isDragging }, drag] = useDrag({
2930
// setting item attributes to be referenced when updating state with new instance of dragged item

‎app/src/components/main/DirectChildHTMLNestable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const snapShotFunc = () => {
8181
});
8282
}
8383
},
84-
84+
8585
collect: (monitor: any) => {
8686
return {
8787
isOver: !!monitor.isOver({ shallow: true })

‎app/src/components/top/NavBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
} from '@material-ui/core/styles';
88
import AppBar from '@material-ui/core/AppBar';
99
import Avatar from '@material-ui/core/Avatar';
10+
import Brightness3Icon from '@material-ui/icons/Brightness3';
1011
import Toolbar from '@material-ui/core/Toolbar';
1112
import Typography from '@material-ui/core/Typography';
1213
import Button from '@material-ui/core/Button';
@@ -29,7 +30,6 @@ import StateContext from '../../context/context';
2930
import logo from '../../public/icons/win/logo.png';
3031

3132

32-
3333
// ROUTING TO DASHBOARD
3434
import { Link } from "react-router-dom";
3535

‎app/src/containers/AppContainer.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import RightContainer from './RightContainer';
88
import { theme1, theme2 } from '../public/styles/theme';
99

1010

11-
1211
export const styleContext = createContext({
1312
style: null,
1413
setStyle: null

‎app/src/containers/RightContainer.tsx

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import React, {
44
useEffect,
55
useMemo,
66
useRef,
7+
useCallback,
78
} from 'react';
8-
import initialState from '../context/initialState';
99
import { makeStyles } from '@material-ui/core/styles';
1010
import FormControl from '@material-ui/core/FormControl';
1111
import Select from '@material-ui/core/Select';
@@ -25,7 +25,7 @@ import List from '@material-ui/core/List';
2525
import ListItem from '@material-ui/core/ListItem';
2626
import ListItemText from '@material-ui/core/ListItemText';
2727
import createModal from '../components/right/createModal';
28-
import ComponentPanel from '../components/right/ComponentPanel'
28+
import ComponentPanel from '../components/right/ComponentPanel';
2929

3030
// need to pass in props to use the useHistory feature of react router
3131
const RightContainer = ({isThemeLight}): JSX.Element => {
@@ -44,7 +44,6 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
4444
const { style } = useContext(styleContext);
4545
const [modal, setModal] = useState(null);
4646

47-
4847
const resetFields = () => {
4948
const style = configTarget.child
5049
? configTarget.child.style
@@ -187,7 +186,7 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
187186
if (compWidth !== '') styleObj.width = compWidth;
188187
if (compHeight !== '') styleObj.height = compHeight;
189188
if (BGColor !== '') styleObj.backgroundColor = BGColor;
190-
189+
191190
dispatch({
192191
type: 'UPDATE CSS',
193192
payload: { style: styleObj }
@@ -205,6 +204,15 @@ const redoAction = () => {
205204
dispatch({ type: 'REDO', payload: {} });
206205
};
207206

207+
const undoRedoKey = useCallback((e) => {
208+
(e.key === 'z' && e.metaKey && !e.shiftKey) ? undoAction() :
209+
(e.shiftKey && e.metaKey && e.key === 'z') ? redoAction() : '';
210+
}, []);
211+
212+
useEffect(() => {
213+
document.addEventListener("keydown", undoRedoKey);
214+
}, []);
215+
208216
// placeholder for handling deleting instance
209217
const handleDelete = () => {
210218
dispatch({ type: 'DELETE CHILD', payload: {} });
@@ -331,7 +339,7 @@ const redoAction = () => {
331339
className={classes.select}
332340
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
333341
>
334-
<MenuItem value=""></MenuItem>
342+
<MenuItem value="">none</MenuItem>
335343
<MenuItem value={'block'}>block</MenuItem>
336344
<MenuItem value={'inline-block'}>inline-block</MenuItem>
337345
<MenuItem value={'flex'}>flex</MenuItem>
@@ -356,7 +364,7 @@ const redoAction = () => {
356364
className={classes.select}
357365
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
358366
>
359-
<MenuItem value=""></MenuItem>
367+
<MenuItem value="">none</MenuItem>
360368
<MenuItem value={'row'}>row</MenuItem>
361369
<MenuItem value={'column'}>column</MenuItem>
362370
</Select>
@@ -377,7 +385,7 @@ const redoAction = () => {
377385
className={classes.select}
378386
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
379387
>
380-
<MenuItem value=""></MenuItem>
388+
<MenuItem value="">none</MenuItem>
381389
<MenuItem value={'flex-start'}>flex-start</MenuItem>
382390
<MenuItem value={'flex-end'}>flex-end</MenuItem>
383391
<MenuItem value={'center'}>center</MenuItem>
@@ -402,7 +410,7 @@ const redoAction = () => {
402410
className={classes.select}
403411
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
404412
>
405-
<MenuItem value=""></MenuItem>
413+
<MenuItem value="">none</MenuItem>
406414
<MenuItem value={'stretch'}>stretch</MenuItem>
407415
<MenuItem value={'flex-start'}>flex-start</MenuItem>
408416
<MenuItem value={'flex-end'}>flex-end</MenuItem>
@@ -427,7 +435,7 @@ const redoAction = () => {
427435
className={classes.select}
428436
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
429437
>
430-
<MenuItem value=""></MenuItem>
438+
<MenuItem value="">none</MenuItem>
431439
<MenuItem value={'auto'}>auto</MenuItem>
432440
<MenuItem value={'50%'}>50%</MenuItem>
433441
<MenuItem value={'25%'}>25%</MenuItem>
@@ -449,7 +457,7 @@ const redoAction = () => {
449457
className={classes.select}
450458
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
451459
>
452-
<MenuItem value=""></MenuItem>
460+
<MenuItem value="">none</MenuItem>
453461
<MenuItem value={'auto'}>auto</MenuItem>
454462
<MenuItem value={'100%'}>100%</MenuItem>
455463
<MenuItem value={'50%'}>50%</MenuItem>
@@ -470,6 +478,7 @@ const redoAction = () => {
470478
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
471479
value={BGColor}
472480
onChange={handleChange}
481+
placeholder="#B6B8B7"
473482
/>
474483
</FormControl>
475484
</div>

‎app/src/helperFunctions/generateCode.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ const generateUnformattedCode = (
4646
// check if imports array include the referenced component, if not, add its name to the imports array (e.g. the name/tag of the component/element)
4747
if (!imports.includes(referencedComponent.name))
4848
imports.push(referencedComponent.name);
49-
child['name'] = referencedComponent.name;
50-
return child;
49+
child['name'] = referencedComponent.name;
50+
return child;
5151
} else if (child.type === 'HTML Element') {
5252
const referencedHTML = HTMLTypes.find(elem => elem.id === child.typeId);
5353
child['tag'] = referencedHTML.tag;
@@ -67,10 +67,8 @@ const generateUnformattedCode = (
6767
return child;
6868
}
6969
});
70-
7170
return enrichedChildren;
7271
};
73-
7472
// write all code that will be under the "return" of the component
7573
const writeNestedElements = (enrichedChildren: any) => {
7674
return `${enrichedChildren
@@ -176,7 +174,6 @@ const generateUnformattedCode = (
176174
${classBased ? `import React, {Component} from 'react';` : ''}
177175
${!stateful && !classBased ? `import React from 'react';` : ''}
178176
${importsMapped}
179-
180177
${
181178
classBased
182179
? `class ${currentComponent.name} extends Component {`

‎app/src/helperFunctions/manageSeparators.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ manageSeparators.handleSeparators = (arr: object[], str: string) => {
4848
// this function replaces separators onto which an element is dropped with the element itself
4949
manageSeparators.mergeSeparator = (arr: object[], index: number) => {
5050
return arr.map((child) => {
51-
if (child.name === 'div' && child.children.length) {
51+
if (child.name === 'div' || child.name === 'form' && child.children.length) {
5252
const divContents = manageSeparators.mergeSeparator(child.children, index);
5353
return { ...child, children: divContents }
5454
}

‎app/src/interfaces/Interfaces.ts

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,6 @@ export interface State {
1717
future: any[];
1818
}
1919

20-
export interface PastElement {
21-
type: string;
22-
typeId: number;
23-
name: string;
24-
childId: number;
25-
style: object;
26-
attributes?: object;
27-
children?: PastElement[];
28-
}
29-
3020
export interface ChildElement {
3121
type: string;
3222
typeId: number;
@@ -36,7 +26,6 @@ export interface ChildElement {
3626
attributes?: object;
3727
children?: ChildElement[];
3828
}
39-
4029
export interface Component {
4130
id: number;
4231
name: string;

‎app/src/reducers/componentReducer.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ const reducer = (state: State, action: Action) => {
209209
style: {},
210210
code: '',
211211
children: [],
212-
isPage: action.payload.root
212+
isPage: action.payload.root,
213213
};
214214
components.push(newComponent);
215215

@@ -237,7 +237,7 @@ const reducer = (state: State, action: Action) => {
237237
const {
238238
type,
239239
typeId,
240-
childId
240+
childId,
241241
}: { type: string; typeId: number; childId: any } = action.payload;
242242

243243
const parentComponentId: number = state.canvasFocus.componentId;
@@ -285,7 +285,8 @@ const reducer = (state: State, action: Action) => {
285285
name: newName,
286286
childId: state.nextChildId,
287287
style: {},
288-
children: componentChildren
288+
children: componentChildren,
289+
289290
};
290291
const topSeparator: ChildElement = {
291292
type: 'HTML Element',
@@ -654,6 +655,7 @@ const reducer = (state: State, action: Action) => {
654655
...state
655656
};
656657
}
658+
case 'CHANGEDVALUE': {}
657659

658660
default:
659661
return state;

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,6 @@
198198
"nodemon": "^2.0.4",
199199
"postcss-loader": "^2.1.6",
200200
"sass-loader": "^7.0.3",
201-
"spectron": "^11.1.0",
202201
"style-loader": "^0.20.3",
203202
"supertest": "^4.0.2",
204203
"ts-jest": "^25.3.0",

0 commit comments

Comments
 (0)