From cf816043b4f6d786529efb1a7f0ad41cce144906 Mon Sep 17 00:00:00 2001 From: xidedix Date: Wed, 20 Jun 2018 20:31:08 +0200 Subject: [PATCH 1/3] refactor(Breadcrumb): fix for dynamic url like `/resource/:id` --- CHANGELOG.md | 3 ++ React_Full_Project/package.json | 7 +-- .../src/components/Breadcrumb/Breadcrumb.js | 14 +++++- React_Full_Project/src/index.js | 1 + React_Full_Project/src/polyfill.js | 45 +++++++++++++++++++ React_Starter/package.json | 7 +-- .../src/components/Breadcrumb/Breadcrumb.js | 14 +++++- React_Starter/src/index.js | 1 + React_Starter/src/polyfill.js | 45 +++++++++++++++++++ 9 files changed, 127 insertions(+), 10 deletions(-) create mode 100644 React_Full_Project/src/polyfill.js create mode 100644 React_Starter/src/polyfill.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 5110db2..57709c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ ## [react](./REACT.md) version `changelog` +##### `v1.0.11` +- refactor(Breadcrumb): fix for dynamic url like `/resource/:id` + ##### `v1.0.10` - refactor: `` - refactor: `` diff --git a/React_Full_Project/package.json b/React_Full_Project/package.json index 4f2255e..2f1c5af 100644 --- a/React_Full_Project/package.json +++ b/React_Full_Project/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "1.0.10", + "version": "1.0.11", "description": "Open Source Bootstrap Admin Template", "author": "Łukasz Holeczek", "homepage": "http://coreui.io", @@ -20,7 +20,7 @@ "file-loader": "1.1.6", "html-loader": "0.5.5", "html-webpack-plugin": "2.30.1", - "node-sass": "4.7.2", + "node-sass": "^4.9.0", "rimraf": "2.6.2", "sass-loader": "6.0.6", "source-list-map": "2.0.0", @@ -32,7 +32,8 @@ }, "dependencies": { "bootstrap": "4.0.0", - "chart.js": "2.7.1", + "chart.js": "^2.7.2", + "core-js": "^2.5.7", "flag-icon-css": "2.9.0", "font-awesome": "4.7.0", "history": "4.7.2", diff --git a/React_Full_Project/src/components/Breadcrumb/Breadcrumb.js b/React_Full_Project/src/components/Breadcrumb/Breadcrumb.js index b4f5db9..395b350 100644 --- a/React_Full_Project/src/components/Breadcrumb/Breadcrumb.js +++ b/React_Full_Project/src/components/Breadcrumb/Breadcrumb.js @@ -1,9 +1,19 @@ import React from 'react'; -import {Route, Link} from 'react-router-dom'; +import {Route, Link, matchPath} from 'react-router-dom'; import {Breadcrumb, BreadcrumbItem} from 'reactstrap'; import routes from '../../routes'; -const findRouteName = url => routes[url]; +const findRouteName = (url) => { + let found; + for (let path of Object.entries(routes)) { + found = matchPath(url, {path, exact: true}); + + if (found) { + return routes[found.path[0]]; + } + } + return null; +}; const getPaths = (pathname) => { const paths = ['/']; diff --git a/React_Full_Project/src/index.js b/React_Full_Project/src/index.js index 028bbc7..66baf4d 100644 --- a/React_Full_Project/src/index.js +++ b/React_Full_Project/src/index.js @@ -1,3 +1,4 @@ +import './polyfill' import React from 'react'; import ReactDOM from 'react-dom'; import {HashRouter, Route, Switch} from 'react-router-dom'; diff --git a/React_Full_Project/src/polyfill.js b/React_Full_Project/src/polyfill.js new file mode 100644 index 0000000..330d90a --- /dev/null +++ b/React_Full_Project/src/polyfill.js @@ -0,0 +1,45 @@ +/* +* required polyfills +*/ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol' +import 'core-js/es6/object' +// import 'core-js/es6/function' +// import 'core-js/es6/parse-int' +// import 'core-js/es6/parse-float' +// import 'core-js/es6/number' +// import 'core-js/es6/math' +// import 'core-js/es6/string' +// import 'core-js/es6/date' +import 'core-js/es6/array' +// import 'core-js/es6/regexp' +import 'core-js/es6/map' +// import 'core-js/es6/weak-map' +// import 'core-js/es6/set' +import 'core-js/es7/object' +import 'core-js/es6/promise' + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect' + +/** Evergreen browsers require these. **/ +// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. +// import 'core-js/es7/reflect' + +// CustomEvent() constructor functionality in IE9, IE10, IE11 +(function () { + + if ( typeof window.CustomEvent === "function" ) return false + + function CustomEvent ( event, params ) { + params = params || { bubbles: false, cancelable: false, detail: undefined } + var evt = document.createEvent( 'CustomEvent' ) + evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ) + return evt + } + + CustomEvent.prototype = window.Event.prototype + + window.CustomEvent = CustomEvent +})() diff --git a/React_Starter/package.json b/React_Starter/package.json index 4f2255e..2f1c5af 100644 --- a/React_Starter/package.json +++ b/React_Starter/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "1.0.10", + "version": "1.0.11", "description": "Open Source Bootstrap Admin Template", "author": "Łukasz Holeczek", "homepage": "http://coreui.io", @@ -20,7 +20,7 @@ "file-loader": "1.1.6", "html-loader": "0.5.5", "html-webpack-plugin": "2.30.1", - "node-sass": "4.7.2", + "node-sass": "^4.9.0", "rimraf": "2.6.2", "sass-loader": "6.0.6", "source-list-map": "2.0.0", @@ -32,7 +32,8 @@ }, "dependencies": { "bootstrap": "4.0.0", - "chart.js": "2.7.1", + "chart.js": "^2.7.2", + "core-js": "^2.5.7", "flag-icon-css": "2.9.0", "font-awesome": "4.7.0", "history": "4.7.2", diff --git a/React_Starter/src/components/Breadcrumb/Breadcrumb.js b/React_Starter/src/components/Breadcrumb/Breadcrumb.js index b4f5db9..395b350 100644 --- a/React_Starter/src/components/Breadcrumb/Breadcrumb.js +++ b/React_Starter/src/components/Breadcrumb/Breadcrumb.js @@ -1,9 +1,19 @@ import React from 'react'; -import {Route, Link} from 'react-router-dom'; +import {Route, Link, matchPath} from 'react-router-dom'; import {Breadcrumb, BreadcrumbItem} from 'reactstrap'; import routes from '../../routes'; -const findRouteName = url => routes[url]; +const findRouteName = (url) => { + let found; + for (let path of Object.entries(routes)) { + found = matchPath(url, {path, exact: true}); + + if (found) { + return routes[found.path[0]]; + } + } + return null; +}; const getPaths = (pathname) => { const paths = ['/']; diff --git a/React_Starter/src/index.js b/React_Starter/src/index.js index 03f5d00..52cf317 100644 --- a/React_Starter/src/index.js +++ b/React_Starter/src/index.js @@ -1,3 +1,4 @@ +import './polyfill' import React from 'react'; import ReactDOM from 'react-dom'; import {HashRouter, Route, Switch} from 'react-router-dom'; diff --git a/React_Starter/src/polyfill.js b/React_Starter/src/polyfill.js new file mode 100644 index 0000000..330d90a --- /dev/null +++ b/React_Starter/src/polyfill.js @@ -0,0 +1,45 @@ +/* +* required polyfills +*/ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol' +import 'core-js/es6/object' +// import 'core-js/es6/function' +// import 'core-js/es6/parse-int' +// import 'core-js/es6/parse-float' +// import 'core-js/es6/number' +// import 'core-js/es6/math' +// import 'core-js/es6/string' +// import 'core-js/es6/date' +import 'core-js/es6/array' +// import 'core-js/es6/regexp' +import 'core-js/es6/map' +// import 'core-js/es6/weak-map' +// import 'core-js/es6/set' +import 'core-js/es7/object' +import 'core-js/es6/promise' + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect' + +/** Evergreen browsers require these. **/ +// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. +// import 'core-js/es7/reflect' + +// CustomEvent() constructor functionality in IE9, IE10, IE11 +(function () { + + if ( typeof window.CustomEvent === "function" ) return false + + function CustomEvent ( event, params ) { + params = params || { bubbles: false, cancelable: false, detail: undefined } + var evt = document.createEvent( 'CustomEvent' ) + evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ) + return evt + } + + CustomEvent.prototype = window.Event.prototype + + window.CustomEvent = CustomEvent +})() From ebd17802d1e66027ca442e97b03507d0b64104ef Mon Sep 17 00:00:00 2001 From: xidedix Date: Wed, 20 Jun 2018 20:33:26 +0200 Subject: [PATCH 2/3] feat: Users/User Breadcrumb example with `/users/:id` --- CHANGELOG.md | 1 + .../src/components/Header/Header.js | 4 +- .../src/containers/Full/Full.js | 6 ++ React_Full_Project/src/routes.js | 4 +- React_Full_Project/src/views/Users/User.js | 46 +++++++++++++++ React_Full_Project/src/views/Users/Users.js | 56 +++++++++++++++++++ .../src/views/Users/UsersData.js | 12 ++++ .../src/views/Users/package.json | 6 ++ 8 files changed, 132 insertions(+), 3 deletions(-) create mode 100644 React_Full_Project/src/views/Users/User.js create mode 100644 React_Full_Project/src/views/Users/Users.js create mode 100644 React_Full_Project/src/views/Users/UsersData.js create mode 100644 React_Full_Project/src/views/Users/package.json diff --git a/CHANGELOG.md b/CHANGELOG.md index 57709c4..cb82917 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ##### `v1.0.11` - refactor(Breadcrumb): fix for dynamic url like `/resource/:id` +- feat: Users/User Breadcrumb example with `/users/:id` ##### `v1.0.10` - refactor: `` diff --git a/React_Full_Project/src/components/Header/Header.js b/React_Full_Project/src/components/Header/Header.js index 1e69eb5..12575bf 100644 --- a/React_Full_Project/src/components/Header/Header.js +++ b/React_Full_Project/src/components/Header/Header.js @@ -48,10 +48,10 @@ class Header extends Component {