diff --git a/package.json b/package.json
index bfd18ac..87ebd16 100644
--- a/package.json
+++ b/package.json
@@ -170,8 +170,8 @@
"lint-staged"
],
"devDependencies": {
- "@babel/cli": "^7.8.3",
- "@babel/core": "^7.8.3",
+ "@babel/cli": "^7.8.4",
+ "@babel/core": "^7.8.4",
"@babel/plugin-external-helpers": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
@@ -184,53 +184,52 @@
"@babel/plugin-transform-react-constant-elements": "^7.8.3",
"@babel/plugin-transform-react-inline-elements": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.8.3",
- "@babel/preset-env": "^7.8.3",
+ "@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
- "@rollup-umd/documentation": "^2.0.11",
+ "@rollup-umd/documentation": "^2.0.13",
"@rollup-umd/rollup": "^1.1.1",
"@rollup-umd/ncu": "^1.0.9",
- "@semantic-release/changelog": "^3.0.6",
- "@semantic-release/git": "^8.0.0",
- "@semantic-release/github": "^6.0.1",
- "@semantic-release/npm": "^6.0.0",
+ "@semantic-release/changelog": "^5.0.0",
+ "@semantic-release/git": "^9.0.0",
+ "@semantic-release/github": "^7.0.3",
+ "@semantic-release/npm": "^7.0.2",
"@yeutech-lab/documentation": "^2.0.2",
"babel-eslint": "^10.0.3",
- "babel-jest": "^24.9.0",
+ "babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"babel-merge": "^3.0.0",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-plugin-array-includes": "^2.0.3",
"babel-plugin-dynamic-import-node": "^2.3.0",
- "babel-plugin-inline-react-svg": "^1.1.0",
+ "babel-plugin-inline-react-svg": "^1.1.1",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
- "cz-conventional-changelog": "^3.0.2",
+ "cz-conventional-changelog": "^3.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
- "eslint-plugin-import": "^2.20.0",
+ "eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
- "eslint-plugin-react": "^7.17.0",
+ "eslint-plugin-react": "^7.18.3",
"exports-loader": "^0.7.0",
"istanbul-api": "^3.0.0",
"istanbul-reports": "^3.0.0",
- "jest-cli": "^24.9.0",
+ "jest-cli": "^25.1.0",
"jest-sonar-reporter": "^2.0.0",
- "lint-staged": "^9.5.0",
+ "lint-staged": "^10.0.7",
"pre-commit": "^1.2.2",
"raf": "^3.4.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-router": "^5.1.2",
- "react-router-dom": "^4.2.2",
"react-test-renderer": "^16.12.0",
- "semantic-release": "^16.0.1",
+ "semantic-release": "^17.0.2",
"toctoc": "^0.3.2",
"webpack": "^4.41.5"
},
"dependencies": {
- "@babel/runtime": "^7.8.3",
+ "@babel/runtime": "^7.8.4",
"@yeutech-lab/tree-operations": "^1.0.2",
"core-js": "^3.6.4",
"deepmerge": "^4.2.2",
@@ -243,7 +242,7 @@
"peerDependencies": {
"react": "*",
"react-dom": "*",
- "react-router-dom": "*"
+ "react-router": "*"
},
"publishConfig": {
"registry": "https://registry.npmjs.org",
@@ -356,7 +355,7 @@
"coverageThreshold": {
"global": {
"statements": 95,
- "branches": 94,
+ "branches": 93,
"functions": 91,
"lines": 93
}
diff --git a/src/Link.js b/src/Link/Link.js
similarity index 84%
rename from src/Link.js
rename to src/Link/Link.js
index 6f29e98..a57672f 100644
--- a/src/Link.js
+++ b/src/Link/Link.js
@@ -1,8 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
-import makeRoutes from './makeRoutes';
-import matchParamsPath from './matchParamsPath';
+import makeRoutes from '../makeRoutes';
+import matchParamsPath from '../matchParamsPath';
/**
* @name Link
@@ -37,8 +36,44 @@ import matchParamsPath from './matchParamsPath';
* );
* ```
*
+ * @example
+ *
+ * Then call that link in your application:
+ *
+ * ```javascript
+ * Home
+ * ```
+ *
+ * @example
+ * It can work with any navigation engine, if you don't want the Link to detect react-router from the context, just pass the props `push` with the navigate function:
+ * If you want to preload the page, `to` and `routesMap` (already created in the application Link.js) are necessary
+ * ```javascript
+ * navigate('home')} />
+ * ```
+ *
+ * @example
+ *
+ * It can also work with react-native, but since they use `onPress` massively instead of `onClick`, you need to remap the props to `onClick` before:
+ *
+ * ```javascript
+ * // remap onClick to onPress
+ * const Button = ({
+ * t,
+ * onClick,
+ * onPress,
+ * ...rest
+ * }) => (
+ *
+ * );
+ * ```
+ *
+ * Then pass this component, for example ``
*/
-class Link extends React.Component {
+export default class Link extends React.Component {
static propTypes = {
/** The path the link will go to */
to: PropTypes.string.isRequired,
@@ -99,11 +134,15 @@ class Link extends React.Component {
*/
ContextConsumer: PropTypes.any,
/** @ignore */
- match: PropTypes.object.isRequired,
+ match: PropTypes.object,
/** @ignore */
- location: PropTypes.object.isRequired,
+ location: PropTypes.object,
/** @ignore */
- history: PropTypes.object.isRequired,
+ history: PropTypes.object,
+ /** If not set, it will try to use react router context, otherwise, it will skip react router and use push for triggering the page change
+ * This allow to use the link and it's features without react router
+ */
+ push: PropTypes.func,
};
static defaultProps = {
@@ -120,6 +159,10 @@ class Link extends React.Component {
routes: [],
routesMap: new Map(),
ContextConsumer: null,
+ match: undefined,
+ location: undefined,
+ history: undefined,
+ push: undefined,
};
// eslint-disable-next-line camelcase
@@ -245,6 +288,7 @@ class Link extends React.Component {
changePage = (e, path) => {
const {
history,
+ push,
delay,
onPageChange,
onBeforePageChange,
@@ -258,7 +302,11 @@ class Link extends React.Component {
if (onPageChange) {
onPageChange(e);
}
- history.push(path);
+ if (push) {
+ push(path);
+ } else {
+ history.push(path);
+ }
}, ms);
};
@@ -308,5 +356,3 @@ class Link extends React.Component {
);
}
}
-
-export default withRouter(Link);
diff --git a/src/Link/index.js b/src/Link/index.js
new file mode 100644
index 0000000..e59c3fb
--- /dev/null
+++ b/src/Link/index.js
@@ -0,0 +1,7 @@
+import { createElement } from 'react';
+import { withRouter } from 'react-router';
+import Link from './Link';
+
+export default ({ push, ...rest }) => push
+ ? createElement(Link, { ...rest, push })
+ : createElement(withRouter(Link), rest);
diff --git a/src/tests/Link.test.js b/src/Link/tests/Link.test.js
similarity index 98%
rename from src/tests/Link.test.js
rename to src/Link/tests/Link.test.js
index 6644ac0..72a78cd 100644
--- a/src/tests/Link.test.js
+++ b/src/Link/tests/Link.test.js
@@ -1,9 +1,10 @@
import React from 'react';
import { shallow, mount } from 'enzyme';
-import { MemoryRouter } from 'react-router-dom';
-import getRoutesMap from '../getRoutesMap';
-import Link from '../Link';
+import { withRouter, MemoryRouter } from 'react-router';
+import getRoutesMap from '../../getRoutesMap';
+import RRLink from '../Link';
+const Link = withRouter(RRLink);
// this will mock the loadable component
const LoadableComponent = () => ;
LoadableComponent.preload = () => ({ then: (fn) => fn && fn() });
diff --git a/src/makeRoutes.js b/src/makeRoutes.js
index 1705155..47ad4c2 100644
--- a/src/makeRoutes.js
+++ b/src/makeRoutes.js
@@ -1,4 +1,4 @@
-import { Redirect, Route } from 'react-router-dom';
+import { Redirect, Route } from 'react-router';
import React from 'react';
/**
diff --git a/styleguide/styleguide.ext.json b/styleguide/styleguide.ext.json
index 13e84e1..133a546 100644
--- a/styleguide/styleguide.ext.json
+++ b/styleguide/styleguide.ext.json
@@ -33,8 +33,7 @@
{
"name": "UI Component",
"components": [
- "src/**/[A-Z]*.js",
- "src/**/[A-Z]*/index.js"
+ "src/**/[A-Z]*.js"
]
},
{