From 7e2a783f7ef2fc774ec0cc1830992b2bee9938e1 Mon Sep 17 00:00:00 2001 From: Osk Date: Fri, 16 Feb 2018 15:51:48 -0300 Subject: [PATCH] Admin Page: Fix all eslint warnings except the related to using React ES6 classes (#8861) * Run eslint --fix on the codebase * Fix prefer-const warnings * Fix import-docblock warnings * Fix brace-style warnings * Fix operator-linebreak warnings * Fix no-else-return warnings * Ignore react/no-danger on jumpstart component * Temporarily downgrade react/jsx-no-bind to 0 * Fix wpcalypso/i18n-no-this-translate warnings * Fix valid-jsdoc warnings --- .eslintrc | 2 +- _inc/client/admin.js | 26 +- _inc/client/at-a-glance/monitor.jsx | 2 +- _inc/client/at-a-glance/photon.jsx | 2 +- _inc/client/at-a-glance/protect.jsx | 2 +- .../client/components/admin-notices/index.jsx | 20 +- .../components/button-group/docs/example.jsx | 6 +- _inc/client/components/button/index.jsx | 2 +- _inc/client/components/card/compact.jsx | 4 +- _inc/client/components/card/index.jsx | 39 +- .../client/components/chart/bar-container.jsx | 16 +- _inc/client/components/chart/bar.jsx | 43 +- _inc/client/components/chart/index.jsx | 28 +- _inc/client/components/chart/label.jsx | 10 +- _inc/client/components/chart/legend.jsx | 31 +- _inc/client/components/chart/x-axis.jsx | 37 +- _inc/client/components/count/docs/example.jsx | 4 +- _inc/client/components/count/test/index.jsx | 28 +- .../data/query-akismet-data/index.jsx | 2 +- .../data/query-dash-protect/index.jsx | 2 +- .../data/query-plugin-updates/index.jsx | 2 +- .../data/query-vaultpress-data/index.jsx | 2 +- .../client/components/foldable-card/index.jsx | 12 +- _inc/client/components/form/action-bar.jsx | 6 +- .../form/clipboard-button/index.jsx | 8 +- .../components/form/form-toggle/compact.jsx | 4 +- .../form/form-toggle/test/index.jsx | 22 +- _inc/client/components/form/index.jsx | 22 +- .../form/input-checkbox-multiple.jsx | 34 +- .../client/components/form/input-checkbox.jsx | 34 +- _inc/client/components/form/input-hidden.jsx | 8 +- _inc/client/components/form/input-radio.jsx | 20 +- .../form/input-select-country-2.jsx | 4 +- .../components/form/input-select-country.jsx | 502 +++++++++--------- _inc/client/components/form/input-select.jsx | 22 +- _inc/client/components/form/input-text.js | 53 +- _inc/client/components/form/label.jsx | 8 +- _inc/client/components/form/row.jsx | 2 +- _inc/client/components/form/section.jsx | 14 +- _inc/client/components/form/submit.jsx | 8 +- .../components/global-notices/index.jsx | 2 +- _inc/client/components/gridicon/index.jsx | 314 ++++++----- .../components/info-popover/docs/example.jsx | 6 +- _inc/client/components/info-popover/index.jsx | 4 +- _inc/client/components/jumpstart/index.jsx | 3 +- _inc/client/components/modal/index.jsx | 38 +- .../module-settings/form-components.jsx | 6 +- .../components/module-settings/index.jsx | 6 +- .../module-settings/module-settings-form.jsx | 27 +- .../module-settings/modules-per-tab-page.jsx | 29 +- .../components/notice/notice-action.jsx | 2 +- _inc/client/components/popover/menu-item.jsx | 6 +- _inc/client/components/popover/menu.jsx | 27 +- _inc/client/components/popover/util.js | 3 +- _inc/client/components/root-child/index.jsx | 2 +- .../client/components/search/docs/example.jsx | 8 +- .../components/search/search-collection.jsx | 21 +- _inc/client/components/search/test/index.jsx | 2 +- .../components/section-nav/docs/example.jsx | 14 +- _inc/client/components/section-nav/index.jsx | 16 +- _inc/client/components/section-nav/item.jsx | 27 +- .../components/section-nav/segmented.jsx | 12 +- _inc/client/components/section-nav/tabs.jsx | 22 +- .../components/section-nav/test/index.jsx | 22 +- .../select-dropdown/docs/example.jsx | 8 +- .../components/select-dropdown/index.jsx | 25 +- .../components/select-dropdown/item.jsx | 10 +- .../components/select-dropdown/separator.jsx | 4 +- .../components/spinner/docs/example.jsx | 4 +- _inc/client/components/spinner/index.jsx | 10 +- _inc/client/components/tags-input/index.jsx | 3 + _inc/client/components/textarea/index.jsx | 2 +- .../upgrade-notice-content/index.jsx | 6 +- _inc/client/config.js | 2 +- _inc/client/discussion/comments.jsx | 6 +- _inc/client/discussion/subscriptions.jsx | 2 +- _inc/client/lib/accessible-focus/index.js | 4 +- _inc/client/lib/analytics/index.js | 30 +- _inc/client/lib/viewport/index.js | 42 +- _inc/client/main.jsx | 4 +- _inc/client/mixins/emitter/index.js | 2 +- _inc/client/mixins/url-search/build-url.js | 4 +- _inc/client/mixins/url-search/index.js | 6 +- _inc/client/notices/index.js | 44 +- _inc/client/notices/validation-error-list.jsx | 7 +- _inc/client/plans/plan-body.jsx | 2 +- _inc/client/plans/plan-header.jsx | 2 +- _inc/client/security/backups-scan.jsx | 3 +- _inc/client/security/sso.jsx | 4 +- _inc/client/settings/index.jsx | 4 +- _inc/client/state/connection/index.js | 3 + _inc/client/state/connection/reducer.js | 6 +- _inc/client/state/dev-version/index.js | 3 + _inc/client/state/dev-version/reducer.js | 4 +- _inc/client/state/initial-state/actions.js | 4 +- _inc/client/state/initial-state/index.js | 3 + _inc/client/state/initial-state/reducer.js | 2 +- _inc/client/state/jetpack-notices/actions.js | 8 +- _inc/client/state/jetpack-notices/index.js | 3 + _inc/client/state/jetpack-notices/reducer.js | 6 +- _inc/client/state/jumpstart/index.js | 3 + _inc/client/state/jumpstart/reducer.js | 6 +- _inc/client/state/modules/index.js | 3 + _inc/client/state/modules/reducer.js | 10 +- _inc/client/state/rewind/index.js | 3 + _inc/client/state/search/index.js | 3 + _inc/client/state/settings/index.js | 3 + _inc/client/state/settings/reducer.js | 4 +- _inc/client/state/site/index.js | 3 + _inc/client/state/site/plugins/actions.js | 2 +- _inc/client/state/site/plugins/index.js | 3 + _inc/client/state/site/plugins/reducer.js | 2 +- _inc/client/state/site/reducer.js | 2 +- _inc/client/static.jsx | 16 +- _inc/client/traffic/ads.jsx | 2 +- _inc/client/traffic/site-stats.jsx | 6 +- _inc/client/utils/onkeydown-callback.js | 3 +- _inc/client/writing/composing.jsx | 4 +- 118 files changed, 1051 insertions(+), 1021 deletions(-) diff --git a/.eslintrc b/.eslintrc index 5adb5d450edc5..ac9dc97676919 100644 --- a/.eslintrc +++ b/.eslintrc @@ -54,7 +54,7 @@ "quote-props": [ 1, "as-needed", { "keywords": true } ], "quotes": [ 1, "single", "avoid-escape" ], "react/jsx-curly-spacing": [ 1, "always" ], - "react/jsx-no-bind": 1, + "react/jsx-no-bind": 0, "react/jsx-space-before-closing": 1, "react/no-danger": 1, "react/no-did-mount-set-state": 1, diff --git a/_inc/client/admin.js b/_inc/client/admin.js index 89b20c84438af..2a659c3b2a9bc 100644 --- a/_inc/client/admin.js +++ b/_inc/client/admin.js @@ -6,7 +6,7 @@ import React from 'react'; import { Provider } from 'react-redux'; import { Route, Router, useRouterHistory } from 'react-router'; import { syncHistoryWithStore } from 'react-router-redux'; -import { createHashHistory } from 'history' +import { createHashHistory } from 'history'; import assign from 'lodash/assign'; import injectTapEventPlugin from 'react-tap-event-plugin'; injectTapEventPlugin(); @@ -70,18 +70,18 @@ function render() {
- - - - - - - - - - - - + + + + + + + + + + + + diff --git a/_inc/client/at-a-glance/monitor.jsx b/_inc/client/at-a-glance/monitor.jsx index 6a2f5de397b19..58a5672716d45 100644 --- a/_inc/client/at-a-glance/monitor.jsx +++ b/_inc/client/at-a-glance/monitor.jsx @@ -27,7 +27,7 @@ class DashMonitor extends Component { } ); - this.props.updateOptions( { 'monitor': true } ); + this.props.updateOptions( { monitor: true } ); }; if ( this.props.getOptionValue( 'monitor' ) ) { diff --git a/_inc/client/at-a-glance/photon.jsx b/_inc/client/at-a-glance/photon.jsx index 9c5f6fd775bfe..dac57198aa2ba 100644 --- a/_inc/client/at-a-glance/photon.jsx +++ b/_inc/client/at-a-glance/photon.jsx @@ -17,7 +17,7 @@ import { isDevMode } from 'state/connection'; class DashPhoton extends Component { getContent() { const labelName = __( 'Image Performance' ), - activatePhoton = () => this.props.updateOptions( { 'photon': true } ); + activatePhoton = () => this.props.updateOptions( { photon: true } ); if ( this.props.getOptionValue( 'photon' ) ) { return ( diff --git a/_inc/client/at-a-glance/protect.jsx b/_inc/client/at-a-glance/protect.jsx index c7f2f1da1e43d..95933d6d633a3 100644 --- a/_inc/client/at-a-glance/protect.jsx +++ b/_inc/client/at-a-glance/protect.jsx @@ -18,7 +18,7 @@ import { isDevMode } from 'state/connection'; class DashProtect extends Component { getContent() { - const activateProtect = () => this.props.updateOptions( { 'protect': true } ); + const activateProtect = () => this.props.updateOptions( { protect: true } ); if ( this.props.getOptionValue( 'protect' ) ) { const protectCount = this.props.protectCount; diff --git a/_inc/client/components/admin-notices/index.jsx b/_inc/client/components/admin-notices/index.jsx index 7aee27b7474ea..775ab99eb9d96 100644 --- a/_inc/client/components/admin-notices/index.jsx +++ b/_inc/client/components/admin-notices/index.jsx @@ -16,8 +16,12 @@ class AdminNotices extends React.Component { $notice.wrapInner( '' ); $notice.find( '.dops-notice__content' ).before( icon ).css( 'display', 'block' ); $notice.find( '.dops-notice__content' ).after( dismiss ); - $notice.find( 'h2' ).replaceWith( function() { return jQuery( '', { html: this.innerHTML } ); } ); - $notice.find( 'p' ).replaceWith( function() { return jQuery( '
', { html: this.innerHTML } ); } ); + $notice.find( 'h2' ).replaceWith( function() { + return jQuery( '', { html: this.innerHTML } ); + } ); + $notice.find( 'p' ).replaceWith( function() { + return jQuery( '
', { html: this.innerHTML } ); + } ); $notice.prependTo( $adminNotices ).css( 'display', 'flex' ); } ); } @@ -34,8 +38,12 @@ class AdminNotices extends React.Component { $notice.wrapInner( '' ); $notice.find( '.dops-notice__content' ).before( icon ); $notice.find( '.vp-message' ).removeClass( 'vp-message' ).addClass( 'dops-notice__text' ); - $notice.find( 'h3' ).replaceWith( function() { return jQuery( '', { html: this.innerHTML } ); } ); - $notice.find( 'p' ).replaceWith( function() { return jQuery( '
', { html: this.innerHTML } ); } ); + $notice.find( 'h3' ).replaceWith( function() { + return jQuery( '', { html: this.innerHTML } ); + } ); + $notice.find( 'p' ).replaceWith( function() { + return jQuery( '
', { html: this.innerHTML } ); + } ); $notice.find( 'a[href*="admin.php?page=vaultpress"]' ).remove(); $notice.prependTo( $adminNotices ).css( 'display', 'flex' ); } ); @@ -48,7 +56,9 @@ class AdminNotices extends React.Component { $notice.find( '.button-primary' ).addClass( 'dops-notice__action' ).removeClass( 'button-primary' ).detach().appendTo( $notice ); $notice.find( 'p' ).not( '.submit' ).wrapAll( '' ); const $dopsNotice = $notice.find( '.dops-notice__text' ); - $dopsNotice.find( 'p' ).replaceWith( function() { return jQuery( '
', { html: this.innerHTML, 'class': 'dops-notice__moved_text' } ); } ); + $dopsNotice.find( 'p' ).replaceWith( function() { + return jQuery( '
', { html: this.innerHTML, 'class': 'dops-notice__moved_text' } ); + } ); $dopsNotice.find( 'br' ).remove(); $notice.find( '.button-secondary' ).removeClass( 'button-secondary' ).detach().appendTo( $dopsNotice ); $notice.find( '.submit' ).remove(); diff --git a/_inc/client/components/button-group/docs/example.jsx b/_inc/client/components/button-group/docs/example.jsx index 24ebb88713d0d..c69ed7f43d35b 100644 --- a/_inc/client/components/button-group/docs/example.jsx +++ b/_inc/client/components/button-group/docs/example.jsx @@ -3,18 +3,18 @@ /** * External dependencies */ -var React = require( 'react' ), +const React = require( 'react' ), PureRenderMixin = require( 'react-pure-render/mixin' ); /** * Internal dependencies */ -var ButtonGroup = require( 'components/button-group' ), +const ButtonGroup = require( 'components/button-group' ), Button = require( 'components/button' ), Card = require( 'components/card' ), Gridicon = require( 'components/gridicon' ); -var Buttons = React.createClass( { +const Buttons = React.createClass( { displayName: 'ButtonGroup', mixins: [ PureRenderMixin ], diff --git a/_inc/client/components/button/index.jsx b/_inc/client/components/button/index.jsx index 1cbcd377788b3..09abb32255f29 100644 --- a/_inc/client/components/button/index.jsx +++ b/_inc/client/components/button/index.jsx @@ -35,7 +35,7 @@ export default React.createClass( { render() { const element = this.props.href ? 'a' : 'button'; - let { primary, compact, scary, borderless, className, ...props } = this.props; + const { primary, compact, scary, borderless, className, ...props } = this.props; const buttonClasses = classNames( { 'dops-button': true, diff --git a/_inc/client/components/card/compact.jsx b/_inc/client/components/card/compact.jsx index e626d345eee4c..80baa553646bd 100644 --- a/_inc/client/components/card/compact.jsx +++ b/_inc/client/components/card/compact.jsx @@ -1,14 +1,14 @@ /** * External dependencies */ -var React = require( 'react' ), +const React = require( 'react' ), assign = require( 'lodash/assign' ), classnames = require( 'classnames' ); /** * Internal dependencies */ -var Card = require( 'components/card' ); +const Card = require( 'components/card' ); module.exports = React.createClass( { displayName: 'CompactCard', diff --git a/_inc/client/components/card/index.jsx b/_inc/client/components/card/index.jsx index 1443ec58da8c5..6beae1ae2b57f 100644 --- a/_inc/client/components/card/index.jsx +++ b/_inc/client/components/card/index.jsx @@ -1,21 +1,26 @@ +/** + * External dependencies + */ const PropTypes = require( 'prop-types' ); -var React = require( 'react' ), - Gridicon = require( '../gridicon' ), - classnames = require( 'classnames' ); - +const React = require( 'react' ); +const classnames = require( 'classnames' ); import assign from 'lodash/assign'; import omit from 'lodash/omit'; +/** + * Internal dependencies + */ +const Gridicon = require( '../gridicon' ); require( './style.scss' ); -let CardSection = React.createClass( { +const CardSection = React.createClass( { propTypes: { title: PropTypes.any, vertical: PropTypes.any, style: PropTypes.object, className: PropTypes.string, - device: PropTypes.oneOf( ['desktop', 'tablet', 'phone'] ) + device: PropTypes.oneOf( [ 'desktop', 'tablet', 'phone' ] ) }, getDefaultProps: function() { @@ -24,21 +29,21 @@ let CardSection = React.createClass( { render: function() { return ( -
- {this.props.title ? - this._renderWithTitle() : - this.props.children +
+ {this.props.title + ? this._renderWithTitle() + : this.props.children }
); }, _renderWithTitle: function() { - var orientation = this.props.vertical ? 'vertical' : 'horizontal'; - var wrapperClassName = 'dops-card-section-orient-' + orientation; + const orientation = this.props.vertical ? 'vertical' : 'horizontal'; + const wrapperClassName = 'dops-card-section-orient-' + orientation; return ( -
+

{this.props.title}

@@ -50,7 +55,7 @@ let CardSection = React.createClass( { } } ); -let CardFooter = React.createClass( { +const CardFooter = React.createClass( { render: function() { return ( @@ -61,7 +66,7 @@ let CardFooter = React.createClass( { } } ); -let Card = React.createClass( { +const Card = React.createClass( { propTypes: { meta: PropTypes.any, @@ -127,8 +132,8 @@ let Card = React.createClass( { _renderIcon: function() { return ( - - { this.props.icon && } + + { this.props.icon && } { this.props.iconLabel } ); diff --git a/_inc/client/components/chart/bar-container.jsx b/_inc/client/components/chart/bar-container.jsx index aa574c8834c61..8120531da4f01 100644 --- a/_inc/client/components/chart/bar-container.jsx +++ b/_inc/client/components/chart/bar-container.jsx @@ -1,13 +1,13 @@ /** * External dependencies */ -var PropTypes = require( 'prop-types' ); -var React = require( 'react' ); +const PropTypes = require( 'prop-types' ); +const React = require( 'react' ); /** * Internal dependencies */ -var Bar = require( './bar' ), +const Bar = require( './bar' ), XAxis = require( './x-axis' ); module.exports = React.createClass( { @@ -22,14 +22,12 @@ module.exports = React.createClass( { }, buildBars: function( max ) { - var bars, - numberBars = this.props.data.length, - tooltipPosition = 'bottom right', + const numberBars = this.props.data.length, width = this.props.chartWidth, barWidth = ( width / numberBars ); - - bars = this.props.data.map( function ( item, index ) { - var barOffset = barWidth * ( index + 1 ); + let tooltipPosition = 'bottom right'; + const bars = this.props.data.map( function( item, index ) { + const barOffset = barWidth * ( index + 1 ); if ( ( ( barOffset + 230 ) > width ) && diff --git a/_inc/client/components/chart/bar.jsx b/_inc/client/components/chart/bar.jsx index 640f0b232a38f..c23a6fabf59d8 100644 --- a/_inc/client/components/chart/bar.jsx +++ b/_inc/client/components/chart/bar.jsx @@ -4,13 +4,13 @@ * External dependencies */ const PropTypes = require( 'prop-types' ); -var React = require( 'react' ), +const React = require( 'react' ), classNames = require( 'classnames' ); /** * Internal dependencies */ -var Tooltip = require( 'components/tooltip' ), +const Tooltip = require( 'components/tooltip' ), Gridicon = require( 'components/gridicon' ); module.exports = React.createClass( { @@ -31,31 +31,29 @@ module.exports = React.createClass( { }, buildSections: function() { - var value = this.props.data.value, + const value = this.props.data.value, max = this.props.max, percentage = max ? Math.ceil( ( value / max ) * 10000 ) / 100 : 0, remain = 100 - percentage, remainFloor = Math.max( 1, Math.floor( remain ) ), sections = [], - remainStyle, - valueStyle, nestedValue = this.props.data.nestedValue, - nestedBar, - nestedPercentage, - nestedStyle, spacerClassOptions = { 'dops-chart__bar-section': true, 'is-spacer': true, 'is-ghost': ( 100 === remain ) && ! this.props.active }; + let nestedBar, + nestedPercentage, + nestedStyle; - remainStyle = { + const remainStyle = { height: remainFloor + '%' }; sections.push(
); - valueStyle = { + const valueStyle = { top: remainFloor + '%' }; @@ -74,13 +72,13 @@ module.exports = React.createClass( { return sections; }, - clickHandler: function(){ + clickHandler: function() { if ( 'function' === typeof( this.props.clickHandler ) ) { this.props.clickHandler( this.props.data ); } }, - mouseEnter: function(){ + mouseEnter: function() { this.setState( { showPopover: true } ); }, @@ -100,8 +98,8 @@ module.exports = React.createClass( { const { tooltipData } = this.props.data; const listItemElements = tooltipData.map( function( options, i ) { - var wrapperClasses = [ 'module-content-list-item' ], - gridiconSpan; + const wrapperClasses = [ 'module-content-list-item' ]; + let gridiconSpan; if ( options.icon ) { gridiconSpan = ( ); @@ -111,9 +109,9 @@ module.exports = React.createClass( { return (
  • - - { options.value } - { gridiconSpan }{ options.label } + + { options.value } + { gridiconSpan }{ options.label }
    • ); @@ -136,17 +134,14 @@ module.exports = React.createClass( { }, render: function() { - var barStyle, - barClass, - count = this.props.count || 1; - - barClass = { 'dops-chart__bar': true }; + const count = this.props.count || 1; + const barClass = { 'dops-chart__bar': true }; - if ( this.props.className ){ + if ( this.props.className ) { barClass[ this.props.className ] = true; } - barStyle = { + const barStyle = { width: ( ( 1 / count ) * 100 ) + '%' }; diff --git a/_inc/client/components/chart/index.jsx b/_inc/client/components/chart/index.jsx index 70082600c423a..1f6428b3aa805 100644 --- a/_inc/client/components/chart/index.jsx +++ b/_inc/client/components/chart/index.jsx @@ -1,7 +1,7 @@ /** * External dependencies */ -var React = require( 'react' ), +const React = require( 'react' ), PropTypes = require( 'prop-types' ), noop = require( 'lodash/noop' ), throttle = require( 'lodash/throttle' ); @@ -9,7 +9,7 @@ var React = require( 'react' ), /** * Internal dependencies */ -var BarContainer = require( './bar-container' ), +const BarContainer = require( './bar-container' ), touchDetect = require( 'lib/touch-detect' ); require( './style.scss' ); @@ -59,8 +59,8 @@ module.exports = React.createClass( { }, resize: function() { - var node = this.refs.chart, - width = node.clientWidth - 82, + const node = this.refs.chart; + let width = node.clientWidth - 82, maxBars; if ( touchDetect.hasTouch() ) { @@ -77,9 +77,9 @@ module.exports = React.createClass( { }, getYAxisMax: function( values ) { - var max = Math.max.apply( null, values ), - operand = Math.pow( 10, ( max.toString().length - 1 ) ), - rounded = ( Math.ceil( ( max + 1 ) / operand ) * operand ); + const max = Math.max.apply( null, values ), + operand = Math.pow( 10, ( max.toString().length - 1 ) ); + let rounded = ( Math.ceil( ( max + 1 ) / operand ) * operand ); if ( rounded < 10 ) { rounded = 10; @@ -89,7 +89,7 @@ module.exports = React.createClass( { }, getData: function() { - var data = this.props.data; + let data = this.props.data; data = data.slice( 0 - this.state.maxBars ); @@ -97,9 +97,9 @@ module.exports = React.createClass( { }, getValues: function() { - var data = this.getData(); + let data = this.getData(); - data = data.map( function ( item ) { + data = data.map( function( item ) { return item.value; }, this ); @@ -115,10 +115,10 @@ module.exports = React.createClass( { }, render: function() { - var values = this.getValues(), + const values = this.getValues(), yAxisMax = this.getYAxisMax( values ), - data = this.getData(), - emptyChart; + data = this.getData(); + let emptyChart; // If we have an empty chart, show a message // @todo this message needs to either use a or make a custom "chart__notice" class @@ -134,7 +134,7 @@ module.exports = React.createClass( { } return ( -
    +
    diff --git a/_inc/client/components/chart/label.jsx b/_inc/client/components/chart/label.jsx index cc62bda29b715..a71f9f9d46f1b 100644 --- a/_inc/client/components/chart/label.jsx +++ b/_inc/client/components/chart/label.jsx @@ -1,8 +1,8 @@ /** * External dependencies */ -var PropTypes = require( 'prop-types' ); -var React = require( 'react' ); +const PropTypes = require( 'prop-types' ); +const React = require( 'react' ); module.exports = React.createClass( { displayName: 'ModuleChartLabel', @@ -14,10 +14,8 @@ module.exports = React.createClass( { }, render: function() { - var labelStyle, - dir = 'left'; - - labelStyle = { + const dir = 'left'; + const labelStyle = { width: this.props.width + 'px' }; diff --git a/_inc/client/components/chart/legend.jsx b/_inc/client/components/chart/legend.jsx index b27fc94564855..3b4c2bc39b8ca 100644 --- a/_inc/client/components/chart/legend.jsx +++ b/_inc/client/components/chart/legend.jsx @@ -3,15 +3,15 @@ /** * External dependencies */ -var PropTypes = require( 'prop-types' ); -var React = require( 'react' ), +const PropTypes = require( 'prop-types' ); +const React = require( 'react' ), PureRenderMixin = require( 'react-pure-render/mixin' ); /** * Internal dependencies */ -var LegendItem = React.createClass( { +const LegendItem = React.createClass( { displayName: 'ModuleChartLegendItem', mixins: [ PureRenderMixin ], @@ -31,7 +31,7 @@ var LegendItem = React.createClass( { return (
    • @@ -40,7 +40,7 @@ var LegendItem = React.createClass( { } ); -var Legend = React.createClass( { +const Legend = React.createClass( { displayName: 'ModuleChartLegend', propTypes: { @@ -56,27 +56,22 @@ var Legend = React.createClass( { }, render: function() { - var legendColors = [ 'dops-chart__legend-color is-dark-blue' ], - tab = this.props.activeTab, - legendItems; - - legendItems = this.props.availableCharts.map( function( legendItem, index ) { - var colorClass = legendColors[ index ], - checked = ( -1 !== this.props.activeCharts.indexOf( legendItem ) ), - tab; - - tab = this.props.tabs.filter( function( tab ) { - return tab.attr === legendItem; + const legendColors = [ 'dops-chart__legend-color is-dark-blue' ], + activeTab = this.props.activeTab; + const legendItems = this.props.availableCharts.map( function( legendItem, index ) { + const colorClass = legendColors[ index ], + checked = ( -1 !== this.props.activeCharts.indexOf( legendItem ) ); + const tab = this.props.tabs.filter( function( currentTab ) { + return currentTab.attr === legendItem; } ).shift(); return ; }, this ); - return (
      -
    • { tab.label }
      • +
    • { activeTab.label }
      • { legendItems }
    diff --git a/_inc/client/components/chart/x-axis.jsx b/_inc/client/components/chart/x-axis.jsx index 05a127467b3ba..4ea89e2cd7c5a 100644 --- a/_inc/client/components/chart/x-axis.jsx +++ b/_inc/client/components/chart/x-axis.jsx @@ -1,14 +1,14 @@ /** * External dependencies */ -var React = require( 'react' ), +const React = require( 'react' ), PropTypes = require( 'prop-types' ), throttle = require( 'lodash/throttle' ); /** * Internal dependencies */ -var Label = require( './label' ); +const Label = require( './label' ); module.exports = React.createClass( { displayName: 'ModuleChartXAxis', @@ -34,7 +34,7 @@ module.exports = React.createClass( { // Remove listener componentWillUnmount: function() { - if( this.resizeThrottled.cancel ) { + if ( this.resizeThrottled.cancel ) { this.resizeThrottled.cancel(); } window.removeEventListener( 'resize', this.resizeThrottled ); @@ -45,15 +45,9 @@ module.exports = React.createClass( { }, resize: function( nextProps ) { - var node, - props = this.props, - width, - dataCount, - spacing, - labelWidth, - divisor; + let props = this.props; - node = this.refs.axis; + const node = this.refs.axis; if ( nextProps && ! ( nextProps instanceof Event ) ) { props = nextProps; @@ -65,13 +59,13 @@ module.exports = React.createClass( { */ node.style.overflow = 'hidden'; - width = node.clientWidth; + const width = node.clientWidth; node.style.overflow = 'visible'; - dataCount = props.data.length || 1; - spacing = width / dataCount; - labelWidth = props.labelWidth; - divisor = Math.ceil( labelWidth / spacing ); + const dataCount = props.data.length || 1; + const spacing = width / dataCount; + const labelWidth = props.labelWidth; + const divisor = Math.ceil( labelWidth / spacing ); this.setState( { divisor: divisor, @@ -80,13 +74,12 @@ module.exports = React.createClass( { }, render: function() { - var labels, - data = this.props.data; + const data = this.props.data; - labels = data.map( function ( item, index ) { - var x = ( index * this.state.spacing ) + ( ( this.state.spacing - this.props.labelWidth ) / 2 ), - rightIndex = data.length - index - 1, - label; + const labels = data.map( function( item, index ) { + const x = ( index * this.state.spacing ) + ( ( this.state.spacing - this.props.labelWidth ) / 2 ); + const rightIndex = data.length - index - 1; + let label; if ( rightIndex % this.state.divisor === 0 ) { label =