Enable ESlint rules

.eslintrc

@@ -27,6 +27,14 @@
  */
     "no-var": 2,                     // http://eslint.org/docs/rules/no-var
     "jsx-quotes": [2, "prefer-double"],   //http://eslint.org/docs/rules/jsx-quotes
+    "constructor-super": 2,
+    "no-useless-constructor": 2,
+    "no-useless-computed-key": 2,
+    "no-const-assign": 2,
+    "no-dupe-class-members": 2,
+    "no-new-symbol": 2,
+    "no-this-before-super": 2,
+    "arrow-spacing": 1,
 /**
  * Variables
  */
@@ -155,7 +163,8 @@
     "space-before-function-paren": [2, "never"], // http://eslint.org/docs/rules/space-before-function-paren
     "space-infix-ops": 2,            // http://eslint.org/docs/rules/space-infix-ops
     "keyword-spacing": 0,    // http://eslint.org/docs/rules/space-return-throw-case
-    "spaced-comment": 2,             // http://eslint.org/docs/rules/spaced-comment
+    "spaced-comment": 2,             // http://eslint.org/docs/rules/spaced-comment,
+    "no-whitespace-before-property": 2,
 
 /**
  * JSX style
@@ -196,4 +205,4 @@
       ]
     }]
   }
-}
+}

package.json

@@ -12,8 +12,8 @@
     "build": "webpack --config ./config/webpack.config.prod.js --release true",
     "dev-server": "node webpack-dev-server.js",
     "beforepublish": "lerna run beforepublish",
-    "eslint": "eslint -f unix packages/react-data-grid/src/** packages/react-data-grid-addons/src/**",
-    "fix-eslint": "eslint --fix -f unix packages/react-data-grid/src/** packages/react-data-grid-addons/src/**",
+    "eslint": "eslint -f unix packages/react-data-grid/src/** packages/react-data-grid-addons/src/** packages/common/**",
+    "fix-eslint": "eslint --fix -f unix packages/react-data-grid/src/** packages/react-data-grid-addons/src/** packages/common/**",
     "lerna-publish": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./ci/publish/publish.ps1",
     "web": "cd website && npm run start",
     "web-publish": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./ci/publish/publish-web.ps1"

packages/common/cells/headerCells/FilterableHeaderCell.js

@@ -11,7 +11,7 @@ class FilterableHeaderCell extends React.Component {
   state = {filterTerm: ''};
 
   handleChange = (e) => {
-    let val = e.target.value;
+    const val = e.target.value;
     this.setState({filterTerm: val });
     this.props.onChange({filterTerm: val, column: this.props.column});
   };
@@ -21,7 +21,7 @@ class FilterableHeaderCell extends React.Component {
       return <span/>;
     }
 
-    let inputKey = 'header-filter-' + this.props.column.key;
+    const inputKey = 'header-filter-' + this.props.column.key;
     return (<input key={inputKey} type="text" className="form-control input-sm" placeholder="Search" value={this.state.filterTerm} onChange={this.handleChange}/>);
   };
 

packages/common/cells/headerCells/SortableHeaderCell.js

@@ -40,15 +40,15 @@ class SortableHeaderCell extends React.Component {
   };
 
   getSortByText = () => {
-    let unicodeKeys = {
+    const unicodeKeys = {
       ASC: '9650',
       DESC: '9660'
     };
     return this.props.sortDirection === 'NONE' ? '' : String.fromCharCode(unicodeKeys[this.props.sortDirection]);
   };
 
   render() {
-    let className = joinClasses({
+    const className = joinClasses({
       'react-grid-HeaderCell-sortable': true,
       'react-grid-HeaderCell-sortable--ascending': this.props.sortDirection === 'ASC',
       'react-grid-HeaderCell-sortable--descending': this.props.sortDirection === 'DESC'

packages/common/editors/CheckboxEditor.js

@@ -18,8 +18,8 @@ class CheckboxEditor extends React.Component {
   };
 
   render() {
-    let checked = this.props.value != null ? this.props.value : false;
-    let checkboxName = 'checkbox' + this.props.rowIdx;
+    const checked = this.props.value != null ? this.props.value : false;
+    const checkboxName = 'checkbox' + this.props.rowIdx;
     return (
       <div className="react-grid-checkbox-container checkbox-align" onClick={this.handleChange}>
           <input className="react-grid-checkbox" type="checkbox" name={checkboxName} checked={checked} />

packages/common/editors/EditorBase.js

@@ -12,13 +12,13 @@ class EditorBase extends React.Component {
   }
 
   getValue() {
-    let updated = {};
+    const updated = {};
     updated[this.props.column.key] = this.getInputNode().value;
     return updated;
   }
 
   getInputNode() {
-    let domNode = ReactDOM.findDOMNode(this);
+    const domNode = ReactDOM.findDOMNode(this);
     if (domNode.tagName === 'INPUT') {
       return domNode;
     }

packages/common/editors/EditorContainer.js

@@ -34,7 +34,7 @@ class EditorContainer extends React.Component {
   changeCanceled = false;
 
   componentDidMount() {
-    let inputNode = this.getInputNode();
+    const inputNode = this.getInputNode();
     if (inputNode !== undefined) {
       this.setTextInputFocus();
       if (!this.getEditor().disableContainerStyles) {
@@ -71,7 +71,7 @@ class EditorContainer extends React.Component {
       this.checkAndCall('onPressKeyWithCtrl', e);
     } else if (this.isKeyExplicitlyHandled(e.key)) {
       // break up individual keyPress events to have their own specific callbacks
-      let callBack = 'onPress' + e.key;
+      const callBack = 'onPress' + e.key;
       this.checkAndCall(callBack, e);
     } else if (isKeyPrintable(e.keyCode)) {
       e.stopPropagation();
@@ -95,7 +95,7 @@ class EditorContainer extends React.Component {
   }
 
   createEditor = () => {
-    let editorProps = {
+    const editorProps = {
       ref: this.setEditorRef,
       column: this.props.column,
       value: this.getInitialValue(),
@@ -108,7 +108,7 @@ class EditorContainer extends React.Component {
       onOverrideKeyDown: this.onKeyDown
     };
 
-    let CustomEditor = this.props.column.editor;
+    const CustomEditor = this.props.column.editor;
     // return custom column editor or SimpleEditor if none specified
     if (React.isValidElement(CustomEditor)) {
       return React.cloneElement(CustomEditor, editorProps);
@@ -233,11 +233,11 @@ class EditorContainer extends React.Component {
 
   commit = (args) => {
     const { onCommit } = this.props;
-    let opts = args || {};
-    let updated = this.getEditor().getValue();
+    const opts = args || {};
+    const updated = this.getEditor().getValue();
     if (this.isNewValueValid(updated)) {
       this.changeCommitted = true;
-      let cellKey = this.props.column.key;
+      const cellKey = this.props.column.key;
       onCommit({ cellKey: cellKey, rowIdx: this.props.rowIdx, updated: updated, key: opts.key });
     }
   };
@@ -249,7 +249,7 @@ class EditorContainer extends React.Component {
 
   isNewValueValid = (value) => {
     if (isFunction(this.getEditor().validate)) {
-      let isValid = this.getEditor().validate(value);
+      const isValid = this.getEditor().validate(value);
       this.setState({ isInvalid: !isValid });
       return isValid;
     }
@@ -258,42 +258,42 @@ class EditorContainer extends React.Component {
   };
 
   setCaretAtEndOfInput = () => {
-    let input = this.getInputNode();
+    const input = this.getInputNode();
     // taken from http://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element
-    let txtLength = input.value.length;
+    const txtLength = input.value.length;
     if (input.setSelectionRange) {
       input.setSelectionRange(txtLength, txtLength);
     } else if (input.createTextRange) {
-      let fieldRange = input.createTextRange();
+      const fieldRange = input.createTextRange();
       fieldRange.moveStart('character', txtLength);
       fieldRange.collapse();
       fieldRange.select();
     }
   };
 
   isCaretAtBeginningOfInput = () => {
-    let inputNode = this.getInputNode();
+    const inputNode = this.getInputNode();
     return inputNode.selectionStart === inputNode.selectionEnd
       && inputNode.selectionStart === 0;
   };
 
   isCaretAtEndOfInput = () => {
-    let inputNode = this.getInputNode();
+    const inputNode = this.getInputNode();
     return inputNode.selectionStart === inputNode.value.length;
   };
 
   isBodyClicked = (e) => {
-    let relatedTarget = this.getRelatedTarget(e);
+    const relatedTarget = this.getRelatedTarget(e);
     return (relatedTarget === null);
   };
 
   isViewportClicked = (e) => {
-    let relatedTarget = this.getRelatedTarget(e);
+    const relatedTarget = this.getRelatedTarget(e);
     return (relatedTarget.className.indexOf('react-grid-Viewport') > -1);
   };
 
   isClickInsideEditor = (e) => {
-    let relatedTarget = this.getRelatedTarget(e);
+    const relatedTarget = this.getRelatedTarget(e);
     return (e.currentTarget.contains(relatedTarget) || (relatedTarget.className.indexOf('editing') > -1 || relatedTarget.className.indexOf('react-grid-Cell') > -1));
   };
 
@@ -322,8 +322,8 @@ class EditorContainer extends React.Component {
   };
 
   setTextInputFocus = () => {
-    let keyCode = this.props.firstEditorKeyPress;
-    let inputNode = this.getInputNode();
+    const keyCode = this.props.firstEditorKeyPress;
+    const inputNode = this.getInputNode();
     inputNode.focus();
     if (inputNode.tagName === 'INPUT') {
       if (!isKeyPrintable(keyCode)) {

packages/common/editors/__tests__/CheckboxEditor.spec.js

@@ -7,7 +7,7 @@ const { mount } = require('enzyme');
 describe('CheckboxEditor', () => {
   let component;
   let componentWrapper;
-  let testColumn = {
+  const testColumn = {
     key: 'columnKey',
     onCellChange: function() {}
   };
@@ -27,15 +27,15 @@ describe('CheckboxEditor', () => {
     });
 
     it('should be selected if value prop is true', () => {
-      let Input = TestUtils.findRenderedDOMComponentWithTag(component, 'input');
-      let checkboxNode = ReactDOM.findDOMNode(Input);
+      const Input = TestUtils.findRenderedDOMComponentWithTag(component, 'input');
+      const checkboxNode = ReactDOM.findDOMNode(Input);
       expect(checkboxNode.checked).toBe(true);
     });
 
     it('should not be selected if value prop is false', () => {
       componentWrapper.setProps({value: false});
-      let Input = TestUtils.findRenderedDOMComponentWithTag(component, 'input');
-      let checkboxNode = ReactDOM.findDOMNode(Input);
+      const Input = TestUtils.findRenderedDOMComponentWithTag(component, 'input');
+      const checkboxNode = ReactDOM.findDOMNode(Input);
       expect(checkboxNode.checked).toBe(false);
     });
   });

packages/common/editors/__tests__/SimpleTextEditor.spec.js

@@ -6,7 +6,7 @@ describe('SimpleTextEditor', () => {
   describe('Basic tests', () => {
     let component;
 
-    let fakeColumn = { key: 'text', name: 'name', width: 0};
+    const fakeColumn = { key: 'text', name: 'name', width: 0};
     function fakeBlurCb() { return true; }
     function fakeFunction() { }
     beforeEach(() => {

packages/common/utils/index.js

@@ -9,7 +9,7 @@ export const isEmptyArray = (obj) => {
 };
 
 export const isFunction = (functionToCheck) => {
-  let getType = {};
+  const getType = {};
   return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
 };
 
@@ -22,7 +22,7 @@ export const isImmutableCollection = objToVerify => {
 };
 
 export const getMixedTypeValueRetriever = (isImmutable) => {
-  let retObj = {};
+  const retObj = {};
   const retriever = (item, key) => { return item[key]; };
   const immutableRetriever = (immutable, key) => { return immutable.get(key); };
 

packages/react-data-grid-addons/src/toolbars/GroupedColumnsPanel.js

@@ -21,10 +21,6 @@ const defaultProps = {
 };
 
 class GroupedColumnsPanel extends Component {
-  constructor() {
-    super();
-  }
-
   getPanelInstructionMessage() {
     const {groupBy} = this.props;
     return groupBy && groupBy.length > 0 ? this.props.panelDescription : this.props.noColumnsSelectedMessage;