Merge pull request #5 from coreui/dev-fix

v2.0.0-beta

demo/src/scss/style.scss

@@ -2,9 +2,9 @@
 @import "variables";
 
 // Import styles
-@import "node_modules/@coreui/styles/scss/coreui";
+@import "~@coreui/coreui/scss/coreui";
 // Temp fix for reactstrap
-@import 'node_modules/@coreui/styles/scss/_dropdown-menu-right.scss';
+@import '~@coreui/coreui/scss/_dropdown-menu-right.scss';
 
 // If you want to add something do it here
 @import "custom";

demo/src/scss/vendors/_variables.scss

@@ -1,7 +1,7 @@
 // Override Boostrap variables
 @import "../variables";
-@import "node_modules/@coreui/styles/scss/bootstrap-variables";
-@import "node_modules/bootstrap/scss/mixins";
-@import "node_modules/bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
-@import "node_modules/@coreui/styles/scss/variables";
+@import "~@coreui/coreui/scss/bootstrap-variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~@coreui/coreui/scss/variables";

demo/src/scss/vendors/chart.js/chart.css

@@ -23,6 +23,7 @@
   white-space: nowrap;
   position: relative;
   margin-bottom: 4px;
+  border-radius: 0.25rem;
   padding: 2px 8px 2px 28px;
   font-size: smaller;
   cursor: default; }
@@ -39,4 +40,5 @@
   left: 0;
   top: 0;
   width: 20px;
-  height: 20px; }
+  height: 20px;
+  border-radius: 0.25rem; }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-beta",
   "description": "CoreUI React Bootstrap 4 components",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,6 +20,7 @@
     "lint": "eslint src"
   },
   "dependencies": {
+    "@coreui/coreui": "^2.0.0-beta.6",
     "bootstrap": "4.0.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",

src/AsideToggler.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { asideMenuCssClasses } from './Shared/index';
-import { ToggleClasses } from './Shared/toggle-classes';
+import toggleClasses from './Shared/toggle-classes';
 
 const propTypes = {
   children: PropTypes.node,
@@ -40,7 +40,7 @@ class AppAsideToggler extends Component {
       if (display && asideMenuCssClasses.indexOf(cssTemplate) > -1) {
         cssClass = cssTemplate;
       }
-      ToggleClasses(cssClass, asideMenuCssClasses);
+      toggleClasses(cssClass, asideMenuCssClasses);
     }
   }
 
@@ -54,7 +54,7 @@ class AppAsideToggler extends Component {
           type="button"
           className={classes}
           {...attributes}
-          onClick={this.asideToggle}
+          onClick={(event)=>this.asideToggle(event)}
       >
         {children || <span className="navbar-toggler-icon" />}
       </button>

src/Breadcrumb.js

@@ -31,15 +31,14 @@ const BreadcrumbsItem = ({ match }) => {
   const routeName = findRouteName(match.url);
   if (routeName) {
     return (
-      match.isExact ? 
+      match.isExact ?
         <BreadcrumbItem active>{routeName}</BreadcrumbItem>
-       : 
+       :
         <BreadcrumbItem>
           <Link to={match.url || ''}>
             {routeName}
           </Link>
         </BreadcrumbItem>
-
     );
   }
   return null;

src/Shared/toggle-classes.js

@@ -1,16 +1,6 @@
-const RemoveClasses = (NewClassNames) => {
-  const MatchClasses = NewClassNames.map(Class => document.body.classList.contains(Class));
-  return MatchClasses.indexOf(true) !== -1;
-};
-
-const ToggleClasses = (Toggle, ClassNames) => {
-  const Level = ClassNames.indexOf(Toggle);
-  const NewClassNames = ClassNames.slice(0, Level + 1);
-  if (RemoveClasses(NewClassNames)) {
-    NewClassNames.map(Class => document.body.classList.remove(Class));
-  } else {
-    document.body.classList.add(Toggle);
-  }
-};
-
-export { ToggleClasses };
+export default function toggleClasses (toggleClass, classList) {
+  const level = classList.indexOf(toggleClass)
+  const removeClassList = classList.slice(0, level)
+  removeClassList.map((className) => document.body.classList.remove(className))
+  document.body.classList.toggle(toggleClass)
+}

src/SidebarMinimizer.js

@@ -15,10 +15,20 @@ const defaultProps = {
 };
 
 class AppSidebarMinimizer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
   sidebarMinimize(e) {
     // e.preventDefault();
 
     document.body.classList.toggle('sidebar-minimized');
+    const sidebar = document.querySelector('.sidebar-nav')
+    if (sidebar) {
+      sidebar.classList.toggle('ps');
+      sidebar.classList.toggle('scrollbar-container');
+    }
   }
 
   brandMinimize(e) {
@@ -27,13 +37,18 @@ class AppSidebarMinimizer extends Component {
     document.body.classList.toggle('brand-minimized');
   }
 
+  handleClick(e) {
+    this.sidebarMinimize(e)
+    this.brandMinimize(e)
+  }
+
   render() {
     const { className, children, tag: Tag, type, ...attributes } = this.props;
 
     const classes = classNames(className, 'sidebar-minimizer', 'mt-auto');
 
     return (
-      <Tag className={classes} type={type} {...attributes} onClick={(event) => { this.sidebarMinimize(event); this.brandMinimize(event); }} >
+      <Tag className={classes} type={type} {...attributes} onClick={(event)=>this.handleClick(event)} >
         {children}
       </Tag>
     );

src/SidebarNav.js

@@ -171,7 +171,7 @@ class AppSidebarNav extends Component {
 
     // sidebar-nav root
     return (
-      <PerfectScrollbar className={navClasses} {...attributes}>
+      <PerfectScrollbar className={navClasses} {...attributes} option={{ suppressScrollX: true }} >
         <Nav>
           {children || this.navList(navConfig.items)}
         </Nav>

src/SidebarToggler.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { sidebarCssClasses } from './Shared/index';
-import { ToggleClasses } from './Shared/toggle-classes';
+import toggleClasses from './Shared/toggle-classes';
 
 const propTypes = {
   children: PropTypes.node,
@@ -38,7 +38,7 @@ class AppSidebarToggler extends Component {
       if (display && sidebarCssClasses.indexOf(cssTemplate) > -1) {
         cssClass = cssTemplate;
       }
-      ToggleClasses(cssClass, sidebarCssClasses);
+      toggleClasses(cssClass, sidebarCssClasses);
     }
   }
 
@@ -48,7 +48,7 @@ class AppSidebarToggler extends Component {
     const classes = classNames(className, 'navbar-toggler');
 
     return (
-      <Tag type="button" className={classes} {...attributes} onClick={this.sidebarToggle}>
+      <Tag type="button" className={classes} {...attributes} onClick={(event)=>this.sidebarToggle(event)}>
         {children || <span className="navbar-toggler-icon" />}
       </Tag>
     );

tests/AsideToggler.test.js

@@ -2,11 +2,33 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import sinon from 'sinon';
+
 import AppAsideToggler from 'src/AsideToggler'
 
+configure({ adapter: new Adapter() });
+
 describe('AppAsideToggler', () => {
   it('renders button with class="navbar-toggler"', () => {
     expect(render(<AppAsideToggler />))
     .toContain('<button type="button" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>')
   })
-})
+  it('should call asideToggle', () => {
+    let component = mount(<AppAsideToggler />);
+    const instance = component.instance();
+    const handleClickSpy = sinon.spy(instance, 'asideToggle');
+    component.find('button').simulate('click');
+
+    expect(handleClickSpy.called).toBe(true);
+  })
+  it('should call asideToggle mobile', () => {
+    let component = mount(<AppAsideToggler mobile/>);
+    const instance = component.instance();
+    const handleClickSpy = sinon.spy(instance, 'asideToggle');
+    component.find('button').simulate('click');
+
+    expect(handleClickSpy.called).toBe(true);
+  })
+})

tests/HeaderDropdown.test.js

@@ -2,11 +2,25 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
 import AppHeaderDropdown from 'src/HeaderDropdown'
+import sinon from 'sinon';
+
+configure({ adapter: new Adapter() });
 
 describe('AppHeaderDropdown', () => {
   it('renders li with class="dropdown nav-item"', () => {
-    expect(render(<AppHeaderDropdown />))
-    .toContain('<li class="dropdown nav-item"></li>')
+    expect(render(<AppHeaderDropdown />)).toContain('<li class="dropdown nav-item"></li>')
+  })
+  it('dropdownOpen changed on toggle', () => {
+
+    let component = mount(<AppHeaderDropdown />);
+    const instance = component.instance();
+
+    expect(instance.state.dropdownOpen).toBe(false);
+    instance.toggle();
+    expect(instance.state.dropdownOpen).toBe(true);
   })
-})
+})

tests/NavbarBrand.test.js

@@ -10,8 +10,9 @@ import AppNavbarBrand from 'src/NavbarBrand';
 describe('AppNavbarBrand', () => {
   it('renders anchor with class="navbar-brand"', () => {
     expect(render(<AppNavbarBrand
-      full={{ src: logo, width: 89, height: 25, alt: 'CoreUI Logo' }}
-      minimized={{ src: sygnet, width: 30, height: 30, alt: 'CoreUI Logo' }}
+      brand={{ src: logo, width: 89, height: 25, alt: 'CoreUI Brand' }}
+      full={{ src: logo, width: 89, height: 25, alt: 'CoreUI Full' }}
+      minimized={{ src: sygnet, width: 30, height: 30, alt: 'CoreUI Minimized' }}
     />)).toContain('class="navbar-brand"');
   });
-});
+});

tests/Sidebar.test.js

@@ -18,7 +18,7 @@ describe('AppSidebar', () => {
   it('calls componentDidMount', () => {
     spy(AppSidebar.prototype, 'componentDidMount');
 
-    const wrapper = mount(<AppSidebar fixed display="lg" />);
-    expect(AppSidebar.prototype.componentDidMount.calledOnce).toEqual(true);
+    const wrapper = mount(<AppSidebar fixed display="lg" compact minimized offCanvas />);
+    expect(AppSidebar.prototype.componentDidMount.calledOnce).toBe(true);
   });
-})
+})

tests/SidebarMinimizer.test.js

@@ -2,11 +2,25 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import sinon from 'sinon';
+
 import AppSidebarMinimizer from 'src/SidebarMinimizer'
 
+configure({ adapter: new Adapter() });
+
 describe('AppSidebarMinimizer', () => {
   it('renders button with class="sidebar-minimizer"', () => {
     expect(render(<AppSidebarMinimizer></AppSidebarMinimizer>))
     .toContain('<button class="sidebar-minimizer mt-auto" type="button"></button>')
   })
-})
+  it('should call handleClick', () => {
+    let component = mount(<AppSidebarMinimizer />);
+    const instance = component.instance();
+    const handleClickSpy = sinon.spy(instance, 'handleClick');
+    component.find('button').simulate('click');
+
+    expect(handleClickSpy.called).toBe(true);
+  })
+})

tests/SidebarToggler.test.js

@@ -2,11 +2,33 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import sinon from 'sinon';
+
 import AppSidebarToggler from 'src/SidebarToggler';
 
+configure({ adapter: new Adapter() });
+
 describe('AppSidebarToggler', () => {
   it('renders button with class="navbar-toggler"', () => {
     expect(render(<AppSidebarToggler className="d-lg-none" display="md" mobile />))
     .toContain('<button type="button" class="d-lg-none navbar-toggler"><span class="navbar-toggler-icon"></span></button>')
   })
-})
+  it('should call sidebarToggle', () => {
+    let component = mount(<AppSidebarToggler />);
+    const instance = component.instance();
+    const handleClickSpy = sinon.spy(instance, 'sidebarToggle');
+    component.find('button').simulate('click');
+
+    expect(handleClickSpy.called).toBe(true);
+  })
+  it('should call sidebarToggle mobile', () => {
+    let component = mount(<AppSidebarToggler mobile />);
+    const instance = component.instance();
+    const handleClickSpy = sinon.spy(instance, 'sidebarToggle');
+    component.find('button').simulate('click');
+
+    expect(handleClickSpy.called).toBe(true);
+  })
+})