Skip to content

Commit d81e577

Browse files
huypham048huypham048
committed
Co-authored-by: Sal Saluga [email protected]
Co-authored-by: Ken Bains [email protected] Co-authored-by: Bianca Picasso [email protected]
1 parent 31a5201 commit d81e577

File tree

10 files changed

+202
-103
lines changed

10 files changed

+202
-103
lines changed

‎app/src/components/ContextAPIManager/ContextAssigner.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 ContextAssigner = () => {
5+
return <Typography variant="h1">Context Assigner</Typography>;
6+
};
7+
8+
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: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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+
border: '1px solid red',
11+
gridTemplateColumns: '25% 75%',
12+
height: '100%'
13+
},
14+
15+
leftContext: {
16+
display: 'flex',
17+
flexDirection: 'column',
18+
border: '1px solid blue'
19+
},
20+
21+
childContext: {
22+
flex: '1',
23+
border: '1px solid blue'
24+
}
25+
});
26+
const ContextManager = (props): JSX.Element => {
27+
const classes = useStyles();
28+
29+
return (
30+
<React.Fragment>
31+
<div className={classes.contextContainer}>
32+
<div className={classes.leftContext}>
33+
<div className={classes.childContext}>
34+
<ContextTab />
35+
</div>
36+
</div>
37+
<div className="rightContext">
38+
<ContextTree />
39+
</div>
40+
</div>
41+
</React.Fragment>
42+
);
43+
};
44+
45+
export default ContextManager;

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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+
77+
export default function LabTabs() {
78+
const [value, setValue] = React.useState('1');
79+
80+
const handleChange = (event: React.SyntheticEvent, newValue: string) => {
81+
setValue(newValue);
82+
};
83+
84+
return (
85+
<Box sx={{ width: '100%', typography: 'body1' }}>
86+
<TabContext value={value}>
87+
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
88+
<TabList onChange={handleChange} aria-label="lab API tabs example">
89+
<Tab label="Item One" value="1" />
90+
<Tab label="Item Two" value="2" />
91+
<Tab label="Item Three" value="3" />
92+
</TabList>
93+
</Box>
94+
<TabPanel value="1">Item One</TabPanel>
95+
<TabPanel value="2">Item Two</TabPanel>
96+
<TabPanel value="3">Item Three</TabPanel>
97+
</TabContext>
98+
</Box>
99+
);
100+
}

‎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;

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

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import Tabs from '@material-ui/core/Tabs';
55
import Tab from '@material-ui/core/Tab';
66
import CodePreview from './CodePreview';
77
import StylesEditor from './StylesEditor';
8-
import CustomizationPanel from '../../containers/CustomizationPanel'
9-
import CreationPanel from './CreationPanel'
10-
import ContextManager from './ContextManager'
8+
import CustomizationPanel from '../../containers/CustomizationPanel';
9+
import CreationPanel from './CreationPanel';
10+
import ContextManager from '../ContextAPIManager/ContextManager';
1111
import Box from '@material-ui/core/Box';
1212
import Tree from '../../tree/TreeChart';
1313
import FormControl from '@material-ui/core/FormControl';
@@ -44,8 +44,17 @@ const BottomTabs = (props): JSX.Element => {
4444
Arrow.renderArrow(state.canvasFocus.childId);
4545

4646
return (
47-
<div className={`${classes.root} ${classes.rootLight}`} style={{ backgroundColor : '#003366' }}>
48-
<Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
47+
<div
48+
className={`${classes.root} ${classes.rootLight}`}
49+
style={{ backgroundColor: '#003366' }}
50+
>
51+
<Box
52+
display="flex"
53+
justifyContent="space-between"
54+
alignItems="center"
55+
paddingBottom="10px"
56+
paddingRight="10px"
57+
>
4958
<Tabs
5059
value={tab}
5160
onChange={handleChange}
@@ -85,8 +94,8 @@ const BottomTabs = (props): JSX.Element => {
8594
label="Context Manager"
8695
/>
8796
</Tabs>
88-
<div className={classes.projectTypeWrapper}>
89-
<FormControl size='small'>
97+
<div className={classes.projectTypeWrapper}>
98+
<FormControl size="small">
9099
<Select
91100
variant="outlined"
92101
labelId="project-type-label"
@@ -95,9 +104,15 @@ const BottomTabs = (props): JSX.Element => {
95104
value={state.projectType}
96105
onChange={handleProjectChange}
97106
>
98-
<MenuItem style={{ color: 'black' }} value={'Classic React'}>Classic React</MenuItem>
99-
<MenuItem style={{ color: 'black' }} value={'Gatsby.js'}>Gatsby.js</MenuItem>
100-
<MenuItem style={{ color: 'black' }} value={'Next.js'}>Next.js</MenuItem>
107+
<MenuItem style={{ color: 'black' }} value={'Classic React'}>
108+
Classic React
109+
</MenuItem>
110+
<MenuItem style={{ color: 'black' }} value={'Gatsby.js'}>
111+
Gatsby.js
112+
</MenuItem>
113+
<MenuItem style={{ color: 'black' }} value={'Next.js'}>
114+
Next.js
115+
</MenuItem>
101116
</Select>
102117
</FormControl>
103118
</div>
@@ -117,8 +132,7 @@ const useStyles = makeStyles(theme => ({
117132
flexGrow: 1,
118133
height: '100%',
119134
color: '#E8E8E8',
120-
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
121-
135+
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
122136
},
123137
rootLight: {
124138
backgroundColor: '#003366'
@@ -133,7 +147,7 @@ const useStyles = makeStyles(theme => ({
133147
minHeight: '50%'
134148
},
135149
tabsIndicator: {
136-
backgroundColor: 'white',
150+
backgroundColor: 'white'
137151
},
138152
tabRoot: {
139153
textTransform: 'initial',
@@ -162,7 +176,7 @@ const useStyles = makeStyles(theme => ({
162176
fontWeight: theme.typography.fontWeightMedium
163177
},
164178
'&:focus': {
165-
color: 'white',
179+
color: 'white'
166180
}
167181
},
168182
tabSelected: {},
@@ -175,7 +189,7 @@ const useStyles = makeStyles(theme => ({
175189
switch: {
176190
marginRight: '10px',
177191
marginTop: '2px'
178-
},
192+
},
179193
projectTypeWrapper: {
180194
marginTop: '10px',
181195
marginBotton: '10px'
@@ -187,4 +201,3 @@ const useStyles = makeStyles(theme => ({
187201
}));
188202

189203
export default BottomTabs;
190-

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

Lines changed: 0 additions & 1 deletion
This file was deleted.

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

Lines changed: 0 additions & 40 deletions
This file was deleted.

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

Lines changed: 0 additions & 37 deletions
This file was deleted.

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

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)