v1.0.8

CHANGELOG.md

@@ -1,5 +1,17 @@
 ## [react](./REACT.md) version `changelog`
 
+###### `v1.0.8`
+- refactor: Dashboard radio buttons, new `onRadioBtnClick()` method
+- update: react to `16.2.0`
+- update: Bootstrap `4.0.0-beta.3`
+- update: dependencies
+- feature: some Bootstrap4 components added
+- fix: rollback to webpack-dev-server `2.9.7`
+- temp tweaks(b4 beta3): `InputGroupAddon` and `InputGroupButton` 
+- refactor(checkboxes, radios): temp tweaks 
+- feat: mobile sidebar link click closes the sidebar
+- fix: .nav-tabs .nav-link `cursor: pointer`
+
 ###### `v1.0.6`
 
 - update: react to `^16.1.1`

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017 creativeLabs Łukasz Holeczek.
+Copyright (c) 2018 creativeLabs Łukasz Holeczek.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

React_Full_Project/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -13,44 +13,45 @@
     "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",
+    "copy-webpack-plugin": "4.3.1",
+    "css-hot-loader": "1.3.5",
+    "css-loader": "0.28.8",
     "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.5",
-    "html-loader": "0.5.1",
+    "file-loader": "1.1.6",
+    "html-loader": "0.5.4",
     "html-webpack-plugin": "2.30.1",
-    "node-sass": "4.7.1",
+    "node-sass": "4.7.2",
     "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",
+    "style-loader": "0.19.1",
+    "uglify-js": "3.3.7",
     "url-loader": "0.6.2",
-    "webpack": "3.8.1",
-    "webpack-dev-server": "2.9.4"
+    "webpack": "3.10.0",
+    "webpack-dev-server": "2.9.7"
   },
   "dependencies": {
-    "bootstrap": "4.0.0-beta.2",
+    "bootstrap": "4.0.0-beta.3",
     "chart.js": "2.7.1",
+    "flag-icon-css": "2.9.0",
     "font-awesome": "4.7.0",
     "history": "4.7.2",
-    "react": "16.1.1",
-    "react-chartjs-2": "2.6.4",
-    "react-dom": "16.1.1",
+    "react": "16.2.0",
+    "react-chartjs-2": "2.7.0",
+    "react-dom": "16.2.0",
     "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",
-    "start": "webpack-dev-server --progress --colors --inline --env.dev",
+    "start": "webpack-dev-server --progress --color --inline --env.dev",
     "build": "webpack -p --progress --env.prod",
     "clean": "rimraf ./build"
   },
   "engines": {
-    "node": ">= 6.4.0",
-    "npm": ">= 5.0.0"
+    "node": ">= 6.12.3",
+    "npm": ">= 5.6.0"
   }
 }

React_Full_Project/scss/_bootstrap-variables.scss

@@ -51,7 +51,28 @@ $theme-colors: (
   warning:                        $yellow,
   danger:                         $red,
   light:                          $gray-100,
-  dark:                           $gray-800
+  dark:                           $gray-800,
+
+  blue:                           $blue,
+  indigo:                         $indigo,
+  purple:                         $purple,
+  pink:                           $pink,
+  red:                            $red,
+  orange:                         $orange,
+  yellow:                         $yellow,
+  green:                          $green,
+  teal:                           $teal,
+  cyan:                           $cyan,
+
+  gray-100:                       $gray-100,
+  gray-200:                       $gray-200,
+  gray-300:                       $gray-300,
+  gray-400:                       $gray-400,
+  gray-500:                       $gray-500,
+  gray-600:                       $gray-600,
+  gray-700:                       $gray-700,
+  gray-800:                       $gray-800,
+  gray-900:                       $gray-900
 );
 
 // Options

React_Full_Project/scss/core/_buttons.scss

@@ -2,15 +2,6 @@ button {
   cursor: pointer;
 }
 
-.btn {
-  .badge {
-    position: absolute;
-    top: 2px;
-    right: 6px;
-    font-size: 9px;
-  }
-}
-
 .btn-transparent {
   color: #fff;
   background-color: transparent;

React_Full_Project/scss/core/_layout.scss

@@ -129,6 +129,9 @@ app-root {
         }
       }
     }
+    .sidebar-minimizer {
+      display: none;
+    }
   }
 
   .sidebar-minimized {

React_Full_Project/scss/core/_nav.scss

@@ -1,6 +1,9 @@
 .nav-tabs {
   .nav-link {
     color: $gray-600;
+    &:hover {
+      cursor: pointer;
+    }
     &.active {
       color: $gray-800;
       background: #fff;

React_Full_Project/scss/core/_sidebar.scss

@@ -207,7 +207,7 @@
       border-radius: $border-radius;
     }
     > .nav-dropdown-items {
-      max-height: 1000px;
+      max-height: 1500px;
     }
 
     .nav-link {

React_Full_Project/scss/style.scss

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

React_Full_Project/src/components/Footer/Footer.js

@@ -4,7 +4,7 @@ class Footer extends Component {
   render() {
     return (
       <footer className="app-footer">
-        <span><a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs.</span>
+        <span><a href="http://coreui.io">CoreUI</a> &copy; 2018 creativeLabs.</span>
         <span className="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
       </footer>
     )

React_Full_Project/src/components/Sidebar/Sidebar.js

@@ -10,6 +10,15 @@ import SidebarMinimizer from './../SidebarMinimizer';
 
 class Sidebar extends Component {
 
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+    this.activeRoute = this.activeRoute.bind(this);
+    this.hideMobile = this.hideMobile.bind(this);
+  }
+
+
   handleClick(e) {
     e.preventDefault();
     e.target.parentElement.classList.toggle('open');
@@ -21,6 +30,12 @@ class Sidebar extends Component {
 
   }
 
+  hideMobile() {
+    if (document.body.classList.contains('sidebar-mobile-show')) {
+      document.body.classList.toggle('sidebar-mobile-show')
+    }
+  }
+
   // todo Sidebar nav secondLevel
   // secondLevelActive(routeName) {
   //   return this.props.location.pathname.indexOf(routeName) > -1 ? "nav nav-second-level collapse in" : "nav nav-second-level collapse";
@@ -30,8 +45,6 @@ class Sidebar extends Component {
   render() {
 
     const props = this.props;
-    const activeRoute = this.activeRoute;
-    const handleClick = this.handleClick;
 
     // badge addon to NavItem
     const badge = (badge) => {
@@ -78,7 +91,7 @@ class Sidebar extends Component {
               <i className={classes.icon}></i>{item.name}{badge(item.badge)}
             </RsNavLink>
             :
-            <NavLink to={url} className={classes.link} activeClassName="active">
+            <NavLink to={url} className={classes.link} activeClassName="active" onClick={this.hideMobile}>
               <i className={classes.icon}></i>{item.name}{badge(item.badge)}
             </NavLink>
           }
@@ -89,8 +102,8 @@ class Sidebar extends Component {
     // nav dropdown
     const navDropdown = (item, key) => {
       return (
-        <li key={key} className={activeRoute(item.url, props)}>
-          <a className="nav-link nav-dropdown-toggle" href="#" onClick={handleClick.bind(this)}><i className={item.icon}></i>{item.name}</a>
+        <li key={key} className={this.activeRoute(item.url, props)}>
+          <a className="nav-link nav-dropdown-toggle" href="#" onClick={this.handleClick}><i className={item.icon}></i>{item.name}</a>
           <ul className="nav-dropdown-items">
             {navList(item.children)}
           </ul>