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
2017-11-21 13:05:10 +01:00 · 2017-11-21 13:05:10 +01:00 · 9e3b0394e2
commit 9e3b0394e2
parent e8b83efddf
13 changed files with 168 additions and 114 deletions
--- a/CHANGELOG.md
+++ b/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`

--- a/React_Full_Project/package.json
+++ b/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-loader": "^7.1.2",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "copy-webpack-plugin": "^4.1.1",
-    "css-hot-loader": "^1.3.2",
-    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.1",
-    "file-loader": "^1.1.5",
-    "html-loader": "^0.5.1",
-    "html-webpack-plugin": "^2.30.1",
-    "node-sass": "^4.5.3",
-    "rimraf": "^2.6.2",
-    "sass-loader": "^6.0.6",
-    "source-list-map": "^2.0.0",
-    "style-loader": "^0.19.0",
-    "uglify-js": "^3.1.4",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.7.1",
-    "webpack-dev-server": "^2.9.2"
+    "babel-core": "6.26.0",
+    "babel-loader": "7.1.2",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
+    "babel-preset-env": "1.6.1",
+    "babel-preset-react": "6.24.1",
+    "copy-webpack-plugin": "4.2.1",
+    "css-hot-loader": "1.3.3",
+    "css-loader": "0.28.7",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.5",
+    "html-loader": "0.5.1",
+    "html-webpack-plugin": "2.30.1",
+    "node-sass": "4.7.1",
+    "rimraf": "2.6.2",
+    "sass-loader": "6.0.6",
+    "source-list-map": "2.0.0",
+    "style-loader": "0.19.0",
+    "uglify-js": "3.1.10",
+    "url-loader": "0.6.2",
+    "webpack": "3.8.1",
+    "webpack-dev-server": "2.9.4"
  },
  "dependencies": {
    "bootstrap": "4.0.0-beta.2",
-    "chart.js": "2.7.0",
-    "font-awesome": "^4.7.0",
+    "chart.js": "2.7.1",
+    "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-router-dom": "^4.2.2",
-    "react-transition-group": "^2.2.1",
-    "reactstrap": "^5.0.0-alpha.3",
-    "simple-line-icons": "^2.4.1"
+    "react-dom": "16.1.1",
+    "react-router-dom": "4.2.2",
+    "react-transition-group": "2.2.1",
+    "reactstrap": "5.0.0-alpha.4",
+    "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"
  }
 }
--- a/React_Full_Project/scss/style.scss
+++ b/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
--- a/React_Full_Project/src/components/Header/HeaderDropdown.js
+++ b/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>
    );
  }

--- a/React_Full_Project/src/components/Sidebar/Sidebar.js
+++ b/React_Full_Project/src/components/Sidebar/Sidebar.js
@ -46,29 +46,40 @@ 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 isExternal = (url) => {
-        return url.substring(0, 4) === 'http' ? true : false
-      }
-      const variant = classNames( "nav-link", item.variant ? `nav-link-${item.variant}` : "");
+      const classes = {
+        item: classNames( item.class) ,
+        link: classNames( 'nav-link', item.variant ? `nav-link-${item.variant}` : ''),
+        icon: classNames( item.icon )
+      };
      return (
-        <NavItem key={key} className={classes}>
-          { isExternal(item.url) ?
-              <RsNavLink href={item.url} className={variant} active>
-                <i className={item.icon}></i>{item.name}{badge(item.badge)}
+        navLink(item, key, classes)
+      )
+    };
+
+    // 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">
-                <i className={item.icon}></i>{item.name}{badge(item.badge)}
+            <NavLink to={url} className={classes.link} activeClassName="active">
+              <i className={classes.icon}></i>{item.name}{badge(item.badge)}
            </NavLink>
          }
        </NavItem>
@ -86,8 +97,8 @@ class Sidebar extends Component {
        </li>)
    };

-    // nav link
-    const navLink = (item, idx) =>
+    // nav type
+    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
--- a/React_Full_Project/src/views/Components/Forms/Forms.js
+++ b/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"
-                             placeholder=".form-control-sm"/>
+                      <Input bsSize="sm" type="text" id="input-small" name="input-small" className="input-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"
-                             placeholder=".form-control-lg"/>
+                      <Input bsSize="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg"/>
                    </Col>
                  </FormGroup>
                </Form>
--- a/React_Full_Project/src/views/Components/Switches/Switches.js
+++ b/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() {
--- a/React_Starter/package.json
+++ b/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-loader": "^7.1.2",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "copy-webpack-plugin": "^4.1.1",
-    "css-hot-loader": "^1.3.2",
-    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.1",
-    "file-loader": "^1.1.5",
-    "html-loader": "^0.5.1",
-    "html-webpack-plugin": "^2.30.1",
-    "node-sass": "^4.5.3",
-    "rimraf": "^2.6.2",
-    "sass-loader": "^6.0.6",
-    "source-list-map": "^2.0.0",
-    "style-loader": "^0.19.0",
-    "uglify-js": "^3.1.4",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.7.1",
-    "webpack-dev-server": "^2.9.2"
+    "babel-core": "6.26.0",
+    "babel-loader": "7.1.2",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
+    "babel-preset-env": "1.6.1",
+    "babel-preset-react": "6.24.1",
+    "copy-webpack-plugin": "4.2.1",
+    "css-hot-loader": "1.3.3",
+    "css-loader": "0.28.7",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "1.1.5",
+    "html-loader": "0.5.1",
+    "html-webpack-plugin": "2.30.1",
+    "node-sass": "4.7.1",
+    "rimraf": "2.6.2",
+    "sass-loader": "6.0.6",
+    "source-list-map": "2.0.0",
+    "style-loader": "0.19.0",
+    "uglify-js": "3.1.10",
+    "url-loader": "0.6.2",
+    "webpack": "3.8.1",
+    "webpack-dev-server": "2.9.4"
  },
  "dependencies": {
    "bootstrap": "4.0.0-beta.2",
-    "chart.js": "2.7.0",
-    "font-awesome": "^4.7.0",
+    "chart.js": "2.7.1",
+    "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-router-dom": "^4.2.2",
-    "react-transition-group": "^2.2.1",
-    "reactstrap": "^5.0.0-alpha.3",
-    "simple-line-icons": "^2.4.1"
+    "react-dom": "16.1.1",
+    "react-router-dom": "4.2.2",
+    "react-transition-group": "2.2.1",
+    "reactstrap": "5.0.0-alpha.4",
+    "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"
  }
 }
--- a/React_Starter/scss/style.scss
+++ b/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
--- a/React_Starter/src/components/Footer/Footer.js
+++ b/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() {
--- a/React_Starter/src/components/Header/Header.js
+++ b/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>
-    )
+    );
  }
 }

--- a/React_Starter/src/components/Sidebar/Sidebar.js
+++ b/React_Starter/src/components/Sidebar/Sidebar.js
@ -46,29 +46,40 @@ 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 isExternal = (url) => {
-        return url.substring(0, 4) === 'http' ? true : false
-      }
-      const variant = classNames( "nav-link", item.variant ? `nav-link-${item.variant}` : "");
+      const classes = {
+        item: classNames( item.class) ,
+        link: classNames( 'nav-link', item.variant ? `nav-link-${item.variant}` : ''),
+        icon: classNames( item.icon )
+      };
      return (
-        <NavItem key={key} className={classes}>
-          { isExternal(item.url) ?
-              <RsNavLink href={item.url} className={variant} active>
-                <i className={item.icon}></i>{item.name}{badge(item.badge)}
+        navLink(item, key, classes)
+      )
+    };
+
+    // 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">
-                <i className={item.icon}></i>{item.name}{badge(item.badge)}
+            <NavLink to={url} className={classes.link} activeClassName="active">
+              <i className={classes.icon}></i>{item.name}{badge(item.badge)}
            </NavLink>
          }
        </NavItem>
@ -86,8 +97,8 @@ class Sidebar extends Component {
        </li>)
    };

-    // nav link
-    const navLink = (item, idx) =>
+    // nav type
+    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
--- a/package.json
+++ b/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/",