Skip to content

Commit 0fbe288

Browse files
mrholekmrholek
committed
reactstrap integration
1 parent 27a700e commit 0fbe288

File tree

23 files changed

+7327
-6727
lines changed

23 files changed

+7327
-6727
lines changed

‎React_Full_Project/src/components/Aside/Aside.js

Lines changed: 73 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { Component } from 'react';
2-
import { TabContent, TabPane, Nav, NavItem, NavLink, Progress } from 'reactstrap';
1+
import React, {Component} from 'react';
2+
import {TabContent, TabPane, Nav, NavItem, NavLink, Progress, Label, Input} from 'reactstrap';
33
import classnames from 'classnames';
44

55
class Aside extends Component {
@@ -25,24 +25,27 @@ class Aside extends Component {
2525
<aside className="aside-menu">
2626
<Nav tabs>
2727
<NavItem>
28-
<NavLink className={classnames({ active: this.state.activeTab === '1' })} onClick={() => { this.toggle('1'); }}>
28+
<NavLink className={classnames({ active: this.state.activeTab === '1' })}
29+
onClick={() => { this.toggle('1'); }}>
2930
<i className="icon-list"></i>
3031
</NavLink>
3132
</NavItem>
3233
<NavItem>
33-
<NavLink className={classnames({ active: this.state.activeTab === '2' })} onClick={() => { this.toggle('2'); }}>
34+
<NavLink className={classnames({ active: this.state.activeTab === '2' })}
35+
onClick={() => { this.toggle('2'); }}>
3436
<i className="icon-speech"></i>
3537
</NavLink>
3638
</NavItem>
3739
<NavItem>
38-
<NavLink className={classnames({ active: this.state.activeTab === '3' })} onClick={() => { this.toggle('3'); }}>
40+
<NavLink className={classnames({ active: this.state.activeTab === '3' })}
41+
onClick={() => { this.toggle('3'); }}>
3942
<i className="icon-settings"></i>
4043
</NavLink>
4144
</NavItem>
4245
</Nav>
4346
<TabContent activeTab={this.state.activeTab}>
4447
<TabPane tabId="1">
45-
<div className="callout m-0 py-2 text-muted text-center bg-faded text-uppercase">
48+
<div className="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
4649
<small><b>Today</b></small>
4750
</div>
4851
<hr className="transparent mx-3 my-0"/>
@@ -52,7 +55,7 @@ class Aside extends Component {
5255
</div>
5356
<div>Meeting with <strong>Lucas</strong></div>
5457
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
55-
<small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA </small>
58+
<small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
5659
</div>
5760
<hr className="mx-3 my-0"/>
5861
<div className="callout callout-info m-0 py-3">
@@ -61,17 +64,17 @@ class Aside extends Component {
6164
</div>
6265
<div>Skype with <strong>Megan</strong></div>
6366
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 5pm</small>
64-
<small className="text-muted"><i className="icon-social-skype"></i>&nbsp; On-line </small>
67+
<small className="text-muted"><i className="icon-social-skype"></i>&nbsp; On-line</small>
6568
</div>
6669
<hr className="transparent mx-3 my-0"/>
67-
<div className="callout m-0 py-2 text-muted text-center bg-faded text-uppercase">
70+
<div className="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
6871
<small><b>Tomorrow</b></small>
6972
</div>
7073
<hr className="transparent mx-3 my-0"/>
7174
<div className="callout callout-danger m-0 py-3">
7275
<div>New UI Project - <strong>deadline</strong></div>
7376
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 10 - 11pm</small>
74-
<small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ </small>
77+
<small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
7578
<div className="avatars-stack mt-2">
7679
<div className="avatar avatar-xs">
7780
<img src={'img/avatars/2.jpg'} className="img-avatar" alt="[email protected]"/>
@@ -94,13 +97,13 @@ class Aside extends Component {
9497
<div className="callout callout-success m-0 py-3">
9598
<div><strong>#10 Startups.Garden</strong> Meetup</div>
9699
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
97-
<small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA </small>
100+
<small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
98101
</div>
99102
<hr className="mx-3 my-0"/>
100103
<div className="callout callout-primary m-0 py-3">
101104
<div><strong>Team meeting</strong></div>
102105
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 6pm</small>
103-
<small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ </small>
106+
<small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
104107
<div className="avatars-stack mt-2">
105108
<div className="avatar avatar-xs">
106109
<img src={'img/avatars/2.jpg'} className="img-avatar" alt="[email protected]"/>
@@ -140,7 +143,9 @@ class Aside extends Component {
140143
<small className="text-muted float-right mt-1">1:52 PM</small>
141144
</div>
142145
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
143-
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
146+
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
147+
tempor incididunt...
148+
</small>
144149
</div>
145150
<hr/>
146151
<div className="message">
@@ -155,7 +160,9 @@ class Aside extends Component {
155160
<small className="text-muted float-right mt-1">1:52 PM</small>
156161
</div>
157162
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
158-
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
163+
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
164+
tempor incididunt...
165+
</small>
159166
</div>
160167
<hr/>
161168
<div className="message">
@@ -170,7 +177,9 @@ class Aside extends Component {
170177
<small className="text-muted float-right mt-1">1:52 PM</small>
171178
</div>
172179
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
173-
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
180+
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
181+
tempor incididunt...
182+
</small>
174183
</div>
175184
<hr/>
176185
<div className="message">
@@ -185,7 +194,9 @@ class Aside extends Component {
185194
<small className="text-muted float-right mt-1">1:52 PM</small>
186195
</div>
187196
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
188-
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
197+
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
198+
tempor incididunt...
199+
</small>
189200
</div>
190201
<hr/>
191202
<div className="message">
@@ -200,7 +211,9 @@ class Aside extends Component {
200211
<small className="text-muted float-right mt-1">1:52 PM</small>
201212
</div>
202213
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
203-
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
214+
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
215+
tempor incididunt...
216+
</small>
204217
</div>
205218
</TabPane>
206219
<TabPane tabId="3" className="p-3">
@@ -209,71 +222,92 @@ class Aside extends Component {
209222
<div className="aside-options">
210223
<div className="clearfix mt-4">
211224
<small><b>Option 1</b></small>
212-
<label className="switch switch-text switch-pill switch-success switch-sm float-right">
213-
<input type="checkbox" className="switch-input" defaultChecked />
225+
<Label className="switch switch-text switch-pill switch-success switch-sm float-right">
226+
<Input type="checkbox" className="switch-input" defaultChecked/>
214227
<span className="switch-label" data-on="On" data-off="Off"></span>
215228
<span className="switch-handle"></span>
216-
</label>
229+
</Label>
217230
</div>
218231
<div>
219-
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
232+
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
233+
tempor incididunt ut labore et dolore magna aliqua.
234+
</small>
220235
</div>
221236
</div>
222237

223238
<div className="aside-options">
224239
<div className="clearfix mt-3">
225240
<small><b>Option 2</b></small>
226-
<label className="switch switch-text switch-pill switch-success switch-sm float-right">
227-
<input type="checkbox" className="switch-input" />
241+
<Label className="switch switch-text switch-pill switch-success switch-sm float-right">
242+
<Input type="checkbox" className="switch-input"/>
228243
<span className="switch-label" data-on="On" data-off="Off"></span>
229244
<span className="switch-handle"></span>
230-
</label>
245+
</Label>
231246
</div>
232247
<div>
233-
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
248+
<small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
249+
tempor incididunt ut labore et dolore magna aliqua.
250+
</small>
234251
</div>
235252
</div>
236253

237254
<div className="aside-options">
238255
<div className="clearfix mt-3">
239256
<small><b>Option 3</b></small>
240-
<label className="switch switch-text switch-pill switch-success switch-sm float-right">
241-
<input type="checkbox" className="switch-input" />
257+
<Label className="switch switch-text switch-pill switch-success switch-sm float-right">
258+
<Input type="checkbox" className="switch-input"/>
242259
<span className="switch-label" data-on="On" data-off="Off"></span>
243260
<span className="switch-handle"></span>
244-
</label>
261+
</Label>
245262
</div>
246263
</div>
247264

248265
<div className="aside-options">
249266
<div className="clearfix mt-3">
250267
<small><b>Option 4</b></small>
251-
<label className="switch switch-text switch-pill switch-success switch-sm float-right">
252-
<input type="checkbox" className="switch-input" defaultChecked />
268+
<Label className="switch switch-text switch-pill switch-success switch-sm float-right">
269+
<Input type="checkbox" className="switch-input" defaultChecked/>
253270
<span className="switch-label" data-on="On" data-off="Off"></span>
254271
<span className="switch-handle"></span>
255-
</label>
272+
</Label>
256273
</div>
257274
</div>
258275

259276
<hr/>
260277
<h6>System Utilization</h6>
261278

262-
<div className="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div>
263-
<Progress className="progress-xs" color="info" value="25" />
279+
<div className="text-uppercase mb-1 mt-4">
280+
<small><b>CPU Usage</b></small>
281+
</div>
282+
<Progress className="progress-xs" color="info" value="25"/>
264283
<small className="text-muted">348 Processes. 1/4 Cores.</small>
265284

266-
<div className="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div>
267-
<Progress className="progress-xs" color="warning" value="70" />
285+
<div className="text-uppercase mb-1 mt-2">
286+
<small><b>Memory Usage</b></small>
287+
</div>
288+
<Progress className="progress-xs" color="warning" value="70"/>
268289
<small className="text-muted">11444GB/16384MB</small>
269290

270-
<div className="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div>
271-
<Progress className="progress-xs" color="danger" value="95" />
291+
<div className="text-uppercase mb-1 mt-2">
292+
<small><b>SSD 1 Usage</b></small>
293+
</div>
294+
<Progress className="progress-xs" color="danger" value="95"/>
272295
<small className="text-muted">243GB/256GB</small>
273296

274-
<div className="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div>
275-
<Progress className="progress-xs" color="success" value="10" />
297+
<div className="text-uppercase mb-1 mt-2">
298+
<small><b>SSD 2 Usage</b></small>
299+
</div>
300+
<Progress className="progress-xs" color="success" value="10"/>
276301
<small className="text-muted">25GB/256GB</small>
302+
303+
<div className="text-uppercase mb-1 mt-2">
304+
<small><b>Memory</b></small>
305+
</div>
306+
<Progress multi>
307+
<Progress bar className="progress-xs" color="secondary" value={60}>declared</Progress>
308+
<Progress bar className="progress-xs" color="info" value="15">buffered</Progress>
309+
</Progress>
310+
<small className="text-muted">12GB/16GB</small>
277311
</TabPane>
278312
</TabContent>
279313
</aside>

‎React_Full_Project/src/components/Breadcrumb/Breadcrumb.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import { Route, Link } from 'react-router-dom';
3-
import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
2+
import {Route, Link} from 'react-router-dom';
3+
import {Breadcrumb, BreadcrumbItem} from 'reactstrap';
44
import routes from '../../routes';
55

66
const findRouteName = url => routes[url];
@@ -19,30 +19,30 @@ const getPaths = (pathname) => {
1919
return paths;
2020
};
2121

22-
const BreadcrumbsItem = ({ ...rest, match }) => {
22+
const BreadcrumbsItem = ({...rest, match}) => {
2323
const routeName = findRouteName(match.url);
2424
if (routeName) {
2525
return (
2626
match.isExact ?
27-
(
28-
<BreadcrumbItem active>{routeName}</BreadcrumbItem>
29-
) :
30-
(
31-
<BreadcrumbItem>
32-
<Link to={match.url || ''}>
33-
{routeName}
34-
</Link>
35-
</BreadcrumbItem>
36-
)
27+
(
28+
<BreadcrumbItem active>{routeName}</BreadcrumbItem>
29+
) :
30+
(
31+
<BreadcrumbItem>
32+
<Link to={match.url || ''}>
33+
{routeName}
34+
</Link>
35+
</BreadcrumbItem>
36+
)
3737
);
3838
}
3939
return null;
4040
};
4141

42-
const Breadcrumbs = ({ ...rest, location : { pathname }, match }) => {
42+
const Breadcrumbs = ({...rest, location : {pathname}, match}) => {
4343
const paths = getPaths(pathname);
44-
const i = 0;
45-
const items = paths.map((path, i) => <Route key={i++} path={path} component={BreadcrumbsItem} />);
44+
// const i = 0;
45+
const items = paths.map((path, i) => <Route key={i++} path={path} component={BreadcrumbsItem}/>);
4646
return (
4747
<Breadcrumb>
4848
{items}

‎React_Full_Project/src/components/Footer/Footer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react';
1+
import React, {Component} from 'react';
22

33
class Footer extends Component {
44
render() {

0 commit comments

Comments
 (0)