Skip to content

Commit 7542c9b

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

File tree

8 files changed

+78
-53
lines changed

8 files changed

+78
-53
lines changed

‎.eslintrc‎

Lines 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‎

Lines 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‎

Lines 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‎

Lines 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‎

Lines 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‎

Lines 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‎

Lines 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‎

Lines 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)