Skip to content

Commit 6a9a231

Browse files
atvanekatvanek
committed
Made Context data table text visible
1 parent e87ddd2 commit 6a9a231

File tree

3 files changed

+69
-44
lines changed

3 files changed

+69
-44
lines changed

‎app/src/components/ContextAPIManager/AssignTab/components/ContextTable.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,19 +45,21 @@ const rows = [
4545
createData('Cupcake', 305, 3.7, 67, 4.3),
4646
createData('Gingerbread', 356, 16.0, 49, 3.9)
4747
];
48-
{/* <Table style={{ width: 400, margin: 'auto' }}></Table> */}
48+
{
49+
/* <Table style={{ width: 400, margin: 'auto' }}></Table> */
50+
}
4951
export default function ContextTable() {
5052
return (
5153
<TableContainer component={Paper}>
52-
<Table sx={{ width: '50%'}} aria-label="customized table">
54+
<Table sx={{ width: '50%' }} aria-label="customized table">
5355
<TableHead>
5456
<TableRow>
5557
<StyledTableCell>Context</StyledTableCell>
5658
<StyledTableCell align="right">Component</StyledTableCell>
5759
</TableRow>
5860
</TableHead>
5961
<TableBody>
60-
{rows.map(row => (
62+
{rows.map((row) => (
6163
<StyledTableRow key={row.name}>
6264
<StyledTableCell component="th" scope="row">
6365
{row.name}
@@ -69,4 +71,4 @@ export default function ContextTable() {
6971
</Table>
7072
</TableContainer>
7173
);
72-
}
74+
}

‎app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import TableCell, { tableCellClasses } from '@mui/material/TableCell';
1111
const StyledTableCell = styled(TableCell)(({ theme }) => ({
1212
[`&.${tableCellClasses.head}`]: {
1313
backgroundColor: theme.palette.common.black,
14-
color: theme.palette.common.white
14+
color: 'theme.palette.common.white'
1515
},
1616
[`&.${tableCellClasses.body}`]: {
1717
fontSize: 14
@@ -48,10 +48,16 @@ export default function DataTable({ target, contextInput }) {
4848
<TableBody>
4949
{target.map((data, index) => (
5050
<StyledTableRow key={index}>
51-
<StyledTableCell component="th" scope="row">
51+
<StyledTableCell
52+
style={{ color: 'black' }}
53+
component="th"
54+
scope="row"
55+
>
5256
{data.key}
5357
</StyledTableCell>
54-
<StyledTableCell align="right">{data.value}</StyledTableCell>
58+
<StyledTableCell style={{ color: 'black' }} align="right">
59+
{data.value}
60+
</StyledTableCell>
5561
</StyledTableRow>
5662
))}
5763
</TableBody>
@@ -64,4 +70,4 @@ export default function DataTable({ target, contextInput }) {
6470
</TableContainer>
6571
</>
6672
);
67-
}
73+
}

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

Lines changed: 53 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useContext } from 'react';
1+
import React from 'react';
22
import Grid from '@mui/material/Grid';
33
import HTMLItem from './HTMLItem';
44
import { RootState } from '../../redux/store';
@@ -19,70 +19,87 @@ Hook state:
1919
*/
2020
// Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
2121
const DragDropPanel = (props): JSX.Element => {
22-
const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
23-
const dispatch = useDispatch();
24-
const { state, contextParam } = useSelector((store:RootState) => ({
25-
state: store.appState,
26-
contextParam: store.contextSlice,
27-
}));
22+
const isDarkMode = useSelector(
23+
(store: RootState) => store.darkMode.isDarkMode
24+
);
25+
const dispatch = useDispatch();
26+
const { state, contextParam } = useSelector((store: RootState) => ({
27+
state: store.appState,
28+
contextParam: store.contextSlice
29+
}));
2830
const handleDelete = (id: number): void => {
29-
dispatch(deleteElement({id:id, contextParam: contextParam}))
30-
31+
dispatch(deleteElement({ id: id, contextParam: contextParam }));
3132
};
3233
// filter out separator so that it will not appear on the html panel
33-
const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator');
34+
const htmlTypesToRender = state.HTMLTypes.filter(
35+
(type) => type.name !== 'separator'
36+
);
3437
return (
3538
<div className={`${!isDarkMode ? 'HTMLItems' : 'HTMLItemsDark'}`}>
3639
<div id="HTMLItemsTopHalf">
37-
<Grid
38-
id="HTMLItemsGrid"
39-
>
40-
<h3 style={ {color: !isDarkMode ? '#000' : '#fff'} }>HTML ELEMENTS</h3>
41-
{htmlTypesToRender.map(option => {
42-
if (!['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(option.name)) {
40+
<Grid id="HTMLItemsGrid">
41+
<h3 style={{ color: !isDarkMode ? '#000' : '#fff' }}>
42+
HTML ELEMENTS
43+
</h3>
44+
{htmlTypesToRender.map((option) => {
45+
if (
46+
!['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(
47+
option.name
48+
)
49+
) {
4350
return (
4451
<HTMLItem
4552
name={option.name}
4653
key={`html-${option.name}`}
4754
id={option.id}
4855
Icon={option.icon}
4956
handleDelete={handleDelete}
50-
5157
/>
5258
);
5359
}
54-
5560
})}
56-
{state.projectType === "Classic React" ? <h3 style={ {color: !isDarkMode ? '#000' : '#fff' } }>REACT ROUTER</h3> : null}
57-
{htmlTypesToRender.map(option => {
58-
if ((option.name === 'Switch' || option.name === 'LinkTo' || option.name === 'Route') && state.projectType === "Classic React") {
61+
{state.projectType === 'Classic React' ? (
62+
<h3 style={{ color: !isDarkMode ? '#000' : '#fff' }}>
63+
REACT ROUTER
64+
</h3>
65+
) : null}
66+
{htmlTypesToRender.map((option) => {
67+
if (
68+
(option.name === 'Switch' ||
69+
option.name === 'LinkTo' ||
70+
option.name === 'Route') &&
71+
state.projectType === 'Classic React'
72+
) {
5973
return (
6074
<HTMLItem
6175
name={option.name}
6276
key={`html-${option.name}`}
6377
id={option.id}
6478
Icon={option.icon}
6579
handleDelete={handleDelete}
66-
6780
/>
6881
);
6982
}
7083
})}
7184

72-
{state.projectType === "Next.js" ? <h3 style={ {color: !isDarkMode? '#000': "#fff"} }>Next.js</h3> : null}
73-
{htmlTypesToRender.map(option => {
74-
if ((option.framework === 'nextjs') && state.projectType === "Next.js") {
75-
return (
76-
<HTMLItem
77-
name={option.name}
78-
key={`html-${option.name}`}
79-
id={option.id}
80-
Icon={option.icon}
81-
handleDelete={handleDelete}
82-
83-
/>
84-
);
85-
}
85+
{state.projectType === 'Next.js' ? (
86+
<h3 style={{ color: !isDarkMode ? '#000' : '#fff' }}>Next.js</h3>
87+
) : null}
88+
{htmlTypesToRender.map((option) => {
89+
if (
90+
option.framework === 'nextjs' &&
91+
state.projectType === 'Next.js'
92+
) {
93+
return (
94+
<HTMLItem
95+
name={option.name}
96+
key={`html-${option.name}`}
97+
id={option.id}
98+
Icon={option.icon}
99+
handleDelete={handleDelete}
100+
/>
101+
);
102+
}
86103
})}
87104
</Grid>
88105
</div>

0 commit comments

Comments
 (0)