gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'reactbits-fix-circular-dependency'

Browse Source
This commit is contained in:
xidedix 2019-03-25 15:45:31 +01:00
commit e5d84e0fc7
6 changed files with 112 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
CHANGELOG.md
View File

@ -1,5 +1,26 @@
## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog ## [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` ##### `v2.1.5`
- fix: iOS 9 Safari sidebar toggle force issue `@coreui/react@2.1.5` - fix: iOS 9 Safari sidebar toggle force issue `@coreui/react@2.1.5`

25
package.json
View File

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

45
src/App.js
View File

@ -1,50 +1,33 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom'; import { HashRouter, Route, Switch } from 'react-router-dom';
// import { renderRoutes } from 'react-router-config'; // import { renderRoutes } from 'react-router-config';
import Loadable from 'react-loadable';
import './App.scss'; import './App.scss';
const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>; const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
// Containers // Containers
const DefaultLayout = Loadable({ const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout'));
loader: () => import('./containers/DefaultLayout'),
loading
});
// Pages // Pages
const Login = Loadable({ const Login = React.lazy(() => import('./views/Pages/Login'));
loader: () => import('./views/Pages/Login'), const Register = React.lazy(() => import('./views/Pages/Register'));
loading const Page404 = React.lazy(() => import('./views/Pages/Page404'));
}); const Page500 = React.lazy(() => import('./views/Pages/Page500'));
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
});
class App extends Component { class App extends Component {
render() { render() {
return ( return (
<HashRouter> <HashRouter>
<Switch> <React.Suspense fallback={loading()}>
<Route exact path="/login" name="Login Page" component={Login} /> <Switch>
<Route exact path="/register" name="Register Page" component={Register} /> <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
<Route exact path="/404" name="Page 404" component={Page404} /> <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
<Route exact path="/500" name="Page 500" component={Page500} /> <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
<Route path="/" name="Home" component={DefaultLayout} /> <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
</Switch> <Route path="/" name="Home" render={props => <DefaultLayout {...props}/>} />
</Switch>
</React.Suspense>
</HashRouter> </HashRouter>
); );
} }

16
src/containers/DefaultLayout/DefaultHeader.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom'; import { Link, NavLink } from 'react-router-dom';
import { Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap'; import { Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { AppAsideToggler, AppHeaderDropdown, AppNavbarBrand, AppSidebarToggler } from '@coreui/react'; import { AppAsideToggler, AppHeaderDropdown, AppNavbarBrand, AppSidebarToggler } from '@coreui/react';
@ -30,24 +30,24 @@ class DefaultHeader extends Component {
<Nav className="d-md-down-none" navbar> <Nav className="d-md-down-none" navbar>
<NavItem className="px-3"> <NavItem className="px-3">
<Link to="/" className="nav-link" >Dashboard</Link> <NavLink to="/dashboard" className="nav-link" >Dashboard</NavLink>
</NavItem> </NavItem>
<NavItem className="px-3"> <NavItem className="px-3">
<Link to="/users">Users</Link> <Link to="/users" className="nav-link">Users</Link>
</NavItem> </NavItem>
<NavItem className="px-3"> <NavItem className="px-3">
<NavLink href="#">Settings</NavLink> <NavLink to="#" className="nav-link">Settings</NavLink>
</NavItem> </NavItem>
</Nav> </Nav>
<Nav className="ml-auto" navbar> <Nav className="ml-auto" navbar>
<NavItem className="d-md-down-none"> <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>
<NavItem className="d-md-down-none"> <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>
<NavItem className="d-md-down-none"> <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> </NavItem>
<AppHeaderDropdown direction="down"> <AppHeaderDropdown direction="down">
<DropdownToggle nav> <DropdownToggle nav>

3
src/routes.js
View File

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import DefaultLayout from './containers/DefaultLayout';
const Breadcrumbs = React.lazy(() => import('./views/Base/Breadcrumbs')); const Breadcrumbs = React.lazy(() => import('./views/Base/Breadcrumbs'));
const Cards = React.lazy(() => import('./views/Base/Cards')); 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 // https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
const routes = [ const routes = [
{ path: '/', exact: true, name: 'Home', component: DefaultLayout }, { path: '/', exact: true, name: 'Home' },
{ path: '/dashboard', name: 'Dashboard', component: Dashboard }, { path: '/dashboard', name: 'Dashboard', component: Dashboard },
{ path: '/theme', exact: true, name: 'Theme', component: Colors }, { path: '/theme', exact: true, name: 'Theme', component: Colors },
{ path: '/theme/colors', name: 'Colors', component: Colors }, { path: '/theme/colors', name: 'Colors', component: Colors },

116
src/views/Base/Forms/Forms.js
View File

@ -2,7 +2,6 @@ import React, { Component } from 'react';
import { import {
Badge, Badge,
Button, Button,
ButtonDropdown,
Card, Card,
CardBody, CardBody,
CardFooter, CardFooter,
@ -20,6 +19,7 @@ import {
Input, Input,
InputGroup, InputGroup,
InputGroupAddon, InputGroupAddon,
InputGroupButtonDropdown,
InputGroupText, InputGroupText,
Label, Label,
Row, Row,
@ -739,21 +739,20 @@ class Forms extends Component {
<FormGroup row> <FormGroup row>
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<InputGroupAddon addonType="prepend"> <InputGroupButtonDropdown addonType="prepend"
<ButtonDropdown isOpen={this.state.first} isOpen={this.state.first}
toggle={() => { this.setState({ first: !this.state.first }); }}> toggle={() => { this.setState({ first: !this.state.first }); }}>
<DropdownToggle caret color="primary"> <DropdownToggle caret color="primary">
Dropdown Dropdown
</DropdownToggle> </DropdownToggle>
<DropdownMenu className={this.state.first ? 'show' : ''}> <DropdownMenu className={this.state.first ? 'show' : ''}>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem> <DropdownItem>Something else here</DropdownItem>
<DropdownItem divider /> <DropdownItem divider />
<DropdownItem>Separated link</DropdownItem> <DropdownItem>Separated link</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </InputGroupButtonDropdown>
</InputGroupAddon>
<Input type="text" id="input1-group3" name="input1-group3" placeholder="Username" /> <Input type="text" id="input1-group3" name="input1-group3" placeholder="Username" />
</InputGroup> </InputGroup>
</Col> </Col>
@ -762,57 +761,54 @@ class Forms extends Component {
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<Input type="email" id="input2-group3" name="input2-group3" placeholder="Email" /> <Input type="email" id="input2-group3" name="input2-group3" placeholder="Email" />
<InputGroupAddon addonType="append"> <InputGroupButtonDropdown addonType="append"
<ButtonDropdown isOpen={this.state.second} isOpen={this.state.second}
toggle={() => { this.setState({ second: !this.state.second }); }}> toggle={() => { this.setState({ second: !this.state.second }); }}>
<DropdownToggle caret color="primary"> <DropdownToggle caret color="primary">
Dropdown Dropdown
</DropdownToggle> </DropdownToggle>
<DropdownMenu className={this.state.second ? 'show' : ''}> <DropdownMenu className={this.state.second ? 'show' : ''}>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem> <DropdownItem>Something else here</DropdownItem>
<DropdownItem divider /> <DropdownItem divider />
<DropdownItem>Separated link</DropdownItem> <DropdownItem>Separated link</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </InputGroupButtonDropdown>
</InputGroupAddon>
</InputGroup> </InputGroup>
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<InputGroupAddon addonType="prepend"> <InputGroupButtonDropdown
<ButtonDropdown isOpen={this.state.third} addonType="prepend"
toggle={() => { this.setState({ third: !this.state.third }); }}> isOpen={this.state.third}
{/*<Button id="caret" color="primary">Action</Button>*/} toggle={() => { this.setState({ third: !this.state.third }); }}>
<DropdownToggle caret color="primary">Action</DropdownToggle> <DropdownToggle caret color="primary">Action</DropdownToggle>
<DropdownMenu className={this.state.third ? 'show' : ''}> <DropdownMenu className={this.state.third ? 'show' : ''}>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem> <DropdownItem>Something else here</DropdownItem>
<DropdownItem divider /> <DropdownItem divider />
<DropdownItem>Separated link</DropdownItem> <DropdownItem>Separated link</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </InputGroupButtonDropdown>
</InputGroupAddon>
<Input type="text" id="input3-group3" name="input3-group3" placeholder=".." /> <Input type="text" id="input3-group3" name="input3-group3" placeholder=".." />
<InputGroupAddon addonType="append"> <InputGroupButtonDropdown addonType="append"
<ButtonDropdown isOpen={this.state.fourth} isOpen={this.state.fourth}
toggle={() => { this.setState({ fourth: !this.state.fourth }); }}> toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
<DropdownToggle caret color="primary"> <DropdownToggle caret color="primary">
Dropdown Dropdown
</DropdownToggle> </DropdownToggle>
<DropdownMenu className={this.state.fourth ? 'show' : ''}> <DropdownMenu className={this.state.fourth ? 'show' : ''}>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem> <DropdownItem>Something else here</DropdownItem>
<DropdownItem divider /> <DropdownItem divider />
<DropdownItem>Separated link</DropdownItem> <DropdownItem>Separated link</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </InputGroupButtonDropdown>
</InputGroupAddon>
</InputGroup> </InputGroup>
</Col> </Col>
</FormGroup> </FormGroup>