Skip to content

Commit 3bd99f8

Browse files
jzuniga206jzuniga206
committed
Cleaned up code by removing unnecessary spans, moving style code to bottom
1 parent 8cb3f02 commit 3bd99f8

File tree

3 files changed

+141
-196
lines changed

3 files changed

+141
-196
lines changed

‎src/components/bottom/BottomTabs.tsx

Lines changed: 64 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,8 @@ import Tree from 'react-d3-tree';
77
import Props from './Props';
88
import HtmlAttr from './HtmlAttr';
99
import CodePreview from './CodePreview';
10-
import Switch from '@material-ui/core/Switch';
1110
import { ComponentsInt, PropsInt } from '../../interfaces/Interfaces';
1211
import Box from '@material-ui/core/Box';
13-
import FormGroup from '@material-ui/core/FormGroup';
14-
import FormControlLabel from '@material-ui/core/FormControlLabel';
1512

1613
interface BottomTabsPropsInt extends PropsInt {
1714
deleteProp(id: number): void;
@@ -30,70 +27,6 @@ interface StateInt {
3027
translate: { x: number; y: number };
3128
}
3229

33-
const styles = (theme: Theme): any => ({
34-
root: {
35-
flexGrow: 1,
36-
backgroundColor: '#333333',
37-
height: '100%',
38-
color: '#fff',
39-
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
40-
},
41-
bottomHeader: {
42-
flex: 1,
43-
flexDirection: 'row',
44-
alignItems: 'center',
45-
Width: '200px'
46-
},
47-
tabsRoot: {
48-
borderBottom: '0.5px solid #424242'
49-
},
50-
tabsIndicator: {
51-
backgroundColor: '#1de9b6'
52-
},
53-
tabRoot: {
54-
textTransform: 'initial',
55-
minWidth: 40,
56-
fontWeight: theme.typography.fontWeightRegular,
57-
// marginRight: theme.spacing.unit * 4,
58-
marginRight: theme.spacing(4), // JZ: updated syntax as per deprecation warning
59-
60-
fontFamily: [
61-
'-apple-system',
62-
'BlinkMacSystemFont',
63-
'"Segoe UI"',
64-
'Roboto',
65-
'"Helvetica Neue"',
66-
'Arial',
67-
'sans-serif',
68-
'"Apple Color Emoji"',
69-
'"Segoe UI Emoji"',
70-
'"Segoe UI Symbol"'
71-
].join(','),
72-
'&:hover': {
73-
color: '#1de9b6',
74-
opacity: 1
75-
},
76-
'&$tabSelected': {
77-
color: '#33eb91',
78-
fontWeight: theme.typography.fontWeightMedium
79-
},
80-
'&:focus': {
81-
color: '#4aedc4'
82-
}
83-
},
84-
tabSelected: {},
85-
typography: {
86-
padding: theme.spacing(3) // JZ: updated syntax as per deprecation warning
87-
},
88-
padding: {
89-
padding: `0 ${theme.spacing(2)}px` // JZ: updated syntax as per deprecation warning
90-
},
91-
switch: {
92-
marginRight: '10px',
93-
marginTop: '2px'
94-
}
95-
});
96-
9730
class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
9831
constructor(props: BottomTabsPropsInt) {
9932
super(props);
@@ -103,6 +36,7 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
10336
};
10437
}
10538
treeWrapper: HTMLDivElement;
39+
10640
componentDidMount() {
10741
// dynamically center the tree based on the div size
10842
const dimensions = this.treeWrapper.getBoundingClientRect();
@@ -209,31 +143,7 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
209143
htmlAttribCount ? `(${htmlAttribCount})` : ''
210144
} `}
211145
/>
212-
{/* <Tab
213-
disableRipple
214-
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
215-
label="Add Child Props"
216-
/> */}
217146
</Tabs>
218-
{
219-
// REACT NATIVE TOGGLE REMOVED AND MOVED TO LEFTCONTAINER. REMOVE THIS CODE IF NO ADVERSE EFFECTS FOUND
220-
/* <FormGroup>
221-
<FormControlLabel
222-
className={classes.switch}
223-
control={
224-
<Switch
225-
checked={native}
226-
color="primary"
227-
onChange={() => {
228-
toggleNative();
229-
}}
230-
/>
231-
}
232-
label="Native Mode"
233-
labelPlacement="start"
234-
/>
235-
</FormGroup> */
236-
}
237147
</Box>
238148
{value === 0 && (
239149
<div
@@ -292,4 +202,67 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
292202
}
293203
}
294204

205+
const styles = (theme: Theme): any => ({
206+
root: {
207+
flexGrow: 1,
208+
backgroundColor: '#333333',
209+
height: '100%',
210+
color: '#fff',
211+
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
212+
},
213+
bottomHeader: {
214+
flex: 1,
215+
flexDirection: 'row',
216+
alignItems: 'center',
217+
Width: '200px'
218+
},
219+
tabsRoot: {
220+
borderBottom: '0.5px solid #424242'
221+
},
222+
tabsIndicator: {
223+
backgroundColor: '#1de9b6'
224+
},
225+
tabRoot: {
226+
textTransform: 'initial',
227+
minWidth: 40,
228+
fontWeight: theme.typography.fontWeightRegular,
229+
marginRight: theme.spacing(4), // JZ: updated syntax as per deprecation warning
230+
231+
fontFamily: [
232+
'-apple-system',
233+
'BlinkMacSystemFont',
234+
'"Segoe UI"',
235+
'Roboto',
236+
'"Helvetica Neue"',
237+
'Arial',
238+
'sans-serif',
239+
'"Apple Color Emoji"',
240+
'"Segoe UI Emoji"',
241+
'"Segoe UI Symbol"'
242+
].join(','),
243+
'&:hover': {
244+
color: '#1de9b6',
245+
opacity: 1
246+
},
247+
'&$tabSelected': {
248+
color: '#33eb91',
249+
fontWeight: theme.typography.fontWeightMedium
250+
},
251+
'&:focus': {
252+
color: '#4aedc4'
253+
}
254+
},
255+
tabSelected: {},
256+
typography: {
257+
padding: theme.spacing(3) // JZ: updated syntax as per deprecation warning
258+
},
259+
padding: {
260+
padding: `0 ${theme.spacing(2)}px` // JZ: updated syntax as per deprecation warning
261+
},
262+
switch: {
263+
marginRight: '10px',
264+
marginTop: '2px'
265+
}
266+
});
267+
295268
export default withStyles(styles)(BottomTabs);

‎src/components/bottom/DataTable.tsx

Lines changed: 62 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { withStyles, Theme } from '@material-ui/core/styles';
2+
import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
33
import Table from '@material-ui/core/Table';
44
import TableBody from '@material-ui/core/TableBody';
55
import TableCell from '@material-ui/core/TableCell';
@@ -9,62 +9,6 @@ import Paper from '@material-ui/core/Paper';
99
import DeleteIcon from '@material-ui/icons/Delete';
1010
import { IconButton } from '@material-ui/core';
1111

12-
const styles = (theme: Theme) => ({
13-
root: {
14-
width: '650px',
15-
marginTop: theme.spacing.unit * 3,
16-
borderRadius: '8px',
17-
// boxShadow: '0px 0px 5px 2px #97ffb6'
18-
boxShadow: '0px 0px 5px 2px lightgray'
19-
},
20-
tableContainer: {
21-
borderRadius: '7px',
22-
border: 'none',
23-
backgroundColor: '#55585b'
24-
},
25-
table: {
26-
minWidth: 300,
27-
borderRadius: '7px',
28-
backgroundColor: '#55585b'
29-
},
30-
tableHeader: {
31-
fontWeight: '900',
32-
fontSize: '25px',
33-
color: '#01d46d',
34-
border: 'none',
35-
textShadow: '2px 2px 5px 5px #8dffce'
36-
},
37-
tableCell: {
38-
fontWeight: '500',
39-
fontSize: '17px',
40-
letterSpacing: '2px',
41-
color: 'lightgray',
42-
padding: '3px',
43-
borderRadius: '7px',
44-
border: 'none',
45-
'&:hover': {
46-
transform: 'scale(1.1)',
47-
color: '#fff'
48-
}
49-
},
50-
tableCellShaded: {
51-
fontWeight: '900',
52-
fontSize: '15px',
53-
color: '#91D1F9',
54-
borderRadius: '7px'
55-
},
56-
trashIcon: {
57-
backgroundColor: 'none',
58-
color: 'gray',
59-
'&:hover': {
60-
transform: 'scale(1.08)',
61-
backgroundColor: 'gray',
62-
color: '#b30000',
63-
border: 'none'
64-
}
65-
}
66-
});
67-
6812
/** **************************
6913
* cannot have a row header or a key in the data called "key"
7014
* must have unique id
@@ -105,13 +49,11 @@ function dataTable(props: dataTableProps) {
10549
// for some reason we must put each value in a div.
10650
return rowHeader.map((header: string, idx: number) => (
10751
<TableCell align={'center'} key={`td_${idx}`}>
108-
<div className={classes.tableCell} align={'center'} padding={'none'}>
109-
{row[header]}
110-
</div>
52+
<div className={classes.tableCell}>{row[header]}</div>
11153
</TableCell>
11254
));
11355
}
114-
// style={{height: 30}}
56+
11557
const renderRows = rowData.map((row: any) => (
11658
<TableRow key={`row-${row.id}`}>
11759
{renderRowCells(row)}
@@ -122,21 +64,19 @@ function dataTable(props: dataTableProps) {
12264
>
12365
<IconButton
12466
className={classes.trashIcon}
125-
color='default'
126-
// fontSize='small' - commented/removed b/c not a valid attribute for IconButton component
67+
color="default"
12768
onClick={() => deletePropHandler(row.id)}
12869
>
12970
<DeleteIcon />
13071
</IconButton>
131-
{/* <Button style={{height: 20}} onClick={() => deletePropHandler(row.id)}>Delete</Button> */}
13272
</TableCell>
13373
</TableRow>
13474
));
13575

13676
return (
13777
<Paper className={classes.root}>
13878
<div className={classes.tableContainer}>
139-
<Table className={classes.table} selectable={'true'}>
79+
<Table className={classes.table}>
14080
<TableHead>
14181
<TableRow>{renderHeader}</TableRow>
14282
</TableHead>
@@ -147,4 +87,61 @@ function dataTable(props: dataTableProps) {
14787
);
14888
}
14989

90+
const styles = (theme: Theme) =>
91+
createStyles({
92+
root: {
93+
width: '650px',
94+
marginTop: theme.spacing(3), // updating as per MUI deprecation warning
95+
borderRadius: '8px',
96+
boxShadow: '0px 0px 5px 2px lightgray'
97+
},
98+
tableContainer: {
99+
borderRadius: '7px',
100+
border: 'none',
101+
backgroundColor: '#55585b'
102+
},
103+
table: {
104+
minWidth: 300,
105+
borderRadius: '7px',
106+
backgroundColor: '#55585b'
107+
},
108+
tableHeader: {
109+
fontWeight: 900,
110+
fontSize: '25px',
111+
color: '#01d46d',
112+
border: 'none',
113+
textShadow: '2px 2px 5px 5px #8dffce'
114+
},
115+
tableCell: {
116+
align: 'center',
117+
fontWeight: 500,
118+
fontSize: '17px',
119+
letterSpacing: '2px',
120+
color: 'lightgray',
121+
padding: '3px',
122+
borderRadius: '7px',
123+
border: 'none',
124+
'&:hover': {
125+
transform: 'scale(1.1)',
126+
color: '#fff'
127+
}
128+
},
129+
tableCellShaded: {
130+
fontWeight: 900,
131+
fontSize: '15px',
132+
color: '#91D1F9',
133+
borderRadius: '7px'
134+
},
135+
trashIcon: {
136+
backgroundColor: 'none',
137+
color: 'gray',
138+
'&:hover': {
139+
transform: 'scale(1.08)',
140+
backgroundColor: 'gray',
141+
color: '#b30000',
142+
border: 'none'
143+
}
144+
}
145+
});
146+
150147
export default withStyles(styles)(dataTable);

0 commit comments

Comments
 (0)