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 7542c9b

Browse filesBrowse files
xidedixxidedix
authored
Merge pull request coreui#77 from coreui/fix-sidebar-nav-droprown-item-attr
v2.5.1
2 parents 0446a16 + 3d4a2b8 commit 7542c9b
Copy full SHA for 7542c9b

File tree

Expand file treeCollapse file tree

8 files changed

+78
-53
lines changed
Filter options
Expand file treeCollapse file tree

8 files changed

+78
-53
lines changed

‎.eslintrc

Copy file name to clipboardExpand all lines: .eslintrc
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"createClass": "createReactClass", // Regex for Component Factory to use,
4141
// default to "createReactClass"
4242
"pragma": "React", // Pragma to use, default to "React"
43-
"version": "16.5", // React version, default to the latest React stable release
43+
"version": "16.8", // React version, default to the latest React stable release
4444
"flowVersion": "0.81" // Flow version
4545
},
4646
"propWrapperFunctions": [ "forbidExtraProps" ] // The names of any functions used to wrap the

‎CHANGELOG.md

Copy file name to clipboardExpand all lines: CHANGELOG.md
+11Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
### [@coreui/react](https://coreui.io/) changelog
22

3+
##### `v2.5.1`
4+
5+
- fix(SidebarNav): add missing `class` and `attributes` to navDropdown item
6+
- fix(HeaderDropdown): add missing Dropdown.propTypes
7+
- refactor(demo): AppHeaderDropdown remove style right auto
8+
9+
###### dependencies update
10+
- update `core-js` to `^2.6.8`
11+
- update `enzyme-adapter-react-16` to `^1.13.1`
12+
- update `webpack-dev-server` to `^3.4.1`
13+
314
##### `v2.5.0`
415
- BREAKING CHANGE release for use with `react-router-dom v5`
516
- feat(Breadcrumb2): mandatory prop `router` :boom: see: [Breadcrumb](./src/Breadcrumb.md)

‎demo/src/containers/DefaultLayout/DefaultLayout.js

Copy file name to clipboardExpand all lines: demo/src/containers/DefaultLayout/DefaultLayout.js
+3-2Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
AppSidebarForm,
1717
AppSidebarHeader,
1818
AppSidebarMinimizer,
19+
// AppSidebarNav as AppSidebarNav,
1920
AppSidebarNav2 as AppSidebarNav,
2021
AppSidebarToggler,
2122
} from '../../../../src';
@@ -53,7 +54,7 @@ class DefaultLayout extends Component {
5354
<DropdownToggle nav>
5455
<img src={avatar} className="img-avatar" alt="admin@bootstrapmaster.com" />
5556
</DropdownToggle>
56-
<DropdownMenu right style={{ right: 'auto', height: '400px' }}>
57+
<DropdownMenu right style={{ height: '400px' }}>
5758
AppHeaderDropdown
5859
</DropdownMenu>
5960
</AppHeaderDropdown>
@@ -91,7 +92,7 @@ class DefaultLayout extends Component {
9192
</AppAside>
9293
</div>
9394
<AppFooter>
94-
<span><a href="https://coreui.io">CoreUI</a> &copy; 2018 creativeLabs</span>
95+
<span><a href="https://coreui.io">CoreUI</a> &copy; 2019 creativeLabs</span>
9596
<span className="ml-auto">Powered by <a href="https://coreui.io/react">CoreUI for React</a></span>
9697
</AppFooter>
9798
</div>

‎package.json

Copy file name to clipboardExpand all lines: package.json
+4-4Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@coreui/react",
3-
"version": "2.5.0",
3+
"version": "2.5.1",
44
"description": "CoreUI React Bootstrap 4 components",
55
"license": "MIT",
66
"author": {
@@ -37,7 +37,7 @@
3737
"dependencies": {
3838
"@coreui/icons": "0.3.0",
3939
"classnames": "^2.2.6",
40-
"core-js": "^2.6.5",
40+
"core-js": "^2.6.8",
4141
"prop-types": "^15.7.2",
4242
"react-onclickout": "^2.0.8",
4343
"react-perfect-scrollbar": "^1.5.2",
@@ -51,7 +51,7 @@
5151
"devDependencies": {
5252
"babel-eslint": "^10.0.1",
5353
"enzyme": "^3.9.0",
54-
"enzyme-adapter-react-16": "^1.13.0",
54+
"enzyme-adapter-react-16": "^1.13.1",
5555
"eslint": "^5.16.0",
5656
"eslint-plugin-import": "^2.17.2",
5757
"eslint-plugin-react": "^7.13.0",
@@ -60,7 +60,7 @@
6060
"react-dom": "^16.8.6",
6161
"react-router-dom": "^5.0.0",
6262
"sinon": "^5.1.1",
63-
"webpack-dev-server": "~3.3.1"
63+
"webpack-dev-server": "^3.4.1"
6464
},
6565
"repository": {
6666
"type": "git",

‎src/HeaderDropdown.js

Copy file name to clipboardExpand all lines: src/HeaderDropdown.js
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
44

55
const propTypes = {
66
children: PropTypes.node,
7-
direction: PropTypes.string
7+
direction: PropTypes.string,
8+
...Dropdown.propTypes
89
};
910

1011
const defaultProps = {

‎src/SidebarNav.js

Copy file name to clipboardExpand all lines: src/SidebarNav.js
+9-4Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,14 @@ class AppSidebarNav extends Component {
109109
// nav dropdown
110110
navDropdown(item, key) {
111111
const classIcon = classNames('nav-icon', item.icon);
112+
const attributes = JSON.parse(JSON.stringify(item.attributes || {}));
113+
const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class);
114+
delete attributes.class;
112115
return (
113116
<li key={key} className={this.activeRoute(item.url, this.props)}>
114-
<a className="nav-link nav-dropdown-toggle" href="#" onClick={this.handleClick}><i className={classIcon} />{item.name}{this.navBadge(item.badge)}</a>
117+
<a className={classes} href="#" onClick={this.handleClick} {...attributes}><i className={classIcon}/>
118+
{item.name}{this.navBadge(item.badge)}
119+
</a>
115120
<ul className="nav-dropdown-items">
116121
{this.navList(item.children)}
117122
</ul>
@@ -132,14 +137,14 @@ class AppSidebarNav extends Component {
132137

133138
// nav link
134139
navLink(item, key, classes) {
135-
const url = item.url ? item.url : '';
140+
const url = item.url || '';
136141
const itemIcon = <i className={classes.icon} />
137142
const itemBadge = this.navBadge(item.badge)
138143
const attributes = item.attributes || {}
139144
return (
140145
<NavItem key={key} className={classes.item}>
141146
{ attributes.disabled ?
142-
<RsNavLink href={""} className={classes.link} {...attributes}>
147+
<RsNavLink href={''} className={classes.link} {...attributes}>
143148
{itemIcon}{item.name}{itemBadge}
144149
</RsNavLink>
145150
:
@@ -181,7 +186,7 @@ class AppSidebarNav extends Component {
181186
const navClasses = classNames(className, 'sidebar-nav');
182187

183188
// ToDo: find better rtl fix
184-
const isRtl = getComputedStyle(document.querySelector('html')).direction === 'rtl'
189+
const isRtl = getComputedStyle(document.documentElement).direction === 'rtl'
185190

186191
// sidebar-nav root
187192
return (

‎src/SidebarNav.md

Copy file name to clipboardExpand all lines: src/SidebarNav.md
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@ router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.
5858
name: 'Icons',
5959
url: '/icons',
6060
icon: 'icon-star',
61+
class: 'text-uppercase', // (v2.5.1 up) optional
62+
attributes: { class: 'bg-success' }, // (v2.5.1 up) optional valid JS object with JS API naming,
6163
children: [
6264
{
6365
name: 'Flags', // item options apply

‎src/SidebarNav2.js

Copy file name to clipboardExpand all lines: src/SidebarNav2.js
+46-41Lines changed: 46 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ class AppSidebarNav2 extends Component {
4747

4848
activeRoute(routeName, props) {
4949
return props.location.pathname.indexOf(routeName) > -1
50-
? 'nav-item nav-dropdown open'
51-
: 'nav-item nav-dropdown';
50+
? 'nav-item nav-dropdown open'
51+
: 'nav-item nav-dropdown';
5252
}
5353

5454
hideMobile() {
@@ -65,11 +65,11 @@ class AppSidebarNav2 extends Component {
6565
// nav type
6666
navType(item, idx) {
6767
return (
68-
item.title ? this.navTitle(item, idx)
69-
: item.divider ? this.navDivider(item, idx)
70-
: item.label ? this.navLabel(item, idx)
71-
: item.children ? this.navDropdown(item, idx)
72-
: this.navItem(item, idx)
68+
item.title ? this.navTitle(item, idx)
69+
: item.divider ? this.navDivider(item, idx)
70+
: item.label ? this.navLabel(item, idx)
71+
: item.children ? this.navDropdown(item, idx)
72+
: this.navItem(item, idx)
7373
);
7474
}
7575

@@ -96,27 +96,32 @@ class AppSidebarNav2 extends Component {
9696
item: classNames('hidden-cn', item.class),
9797
link: classNames('nav-label', item.class ? item.class : ''),
9898
icon: classNames(
99-
'nav-icon',
100-
!item.icon ? 'fa fa-circle' : item.icon,
101-
item.label.variant ? `text-${item.label.variant}` : '',
102-
item.label.class ? item.label.class : '',
99+
'nav-icon',
100+
!item.icon ? 'fa fa-circle' : item.icon,
101+
item.label.variant ? `text-${item.label.variant}` : '',
102+
item.label.class ? item.label.class : '',
103103
)
104104
};
105105
return (
106-
this.navLink(item, key, classes)
106+
this.navLink(item, key, classes)
107107
);
108108
}
109109

110110
// nav dropdown
111111
navDropdown(item, key) {
112112
const classIcon = classNames('nav-icon', item.icon);
113+
const attributes = JSON.parse(JSON.stringify(item.attributes || {}));
114+
const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class);
115+
delete attributes.class;
113116
return (
114-
<li key={key} className={this.activeRoute(item.url, this.props)}>
115-
<a className="nav-link nav-dropdown-toggle" href="#" onClick={this.handleClick}><i className={classIcon} />{item.name}{this.navBadge(item.badge)}</a>
116-
<ul className="nav-dropdown-items">
117-
{this.navList(item.children)}
118-
</ul>
119-
</li>);
117+
<li key={key} className={this.activeRoute(item.url, this.props)}>
118+
<a className={classes} href="#" onClick={this.handleClick} {...attributes}><i className={classIcon}/>
119+
{item.name}{this.navBadge(item.badge)}
120+
</a>
121+
<ul className="nav-dropdown-items">
122+
{this.navList(item.children)}
123+
</ul>
124+
</li>);
120125
}
121126

122127
// nav item with nav link
@@ -127,7 +132,7 @@ class AppSidebarNav2 extends Component {
127132
icon: classNames('nav-icon', item.icon)
128133
};
129134
return (
130-
this.navLink(item, key, classes)
135+
this.navLink(item, key, classes)
131136
);
132137
}
133138

@@ -139,21 +144,21 @@ class AppSidebarNav2 extends Component {
139144
const attributes = item.attributes || {}
140145
const NavLink = this.props.router.NavLink || RsNavLink
141146
return (
142-
<NavItem key={key} className={classes.item}>
143-
{ attributes.disabled ?
144-
<RsNavLink href={""} className={classes.link} {...attributes}>
145-
{itemIcon}{item.name}{itemBadge}
146-
</RsNavLink>
147-
:
148-
this.isExternal(url) || NavLink === RsNavLink ?
149-
<RsNavLink href={url} className={classes.link} active {...attributes}>
150-
{itemIcon}{item.name}{itemBadge}
151-
</RsNavLink> :
152-
<NavLink to={url} className={classes.link} activeClassName="active" onClick={this.hideMobile} {...attributes}>
153-
{itemIcon}{item.name}{itemBadge}
154-
</NavLink>
155-
}
156-
</NavItem>
147+
<NavItem key={key} className={classes.item}>
148+
{ attributes.disabled ?
149+
<RsNavLink href={''} className={classes.link} {...attributes}>
150+
{itemIcon}{item.name}{itemBadge}
151+
</RsNavLink>
152+
:
153+
this.isExternal(url) || NavLink === RsNavLink ?
154+
<RsNavLink href={url} className={classes.link} active {...attributes}>
155+
{itemIcon}{item.name}{itemBadge}
156+
</RsNavLink> :
157+
<NavLink to={url} className={classes.link} activeClassName="active" onClick={this.hideMobile} {...attributes}>
158+
{itemIcon}{item.name}{itemBadge}
159+
</NavLink>
160+
}
161+
</NavItem>
157162
);
158163
}
159164

@@ -162,7 +167,7 @@ class AppSidebarNav2 extends Component {
162167
if (badge) {
163168
const classes = classNames(badge.class);
164169
return (
165-
<Badge className={classes} color={badge.variant}>{badge.text}</Badge>
170+
<Badge className={classes} color={badge.variant}>{badge.text}</Badge>
166171
);
167172
}
168173
return null;
@@ -184,15 +189,15 @@ class AppSidebarNav2 extends Component {
184189
const navClasses = classNames(className, 'sidebar-nav');
185190

186191
// ToDo: find better rtl fix
187-
const isRtl = getComputedStyle(document.querySelector('html')).direction === 'rtl'
192+
const isRtl = getComputedStyle(document.documentElement).direction === 'rtl'
188193

189194
// sidebar-nav root
190195
return (
191-
<PerfectScrollbar className={navClasses} {...attributes} options={{ suppressScrollX: !isRtl }} >
192-
<Nav>
193-
{children || this.navList(navConfig.items)}
194-
</Nav>
195-
</PerfectScrollbar>
196+
<PerfectScrollbar className={navClasses} {...attributes} options={{ suppressScrollX: !isRtl }} >
197+
<Nav>
198+
{children || this.navList(navConfig.items)}
199+
</Nav>
200+
</PerfectScrollbar>
196201
);
197202
}
198203
}

0 commit comments

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