Merge branch 'reactbits-fix-circular-dependency'

2019-03-25 15:45:31 +01:00 · 2019-03-25 15:45:31 +01:00 · e5d84e0fc7
commit e5d84e0fc7
parent 1ab13261d7 0576d1852c
6 changed files with 112 additions and 114 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,26 @@
 ## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog

+##### `v2.1.6`
+- fix(App): remove redundant react-loadable - thanks @sergeyt
+- fix(routes) remove circular dependency - thanks @sergeyt
+- refactor(App): change to render in Route
+- fix(routes): add Home to routes - breadcrumb issue
+- refactor(DefaultHeader): move to ReactRouter `NavLink`
+- refactor(Forms): move to `InputGroupButtonDropdown` where applicable 
+
+###### dependencies update
+- update: `@coreui/coreui` to `^2.1.9`
+- update: `@coreui/react` to `~2.1.5`
+- update: `chart.js` to `^2.8.0`
+- update: `enzyme-adapter-react-16` to `^1.11.2`
+- update: `react` to `^16.8.5`
+- update: `react-app-polyfill` to `^0.2.2`
+- update: `react-dom` to `^16.8.5`
+- update: `react-router-config` to `^4.4.0-beta.8`
+- update: `react-router-dom` to `~4.3.1`
+- update: `react-test-renderer` to `^16.8.5`
+- update: `react-scripts` to `^2.1.8`
+
 ##### `v2.1.5`
 - fix: iOS 9 Safari sidebar toggle force issue `@coreui/react@2.1.5`

--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.1.5",
+  "version": "2.1.6",
  "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
  "author": "Łukasz Holeczek",
  "homepage": "https://coreui.io",
@ -12,33 +12,32 @@
    "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
  },
  "dependencies": {
-    "@coreui/coreui": "^2.1.7",
+    "@coreui/coreui": "^2.1.9",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
    "@coreui/icons": "0.3.0",
-    "@coreui/react": "^2.1.5",
+    "@coreui/react": "~2.1.5",
    "bootstrap": "^4.3.1",
-    "chart.js": "^2.7.3",
+    "chart.js": "^2.8.0",
    "classnames": "^2.2.6",
    "core-js": "^2.6.5",
    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.10.0",
+    "enzyme-adapter-react-16": "^1.11.2",
    "flag-icon-css": "^3.3.0",
    "font-awesome": "^4.7.0",
    "node-sass": "^4.11.0",
    "prop-types": "^15.7.2",
-    "react": "^16.8.4",
-    "react-app-polyfill": "^0.2.1",
+    "react": "^16.8.5",
+    "react-app-polyfill": "^0.2.2",
    "react-chartjs-2": "^2.7.4",
-    "react-dom": "^16.8.4",
-    "react-loadable": "^5.5.0",
-    "react-router-config": "^4.4.0-beta.6",
-    "react-router-dom": "^4.3.1",
-    "react-test-renderer": "^16.8.4",
+    "react-dom": "^16.8.5",
+    "react-router-config": "^4.4.0-beta.8",
+    "react-router-dom": "~4.3.1",
+    "react-test-renderer": "^16.8.5",
    "reactstrap": "^7.1.0",
    "simple-line-icons": "^2.4.1"
  },
  "devDependencies": {
-    "react-scripts": "2.1.5"
+    "react-scripts": "^2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
--- a/src/App.js
+++ b/src/App.js
@ -1,50 +1,33 @@
 import React, { Component } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 // import { renderRoutes } from 'react-router-config';
-import Loadable from 'react-loadable';
 import './App.scss';

 const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;

 // Containers
-const DefaultLayout = Loadable({
-  loader: () => import('./containers/DefaultLayout'),
-  loading
-});
+const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout'));

 // Pages
-const Login = Loadable({
-  loader: () => import('./views/Pages/Login'),
-  loading
-});
-
-const Register = Loadable({
-  loader: () => import('./views/Pages/Register'),
-  loading
-});
-
-const Page404 = Loadable({
-  loader: () => import('./views/Pages/Page404'),
-  loading
-});
-
-const Page500 = Loadable({
-  loader: () => import('./views/Pages/Page500'),
-  loading
-});
+const Login = React.lazy(() => import('./views/Pages/Login'));
+const Register = React.lazy(() => import('./views/Pages/Register'));
+const Page404 = React.lazy(() => import('./views/Pages/Page404'));
+const Page500 = React.lazy(() => import('./views/Pages/Page500'));

 class App extends Component {

  render() {
    return (
      <HashRouter>
-          <Switch>
-            <Route exact path="/login" name="Login Page" component={Login} />
-            <Route exact path="/register" name="Register Page" component={Register} />
-            <Route exact path="/404" name="Page 404" component={Page404} />
-            <Route exact path="/500" name="Page 500" component={Page500} />
-            <Route path="/" name="Home" component={DefaultLayout} />
-          </Switch>
+          <React.Suspense fallback={loading()}>
+            <Switch>
+              <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
+              <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
+              <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
+              <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
+              <Route path="/" name="Home" render={props => <DefaultLayout {...props}/>} />
+            </Switch>
+          </React.Suspense>
      </HashRouter>
    );
  }
--- a/src/containers/DefaultLayout/DefaultHeader.js
+++ b/src/containers/DefaultLayout/DefaultHeader.js
@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import { Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap';
+import { Link, NavLink } from 'react-router-dom';
+import { Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap';
 import PropTypes from 'prop-types';

 import { AppAsideToggler, AppHeaderDropdown, AppNavbarBrand, AppSidebarToggler } from '@coreui/react';
@ -30,24 +30,24 @@ class DefaultHeader extends Component {

        <Nav className="d-md-down-none" navbar>
          <NavItem className="px-3">
-            <Link to="/" className="nav-link" >Dashboard</Link>
+            <NavLink to="/dashboard" className="nav-link" >Dashboard</NavLink>
          </NavItem>
          <NavItem className="px-3">
-            <Link to="/users">Users</Link>
+            <Link to="/users" className="nav-link">Users</Link>
          </NavItem>
          <NavItem className="px-3">
-            <NavLink href="#">Settings</NavLink>
+            <NavLink to="#" className="nav-link">Settings</NavLink>
          </NavItem>
        </Nav>
        <Nav className="ml-auto" navbar>
          <NavItem className="d-md-down-none">
-            <NavLink href="#"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
+            <NavLink to="#" className="nav-link"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
          </NavItem>
          <NavItem className="d-md-down-none">
-            <NavLink href="#"><i className="icon-list"></i></NavLink>
+            <NavLink to="#" className="nav-link"><i className="icon-list"></i></NavLink>
          </NavItem>
          <NavItem className="d-md-down-none">
-            <NavLink href="#"><i className="icon-location-pin"></i></NavLink>
+            <NavLink to="#" className="nav-link"><i className="icon-location-pin"></i></NavLink>
          </NavItem>
          <AppHeaderDropdown direction="down">
            <DropdownToggle nav>
--- a/src/routes.js
+++ b/src/routes.js
@ -1,5 +1,4 @@
 import React from 'react';
-import DefaultLayout from './containers/DefaultLayout';

 const Breadcrumbs = React.lazy(() => import('./views/Base/Breadcrumbs'));
 const Cards = React.lazy(() => import('./views/Base/Cards'));
@ -39,7 +38,7 @@ const User = React.lazy(() => import('./views/Users/User'));

 // https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
 const routes = [
-  { path: '/', exact: true, name: 'Home', component: DefaultLayout },
+  { path: '/', exact: true, name: 'Home' },
  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
  { path: '/theme', exact: true, name: 'Theme', component: Colors },
  { path: '/theme/colors', name: 'Colors', component: Colors },
--- a/src/views/Base/Forms/Forms.js
+++ b/src/views/Base/Forms/Forms.js
@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import {
  Badge,
  Button,
-  ButtonDropdown,
  Card,
  CardBody,
  CardFooter,
@ -20,6 +19,7 @@ import {
  Input,
  InputGroup,
  InputGroupAddon,
+  InputGroupButtonDropdown,
  InputGroupText,
  Label,
  Row,
@ -739,21 +739,20 @@ class Forms extends Component {
                  <FormGroup row>
                    <Col md="12">
                      <InputGroup>
-                        <InputGroupAddon addonType="prepend">
-                          <ButtonDropdown isOpen={this.state.first}
-                                          toggle={() => { this.setState({ first: !this.state.first }); }}>
-                            <DropdownToggle caret color="primary">
-                              Dropdown
-                            </DropdownToggle>
-                            <DropdownMenu className={this.state.first ? 'show' : ''}>
-                              <DropdownItem>Action</DropdownItem>
-                              <DropdownItem>Another Action</DropdownItem>
-                              <DropdownItem>Something else here</DropdownItem>
-                              <DropdownItem divider />
-                              <DropdownItem>Separated link</DropdownItem>
-                            </DropdownMenu>
-                          </ButtonDropdown>
-                        </InputGroupAddon>
+                        <InputGroupButtonDropdown addonType="prepend"
+                                                  isOpen={this.state.first}
+                                                  toggle={() => { this.setState({ first: !this.state.first }); }}>
+                          <DropdownToggle caret color="primary">
+                            Dropdown
+                          </DropdownToggle>
+                          <DropdownMenu className={this.state.first ? 'show' : ''}>
+                            <DropdownItem>Action</DropdownItem>
+                            <DropdownItem>Another Action</DropdownItem>
+                            <DropdownItem>Something else here</DropdownItem>
+                            <DropdownItem divider />
+                            <DropdownItem>Separated link</DropdownItem>
+                          </DropdownMenu>
+                        </InputGroupButtonDropdown>
                        <Input type="text" id="input1-group3" name="input1-group3" placeholder="Username" />
                      </InputGroup>
                    </Col>
@ -762,57 +761,54 @@ class Forms extends Component {
                    <Col md="12">
                      <InputGroup>
                        <Input type="email" id="input2-group3" name="input2-group3" placeholder="Email" />
-                        <InputGroupAddon addonType="append">
-                          <ButtonDropdown isOpen={this.state.second}
-                                          toggle={() => { this.setState({ second: !this.state.second }); }}>
-                            <DropdownToggle caret color="primary">
-                              Dropdown
-                            </DropdownToggle>
-                            <DropdownMenu className={this.state.second ? 'show' : ''}>
-                              <DropdownItem>Action</DropdownItem>
-                              <DropdownItem>Another Action</DropdownItem>
-                              <DropdownItem>Something else here</DropdownItem>
-                              <DropdownItem divider />
-                              <DropdownItem>Separated link</DropdownItem>
-                            </DropdownMenu>
-                          </ButtonDropdown>
-                        </InputGroupAddon>
+                        <InputGroupButtonDropdown addonType="append"
+                                                  isOpen={this.state.second}
+                                                  toggle={() => { this.setState({ second: !this.state.second }); }}>
+                          <DropdownToggle caret color="primary">
+                            Dropdown
+                          </DropdownToggle>
+                          <DropdownMenu className={this.state.second ? 'show' : ''}>
+                            <DropdownItem>Action</DropdownItem>
+                            <DropdownItem>Another Action</DropdownItem>
+                            <DropdownItem>Something else here</DropdownItem>
+                            <DropdownItem divider />
+                            <DropdownItem>Separated link</DropdownItem>
+                          </DropdownMenu>
+                        </InputGroupButtonDropdown>
                      </InputGroup>
                    </Col>
                  </FormGroup>
                  <FormGroup row>
                    <Col md="12">
                      <InputGroup>
-                        <InputGroupAddon addonType="prepend">
-                          <ButtonDropdown isOpen={this.state.third}
-                                          toggle={() => { this.setState({ third: !this.state.third }); }}>
-                            {/*<Button id="caret" color="primary">Action</Button>*/}
-                            <DropdownToggle caret color="primary">Action</DropdownToggle>
-                            <DropdownMenu className={this.state.third ? 'show' : ''}>
-                              <DropdownItem>Action</DropdownItem>
-                              <DropdownItem>Another Action</DropdownItem>
-                              <DropdownItem>Something else here</DropdownItem>
-                              <DropdownItem divider />
-                              <DropdownItem>Separated link</DropdownItem>
-                            </DropdownMenu>
-                          </ButtonDropdown>
-                        </InputGroupAddon>
+                        <InputGroupButtonDropdown
+                          addonType="prepend"
+                          isOpen={this.state.third}
+                          toggle={() => { this.setState({ third: !this.state.third }); }}>
+                          <DropdownToggle caret color="primary">Action</DropdownToggle>
+                          <DropdownMenu className={this.state.third ? 'show' : ''}>
+                            <DropdownItem>Action</DropdownItem>
+                            <DropdownItem>Another Action</DropdownItem>
+                            <DropdownItem>Something else here</DropdownItem>
+                            <DropdownItem divider />
+                            <DropdownItem>Separated link</DropdownItem>
+                          </DropdownMenu>
+                        </InputGroupButtonDropdown>
                        <Input type="text" id="input3-group3" name="input3-group3" placeholder=".." />
-                        <InputGroupAddon addonType="append">
-                          <ButtonDropdown isOpen={this.state.fourth}
-                                          toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
-                            <DropdownToggle caret color="primary">
-                              Dropdown
-                            </DropdownToggle>
-                            <DropdownMenu className={this.state.fourth ? 'show' : ''}>
-                              <DropdownItem>Action</DropdownItem>
-                              <DropdownItem>Another Action</DropdownItem>
-                              <DropdownItem>Something else here</DropdownItem>
-                              <DropdownItem divider />
-                              <DropdownItem>Separated link</DropdownItem>
-                            </DropdownMenu>
-                          </ButtonDropdown>
-                        </InputGroupAddon>
+                        <InputGroupButtonDropdown  addonType="append"
+                                                   isOpen={this.state.fourth}
+                                                   toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
+                          <DropdownToggle caret color="primary">
+                            Dropdown
+                          </DropdownToggle>
+                          <DropdownMenu className={this.state.fourth ? 'show' : ''}>
+                            <DropdownItem>Action</DropdownItem>
+                            <DropdownItem>Another Action</DropdownItem>
+                            <DropdownItem>Something else here</DropdownItem>
+                            <DropdownItem divider />
+                            <DropdownItem>Separated link</DropdownItem>
+                          </DropdownMenu>
+                        </InputGroupButtonDropdown>
                      </InputGroup>
                    </Col>
                  </FormGroup>