Skip to content

v2.5.7 #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 28, 2020
Merged

v2.5.7 #106

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fef5f36
fix(SidebarNav): add missing alternative icon config object
xidedix Feb 28, 2020
15904e8
Ship: v2.5.7
xidedix Feb 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix(SidebarNav): add missing alternative icon config object
  • Loading branch information
@xidedix
xidedix committed Feb 28, 2020
commit fef5f3601421aea5f918a89260a79c9c7309bc15
11 changes: 11 additions & 0 deletions src/SidebarNav.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,17 @@ router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.
},
```

- item.icon: string (css class string for <i> tag)
```json5
icon: 'icon-speedometer' // css class string for <i> tag
```
- item.icon: { class, innerText, attributes }
(v2.5.7 up alternative icon config object)
```json5
icon: { class: 'material-icons', innerText: 'insert_emoticon', attributes: { title: 'smiley' }}
```
---

__React Router Link `url`__

`url: string` - a string representation of the Link location, created by concatenating the location’s pathname, search, and hash properties.
Expand Down
22 changes: 18 additions & 4 deletions src/SidebarNav2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ class AppSidebarNav2 extends Component {

// nav dropdown
navDropdown(item, key) {
const classIcon = classNames('nav-icon', item.icon);
const itemIcon = this.navIcon(item)
const attributes = this.getAttribs(item.attributes);
const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class, attributes.className);
delete attributes.class;
Expand All @@ -148,8 +148,7 @@ class AppSidebarNav2 extends Component {
to={item.url || ''}
{...attributes}
onClick={(e) => this.handleClick(e, item)}>
<i className={classIcon}/>
{item.name}{this.navBadge(item.badge)}
{itemIcon}{item.name}{this.navBadge(item.badge)}
</NavLink>
<ul className="nav-dropdown-items">
{this.navList(item.children)}
Expand All @@ -169,11 +168,26 @@ class AppSidebarNav2 extends Component {
);
}

navIcon(item) {
const icon = item.icon;
const iconObject = (typeof icon === 'object' && (icon !== null)) ? {iconClass: icon.class, iconClassName: icon.className, ...icon} : { iconClass: icon };
const {iconClass, iconClassName, innerText, img, attributes} = iconObject;
const iconAttr = {...attributes};
delete iconAttr.class;
delete iconAttr.className;
delete iconAttr.img;
const iconImg = img && img.src ? img : null;
const iconInner = innerText || null;
const classIcon = classNames('nav-icon', iconClass, iconClassName);
const iconComponent = iconImg ? <img {...iconAttr} className={classIcon} src={iconImg.src} /> : <i {...iconAttr} className={classIcon}>{iconInner}</i>
return (iconComponent)
}

// nav link
navLink(item, key, classes) {
const ref = React.createRef();
const url = item.url || '';
const itemIcon = <i className={classes.icon} />
const itemIcon = this.navIcon(item)
const itemBadge = this.navBadge(item.badge)
const attributes = this.getAttribs(item.attributes)
classes.link = classNames(classes.link, attributes.class, attributes.className)
Expand Down