Skip to content

Commit 3f0276a

Browse files
MikoGomeMikoGome
committed
ReacType v.11.0.0 is ready
1 parent d27c423 commit 3f0276a

File tree

5 files changed

+69
-46
lines changed

5 files changed

+69
-46
lines changed

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ const DemoRender = (): JSX.Element => {
2525
border: '2px Solid grey',
2626
};
2727

28-
// let code = useSelector((state) => state.code);
29-
3028
const html = `
3129
<html>
3230
<head>
@@ -59,7 +57,7 @@ const DemoRender = (): JSX.Element => {
5957
//Switch between components when clicking on a link in the live render
6058
window.onmessage = (event) => {
6159
if(event.data === undefined) return;
62-
const component = event.data?.split('/').at(-1);
60+
const component:string = event.data?.split('/').at(-1);
6361
const componentId = component && state.components?.find((el) => {
6462
return el.name.toLowerCase() === component.toLowerCase();
6563
}).id;

‎app/src/components/right/ComponentPanel.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,9 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
7070
const createOption = (inputName: String) => {
7171
// format name so first letter is capitalized and there are no white spaces
7272
let inputNameClean = inputName.replace(/\s+/g, ''); // removes spaces
73-
const formattedName =
74-
inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1); // capitalizes first letter
73+
const formattedName = state.projectType === 'Classic React'
74+
? inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1) // capitalizes first letter
75+
: inputNameClean;
7576
// add new component to state
7677
dispatch({
7778
type: 'ADD COMPONENT',

‎app/src/containers/CustomizationPanel.tsx‎

Lines changed: 63 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -380,46 +380,57 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
380380
document.removeEventListener('keydown', keyBindedFunc);
381381
};
382382
}, []);
383-
383+
384+
if(state.canvasFocus.childId === null) {
385+
return (
386+
<div className="column right" id="rightContainer" style={style}>
387+
<ProjectManager />
388+
<div className="rightPanelWrapper">
389+
<div>
390+
<div className={classes.rootConfigHeader}>
391+
<h4
392+
className={
393+
isThemeLight
394+
? classes.lightThemeFontColor
395+
: classes.darkThemeFontColor
396+
}
397+
>
398+
Parent Component:
399+
<br />
400+
<br />
401+
<span className={classes.rootCompName}>{configTarget.name}</span>
402+
</h4>
403+
</div>
404+
</div>
405+
</div>
406+
<ProjectManager />
407+
</div>
408+
)
409+
}
384410
return (
385411
<div className="column right" id="rightContainer" style={style}>
386412
<ProjectManager />
387413
{/* -----------------------------MOVED PROJECT MANAGER-------------------------------------- */}
388414
<div className="rightPanelWrapper">
389415
<div>
390416
<div className={classes.configHeader}>
391-
{configTarget.child ? (
392-
<h4>
393-
Instance of
394-
{configTarget.child.type === 'component'
395-
? ' component'
396-
: ' element'}{' '}
397-
<br />
398-
<br />
399-
<span
400-
className={
401-
isThemeLight
402-
? `${classes.compName} ${classes.lightThemeFontColor}`
403-
: `${classes.compName} ${classes.darkThemeFontColor}`
404-
}
405-
>
406-
{configTarget.child.name}
407-
</span>
408-
</h4>
409-
) : (
410-
<h4
417+
<h4>
418+
Instance of
419+
{configTarget.child.type === 'component'
420+
? ' component'
421+
: ' element'}{' '}
422+
<br />
423+
<br />
424+
<span
411425
className={
412426
isThemeLight
413-
? classes.lightThemeFontColor
414-
: classes.darkThemeFontColor
427+
? `${classes.compName} ${classes.lightThemeFontColor}`
428+
: `${classes.compName} ${classes.darkThemeFontColor}`
415429
}
416430
>
417-
Parent Component:
418-
<br />
419-
<br />
420-
<span className={classes.compName}>{configTarget.name}</span>
421-
</h4>
422-
)}
431+
{configTarget.child.name}
432+
</span>
433+
</h4>
423434
</div>
424435
<section className={'customization-section'}>
425436
<div>
@@ -431,7 +442,8 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
431442
title="Display:"
432443
name="display"
433444
items={[
434-
{ value: '', text: 'none' },
445+
{ value: '', text: 'default' },
446+
{ value: 'none', text: 'none' },
435447
{ value: 'block', text: 'block' },
436448
{ value: 'inline-block', text: 'inline-block' },
437449
{ value: 'flex', text: 'flex' }
@@ -447,7 +459,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
447459
title="Flex direction:"
448460
name="flexdir"
449461
items={[
450-
{ value: '', text: 'none' },
462+
{ value: '', text: 'default' },
451463
{ value: 'row', text: 'row' },
452464
{ value: 'column', text: 'column' }
453465
]}
@@ -460,7 +472,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
460472
title="Justify content:"
461473
name="flexjust"
462474
items={[
463-
{ value: '', text: 'none' },
475+
{ value: '', text: 'default' },
464476
{ value: 'flex-start', text: 'flex-start' },
465477
{ value: 'flex-end', text: 'flex-end' },
466478
{ value: 'center', text: 'center' },
@@ -477,7 +489,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
477489
title="Align items:"
478490
name="flexalign"
479491
items={[
480-
{ value: '', text: 'none' },
492+
{ value: '', text: 'default' },
481493
{ value: 'stretch', text: 'stretch' },
482494
{ value: 'flex-start', text: 'flex-start' },
483495
{ value: 'flex-end', text: 'flex-end' },
@@ -494,24 +506,26 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
494506
title="Width:"
495507
name="width"
496508
items={[
497-
{ value: '', text: 'none' },
509+
{ value: '', text: 'default' },
498510
{ value: 'auto', text: 'auto' },
511+
{ value: '100%', text: '100%'},
499512
{ value: '50%', text: '50%' },
500513
{ value: '25%', text: '25%' }
501514
]}
502515
/>
503516
<FormSelector
504517
classes={classes}
505518
isThemeLight={isThemeLight}
506-
selectValue={compWidth}
519+
selectValue={compHeight}
507520
handleChange={handleChange}
508521
title="Height:"
509522
name="height"
510523
items={[
511-
{ value: '', text: 'none' },
524+
{ value: '', text: 'default' },
512525
{ value: 'auto', text: 'auto' },
513526
{ value: '100%', text: '100%' },
514-
{ value: '50%', text: '50%' }
527+
{ value: '50%', text: '50%' },
528+
{ value: '25%', text: '25%' }
515529
]}
516530
/>
517531
<div className={classes.configRow}>
@@ -785,6 +799,9 @@ const useStyles = makeStyles({
785799
compName: {
786800
fontSize: '1rem'
787801
},
802+
rootCompName: {
803+
fontSize: '1.75rem'
804+
},
788805
// 'Parent Component' font size
789806
configHeader: {
790807
height: '70px',
@@ -795,6 +812,15 @@ const useStyles = makeStyles({
795812
marginTop: '10px'
796813
}
797814
},
815+
rootConfigHeader: {
816+
height: '70px',
817+
'& > h4': {
818+
fontSize: '1.75rem',
819+
letterSpacing: '0.5px',
820+
marginBottom: '0',
821+
marginTop: '30px'
822+
}
823+
},
798824
lightThemeFontColor: {
799825
color: '#155084'
800826
},

‎app/src/helperFunctions/generateCode.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ const generateUnformattedCode = (
311311
${links ? `import Link from 'next/link'` : ``}
312312
${images ? `import Image from 'next/image'` : ``}
313313
314-
const ${currComponent.name} = (props): JSX.Element => {
314+
const ${currComponent.name[0].toUpperCase() + currComponent.name.slice(1)} = (props): JSX.Element => {
315315
const [value, setValue] = useState<any | undefined>("INITIAL VALUE");
316316
return (
317317
<>
@@ -326,7 +326,7 @@ const generateUnformattedCode = (
326326
</>
327327
);
328328
}
329-
export default ${currComponent.name};
329+
export default ${currComponent.name[0].toUpperCase() + currComponent.name.slice(1)};
330330
`;
331331
} else {
332332
// gatsby component code

‎server/server.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ const isDev = process.env.NODE_ENV === 'development';
1919
const isProd = process.env.NODE_ENV === 'production';
2020
const isTest = process.env.NODE_ENV === 'test';
2121

22-
console.log('process.env.NODE_ENV', process.env.NODE_ENV);
23-
2422
app.use(express.json({ limit: '100mb' }));
2523
app.use(express.urlencoded({ limit: '100mb', extended: true }));
2624
app.use(cookieParser());

0 commit comments

Comments
 (0)