Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 9604939

Browse filesBrowse files
xidedixxidedix
committed
feat(Breadcrumb2, SidebarNav2): mandatory router prop
BREAKING CHANGE: - inject `react-router-dom v5` to component - usage ``` import * as router from 'react-router-dom'; ... <AppSidebarNav navConfig={navigation} {...this.props} router={router}/> ... <AppBreadcrumb appRoutes={routes} router={router} /> ```
1 parent 416fef2 commit 9604939
Copy full SHA for 9604939

File tree

5 files changed

+357
-20
lines changed
Filter options

5 files changed

+357
-20
lines changed

‎src/Breadcrumb.md

Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
11
### CoreUI `Breadcrumb` component
22

3+
usage in `DefaultLayout`:
4+
```jsx
5+
import * as router from 'react-router-dom';
6+
import { AppBreadcrumb2 as AppBreadcrumb } from '@coreui/react';
7+
// routes config
8+
import routes from '../../routes.js';
9+
```
10+
11+
```html
12+
<AppBreadcrumb appRoutes={routes} router={router}></AppBreadcrumb>
13+
```
314
_todo_

‎src/Breadcrumb2.js

Copy file name to clipboard
+108Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React, { Component } from 'react';
2+
import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
3+
import PropTypes from 'prop-types';
4+
import classNames from 'classnames';
5+
6+
let routes;
7+
let router;
8+
9+
const getPaths = (pathname) => {
10+
const paths = ['/'];
11+
12+
if (pathname === '/') return paths;
13+
14+
pathname.split('/').reduce((prev, curr) => {
15+
const currPath = `${prev}/${curr}`;
16+
paths.push(currPath);
17+
return currPath;
18+
});
19+
return paths;
20+
};
21+
22+
const findRouteName2 = (url) => {
23+
const matchPath = router.matchPath;
24+
const aroute = routes.find(route => matchPath(url, {path: route.path, exact: route.exact}));
25+
return (aroute && aroute.name) ? aroute.name : null
26+
};
27+
28+
const BreadcrumbsItem2 = ({ match }) => {
29+
const routeName = findRouteName2(match.url);
30+
const Link = router.Link;
31+
if (routeName) {
32+
return (
33+
match.isExact ?
34+
<BreadcrumbItem active>{routeName}</BreadcrumbItem>
35+
:
36+
<BreadcrumbItem>
37+
<Link to={match.url || ''}>
38+
{routeName}
39+
</Link>
40+
</BreadcrumbItem>
41+
);
42+
}
43+
return null;
44+
};
45+
46+
BreadcrumbsItem2.propTypes = {
47+
match: PropTypes.shape({
48+
url: PropTypes.string
49+
})
50+
};
51+
52+
const Breadcrumbs2 = (args) => {
53+
const Route = router.Route;
54+
const paths = getPaths(args.location.pathname);
55+
const items = paths.map((path, i) => <Route key={i.toString()} path={path} component={BreadcrumbsItem2} />);
56+
return (
57+
<Breadcrumb>
58+
{items}
59+
</Breadcrumb>
60+
);
61+
};
62+
63+
const propTypes = {
64+
children: PropTypes.node,
65+
className: PropTypes.string,
66+
appRoutes: PropTypes.any,
67+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
68+
router: PropTypes.any
69+
};
70+
71+
const defaultProps = {
72+
tag: 'div',
73+
className: '',
74+
appRoutes: [{ path: '/', exact: true, name: 'Home', component: null }]
75+
};
76+
77+
class AppBreadcrumb2 extends Component {
78+
constructor(props) {
79+
super(props);
80+
81+
this.state = { routes: props.appRoutes };
82+
routes = this.state.routes;
83+
router = props.router;
84+
}
85+
86+
render() {
87+
const { className, tag: Tag, ...attributes } = this.props;
88+
89+
delete attributes.children
90+
delete attributes.appRoutes
91+
delete attributes.router
92+
93+
const classes = classNames(className);
94+
95+
const Route = router.Route;
96+
97+
return (
98+
<Tag className={classes}>
99+
<Route path="/:path" component={Breadcrumbs2} {...attributes} />
100+
</Tag>
101+
);
102+
}
103+
}
104+
105+
AppBreadcrumb2.propTypes = propTypes;
106+
AppBreadcrumb2.defaultProps = defaultProps;
107+
108+
export default AppBreadcrumb2;

‎src/SidebarNav.md

Copy file name to clipboard
+33-20Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,47 @@
11
### CoreUI `SidebarNav` subcomponent
2+
usage in `DefaultLayout`:
3+
```jsx
4+
import * as router from 'react-router-dom';
5+
import { AppSidebarNav2 as AppSidebarNav } from '@coreui/react';
6+
// sidebar nav config
7+
import navigation from '../../_nav';
8+
```
29

10+
```html
11+
<AppSidebarNav navConfig={navigation} {...this.props} router={ router }/>
12+
```
13+
props:
314

4-
prop | default
5-
--- | ---
6-
children | `this.navList(navConfig.items)`
7-
className | `sidebar-nav`
8-
navConfig | `{ items: [ { name url icon badge } ] }`
9-
isOpen | `false`
10-
tag | `nav`
15+
prop | default | notes
16+
--- | --- | ---
17+
children | `this.navList(navConfig.items)` |
18+
className | `sidebar-nav` |
19+
navConfig | `{ items: [ { name url icon badge } ] }` |
20+
isOpen | `false` |
21+
tag | `nav` |
22+
router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.0_
1123

12-
#### `navConfig` structure
24+
---
25+
#### `navConfig` shape
1326

1427
- title:
15-
````js
28+
```json5
1629
{
1730
title: true,
1831
name: 'Theme',
19-
class: '' // optional class names space delimited list for title item ex: "text-center"
32+
class: '', // optional class names space delimited list for title item ex: "text-center"
2033
wrapper: { // optional wrapper object
2134
element: '', // optional* valid HTML5 element tag ( *required when passing attributes)
2235
attributes: {} // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
2336
},
2437
},
25-
````
38+
```
2639
- item:
27-
````js
40+
```json5
2841
{
2942
name: 'Dashboard',
3043
url: '/dashboard',
31-
icon: `icon-speedometer',
44+
icon: 'icon-speedometer',
3245
class: '', // optional
3346
variant: 'success', // optional
3447
badge: {
@@ -38,9 +51,9 @@ tag | `nav`
3851
},
3952
attributes: { target: '_blank', rel: "noreferrer noopener", disabled: false, hidden: false }, // (v2.1.0 up) optional valid JS object with JS API naming
4053
},
41-
````
54+
```
4255
- item with `children` array - works like `nav-dropdown-toggle` with `nav-dropdown-items`
43-
````js
56+
```json5
4457
{
4558
name: 'Icons',
4659
url: '/icons',
@@ -57,16 +70,16 @@ tag | `nav`
5770
},
5871
]
5972
}
60-
````
73+
```
6174
- divider:
62-
````js
75+
```json5
6376
{
6477
divider: true
6578
},
66-
````
79+
```
6780

6881
- order of precedence:
69-
````
82+
```
7083
title > divider > children > item
71-
````
84+
```
7285

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.