Skip to content

Commit cd95e83

Browse files
InvectivusTacoInvectivusTaco
committed
merge
2 parents 7a369cf + aaf7b18 commit cd95e83

21 files changed

+6346
-5364
lines changed

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

Lines changed: 73 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,73 @@
1-
import ComponentPanelItem from '../right/ComponentPanelItem';
2-
import Grid from '@mui/material/Grid';
3-
import React from 'react';
4-
import { RootState } from '../../redux/store';
5-
import makeStyles from '@mui/styles/makeStyles';
6-
import { useSelector } from 'react-redux';
7-
8-
const ComponentDrag = ({ isThemeLight }): JSX.Element => {
9-
const classes = useStyles();
10-
const state = useSelector((store: RootState) => store.appState);
11-
12-
const isFocus = (targetId: Number) => {
13-
return state.canvasFocus.componentId === targetId ? true : false;
14-
};
15-
16-
return (
17-
<div className={classes.panelWrapper}>
18-
<div className={classes.panelWrapperList}>
19-
<h4 className={classes.darkThemeFontColor}>
20-
{state.projectType === 'Next.js' || state.projectType === 'Gatsby.js'
21-
? 'Pages'
22-
: 'Root Components'}
23-
</h4>
24-
<Grid
25-
container
26-
direction="row"
27-
justifyContent="center"
28-
alignItems="center"
29-
>
30-
{state.components
31-
.filter((comp) => state.rootComponents.includes(comp.id))
32-
.map((comp) => {
33-
return (
34-
<ComponentPanelItem
35-
isFocus={isFocus(comp.id)}
36-
key={`comp-${comp.id}`}
37-
name={comp.name}
38-
id={comp.id}
39-
root={true}
40-
isThemeLight={isThemeLight}
41-
/>
42-
);
43-
})}
44-
</Grid>
45-
</div>
46-
</div>
47-
);
48-
};
49-
50-
const useStyles = makeStyles({
51-
panelWrapper: {
52-
display: 'flex',
53-
flexDirection: 'column',
54-
alignItems: 'center',
55-
flexGrow: 1,
56-
overflow: 'auto'
57-
},
58-
panelWrapperList: {
59-
minHeight: '120px'
60-
},
61-
lightThemeFontColor: {
62-
color: '#fff'
63-
},
64-
darkThemeFontColor: {
65-
color: '#fff'
66-
}
67-
});
68-
69-
export default ComponentDrag;
1+
import React from 'react';
2+
import Grid from '@mui/material/Grid';
3+
import { RootState } from '../../redux/store';
4+
import makeStyles from '@mui/styles/makeStyles';
5+
import { useSelector } from 'react-redux';
6+
import ComponentPanelItem from '../right/ComponentPanelItem';
7+
8+
9+
const useStyles = makeStyles({
10+
panelWrapper: {
11+
display: 'flex',
12+
flexDirection: 'column',
13+
alignItems: 'center',
14+
flexGrow: 1,
15+
overflow: 'auto'
16+
},
17+
panelWrapperList: {
18+
minHeight: 'auto'
19+
},
20+
lightThemeFontColor: {
21+
color: '#fff'
22+
},
23+
darkThemeFontColor: {
24+
color: '#fff'
25+
}
26+
});
27+
28+
const ComponentDrag = ({ isVisible, isThemeLight }): JSX.Element | null => {
29+
const classes = useStyles();
30+
const state = useSelector((store: RootState) => store.appState);
31+
32+
const isFocus = (targetId: Number) => {
33+
return state.canvasFocus.componentId === targetId ? true : false;
34+
};
35+
36+
if (!isVisible) return null;
37+
38+
return (
39+
<div className={classes.panelWrapper}>
40+
<div className={classes.panelWrapperList}>
41+
<h4 className={classes.darkThemeFontColor}>
42+
{state.projectType === 'Next.js' || state.projectType === 'Gatsby.js'
43+
? 'Pages'
44+
: ''}
45+
</h4>
46+
<Grid
47+
container
48+
direction="row"
49+
justifyContent="center"
50+
alignItems="center"
51+
>
52+
{state.components
53+
.filter((comp) => state.rootComponents.includes(comp.id))
54+
.map((comp) => {
55+
return (
56+
<ComponentPanelItem
57+
isFocus={isFocus(comp.id)}
58+
key={`comp-${comp.id}`}
59+
name={comp.name}
60+
id={comp.id}
61+
root={true}
62+
isThemeLight={isThemeLight}
63+
/>
64+
);
65+
})}
66+
</Grid>
67+
</div>
68+
</div>
69+
);
70+
};
71+
72+
export default ComponentDrag;
73+

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

Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,61 @@
1-
import ComponentPanelItem from '../right/ComponentPanelItem';
2-
import Grid from '@mui/material/Grid';
3-
import React from 'react';
4-
import { RootState } from '../../redux/store';
5-
import makeStyles from '@mui/styles/makeStyles';
6-
import { useSelector } from 'react-redux';
7-
8-
const ComponentsContainer = () => {
9-
const classes = useStyles();
10-
const state = useSelector((store: RootState) => store.appState);
11-
12-
const isFocus = (targetId: Number) => {
13-
return state.canvasFocus.componentId === targetId ? true : false;
14-
};
15-
return (
16-
<div>
17-
<div className={classes.panelWrapper}>
18-
<div className={classes.panelWrapperList}>
19-
<h4 className={classes.darkThemeFontColor}>Reusable Components</h4>
20-
<Grid container direction="column" alignContent={'center'}>
21-
{state.components
22-
.filter((comp) => !state.rootComponents.includes(comp.id))
23-
.map((comp) => {
24-
return (
25-
<ComponentPanelItem
26-
isFocus={isFocus(comp.id)}
27-
key={`comp-${comp.id}`}
28-
name={comp.name}
29-
id={comp.id}
30-
root={false}
31-
isThemeLight={false}
32-
/>
33-
);
34-
})}
35-
</Grid>
36-
</div>
37-
</div>
38-
</div>
39-
);
40-
};
41-
42-
const useStyles = makeStyles({
43-
panelWrapper: {
44-
display: 'flex',
45-
flexDirection: 'column',
46-
alignItems: 'center',
47-
flexGrow: 1,
48-
overflow: 'auto'
49-
},
50-
panelWrapperList: {
51-
minHeight: '120px'
52-
},
53-
lightThemeFontColor: {
54-
color: '#fff'
55-
},
56-
darkThemeFontColor: {
57-
color: '#fff'
58-
}
59-
});
60-
61-
export default ComponentsContainer;
1+
import ComponentPanelItem from '../right/ComponentPanelItem';
2+
import Grid from '@mui/material/Grid';
3+
import React from 'react';
4+
import { RootState } from '../../redux/store';
5+
import makeStyles from '@mui/styles/makeStyles';
6+
import { useSelector } from 'react-redux';
7+
8+
const ComponentsContainer = () => {
9+
const classes = useStyles();
10+
const state = useSelector((store: RootState) => store.appState);
11+
12+
const isFocus = (targetId: Number) => {
13+
return state.canvasFocus.componentId === targetId ? true : false;
14+
};
15+
return (
16+
<div>
17+
<div className={classes.panelWrapper}>
18+
<div className={classes.panelWrapperList}>
19+
<h4 className={classes.darkThemeFontColor}>Reusable Components</h4>
20+
<Grid container direction="column" alignContent={'center'}>
21+
{state.components
22+
.filter((comp) => !state.rootComponents.includes(comp.id))
23+
.map((comp) => {
24+
return (
25+
<ComponentPanelItem
26+
isFocus={isFocus(comp.id)}
27+
key={`comp-${comp.id}`}
28+
name={comp.name}
29+
id={comp.id}
30+
root={false}
31+
isThemeLight={false}
32+
/>
33+
);
34+
})}
35+
</Grid>
36+
</div>
37+
</div>
38+
</div>
39+
);
40+
};
41+
42+
const useStyles = makeStyles({
43+
panelWrapper: {
44+
display: 'flex',
45+
flexDirection: 'column',
46+
alignItems: 'center',
47+
flexGrow: 1,
48+
overflow: 'auto'
49+
},
50+
panelWrapperList: {
51+
minHeight: 'auto'
52+
},
53+
lightThemeFontColor: {
54+
color: '#fff'
55+
},
56+
darkThemeFontColor: {
57+
color: '#fff'
58+
}
59+
});
60+
61+
export default ComponentsContainer;

0 commit comments

Comments
 (0)