Fix linting

packages/redux-devtools-inspector/package.json

@@ -32,9 +32,9 @@
     "base16": "^1.0.0",
     "chokidar": "^1.6.1",
     "clean-webpack-plugin": "^0.1.8",
-    "eslint": "^3.9.1",
+    "eslint": "^4.0.0",
     "eslint-loader": "^1.2.1",
-    "eslint-plugin-babel": "^3.1.0",
+    "eslint-plugin-babel": "^4.0.0",
     "eslint-plugin-react": "^6.6.0",
     "export-files-webpack-plugin": "0.0.1",
     "html-webpack-plugin": "^2.8.1",

packages/redux-devtools-inspector/src/ActionList.jsx

@@ -96,7 +96,7 @@ export default class ActionList extends Component {
           hasStagedActions={actionIds.length > 1} />
         <div {...styling('actionListRows')} ref={this.getRef}>
           {filteredActionIds.map(actionId =>
-            <ActionListRow key={actionId}
+            (<ActionListRow key={actionId}
               styling={styling}
               actionId={actionId}
               isInitAction={!actionId}
@@ -115,7 +115,7 @@ export default class ActionList extends Component {
               onJumpClick={() => onJumpToState(actionId)}
               onCommitClick={() => onCommit(actionId)}
               hideActionButtons={hideActionButtons}
-                           isSkipped={skippedActionIds.indexOf(actionId) !== -1} />
+              isSkipped={skippedActionIds.indexOf(actionId) !== -1} />)
           )}
         </div>
       </div>

packages/redux-devtools-inspector/src/ActionListHeader.jsx

@@ -10,7 +10,7 @@ const ActionListHeader =
   ({
     styling, onSearch, hasSkippedActions, hasStagedActions, onCommit, onSweep, hideMainButtons
   }) =>
-  <div {...styling('actionListHeader')}>
+    (<div {...styling('actionListHeader')}>
       <input
         {...styling('actionListHeaderSearch')}
         onChange={e => onSearch(e.target.value)}
@@ -21,7 +21,7 @@ const ActionListHeader =
       <RightSlider shown={hasStagedActions} styling={styling}>
         <div {...styling('actionListHeaderSelector')}>
           {getActiveButtons(hasSkippedActions).map(btn =>
-            <div
+            (<div
               key={btn}
               onClick={() => ({
                 Commit: onCommit,
@@ -32,12 +32,12 @@ const ActionListHeader =
                 'selectorButtonSmall'], false, true)}
             >
               {btn}
-            </div>
+            </div>)
           )}
         </div>
       </RightSlider>
     </div>
       }
-  </div>;
+    </div>);
 
 export default ActionListHeader;

packages/redux-devtools-inspector/src/ActionPreviewHeader.jsx

@@ -2,17 +2,17 @@ import React from 'react';
 
 const ActionPreviewHeader =
   ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) =>
-  <div key='previewHeader' {...styling('previewHeader')}>
+    (<div key='previewHeader' {...styling('previewHeader')}>
       <div {...styling('tabSelector')}>
         {tabs.map(tab =>
-        <div onClick={() => onSelectTab(tab.name)}
+          (<div onClick={() => onSelectTab(tab.name)}
             key={tab.name}
             {...styling([
               'selectorButton',
               tab.name === tabName && 'selectorButtonSelected'
             ], tab.name === tabName)}>
             {tab.name}
-        </div>
+          </div>)
         )}
       </div>
       <div {...styling('inspectedPath')}>
@@ -35,6 +35,6 @@ const ActionPreviewHeader =
             </span>
         )}
       </div>
-  </div>;
+    </div>);
 
 export default ActionPreviewHeader;

packages/redux-devtools-inspector/src/RightSlider.jsx

@@ -1,14 +1,14 @@
 import React, { PropTypes } from 'react';
 
 const RightSlider = ({ styling, shown, children, rotate }) =>
-  <div {...styling([
+  (<div {...styling([
     'rightSlider',
     shown && 'rightSliderShown',
     rotate && 'rightSliderRotate',
     rotate && shown && 'rightSliderRotateShown'
   ])}>
     {children}
-  </div>;
+  </div>);
 
 RightSlider.propTypes = {
   shown: PropTypes.bool

packages/redux-devtools-inspector/src/tabs/ActionTab.jsx

@@ -6,13 +6,13 @@ import getJsonTreeTheme from './getJsonTreeTheme';
 const ActionTab = ({
   action, styling, base16Theme, invertTheme, labelRenderer, dataTypeKey, isWideLayout
 }) =>
-  <JSONTree
+  (<JSONTree
     labelRenderer={labelRenderer}
     theme={getJsonTreeTheme(base16Theme)}
     data={action}
     getItemString={(type, data) => getItemString(styling, type, data, dataTypeKey, isWideLayout)}
     invertTheme={invertTheme}
     hideRoot
-  />;
+  />);
 
 export default ActionTab;

packages/redux-devtools-inspector/src/tabs/DiffTab.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import JSONDiff from './JSONDiff';
 
 const DiffTab = ({ delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }) =>
-  <JSONDiff
+  (<JSONDiff
     {...{ delta, styling, base16Theme, invertTheme, labelRenderer, isWideLayout }}
-  />;
+  />);
 
 export default DiffTab;

packages/redux-devtools-inspector/src/tabs/StateTab.jsx

@@ -6,13 +6,13 @@ import getJsonTreeTheme from './getJsonTreeTheme';
 const StateTab = ({
   nextState, styling, base16Theme, invertTheme, labelRenderer, dataTypeKey, isWideLayout
 }) =>
-  <JSONTree
+  (<JSONTree
     labelRenderer={labelRenderer}
     theme={getJsonTreeTheme(base16Theme)}
     data={nextState}
     getItemString={(type, data) => getItemString(styling, type, data, dataTypeKey, isWideLayout)}
     invertTheme={invertTheme}
     hideRoot
-  />;
+  />);
 
 export default StateTab;

packages/redux-devtools-inspector/src/tabs/getItemString.js

@@ -61,10 +61,10 @@ function getText(type, data, isWideLayout, isDiff) {
 }
 
 const getItemString = (styling, type, data, dataTypeKey, isWideLayout, isDiff) =>
-  <span {...styling('treeItemHint')}>
+  (<span {...styling('treeItemHint')}>
     {data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
     {dataTypeKey && data[dataTypeKey] ? data[dataTypeKey] + ' ' : ''}
     {getText(type, data, isWideLayout, isDiff)}
-  </span>;
+  </span>);
 
 export default getItemString;