Add Linting (#293)

* Add linting * Make specs pass linter * Make lib/helpers pass linter * Make lib/components pass linter This also does some signfiicant refactoring of the code to appease the linter's pro-ES2015+ stance. closes #289 closes #286 * Make travis run the lint task as well as specs closes #284
reactjs · Dec 31, 2016 · 596f423 · 596f423
1 parent 3ada4fb
commit 596f423
Show file tree

Hide file tree

Showing 16 changed files with 1,388 additions and 685 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "react"]
-}
+  "presets": ["react", "latest", "stage-2"]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,25 @@
+module.exports = {
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "extends": "airbnb",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "parser": "babel-eslint",
+  rules: {
+    "comma-dangle": [2, "only-multiline"],
+    "max-len": [1, {"code": 140}],
+    "no-continue": [0],
+    "no-plusplus": [0],
+    "space-before-function-paren": [2, "always"],
+    "import/no-extraneous-dependencies": [2, {"devDependencies": true}],
+    "react/jsx-filename-extension": ["error", {"extensions": [".js"]}]
+  },
+};
diff --git a/.travis.yml b/.travis.yml
@@ -7,3 +7,5 @@ node_js:
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
+script: npm run test:full
+cache: yarn
diff --git a/eslint.json b/eslint.json
diff --git a/lib/components/Modal.js b/lib/components/Modal.js
@@ -1,34 +1,22 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
-var ExecutionEnvironment = require('exenv');
-var ModalPortal = React.createFactory(require('./ModalPortal'));
-var ariaAppHider = require('../helpers/ariaAppHider');
-var elementClass = require('element-class');
-var renderSubtreeIntoContainer = require("react-dom").unstable_renderSubtreeIntoContainer;
-var Assign = require('lodash.assign');
-
-var SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
-var AppElement = ExecutionEnvironment.canUseDOM ? document.body : {appendChild: function() {}};
-
-function getParentElement(parentSelector) {
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import ExecutionEnvironment from 'exenv';
+import elementClass from 'element-class';
+import ModalPortal from './ModalPortal';
+import ariaAppHider from '../helpers/ariaAppHider';
+
+const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer;
+
+const SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
+
+function getParentElement (parentSelector) {
   return parentSelector();
 }
 
-var Modal = React.createClass({
-
-  displayName: 'Modal',
-  statics: {
-    setAppElement: function(element) {
-        AppElement = ariaAppHider.setElement(element);
-    },
-    injectCSS: function() {
-      "production" !== process.env.NODE_ENV
-        && console.warn('React-Modal: injectCSS has been deprecated ' +
-                        'and no longer has any effect. It will be removed in a later version');
-    }
-  },
+export default class Modal extends Component {
 
-  propTypes: {
+  /* eslint-disable react/no-unused-prop-types */
+  static propTypes = {
     isOpen: React.PropTypes.bool.isRequired,
     style: React.PropTypes.shape({
       content: React.PropTypes.object,
@@ -44,52 +32,86 @@ var Modal = React.createClass({
     parentSelector: React.PropTypes.func,
     role: React.PropTypes.string,
     contentLabel: React.PropTypes.string.isRequired
-  },
-
-  getDefaultProps: function () {
-    return {
-      isOpen: false,
-      portalClassName: 'ReactModalPortal',
-      ariaHideApp: true,
-      closeTimeoutMS: 0,
-      shouldCloseOnOverlayClick: true,
-      parentSelector: function () { return document.body; }
-    };
-  },
-
-  componentDidMount: function() {
+  };
+  /* eslint-enable react/no-unused-prop-types */
+
+  static defaultProps = {
+    isOpen: false,
+    portalClassName: 'ReactModalPortal',
+    ariaHideApp: true,
+    closeTimeoutMS: 0,
+    shouldCloseOnOverlayClick: true,
+    parentSelector () { return document.body; }
+  };
+
+  static defaultStyles = {
+    overlay: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(255, 255, 255, 0.75)'
+    },
+    content: {
+      position: 'absolute',
+      top: '40px',
+      left: '40px',
+      right: '40px',
+      bottom: '40px',
+      border: '1px solid #ccc',
+      background: '#fff',
+      overflow: 'auto',
+      WebkitOverflowScrolling: 'touch',
+      borderRadius: '4px',
+      outline: 'none',
+      padding: '20px'
+    }
+  };
+
+  static setAppElement (element) {
+    ariaAppHider.setElement(element);
+  }
+
+  static injectCSS () {
+    return process.env.NODE_ENV !== 'production'
+        && console.warn('React-Modal: injectCSS has been deprecated ' +
+                        'and no longer has any effect. It will be removed in a later version');
+  }
+
+  componentDidMount () {
     this.node = document.createElement('div');
     this.node.className = this.props.portalClassName;
 
-    var parent = getParentElement(this.props.parentSelector);
+    const parent = getParentElement(this.props.parentSelector);
     parent.appendChild(this.node);
     this.renderPortal(this.props);
-  },
+  }
 
-  componentWillReceiveProps: function(newProps) {
-    var currentParent = getParentElement(this.props.parentSelector);
-    var newParent = getParentElement(newProps.parentSelector);
+  componentWillReceiveProps (newProps) {
+    const currentParent = getParentElement(this.props.parentSelector);
+    const newParent = getParentElement(newProps.parentSelector);
 
-    if(newParent !== currentParent) {
+    if (newParent !== currentParent) {
       currentParent.removeChild(this.node);
       newParent.appendChild(this.node);
     }
 
     this.renderPortal(newProps);
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount () {
     if (this.props.ariaHideApp) {
       ariaAppHider.show(this.props.appElement);
     }
 
     ReactDOM.unmountComponentAtNode(this.node);
-    var parent = getParentElement(this.props.parentSelector);
+    const parent = getParentElement(this.props.parentSelector);
     parent.removeChild(this.node);
     elementClass(document.body).remove('ReactModal__Body--open');
-  },
+  }
 
-  renderPortal: function(props) {
+  renderPortal (props) {
     if (props.isOpen) {
       elementClass(document.body).add('ReactModal__Body--open');
     } else {
@@ -100,37 +122,14 @@ var Modal = React.createClass({
       ariaAppHider.toggle(props.isOpen, props.appElement);
     }
 
-    this.portal = renderSubtreeIntoContainer(this, ModalPortal(Assign({}, props, {defaultStyles: Modal.defaultStyles})), this.node);
-  },
-
-  render: function () {
-    return React.DOM.noscript();
+    this.portal = renderSubtreeIntoContainer(this,
+      <ModalPortal
+        {...props}
+        defaultStyles={Modal.defaultStyles}
+      />, this.node);
   }
-});
-
-Modal.defaultStyles = {
-  overlay: {
-    position        : 'fixed',
-    top             : 0,
-    left            : 0,
-    right           : 0,
-    bottom          : 0,
-    backgroundColor : 'rgba(255, 255, 255, 0.75)'
-  },
-  content: {
-    position                : 'absolute',
-    top                     : '40px',
-    left                    : '40px',
-    right                   : '40px',
-    bottom                  : '40px',
-    border                  : '1px solid #ccc',
-    background              : '#fff',
-    overflow                : 'auto',
-    WebkitOverflowScrolling : 'touch',
-    borderRadius            : '4px',
-    outline                 : 'none',
-    padding                 : '20px'
+
+  render () {
+    return null;
   }
 }
-
-module.exports = Modal