Skip to content

Commit e9bccfe

Browse files
guardofparadiseguardofparadise
committed
added breadcrumb component
1 parent 97ae137 commit e9bccfe

File tree

46 files changed

+67
-222
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+67
-222
lines changed

‎changelog.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
## [7.2.0]
4+
5+
### New Features
6+
7+
- Added re-usable breadcrumbs component
8+
39
## [7.1.2]
410

511
### Fixed

‎src/components/BreadcrumbHistory/BreadcrumbHistory.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { Component } from 'react'
2+
import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
3+
import uuid from 'uuid/v4'
4+
5+
class BreadcrumbHistory extends Component {
6+
7+
renderBreadCrumbs = () => {
8+
9+
let route = this.props.url.split('/')
10+
.slice(1)
11+
.map(route => route
12+
.split('-')
13+
.map(word => word[0].toUpperCase() + word.slice(1))
14+
.join(' ')
15+
)
16+
const length = route.length;
17+
return route.map((item,index) => (
18+
length === index + 1 ?
19+
<BreadcrumbItem key={uuid()} className="active"><strong>{item}</strong></BreadcrumbItem> :
20+
<BreadcrumbItem key={uuid()}>{item}</BreadcrumbItem>
21+
))
22+
}
23+
24+
render() {
25+
return (
26+
<>
27+
{ this.props.url !== '/app/chat' ?
28+
<div>
29+
<Breadcrumb className={this.props.url.includes('documentation') && 'documentationBreadcrumbs'} tag="nav" listTag="div">
30+
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
31+
{this.renderBreadCrumbs()}
32+
</Breadcrumb>
33+
</div>
34+
:null}
35+
</>
36+
)
37+
};
38+
};
39+
40+
export default BreadcrumbHistory;

‎src/components/BreadcrumbHistory/package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "BreadcrumbHistory",
3+
"version": "0.0.0",
4+
"private": true,
5+
"main": "./BreadcrumbHistory.js"
6+
}

‎src/components/Layout/Layout.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ import Dashboard from '../../pages/dashboard';
5252

5353
import Header from '../Header';
5454
import Sidebar from '../Sidebar';
55+
import BreadcrumbHistory from '../BreadcrumbHistory';
5556
import { openSidebar, closeSidebar } from '../../actions/navigation';
5657
import s from './Layout.module.scss';
5758
import ProductEdit from '../../pages/management/components/productEdit';
@@ -106,6 +107,7 @@ class Layout extends React.Component {
106107
<Sidebar />
107108
<Hammer onSwipe={this.handleSwipe}>
108109
<main className={s.content}>
110+
<BreadcrumbHistory url={this.props.location.pathname} />
109111
<TransitionGroup>
110112
<CSSTransition
111113
key={this.props.location.key}

‎src/documentation/DocumentationHeader.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import githubLogo from '../images/documentation/github-logo.svg';
2626
class Header extends React.Component {
2727
static propTypes = {
2828
sidebarOpened: PropTypes.bool.isRequired,
29-
sidebarStatic: PropTypes.bool.isRequired,
29+
sidebarStatic: PropTypes.bool,
3030
dispatch: PropTypes.func.isRequired,
3131
location: PropTypes.shape({
3232
pathname: PropTypes.string,

‎src/documentation/DocumentationLayout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ class Layout extends React.Component {
8989
<Header />
9090
<div>
9191
<Hammer onSwipe={this.handleSwipe}>
92-
<main className={classnames(s.content, sd.content)}>
92+
<main className={classnames(s.content, sd.content, 'documentationPage')}>
9393
<div className="container">
9494
<div className="row">
9595
<Sidebar width={this.state.width} />

‎src/pages/charts/Charts.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,6 @@ class Charts extends React.Component {
6767
const { cd, ld, initEchartsOptions, sparklineData } = this.state
6868
return (
6969
<div className={s.root}>
70-
<ol className="breadcrumb">
71-
<li className="breadcrumb-item">YOU ARE HERE</li>
72-
<li className="breadcrumb-item active">Charts</li>
73-
</ol>
7470
<h1 className="page-title">Visual - <span className="fw-semi-bold">Charts</span></h1>
7571
<div>
7672
<Row>

‎src/pages/charts/apex/Apex.js

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React, { Component } from 'react';
22
import {
33
Col,
4-
Row,
5-
Breadcrumb,
6-
BreadcrumbItem,
4+
Row,
75
} from 'reactstrap';
86
import ApexChart from 'react-apexcharts';
97
import './ApexChart.module.scss';
@@ -22,11 +20,6 @@ class ApexCharts extends Component {
2220

2321
return (
2422
<div>
25-
<Breadcrumb>
26-
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
27-
<BreadcrumbItem>Charts</BreadcrumbItem>
28-
<BreadcrumbItem active>Apex chart</BreadcrumbItem>
29-
</Breadcrumb>
3023
<h1 className="page-title">Visual - <span className="fw-semi-bold">Apex Charts</span></h1>
3124
<p>For more information please read full <a href="https://apexcharts.com/docs/vue-charts/">documentation</a></p>
3225
<Row>

‎src/pages/charts/echarts/Echarts.js

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import React, { PureComponent } from 'react';
22
import {
33
Row,
44
Col,
5-
Breadcrumb,
6-
BreadcrumbItem,
75
} from 'reactstrap';
86

97
import Widget from '../../../components/Widget';
@@ -38,11 +36,6 @@ class Echarts extends PureComponent {
3836

3937
return (
4038
<div>
41-
<Breadcrumb>
42-
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
43-
<BreadcrumbItem>Charts</BreadcrumbItem>
44-
<BreadcrumbItem active>Echarts Pie</BreadcrumbItem>
45-
</Breadcrumb>
4639
<h1 className="page-title">Visual - <span className="fw-semi-bold">Echarts</span></h1>
4740
<p>For more information please read full <a href="https://ecomfe.github.io/vue-echarts/">documentation</a></p>
4841
<Row>

‎src/pages/charts/highcharts/HighCharts.js

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import React, { PureComponent } from 'react';
22
import {
33
Row,
44
Col,
5-
Breadcrumb,
6-
BreadcrumbItem,
75
} from 'reactstrap';
86
import Highcharts from 'highcharts';
97
import HighchartsReact from 'highcharts-react-official'
@@ -39,11 +37,6 @@ class HighCharts extends PureComponent {
3937

4038
return (
4139
<div>
42-
<Breadcrumb>
43-
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
44-
<BreadcrumbItem>Charts</BreadcrumbItem>
45-
<BreadcrumbItem active>Highcharts</BreadcrumbItem>
46-
</Breadcrumb>
4740
<h1 className="page-title">Visual - <span className="fw-semi-bold">Highcharts</span></h1>
4841
<p>For more information please read full <a href="https://github.com/highcharts/highcharts-vue">documentation</a></p>
4942
<Row>

‎src/pages/core/colors/Colors.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from 'react';
22
import {
3-
Breadcrumb,
4-
BreadcrumbItem,
53
Row,
64
Col,
75
Table,
@@ -45,10 +43,6 @@ const tableData = [
4543

4644
const Colors = () => (
4745
<div>
48-
<Breadcrumb>
49-
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
50-
<BreadcrumbItem active>Colors</BreadcrumbItem>
51-
</Breadcrumb>
5246
<h1 className="page-title">Colors</h1>
5347
<Row>
5448
<Col>

‎src/pages/core/grid/Grid.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from 'react';
22
import {
3-
Breadcrumb,
4-
BreadcrumbItem,
53
Row,
64
Col,
75
Table,
@@ -11,10 +9,6 @@ import Widget from '../../../components/Widget';
119

1210
const Typography = () => (
1311
<div>
14-
<Breadcrumb>
15-
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
16-
<BreadcrumbItem active>Grid</BreadcrumbItem>
17-
</Breadcrumb>
1812
<h1 className="page-title">Grid <span className="fw-semi-bold">System</span></h1>
1913
<Row>
2014
<Col xs={12} md={6}>

‎src/pages/core/typography/Typography.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from 'react';
22
import {
3-
Breadcrumb,
4-
BreadcrumbItem,
53
Row,
64
Col,
75
} from 'reactstrap';
@@ -10,10 +8,6 @@ import Widget from '../../../components/Widget';
108

119
const Typography = () => (
1210
<div>
13-
<Breadcrumb>
14-
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
15-
<BreadcrumbItem active>Typography</BreadcrumbItem>
16-
</Breadcrumb>
1711
<h1 className="page-title">Typography - <span className="fw-semi-bold">Texts & Display</span></h1>
1812
<Row>
1913
<Col xs={12} md={6}>

‎src/pages/email/Email.js

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import React, { Component } from 'react';
22
import cx from 'classnames';
3-
import {
4-
Breadcrumb,
5-
BreadcrumbItem,
6-
Alert,
7-
} from 'reactstrap';
3+
import { Alert } from 'reactstrap';
84

95
import Filters from './components/Filters/Filters';
106
import MessageTable from './components/MessageTable/MessageTable';
@@ -64,10 +60,6 @@ class Email extends Component {
6460
} = this.state;
6561
return (
6662
<div>
67-
<Breadcrumb>
68-
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
69-
<BreadcrumbItem active>Email</BreadcrumbItem>
70-
</Breadcrumb>
7163
<div className={s.pageTopLine}>
7264
<h1 className="page-title">Email - <span className="fw-semi-bold">Inbox</span></h1>
7365
<Alert

‎src/pages/extra/calendar/Calendar.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -187,10 +187,6 @@ class Calendar extends React.Component {
187187
<div className={s.root}>
188188
<Row>
189189
<Col lg={4} xs={12} md={6}>
190-
<ol className="breadcrumb">
191-
<li className="breadcrumb-item">YOU ARE HERE</li>
192-
<li className="breadcrumb-item active">Calendar</li>
193-
</ol>
194190
<h1 className="page-title">
195191
{currentMonth} - <span className="fw-semi-bold">{currentDay}</span>
196192
</h1>

‎src/pages/extra/gallery/Gallery.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import React from 'react';
22
import {
33
Button,
44
ButtonGroup,
5-
Breadcrumb,
6-
BreadcrumbItem,
75
} from 'reactstrap';
86

97
import Lightbox from 'react-images';
@@ -231,10 +229,6 @@ class Gallery extends React.Component {
231229
render() {
232230
return (
233231
<div className={s.root}>
234-
<Breadcrumb>
235-
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
236-
<BreadcrumbItem active>Gallery</BreadcrumbItem>
237-
</Breadcrumb>
238232
<h1 className="page-title">Media - <span className="fw-semi-bold">Images</span>
239233
</h1>
240234

‎src/pages/extra/search/Search.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,6 @@ class Search extends React.Component {
3030
render() {
3131
return (
3232
<div className={s.root}>
33-
<ol className="breadcrumb">
34-
<li className="breadcrumb-item">YOU ARE HERE</li>
35-
<li className="breadcrumb-item active">Search Results</li>
36-
</ol>
3733
<h1 className="page-title">Matching - <span className="fw-semi-bold">Results</span></h1>
3834
<div className="btn-toolbar justify-content-between">
3935
<div className="d-inline-flex">

‎src/pages/extra/timeline/Timeline.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,6 @@ class Timeline extends React.Component {
3535
render() {
3636
return (
3737
<div>
38-
<ol className="breadcrumb">
39-
<li className="breadcrumb-item">YOU ARE HERE</li>
40-
<li className="breadcrumb-item active">Time Line</li>
41-
</ol>
4238
<h1 className="page-title">Events - <span className="fw-semi-bold">Feed</span></h1>
4339

4440
<ul className={s.timeline}>

‎src/pages/forms/elements/Elements.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -197,10 +197,6 @@ class Elements extends React.Component {
197197

198198
return (
199199
<div className={s.root}>
200-
<ol className="breadcrumb">
201-
<li className="breadcrumb-item">YOU ARE HERE</li>
202-
<li className="active breadcrumb-item">Form Elements</li>
203-
</ol>
204200
<h1 className="page-title">Form - <span className="fw-semi-bold">Inputs & Controls</span>
205201
</h1>
206202

‎src/pages/forms/validation/Validation.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,6 @@ class Validation extends React.Component {
1717
render() {
1818
return (
1919
<div>
20-
<ol className="breadcrumb">
21-
<li className="breadcrumb-item">YOU ARE HERE</li>
22-
<li className="breadcrumb-item active">Form Validation</li>
23-
</ol>
2420
<h1 className="page-title">Form - <span className="fw-semi-bold">Validation</span>
2521
</h1>
2622

‎src/pages/forms/wizard/Wizard.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -188,10 +188,6 @@ class Wizard extends React.Component {
188188
const currentStep = this.state.currentStep;
189189
return (
190190
<div className={s.root}>
191-
<ol className="breadcrumb">
192-
<li className="breadcrumb-item">YOU ARE HERE</li>
193-
<li className="breadcrumb-item active">Form Wizard</li>
194-
</ol>
195191
<h1 className="page-title">Form - <span className="fw-semi-bold">Wizard</span>
196192
</h1>
197193
<Row>

‎src/pages/grid/Grid.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,6 @@ class Grid extends React.Component {
3636

3737
return (
3838
<div>
39-
<ol className="breadcrumb">
40-
<li className="breadcrumb-item">YOU ARE HERE</li>
41-
<li className="breadcrumb-item active">Grid</li>
42-
</ol>
4339
<h1 className="page-title">Grid - <span className="fw-semi-bold">Options</span></h1>
4440

4541
<Row>

‎src/pages/management/Management.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
} from 'react-bootstrap-table';
88
import { connect } from 'react-redux';
99
import { Link } from 'react-router-dom';
10-
import { Popover, PopoverBody, PopoverHeader, Breadcrumb, BreadcrumbItem, Alert } from 'reactstrap';
10+
import { Popover, PopoverBody, PopoverHeader, Alert } from 'reactstrap';
1111

1212
import {
1313
Button,
@@ -166,10 +166,6 @@ class Management extends React.Component {
166166

167167
return (
168168
<div>
169-
<Breadcrumb>
170-
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
171-
<BreadcrumbItem active>E-commerce</BreadcrumbItem>
172-
</Breadcrumb>
173169
<div className="page-top-line">
174170
<h2 className="page-title">Product - <span className="fw-semi-bold">Management</span></h2>
175171
<Alert

‎src/pages/maps/google/Google.js

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
import React from 'react';
2-
import {
3-
Breadcrumb, BreadcrumbItem
4-
} from 'reactstrap'
52
import {
63
withGoogleMap,
74
withScriptjs,
@@ -26,10 +23,6 @@ class Maps extends React.Component {
2623
render() {
2724
return (
2825
<div>
29-
<Breadcrumb>
30-
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
31-
<BreadcrumbItem active>Google Maps</BreadcrumbItem>
32-
</Breadcrumb>
3326
<h1 className="page-title">
3427
Google <span className="fw-semi-bold">Maps</span>
3528
</h1>

0 commit comments

Comments
 (0)