Skip to content

Commit 2be278a

Browse files
tolgamizrakciChristianEdwardPadilla
tolgamizrakci
authored and
ChristianEdwardPadilla
committed
ts changes to react components
1 parent ab3608a commit 2be278a

File tree

5 files changed

+244
-188
lines changed

5 files changed

+244
-188
lines changed

‎src/components/HTMLComponentPanel.jsx renamed to ‎src/components/HTMLComponentPanel.tsx

Lines changed: 90 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,43 @@
1-
import React, { Component } from 'react';
2-
import { connect } from 'react-redux';
3-
import { compose } from 'redux';
4-
import { withStyles } from '@material-ui/core/styles';
5-
import TextField from '@material-ui/core/TextField';
6-
import IconButton from '@material-ui/core/IconButton';
7-
import ImageIcon from '@material-ui/icons/Image';
8-
import FormIcon from '@material-ui/icons/Description';
9-
import ButtonIcon from '@material-ui/icons/EditAttributes';
10-
import LinkIcon from '@material-ui/icons/Link';
11-
import ListIcon from '@material-ui/icons/List';
12-
import ParagraphIcon from '@material-ui/icons/LocalParking';
13-
import Typography from '@material-ui/core/Typography';
14-
import Grid from '@material-ui/core/Grid';
15-
import Paper from '@material-ui/core/Paper';
16-
import Tab from '@material-ui/core/Tab';
17-
import Chip from '@material-ui/core/Chip';
18-
import theme from './theme.ts';
1+
import React, { Component } from "react";
2+
import { connect } from "react-redux";
3+
import { compose } from "redux";
4+
import { withStyles } from "@material-ui/core/styles";
5+
// import TextField from '@material-ui/core/TextField';
6+
import IconButton from "@material-ui/core/IconButton";
7+
import ImageIcon from "@material-ui/icons/Image";
8+
import FormIcon from "@material-ui/icons/Description";
9+
import ButtonIcon from "@material-ui/icons/EditAttributes";
10+
import LinkIcon from "@material-ui/icons/Link";
11+
import ListIcon from "@material-ui/icons/List";
12+
import ParagraphIcon from "@material-ui/icons/LocalParking";
13+
// import Typography from '@material-ui/core/Typography';
14+
import Grid from "@material-ui/core/Grid";
15+
// import Paper from '@material-ui/core/Paper';
16+
import Tab from "@material-ui/core/Tab";
17+
import Chip from "@material-ui/core/Chip";
18+
// import theme from './theme.ts';
1919

20-
class HTMLComponentPanel extends Component {
20+
interface PropsInt {
21+
classes: any;
22+
addChild: any;
23+
}
24+
25+
interface StateInt {
26+
HtmlComponentName: string;
27+
}
28+
29+
class HTMLComponentPanel extends Component<PropsInt, StateInt> {
2130
state = {
22-
HtmlComponentName: '',
31+
HtmlComponentName: ""
2332
};
2433

25-
handleChange = (event) => {
34+
handleChange = event => {
2635
this.setState({
27-
HtmlComponentName: event.target.value,
36+
HtmlComponentName: event.target.value
2837
});
2938
};
3039

31-
handleCreateHTMLChild = (type) => {
40+
handleCreateHTMLChild = type => {
3241
this.props.addChild({ title: type, childType: type, HTMLInfo: {} });
3342
};
3443

@@ -48,16 +57,16 @@ class HTMLComponentPanel extends Component {
4857
className="htmlicons"
4958
aria-label="Image"
5059
onClick={() => {
51-
this.handleCreateHTMLChild('Image');
60+
this.handleCreateHTMLChild("Image");
5261
}}
5362
style={{
5463
margin: 0,
55-
padding: 0,
64+
padding: 0
5665
}}
5766
>
5867
<ImageIcon
5968
style={{
60-
color: '#e0e0e0',
69+
color: "#e0e0e0"
6170
}}
6271
/>
6372
</IconButton>
@@ -66,10 +75,10 @@ class HTMLComponentPanel extends Component {
6675
className={classes.chip}
6776
variant="outlined"
6877
style={{
69-
color: 'white',
70-
fontSize: '80%',
78+
color: "white",
79+
fontSize: "80%",
7180
margin: 0,
72-
padding: 0,
81+
padding: 0
7382
}}
7483
/>
7584
</div>
@@ -79,22 +88,22 @@ class HTMLComponentPanel extends Component {
7988
className="htmlicons"
8089
aria-label="Form"
8190
onClick={() => {
82-
this.handleCreateHTMLChild('Form');
91+
this.handleCreateHTMLChild("Form");
8392
}}
8493
style={{
8594
margin: 0,
86-
padding: 0,
95+
padding: 0
8796
}}
8897
>
89-
<FormIcon style={{ color: '#e0e0e0' }} />
98+
<FormIcon style={{ color: "#e0e0e0" }} />
9099
</IconButton>
91100
<Chip
92101
label="Form"
93102
className={classes.chip}
94103
variant="outlined"
95104
style={{
96-
color: 'white',
97-
fontSize: '80%',
105+
color: "white",
106+
fontSize: "80%"
98107
}}
99108
/>
100109
</Grid>
@@ -103,22 +112,22 @@ class HTMLComponentPanel extends Component {
103112
className="htmlicons"
104113
aria-label="Button"
105114
onClick={() => {
106-
this.handleCreateHTMLChild('Button');
115+
this.handleCreateHTMLChild("Button");
107116
}}
108117
style={{
109118
margin: 0,
110-
padding: 0,
119+
padding: 0
111120
}}
112121
>
113-
<ButtonIcon style={{ color: '#e0e0e0' }} />
122+
<ButtonIcon style={{ color: "#e0e0e0" }} />
114123
</IconButton>
115124
<Chip
116125
label="Button"
117126
className={classes.chip}
118127
variant="outlined"
119128
style={{
120-
color: 'white',
121-
fontSize: '80%',
129+
color: "white",
130+
fontSize: "80%"
122131
}}
123132
/>
124133
</Grid>
@@ -127,22 +136,22 @@ class HTMLComponentPanel extends Component {
127136
className="htmlicons"
128137
aria-label="Link"
129138
onClick={() => {
130-
this.handleCreateHTMLChild('Link');
139+
this.handleCreateHTMLChild("Link");
131140
}}
132141
style={{
133142
margin: 0,
134-
padding: 0,
143+
padding: 0
135144
}}
136145
>
137-
<LinkIcon style={{ color: '#e0e0e0' }} />
146+
<LinkIcon style={{ color: "#e0e0e0" }} />
138147
</IconButton>
139148
<Chip
140149
label="Link"
141150
className={classes.chip}
142151
variant="outlined"
143152
style={{
144-
color: 'white',
145-
fontSize: '80%',
153+
color: "white",
154+
fontSize: "80%"
146155
}}
147156
/>
148157
</Grid>
@@ -151,22 +160,22 @@ class HTMLComponentPanel extends Component {
151160
className="htmlicons"
152161
aria-label="List"
153162
onClick={() => {
154-
this.handleCreateHTMLChild('List');
163+
this.handleCreateHTMLChild("List");
155164
}}
156165
style={{
157166
margin: 0,
158-
padding: 0,
167+
padding: 0
159168
}}
160169
>
161-
<ListIcon style={{ color: '#e0e0e0' }} />
170+
<ListIcon style={{ color: "#e0e0e0" }} />
162171
</IconButton>
163172
<Chip
164173
label="List"
165174
className={classes.chip}
166175
variant="outlined"
167176
style={{
168-
color: 'white',
169-
fontSize: '80%',
177+
color: "white",
178+
fontSize: "80%"
170179
}}
171180
/>
172181
</Grid>
@@ -175,33 +184,37 @@ class HTMLComponentPanel extends Component {
175184
xs={4}
176185
style={{
177186
margin: 0,
178-
padding: 0,
187+
padding: 0
179188
}}
180189
>
181190
<IconButton
182191
className="htmlicons"
183192
aria-label="Paragraph"
184193
onClick={() => {
185-
this.handleCreateHTMLChild('Paragraph');
194+
this.handleCreateHTMLChild("Paragraph");
186195
}}
187196
style={{
188197
margin: 0,
189-
padding: 0,
198+
padding: 0
190199
}}
191200
>
192201
<ParagraphIcon
193-
style={{ color: '#e0e0e0', paddingRight: '0px', marginRight: '0px' }}
202+
style={{
203+
color: "#e0e0e0",
204+
paddingRight: "0px",
205+
marginRight: "0px"
206+
}}
194207
/>
195208
</IconButton>
196209
<Chip
197210
label="Paragraph"
198211
className={classes.chip}
199212
variant="outlined"
200213
style={{
201-
color: 'white',
202-
fontSize: '62%',
203-
padding: '0px',
204-
margin: '0px',
214+
color: "white",
215+
fontSize: "62%",
216+
padding: "0px",
217+
margin: "0px"
205218
}}
206219
/>
207220
</Grid>
@@ -211,40 +224,40 @@ class HTMLComponentPanel extends Component {
211224
}
212225
}
213226

214-
function styles(theme) {
227+
function styles(theme): any {
215228
return {
216229
htmlPanel: {
217-
width: '100%',
218-
height: '30%',
219-
backgroundColor: '#212121',
220-
borderStyle: 'solid',
221-
borderWidth: '0.5px',
222-
borderRadius: '1px',
223-
borderColor: '#424242',
224-
bottom: '0px',
225-
paddingLeft: '10px',
226-
paddingRight: '10px',
227-
paddingBottom: '25px',
228-
paddingTop: '2px',
229-
boxShadow: '0 6px 6px rgba(0,0,0,0.23)',
230+
width: "100%",
231+
height: "30%",
232+
backgroundColor: "#212121",
233+
borderStyle: "solid",
234+
borderWidth: "0.5px",
235+
borderRadius: "1px",
236+
borderColor: "#424242",
237+
bottom: "0px",
238+
paddingLeft: "10px",
239+
paddingRight: "10px",
240+
paddingBottom: "25px",
241+
paddingTop: "2px",
242+
boxShadow: "0 6px 6px rgba(0,0,0,0.23)"
230243
// paddingBottom: "10px"
231244
},
232245
chip: {
233-
color: 'rgba(193, 66, 66, 0)',
246+
color: "rgba(193, 66, 66, 0)"
234247
},
235248
htmliconwrapper: {
236-
verticalAlign: 'baseline',
249+
verticalAlign: "baseline"
237250
},
238251
htmlicons: {
239-
color: '#ffffff',
252+
color: "#ffffff"
240253
},
241254
tabRoot: {
242-
textTransform: 'initial',
255+
textTransform: "initial",
243256
minWidth: 100,
244257
fontWeight: theme.typography.fontWeightRegular,
245258
// marginRight: theme.spacing.unit * 4,
246-
color: '#ffffff',
247-
},
259+
color: "#ffffff"
260+
}
248261
};
249262
}
250263

0 commit comments

Comments
 (0)