Skip to content

Commit 0cc13ea

Browse files
huypham048huypham048
authored
Merge pull request #2 from oslabs-beta/contextTab
finished creating layout
2 parents 31a5201 + 62211d0 commit 0cc13ea

File tree

13 files changed

+361
-106
lines changed

13 files changed

+361
-106
lines changed

‎app/src/components/ContextAPIManager/AssignerComponents/ComponentTable.tsx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import * as React from 'react';
2+
import { styled } from '@mui/material/styles';
3+
import Table from '@mui/material/Table';
4+
import TableBody from '@mui/material/TableBody';
5+
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
6+
import TableContainer from '@mui/material/TableContainer';
7+
import TableHead from '@mui/material/TableHead';
8+
import TableRow from '@mui/material/TableRow';
9+
import Paper from '@mui/material/Paper';
10+
11+
const StyledTableCell = styled(TableCell)(({ theme }) => ({
12+
[`&.${tableCellClasses.head}`]: {
13+
backgroundColor: theme.palette.common.black,
14+
color: theme.palette.common.white
15+
},
16+
[`&.${tableCellClasses.body}`]: {
17+
fontSize: 14
18+
}
19+
}));
20+
21+
const StyledTableRow = styled(TableRow)(({ theme }) => ({
22+
'&:nth-of-type(odd)': {
23+
backgroundColor: theme.palette.action.hover
24+
},
25+
// hide last border
26+
'&:last-child td, &:last-child th': {
27+
border: 0
28+
}
29+
}));
30+
31+
function createData(
32+
name: string,
33+
calories: number,
34+
fat: number,
35+
carbs: number,
36+
protein: number
37+
) {
38+
return { name, calories, fat, carbs, protein };
39+
}
40+
41+
const rows = [
42+
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
43+
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
44+
createData('Eclair', 262, 16.0, 24, 6.0),
45+
createData('Cupcake', 305, 3.7, 67, 4.3),
46+
createData('Gingerbread', 356, 16.0, 49, 3.9)
47+
];
48+
49+
export default function ContextTable() {
50+
return (
51+
<TableContainer component={Paper}>
52+
<Table sx={{ width: '100%' }} aria-label="customized table">
53+
<TableHead>
54+
<TableRow>
55+
<StyledTableCell>Component</StyledTableCell>
56+
<StyledTableCell align="right">Context</StyledTableCell>
57+
</TableRow>
58+
</TableHead>
59+
<TableBody>
60+
{rows.map(row => (
61+
<StyledTableRow key={row.name}>
62+
<StyledTableCell component="th" scope="row">
63+
{row.name}
64+
</StyledTableCell>
65+
<StyledTableCell align="right">{row.component}</StyledTableCell>
66+
<StyledTableCell align="right">{row.fat}</StyledTableCell>
67+
<StyledTableCell align="right">{row.carbs}</StyledTableCell>
68+
<StyledTableCell align="right">{row.protein}</StyledTableCell>
69+
</StyledTableRow>
70+
))}
71+
</TableBody>
72+
</Table>
73+
</TableContainer>
74+
);
75+
}

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import * as React from 'react';
2+
import { styled } from '@mui/material/styles';
3+
import Table from '@mui/material/Table';
4+
import TableBody from '@mui/material/TableBody';
5+
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
6+
import TableContainer from '@mui/material/TableContainer';
7+
import TableHead from '@mui/material/TableHead';
8+
import TableRow from '@mui/material/TableRow';
9+
import Paper from '@mui/material/Paper';
10+
11+
const StyledTableCell = styled(TableCell)(({ theme }) => ({
12+
[`&.${tableCellClasses.head}`]: {
13+
backgroundColor: theme.palette.common.black,
14+
color: theme.palette.common.white
15+
},
16+
[`&.${tableCellClasses.body}`]: {
17+
fontSize: 14
18+
}
19+
}));
20+
21+
const StyledTableRow = styled(TableRow)(({ theme }) => ({
22+
'&:nth-of-type(odd)': {
23+
backgroundColor: theme.palette.action.hover
24+
},
25+
// hide last border
26+
'&:last-child td, &:last-child th': {
27+
border: 0
28+
}
29+
}));
30+
31+
function createData(
32+
name: string,
33+
calories: number,
34+
fat: number,
35+
carbs: number,
36+
protein: number
37+
) {
38+
return { name, calories, fat, carbs, protein };
39+
}
40+
41+
const rows = [
42+
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
43+
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
44+
createData('Eclair', 262, 16.0, 24, 6.0),
45+
createData('Cupcake', 305, 3.7, 67, 4.3),
46+
createData('Gingerbread', 356, 16.0, 49, 3.9)
47+
];
48+
49+
export default function ContextTable() {
50+
return (
51+
<TableContainer component={Paper}>
52+
<Table sx={{ width: '100%' }} aria-label="customized table">
53+
<TableHead>
54+
<TableRow>
55+
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
56+
<StyledTableCell align="right">Calories</StyledTableCell>
57+
</TableRow>
58+
</TableHead>
59+
<TableBody>
60+
{rows.map(row => (
61+
<StyledTableRow key={row.name}>
62+
<StyledTableCell component="th" scope="row">
63+
{row.name}
64+
</StyledTableCell>
65+
<StyledTableCell align="right">{row.calories}</StyledTableCell>
66+
</StyledTableRow>
67+
))}
68+
</TableBody>
69+
</Table>
70+
</TableContainer>
71+
);
72+
}

‎app/src/components/ContextAPIManager/ContextAssigner.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Typography } from '@material-ui/core';
2+
import React from 'react';
3+
import ContextTable from './AssignerComponents/ContextTable';
4+
5+
const ContextAssigner = () => {
6+
return <ContextTable />;
7+
};
8+
9+
export default ContextAssigner;

‎app/src/components/ContextAPIManager/ContextCreator.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Typography } from '@material-ui/core';
2+
import React from 'react';
3+
4+
const ContextCreator = () => {
5+
return <Typography variant="h1">Context Creator</Typography>;
6+
};
7+
8+
export default ContextCreator;

‎app/src/components/ContextAPIManager/ContextManager.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, { useContext } from 'react';
2+
import ContextTab from './ContextTab';
3+
import ContextTree from './ContextTree';
4+
import { makeStyles } from '@material-ui/styles';
5+
6+
const useStyles = makeStyles({
7+
contextContainer: {
8+
backgroundColor: 'white',
9+
// display: 'grid',
10+
// gridTemplateColumns: '100%',
11+
height: '100%'
12+
}
13+
14+
// leftContext: {
15+
// display: 'flex',
16+
// // flexDirection: 'column',
17+
// border: '1px solid blue'
18+
// }
19+
20+
// childContext: {
21+
// flex: '1',
22+
// border: '1px solid blue'
23+
// }
24+
});
25+
const ContextManager = (props): JSX.Element => {
26+
const classes = useStyles();
27+
28+
return (
29+
<React.Fragment>
30+
<div className={classes.contextContainer}>
31+
<ContextTab />
32+
</div>
33+
</React.Fragment>
34+
);
35+
};
36+
37+
export default ContextManager;

‎app/src/components/ContextAPIManager/ContextTab.tsx

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
// import * as React from 'react';
2+
// import Box from '@mui/material/Box';
3+
// import InputLabel from '@mui/material/InputLabel';
4+
// import MenuItem from '@mui/material/MenuItem';
5+
// import FormControl from '@mui/material/FormControl';
6+
// import Select, { SelectChangeEvent } from '@mui/material/Select';
7+
// import StateContext from '../../context/context';
8+
9+
// export default function ContextAssigner() {
10+
// const [age, setAge] = React.useState('');
11+
// const [componentList, dispatch] = React.useContext(StateContext);
12+
13+
// console.log(componentList);
14+
// const handleChange = (event: SelectChangeEvent) => {
15+
// setAge(event.target.value as string);
16+
// };
17+
18+
// return (
19+
20+
// // <Box sx={{ minWidth:100 }}>
21+
// // <FormControl fullWidth>
22+
// // <InputLabel id="demo-simple-select-label">Select Component</InputLabel>
23+
// // <Select
24+
// // labelId="demo-simple-select-label"
25+
// // id="demo-simple-select"
26+
// // value={age}
27+
// // label="Age"
28+
// // onChange={handleChange}
29+
// // >
30+
// // {componentList.components.map((component) => {
31+
// // return <MenuItem value={component.name}>{component.name}</MenuItem>
32+
// // })}
33+
// // </Select>
34+
// // </FormControl>
35+
// // </Box>
36+
// );
37+
// }
38+
39+
// import * as React from 'react';
40+
// import ToggleButton from '@mui/material/ToggleButton';
41+
// import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
42+
// import ContextAssigner from './ContextAssigner';
43+
// import ContextCreator from './ContextCreator';
44+
45+
// export default function ColorToggleButton() {
46+
// const [alignment, setAlignment] = React.useState('web');
47+
48+
// const handleChange = (
49+
// event: React.MouseEvent<HTMLElement>,
50+
// newAlignment: string
51+
// ) => {
52+
// setAlignment(newAlignment);
53+
// };
54+
55+
// return (
56+
// <ToggleButtonGroup
57+
// color="primary"
58+
// value={alignment}
59+
// exclusive
60+
// onChange={handleChange}
61+
// fullWidth={true}
62+
// >
63+
// <ToggleButton value="web">Create/Edit</ToggleButton>
64+
65+
// <ToggleButton value="android">Assign</ToggleButton>
66+
// </ToggleButtonGroup>
67+
// );
68+
// }
69+
70+
import * as React from 'react';
71+
import Box from '@mui/material/Box';
72+
import Tab from '@mui/material/Tab';
73+
import TabContext from '@mui/lab/TabContext';
74+
import TabList from '@mui/lab/TabList';
75+
import TabPanel from '@mui/lab/TabPanel';
76+
import ContextCreator from './ContextCreator';
77+
import ContextAssigner from './ContextAssigner';
78+
import ContextTree from './ContextTree';
79+
80+
export default function LabTabs() {
81+
const [value, setValue] = React.useState('1');
82+
83+
const handleChange = (event: React.SyntheticEvent, newValue: string) => {
84+
setValue(newValue);
85+
};
86+
87+
return (
88+
<Box sx={{ width: '100%', typography: 'body1' }}>
89+
<TabContext value={value}>
90+
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
91+
<TabList
92+
onChange={handleChange}
93+
aria-label="lab API tabs example"
94+
centered={true}
95+
// indicatorColor={'warning'}
96+
// textColor={'secondary'}
97+
>
98+
<Tab label="Create/Edit" value="1" />
99+
<Tab label="Assign" value="2" />
100+
<Tab label="Display" value="3" />
101+
</TabList>
102+
</Box>
103+
<TabPanel value="1">
104+
<ContextCreator />
105+
</TabPanel>
106+
<TabPanel value="2">
107+
<ContextAssigner />
108+
</TabPanel>
109+
<TabPanel value="3">
110+
<ContextTree />
111+
</TabPanel>
112+
</TabContext>
113+
</Box>
114+
);
115+
}

‎app/src/components/ContextAPIManager/ContextTree.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Typography } from '@material-ui/core';
2+
import React from 'react';
3+
4+
const ContextTree = () => {
5+
return (
6+
<Typography variant="h1" align="center">
7+
Beautiful Tree
8+
</Typography>
9+
);
10+
};
11+
12+
export default ContextTree;

0 commit comments

Comments
 (0)