From 10871131f823c7c37068d84106a9fbf472771612 Mon Sep 17 00:00:00 2001 From: Leonardo Gentile Date: Tue, 2 May 2017 11:40:25 +0200 Subject: [PATCH] chore(eslint): Correct code to respect eslint rules --- .eslintrc | 5 +-- src/modules/BaseLink.js | 25 ++++++++------- src/modules/routeNode.js | 8 ++--- src/modules/utils.js | 4 +-- src/modules/withLink.js | 5 +-- src/modules/withRoute.js | 67 ++++++++++++++++++++-------------------- 6 files changed, 59 insertions(+), 55 deletions(-) diff --git a/.eslintrc b/.eslintrc index 5840a27..b77022f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -29,6 +29,7 @@ "plugin:import/warnings" ], "rules": { + "react/prop-types": [2, { "ignore": ["children", "route", "previousRoute"] }], // Possible Errors "no-dupe-args": 2, "no-dupe-keys": 2, @@ -50,7 +51,7 @@ "no-unused-vars": [2, { "args": "none" }], "no-use-before-define": 0, // Style - "brace-style": [2, "1tbs"], + "brace-style": [1, "stroustrup"], "comma-spacing": [2, {"before": false, "after": true}], "comma-style": [2, "last"], "consistent-this": [2, "that"], @@ -64,6 +65,6 @@ // ES6 "no-var": 2, "no-this-before-super": 2, - "object-shorthand": 2 + "object-shorthand": 0 } } diff --git a/src/modules/BaseLink.js b/src/modules/BaseLink.js index b13034e..c950c61 100644 --- a/src/modules/BaseLink.js +++ b/src/modules/BaseLink.js @@ -1,9 +1,9 @@ -import React, {Component} from "react"; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import {ifNot} from "./utils"; +import { ifNot } from './utils'; // TODO -const storeName='routerStore'; +const storeName = 'routerStore'; /** * BaseLink component: it generates an anchor tag with href computed from props.routeName. @@ -33,7 +33,7 @@ class BaseLink extends Component { // Get the router instance from the props (when explicitly passed) or from routerStore // It is passed to props for example when using withRoute wrapper - this.routerStore = props.routerStore; + this.routerStore = props[storeName]; if (this.routerStore) { this.router = this.routerStore.router || null; } @@ -86,11 +86,11 @@ class BaseLink extends Component { } render() { - const {routeName, routeParams, className } = this.props; + const {routeName, routeParams, className} = this.props; const href = this.buildUrl(routeName, routeParams); const onClick = this.clickHandler; - return React.createElement('a', { href: href, className: className, onClick: onClick}, this.props.children); + return React.createElement('a', {href: href, className: className, onClick: onClick}, this.props.children); } } @@ -103,13 +103,14 @@ BaseLink.defaultProps = { BaseLink.propTypes = { // Defaults - routeOptions: PropTypes.object, - routeParams: PropTypes.object, + routeOptions: PropTypes.object, + routeParams: PropTypes.object, // Optional - router: PropTypes.object, // when we don't pass/inject the routerStore then we need the router - routeName: PropTypes.string, // not required because of onClick could be passed instead - onClick: PropTypes.func, - className: PropTypes.string // could be passed directly or forwarded (computed) from withRoute/withLink + router: PropTypes.object, // when we don't pass/inject the routerStore then we need the router + routeName: PropTypes.string, // not required because of onClick could be passed instead + onClick: PropTypes.func, + className: PropTypes.string, // could be passed directly or forwarded (computed) from withRoute/withLink + children: PropTypes.node }; // If used withRoute or withLink (Optional) diff --git a/src/modules/routeNode.js b/src/modules/routeNode.js index a289421..b66e909 100644 --- a/src/modules/routeNode.js +++ b/src/modules/routeNode.js @@ -1,11 +1,11 @@ -import React, { Component, createElement} from 'react'; +import { Component, createElement } from 'react'; import PropTypes from 'prop-types'; -import { getDisplayName, ifNot} from './utils'; +import { getDisplayName, ifNot } from './utils'; import { autorun } from 'mobx'; import { inject } from 'mobx-react'; -function routeNode(nodeName, storeName='routerStore') { // route node Name, routerStore name +function routeNode(nodeName, storeName = 'routerStore') { // route node Name, routerStore name return function routeNodeWrapper(RouteSegment) { // component Name @inject(storeName) @@ -46,7 +46,7 @@ function routeNode(nodeName, storeName='routerStore') { // route node Name, rout // re-render this component and so the route-node (wrapped component) // only if it is the correct "transition node" - shouldComponentUpdate (newProps, newState) { + shouldComponentUpdate(newProps, newState) { return (newState.intersectionNode === nodeName); } diff --git a/src/modules/utils.js b/src/modules/utils.js index 1a783f2..2667c0c 100644 --- a/src/modules/utils.js +++ b/src/modules/utils.js @@ -50,14 +50,14 @@ export function getComponent(route, routeNodeName, routesConfig) { if (currentLevel >= routeNodeLevel) { if (currentRoute.component) { // first found segment one level deeper than the routeNodeLevel - return currentRoute.component + return currentRoute.component; } throw new Error('route segment does not have a component field'); } else { if (currentRoute.children) { currentLevel += 1; - return findComponent(currentRoute.children) + return findComponent(currentRoute.children); } break; } diff --git a/src/modules/withLink.js b/src/modules/withLink.js index 6ce9ad0..5b9664f 100644 --- a/src/modules/withLink.js +++ b/src/modules/withLink.js @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react'; import PropTypes from 'prop-types'; import BaseLink from './BaseLink'; import withRoute from './withRoute'; @@ -34,7 +34,7 @@ function withLink(BaseComponent, storeName='routerStore') { {props.children} - ) + ); } // All props passed from ComponentWithRoute @@ -49,6 +49,7 @@ function withLink(BaseComponent, storeName='routerStore') { linkClassName: PropTypes.string, onClick: PropTypes.func, routeName: PropTypes.string, + children: PropTypes.node, // Computed, injected to it className: PropTypes.string }; diff --git a/src/modules/withRoute.js b/src/modules/withRoute.js index e380480..ecbd852 100644 --- a/src/modules/withRoute.js +++ b/src/modules/withRoute.js @@ -1,7 +1,7 @@ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { inject, observer } from 'mobx-react'; -import {ifNot, getDisplayName} from './utils'; +import { ifNot, getDisplayName } from './utils'; /** @@ -11,32 +11,32 @@ import {ifNot, getDisplayName} from './utils'; * @param storeName - the mobx-router5 store instance name. Default 'routerStore' * @returns {ComponentWithRoute} */ -function withRoute(BaseComponent, storeName='routerStore') { - - /** - * Wrapper ComponentWithRoute around the BaseComponent - * - * The wrapper is injected with the mobx routerStore and decorated with @observer - * Notice that @inject will also create another wrapper around the ComponentWithRoute - * - * The component accepts all the props normally accepted by the BaseLink component and will forward them down to the wrapped component. - * If a linkClassName is passed then it will be passed down and used by the children only when the BaseComponent is created with `withLink` HOC. - * NOTE: the routerStore will be injected into the ComponentWithRoute.props, so it will also forwarded down to the wrapped component - * - * Any route changes will trigger a rendering of ComponentWithRoute. - * Also the wrapped BaseComponent and children will re-render because passing 3 extra changing props to it (apart from this.props): - * - route: the mobx observable routerStore.route, used to trigger a re-rendering of the BaseComponent when the route changes - * - previousRoute: the mobx observable routerStore.previousRoute, same as above - * - className: if a prop `routeName` is passed to ComponentWithRoute then it adds an `active` className to the original className when routeName==routerStore.route - * - */ +function withRoute(BaseComponent, storeName = 'routerStore') { + + /** + * Wrapper ComponentWithRoute around the BaseComponent + * + * The wrapper is injected with the mobx routerStore and decorated with @observer + * Notice that @inject will also create another wrapper around the ComponentWithRoute + * + * The component accepts all the props normally accepted by the BaseLink component and will forward them down to the wrapped component. + * If a linkClassName is passed then it will be passed down and used by the children only when the BaseComponent is created with `withLink` HOC. + * NOTE: the routerStore will be injected into the ComponentWithRoute.props, so it will also forwarded down to the wrapped component + * + * Any route changes will trigger a rendering of ComponentWithRoute. + * Also the wrapped BaseComponent and children will re-render because passing 3 extra changing props to it (apart from this.props): + * - route: the mobx observable routerStore.route, used to trigger a re-rendering of the BaseComponent when the route changes + * - previousRoute: the mobx observable routerStore.previousRoute, same as above + * - className: if a prop `routeName` is passed to ComponentWithRoute then it adds an `active` className to the original className when routeName==routerStore.route + * + */ @inject(storeName) @observer class ComponentWithRoute extends Component { static computeClassName(className, activeClassName, isActive) { return (className ? className.split(' ') : []) - .concat(isActive ? [activeClassName] : []).join(' '); + .concat(isActive ? [activeClassName] : []).join(' '); } constructor(props) { @@ -66,7 +66,7 @@ function withRoute(BaseComponent, storeName='routerStore') { '[react-mobx-router5][withRoute] prop names `route` and `previousRoute` are reserved.' ); - const {activeClassName, activeStrict, routeOptions, routeParams, linkClassName, onClick, routeName, className } = this.props; + const { activeClassName, activeStrict, routeOptions, routeParams, linkClassName, onClick, routeName, className } = this.props; let currentClassName = className || ''; if (routeName) { @@ -75,7 +75,7 @@ function withRoute(BaseComponent, storeName='routerStore') { } // De-referencing a mobx-observable will trigger a re-rendering (because of the @observer) - const {route, previousRoute} = this.routerStore; + const { route, previousRoute } = this.routerStore; const newProps = { // Props Extra injected routerStore: this.routerStore, @@ -96,7 +96,7 @@ function withRoute(BaseComponent, storeName='routerStore') { {this.props.children} - ) + ); } } @@ -111,15 +111,16 @@ function withRoute(BaseComponent, storeName='routerStore') { ComponentWithRoute.propTypes = { // Defaults - activeClassName: PropTypes.string, - activeStrict: PropTypes.bool, - routeOptions: PropTypes.object, - routeParams: PropTypes.object, + activeClassName: PropTypes.string, + activeStrict: PropTypes.bool, + routeOptions: PropTypes.object, + routeParams: PropTypes.object, // Optional - linkClassName: PropTypes.string, - onClick: PropTypes.func, - routeName: PropTypes.string, - className: PropTypes.string + linkClassName: PropTypes.string, + onClick: PropTypes.func, + routeName: PropTypes.string, + className: PropTypes.string, + children: PropTypes.node }; // Because @inject creates an extra HOC