Update to 1.0.6

- update: react to 16.1.1
- update: reactstrap to 5.0.0-alpha.4
- refactor: deprecated reactstrap NavDropdown change to Dropdown with nav prop
- refactor: use prop bsSize instead of size to bootstrap's input sizing
- update: dependencies

CHANGELOG.md

@@ -1,5 +1,25 @@
 ## [react](./REACT.md) version `changelog`
 
+###### `v1.0.6`
+
+- update: react to `^16.1.1`
+- update: reactstrap to `^5.0.0-alpha.4`
+- refactor: deprecated reactstrap `NavDropdown` change to `Dropdown` with `nav` prop
+- refactor: use prop `bsSize` instead of the `size` to bootstrap's input sizing
+- update: dependencies
+
+###### `v1.0.5`
+- feature: Sidebar add divider.class
+- refactor: Sidebar
+- moved to react: `^16.1.0`
+- chore: dependencies update
+
+###### `v1.0.4`
+- refactor: scss
+
+###### `v1.0.3`
+- update: bootstrap to `4.0.0-beta.2`
+
 ###### `v1.0.2`
 - `HeaderDropdown` component example extracted out of `Header`
 

React_Full_Project/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -8,40 +8,40 @@
   "license": "MIT",
   "private": true,
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "babel-core": "6.26.0",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "7.1.2",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "1.6.1",
-    "babel-preset-react": "^6.24.1",
+    "babel-preset-react": "6.24.1",
-    "copy-webpack-plugin": "^4.1.1",
+    "copy-webpack-plugin": "4.2.1",
-    "css-hot-loader": "^1.3.2",
+    "css-hot-loader": "1.3.3",
-    "css-loader": "^0.28.7",
+    "css-loader": "0.28.7",
-    "extract-text-webpack-plugin": "^3.0.1",
+    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "^1.1.5",
+    "file-loader": "1.1.5",
-    "html-loader": "^0.5.1",
+    "html-loader": "0.5.1",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "2.30.1",
-    "node-sass": "^4.5.3",
+    "node-sass": "4.7.1",
-    "rimraf": "^2.6.2",
+    "rimraf": "2.6.2",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "6.0.6",
-    "source-list-map": "^2.0.0",
+    "source-list-map": "2.0.0",
-    "style-loader": "^0.19.0",
+    "style-loader": "0.19.0",
-    "uglify-js": "^3.1.4",
+    "uglify-js": "3.1.10",
-    "url-loader": "^0.6.2",
+    "url-loader": "0.6.2",
-    "webpack": "^3.7.1",
+    "webpack": "3.8.1",
-    "webpack-dev-server": "^2.9.2"
+    "webpack-dev-server": "2.9.4"
   },
   "dependencies": {
     "bootstrap": "4.0.0-beta.2",
-    "chart.js": "2.7.0",
+    "chart.js": "2.7.1",
-    "font-awesome": "^4.7.0",
+    "font-awesome": "4.7.0",
     "history": "4.7.2",
-    "react": "^16.0.0",
+    "react": "16.1.1",
     "react-chartjs-2": "2.6.4",
-    "react-dom": "^16.0.0",
+    "react-dom": "16.1.1",
-    "react-router-dom": "^4.2.2",
+    "react-router-dom": "4.2.2",
-    "react-transition-group": "^2.2.1",
+    "react-transition-group": "2.2.1",
-    "reactstrap": "^5.0.0-alpha.3",
+    "reactstrap": "5.0.0-alpha.4",
-    "simple-line-icons": "^2.4.1"
+    "simple-line-icons": "2.4.1"
   },
   "scripts": {
     "dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
@@ -50,7 +50,7 @@
     "clean": "rimraf ./build"
   },
   "engines": {
-    "node": ">= 6.0.0",
+    "node": ">= 6.4.0",
     "npm": ">= 5.0.0"
   }
 }

React_Full_Project/scss/style.scss

@@ -1,6 +1,6 @@
 /*!
  * CoreUI - Open Source Bootstrap Admin Template
- * @version v1.0.5
+ * @version v1.0.6
  * @link http://coreui.io
  * Copyright (c) 2017 creativeLabs Łukasz Holeczek
  * @license MIT

React_Full_Project/src/components/Header/HeaderDropdown.js

@@ -4,7 +4,7 @@ import {
   DropdownItem,
   DropdownMenu,
   DropdownToggle,
-  NavDropdown
+  Dropdown
 } from 'reactstrap';
 
 class HeaderDropdown extends Component {
@@ -26,7 +26,7 @@ class HeaderDropdown extends Component {
 
   dropAccnt() {
     return (
-      <NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+      <Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
         <DropdownToggle nav>
           <img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
         </DropdownToggle>
@@ -45,7 +45,7 @@ class HeaderDropdown extends Component {
           <DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
           <DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
         </DropdownMenu>
-      </NavDropdown>
+      </Dropdown>
     );
   }
 

React_Full_Project/src/components/Sidebar/Sidebar.js

@@ -46,30 +46,41 @@ class Sidebar extends Component {
 
     // nav list section title
     const title =  (title, key) => {
-      const classes = classNames( "nav-title", title.class);
+      const classes = classNames( 'nav-title', title.class);
       return (<li key={key} className={ classes }>{wrapper(title)} </li>);
     };
 
     // nav list divider
-    const divider = (divider, key) => (<li key={key} className="divider"></li>);
+    const divider = (divider, key) => {
+      const classes = classNames( 'divider', divider.class);
+      return (<li key={key} className={ classes }></li>);
+    };
 
     // nav item with nav link
     const navItem = (item, key) => {
-      const classes = classNames( item.class )
+      const classes = {
-      const isExternal = (url) => {
+        item: classNames( item.class) ,
-        return url.substring(0, 4) === 'http' ? true : false
+        link: classNames( 'nav-link', item.variant ? `nav-link-${item.variant}` : ''),
-      }
+        icon: classNames( item.icon )
-      const variant = classNames( "nav-link", item.variant ? `nav-link-${item.variant}` : "");
+      };
       return (
-        <NavItem key={key} className={classes}>
+        navLink(item, key, classes)
-          { isExternal(item.url) ?
+      )
-              <RsNavLink href={item.url} className={variant} active>
+    };
-                <i className={item.icon}></i>{item.name}{badge(item.badge)}
+
-              </RsNavLink>
+    // nav link
+    const navLink = (item, key, classes) => {
+      const url = item.url ? item.url : '';
+      return (
+        <NavItem key={key} className={classes.item}>
+          { isExternal(url) ?
+            <RsNavLink href={url} className={classes.link} active>
+              <i className={classes.icon}></i>{item.name}{badge(item.badge)}
+            </RsNavLink>
             :
-              <NavLink to={item.url} className={variant} activeClassName="active">
+            <NavLink to={url} className={classes.link} activeClassName="active">
-                <i className={item.icon}></i>{item.name}{badge(item.badge)}
+              <i className={classes.icon}></i>{item.name}{badge(item.badge)}
-              </NavLink>
+            </NavLink>
           }
         </NavItem>
       )
@@ -86,8 +97,8 @@ class Sidebar extends Component {
         </li>)
     };
 
-    // nav link
+    // nav type
-    const navLink = (item, idx) =>
+    const navType = (item, idx) =>
       item.title ? title(item, idx) :
       item.divider ? divider(item, idx) :
       item.children ? navDropdown(item, idx)
@@ -95,7 +106,12 @@ class Sidebar extends Component {
 
     // nav list
     const navList = (items) => {
-      return items.map( (item, index) => navLink(item, index) );
+      return items.map( (item, index) => navType(item, index) );
+    };
+
+    const isExternal = (url) => {
+      const link = url ? url.substring(0, 4) : '';
+      return link === 'http';
     };
 
     // sidebar-nav root

React_Full_Project/src/views/Components/Forms/Forms.js

@@ -221,7 +221,7 @@ class Forms extends Component {
                       <Label htmlFor="selectLg">Select Large</Label>
                     </Col>
                     <Col xs="12" md="9" size="lg">
-                      <Input type="select" name="selectLg" id="selectLg" size="lg">
+                      <Input type="select" name="selectLg" id="selectLg" bsSize="lg">
                         <option value="0">Please select</option>
                         <option value="1">Option #1</option>
                         <option value="2">Option #2</option>
@@ -234,7 +234,7 @@ class Forms extends Component {
                       <Label htmlFor="selectSm">Select Small</Label>
                     </Col>
                     <Col xs="12" md="9">
-                      <Input type="select" name="selectSm" id="SelectLm" size="sm">
+                      <Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
                         <option value="0">Please select</option>
                         <option value="1">Option #1</option>
                         <option value="2">Option #2</option>
@@ -307,9 +307,11 @@ class Forms extends Component {
                         <Label check htmlFor="inline-radio1">
                           <Input type="radio" id="inline-radio1" name="inline-radios" value="option1"/> One
                         </Label>
+                        {' '}
                         <Label check htmlFor="inline-radio2">
                           <Input type="radio" id="inline-radio2" name="inline-radios" value="option2"/> Two
                         </Label>
+                        {' '}
                         <Label check htmlFor="inline-radio3">
                           <Input type="radio" id="inline-radio3" name="inline-radios" value="option3"/> Three
                         </Label>
@@ -346,9 +348,11 @@ class Forms extends Component {
                         <Label check htmlFor="inline-checkbox1">
                           <Input type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1"/> One
                         </Label>
+                        {' '}
                         <Label check htmlFor="inline-checkbox2">
                           <Input type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2"/> Two
                         </Label>
+                        {' '}
                         <Label check htmlFor="inline-checkbox3">
                           <Input type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3"/> Three
                         </Label>
@@ -540,8 +544,7 @@ class Forms extends Component {
                       <Label htmlFor="input-small">Small Input</Label>
                     </Col>
                     <Col sm="6">
-                      <Input size="sm" type="text" id="input-small" name="input-small" className="input-sm"
+                      <Input bsSize="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm"/>
-                             placeholder=".form-control-sm"/>
                     </Col>
                   </FormGroup>
                   <FormGroup row>
@@ -557,8 +560,7 @@ class Forms extends Component {
                       <Label htmlFor="input-large">Large Input</Label>
                     </Col>
                     <Col sm="6">
-                      <Input size="lg" type="text" id="input-large" name="input-large" className="input-lg"
+                      <Input bsSize="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg"/>
-                             placeholder=".form-control-lg"/>
                     </Col>
                   </FormGroup>
                 </Form>

React_Full_Project/src/views/Components/Switches/Switches.js

@@ -1,5 +1,5 @@
 import React, {Component} from "react";
-import {Row, Col, Card, CardHeader, CardBody, Label, Input, Table} from "reactstrap";
+import {Row, Col, Card, CardHeader, CardBody, Label, Input, Table} from 'reactstrap';
 
 class Switches extends Component {
   render() {

React_Starter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -8,40 +8,40 @@
   "license": "MIT",
   "private": true,
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "babel-core": "6.26.0",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "7.1.2",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "1.6.1",
-    "babel-preset-react": "^6.24.1",
+    "babel-preset-react": "6.24.1",
-    "copy-webpack-plugin": "^4.1.1",
+    "copy-webpack-plugin": "4.2.1",
-    "css-hot-loader": "^1.3.2",
+    "css-hot-loader": "1.3.3",
-    "css-loader": "^0.28.7",
+    "css-loader": "0.28.7",
-    "extract-text-webpack-plugin": "^3.0.1",
+    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "^1.1.5",
+    "file-loader": "1.1.5",
-    "html-loader": "^0.5.1",
+    "html-loader": "0.5.1",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "2.30.1",
-    "node-sass": "^4.5.3",
+    "node-sass": "4.7.1",
-    "rimraf": "^2.6.2",
+    "rimraf": "2.6.2",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "6.0.6",
-    "source-list-map": "^2.0.0",
+    "source-list-map": "2.0.0",
-    "style-loader": "^0.19.0",
+    "style-loader": "0.19.0",
-    "uglify-js": "^3.1.4",
+    "uglify-js": "3.1.10",
-    "url-loader": "^0.6.2",
+    "url-loader": "0.6.2",
-    "webpack": "^3.7.1",
+    "webpack": "3.8.1",
-    "webpack-dev-server": "^2.9.2"
+    "webpack-dev-server": "2.9.4"
   },
   "dependencies": {
     "bootstrap": "4.0.0-beta.2",
-    "chart.js": "2.7.0",
+    "chart.js": "2.7.1",
-    "font-awesome": "^4.7.0",
+    "font-awesome": "4.7.0",
     "history": "4.7.2",
-    "react": "^16.0.0",
+    "react": "16.1.1",
     "react-chartjs-2": "2.6.4",
-    "react-dom": "^16.0.0",
+    "react-dom": "16.1.1",
-    "react-router-dom": "^4.2.2",
+    "react-router-dom": "4.2.2",
-    "react-transition-group": "^2.2.1",
+    "react-transition-group": "2.2.1",
-    "reactstrap": "^5.0.0-alpha.3",
+    "reactstrap": "5.0.0-alpha.4",
-    "simple-line-icons": "^2.4.1"
+    "simple-line-icons": "2.4.1"
   },
   "scripts": {
     "dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
@@ -50,7 +50,7 @@
     "clean": "rimraf ./build"
   },
   "engines": {
-    "node": ">= 6.0.0",
+    "node": ">= 6.4.0",
     "npm": ">= 5.0.0"
   }
 }

React_Starter/scss/style.scss

@@ -1,6 +1,6 @@
 /*!
  * CoreUI - Open Source Bootstrap Admin Template
- * @version v1.0.5
+ * @version v1.0.6
  * @link http://coreui.io
  * Copyright (c) 2017 creativeLabs Łukasz Holeczek
  * @license MIT

React_Starter/src/components/Footer/Footer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 
 class Footer extends Component {
   render() {

React_Starter/src/components/Header/Header.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {
   Nav,
   NavItem,
@@ -42,7 +42,7 @@ class Header extends Component {
           <span className="navbar-toggler-icon"></span>
         </NavbarToggler>
       </header>
-    )
+    );
   }
 }
 

React_Starter/src/components/Sidebar/Sidebar.js

@@ -46,30 +46,41 @@ class Sidebar extends Component {
 
     // nav list section title
     const title =  (title, key) => {
-      const classes = classNames( "nav-title", title.class);
+      const classes = classNames( 'nav-title', title.class);
       return (<li key={key} className={ classes }>{wrapper(title)} </li>);
     };
 
     // nav list divider
-    const divider = (divider, key) => (<li key={key} className="divider"></li>);
+    const divider = (divider, key) => {
+      const classes = classNames( 'divider', divider.class);
+      return (<li key={key} className={ classes }></li>);
+    };
 
     // nav item with nav link
     const navItem = (item, key) => {
-      const classes = classNames( item.class );
+      const classes = {
-      const isExternal = (url) => {
+        item: classNames( item.class) ,
-        return url.substring(0, 4) === 'http' ? true : false
+        link: classNames( 'nav-link', item.variant ? `nav-link-${item.variant}` : ''),
-      }
+        icon: classNames( item.icon )
-      const variant = classNames( "nav-link", item.variant ? `nav-link-${item.variant}` : "");
+      };
       return (
-        <NavItem key={key} className={classes}>
+        navLink(item, key, classes)
-          { isExternal(item.url) ?
+      )
-              <RsNavLink href={item.url} className={variant} active>
+    };
-                <i className={item.icon}></i>{item.name}{badge(item.badge)}
+
-              </RsNavLink>
+    // nav link
+    const navLink = (item, key, classes) => {
+      const url = item.url ? item.url : '';
+      return (
+        <NavItem key={key} className={classes.item}>
+          { isExternal(url) ?
+            <RsNavLink href={url} className={classes.link} active>
+              <i className={classes.icon}></i>{item.name}{badge(item.badge)}
+            </RsNavLink>
             :
-              <NavLink to={item.url} className={variant} activeClassName="active">
+            <NavLink to={url} className={classes.link} activeClassName="active">
-                <i className={item.icon}></i>{item.name}{badge(item.badge)}
+              <i className={classes.icon}></i>{item.name}{badge(item.badge)}
-              </NavLink>
+            </NavLink>
           }
         </NavItem>
       )
@@ -86,8 +97,8 @@ class Sidebar extends Component {
         </li>)
     };
 
-    // nav link
+    // nav type
-    const navLink = (item, idx) =>
+    const navType = (item, idx) =>
       item.title ? title(item, idx) :
       item.divider ? divider(item, idx) :
       item.children ? navDropdown(item, idx)
@@ -95,7 +106,12 @@ class Sidebar extends Component {
 
     // nav list
     const navList = (items) => {
-      return items.map( (item, index) => navLink(item, index) );
+      return items.map( (item, index) => navType(item, index) );
+    };
+
+    const isExternal = (url) => {
+      const link = url ? url.substring(0, 4) : '';
+      return link === 'http';
     };
 
     // sidebar-nav root

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Open Source React Admin Template",
   "main": "",
   "homepage": "http://coreui.io/react/",