Fix prefer-template eslint rule in ES6 files

[MAILPOET-1139]
This commit is contained in:
Pavel Dohnal
2017-12-06 14:18:24 +00:00
parent e7ddfc3d29
commit 170fd7f051
26 changed files with 58 additions and 59 deletions

View File

@ -40,7 +40,6 @@
"jsx-a11y/alt-text": 0, "jsx-a11y/alt-text": 0,
"func-names": 0, "func-names": 0,
"object-shorthand": 0, "object-shorthand": 0,
"prefer-template": 0,
"default-case": 0, "default-case": 0,
"array-callback-return": 0, "array-callback-return": 0,
"consistent-return": 0, "consistent-return": 0,

View File

@ -19,7 +19,7 @@ define([
const isChecked = !!(Number(this.props.item[this.props.field.name])); const isChecked = !!(Number(this.props.item[this.props.field.name]));
const options = Object.keys(this.props.field.values).map( const options = Object.keys(this.props.field.values).map(
(value, index) => ( (value, index) => (
<p key={'checkbox-' + index}> <p key={`checkbox-${index}`}>
<label> <label>
<input <input
ref="checkbox" ref="checkbox"

View File

@ -72,14 +72,14 @@ define([
if (inline === true) { if (inline === true) {
return ( return (
<span key={'field-' + (data.index || 0)}> <span key={`field-${data.index || 0}`}>
{ field } { field }
{ description } { description }
</span> </span>
); );
} }
return ( return (
<div key={'field-' + (data.index || 0)}> <div key={`field-${data.index || 0}`}>
{ field } { field }
{ description } { description }
</div> </div>
@ -110,7 +110,7 @@ define([
<tr> <tr>
<th scope="row"> <th scope="row">
<label <label
htmlFor={'field_' + this.props.field.name} htmlFor={`field_${this.props.field.name}`}
> >
{ this.props.field.label } { this.props.field.label }
{ tip } { tip }

View File

@ -13,7 +13,7 @@ define([
const selected_value = this.props.item[this.props.field.name]; const selected_value = this.props.item[this.props.field.name];
const options = Object.keys(this.props.field.values).map( const options = Object.keys(this.props.field.values).map(
(value, index) => ( (value, index) => (
<p key={'radio-' + index}> <p key={`radio-${index}`}>
<label> <label>
<input <input
type="radio" type="radio"

View File

@ -49,7 +49,7 @@ const FormFieldSelect = React.createClass({
return ( return (
<option <option
key={'option-' + index} key={`option-${index}`}
value={value}> value={value}>
{ this.props.field.values[value] } { this.props.field.values[value] }
</option> </option>
@ -60,7 +60,7 @@ const FormFieldSelect = React.createClass({
return ( return (
<select <select
name={this.props.field.name} name={this.props.field.name}
id={'field_' + this.props.field.name} id={`field_${this.props.field.name}`}
value={this.props.item[this.props.field.name]} value={this.props.item[this.props.field.name]}
onChange={this.props.onValueChange} onChange={this.props.onValueChange}
{...this.props.field.validation} {...this.props.field.validation}

View File

@ -35,7 +35,7 @@ define([
(this.props.item !== undefined && prevProps.item !== undefined) (this.props.item !== undefined && prevProps.item !== undefined)
&& (this.props.item.id !== prevProps.item.id) && (this.props.item.id !== prevProps.item.id)
) { ) {
jQuery('#' + this.refs.select.id) jQuery(`#${this.refs.select.id}`)
.val(this.getSelectedValues()) .val(this.getSelectedValues())
.trigger('change'); .trigger('change');
} }
@ -47,7 +47,7 @@ define([
}, },
destroySelect2: function () { destroySelect2: function () {
if (this.isSelect2Initialized()) { if (this.isSelect2Initialized()) {
jQuery('#' + this.refs.select.id).select2('destroy'); jQuery(`#${this.refs.select.id}`).select2('destroy');
} }
}, },
setupSelect2: function () { setupSelect2: function () {
@ -55,7 +55,7 @@ define([
return; return;
} }
const select2 = jQuery('#' + this.refs.select.id).select2({ const select2 = jQuery(`#${this.refs.select.id}`).select2({
width: (this.props.width || ''), width: (this.props.width || ''),
templateResult: function (item) { templateResult: function (item) {
if (item.element && item.element.selected) { if (item.element && item.element.selected) {
@ -97,8 +97,8 @@ define([
return null; return null;
}, },
loadCachedItems: function () { loadCachedItems: function () {
if (typeof (window['mailpoet_' + this.props.field.endpoint]) !== 'undefined') { if (typeof (window[`mailpoet_${this.props.field.endpoint}`]) !== 'undefined') {
let items = window['mailpoet_' + this.props.field.endpoint]; let items = window[`mailpoet_${this.props.field.endpoint}`];
if (this.props.field.filter !== undefined) { if (this.props.field.filter !== undefined) {
@ -114,7 +114,7 @@ define([
let value; let value;
if (this.props.onValueChange !== undefined) { if (this.props.onValueChange !== undefined) {
if (this.props.field.multiple) { if (this.props.field.multiple) {
value = jQuery('#' + this.refs.select.id).val(); value = jQuery(`#${this.refs.select.id}`).val();
} else { } else {
value = e.target.value; value = e.target.value;
} }
@ -162,7 +162,7 @@ define([
return ( return (
<option <option
key={'option-' + index} key={`option-${index}`}
value={value} value={value}
title={searchLabel} title={searchLabel}
> >

View File

@ -22,7 +22,7 @@ const FormFieldText = React.createClass({
: false : false
} }
name={this.props.field.name} name={this.props.field.name}
id={'field_' + this.props.field.name} id={`field_${this.props.field.name}`}
value={value} value={value}
placeholder={this.props.field.placeholder} placeholder={this.props.field.placeholder}
onChange={this.props.onValueChange} onChange={this.props.onValueChange}

View File

@ -11,7 +11,7 @@ define([
type="text" type="text"
className="regular-text" className="regular-text"
name={this.props.field.name} name={this.props.field.name}
id={'field_' + this.props.field.name} id={`field_${this.props.field.name}`}
value={this.props.item[this.props.field.name]} value={this.props.item[this.props.field.name]}
placeholder={this.props.field.placeholder} placeholder={this.props.field.placeholder}
defaultValue={this.props.field.defaultValue} defaultValue={this.props.field.defaultValue}

View File

@ -156,7 +156,7 @@ define(
let errors; let errors;
if (this.getErrors() !== undefined) { if (this.getErrors() !== undefined) {
errors = this.getErrors().map((error, index) => ( errors = this.getErrors().map((error, index) => (
<p key={'error-' + index} className="mailpoet_error"> <p key={`error-${index}`} className="mailpoet_error">
{ error.message } { error.message }
</p> </p>
)); ));
@ -193,7 +193,7 @@ define(
field={field} field={field}
item={this.getValues()} item={this.getValues()}
onValueChange={onValueChange} onValueChange={onValueChange}
key={'field-' + i} /> key={`field-${i}`} />
); );
}); });

View File

@ -149,7 +149,7 @@ const FormList = React.createClass({
let segments = window.mailpoet_segments.filter(segment => (jQuery.inArray(segment.id, form.segments) !== -1)).map(segment => segment.name).join(', '); let segments = window.mailpoet_segments.filter(segment => (jQuery.inArray(segment.id, form.segments) !== -1)).map(segment => segment.name).join(', ');
if (form.settings.segments_selected_by === 'user') { if (form.settings.segments_selected_by === 'user') {
segments = MailPoet.I18n.t('userChoice') + ' ' + segments; segments = `${MailPoet.I18n.t('userChoice')} ${segments}`;
} }
return ( return (

View File

@ -20,7 +20,7 @@ function renderStatusMessage(status, error, link) {
} }
return ( return (
<div className={'mailpoet_notice notice inline notice-' + noticeType} style={{ marginTop: '1em' }}> <div className={`mailpoet_notice notice inline notice-${noticeType}`} style={{ marginTop: '1em' }}>
<p>{noticeMessage}</p> <p>{noticeMessage}</p>
</div> </div>
); );

View File

@ -30,7 +30,7 @@ function Tabs(props) {
return ( return (
<Link <Link
key={'tab-' + index} key={`tab-${index}`}
className={tabClasses} className={tabClasses}
to={tab.link} to={tab.link}
>{ tab.label }</Link> >{ tab.label }</Link>

View File

@ -98,7 +98,7 @@ define([
{ this.props.bulk_actions.map((action, index) => ( { this.props.bulk_actions.map((action, index) => (
<option <option
value={action.name} value={action.name}
key={'action-' + index} key={`action-${index}`}
>{ action.label }</option> >{ action.label }</option>
)) } )) }
</select> </select>

View File

@ -12,7 +12,7 @@ define([
handleFilterAction: function () { handleFilterAction: function () {
const filters = {}; const filters = {};
this.getAvailableFilters().map((filter, i) => { this.getAvailableFilters().map((filter, i) => {
filters[this.refs['filter-' + i].name] = this.refs['filter-' + i].value; filters[this.refs[`filter-${i}`].name] = this.refs[`filter-${i}`].value;
}); });
if (this.props.onBeforeSelectFilter) { if (this.props.onBeforeSelectFilter) {
this.props.onBeforeSelectFilter(filters); this.props.onBeforeSelectFilter(filters);
@ -37,7 +37,7 @@ define([
this.getAvailableFilters().map( this.getAvailableFilters().map(
(filter, i) => { (filter, i) => {
if (selected_filters[filter] !== undefined && selected_filters[filter]) { if (selected_filters[filter] !== undefined && selected_filters[filter]) {
jQuery(this.refs['filter-' + i]) jQuery(this.refs[`filter-${i}`])
.val(selected_filters[filter]) .val(selected_filters[filter])
.trigger('change'); .trigger('change');
} }
@ -56,7 +56,7 @@ define([
{ filters[filter].map((option, j) => ( { filters[filter].map((option, j) => (
<option <option
value={option.value} value={option.value}
key={'filter-option-' + j} key={`filter-option-${j}`}
>{ option.label }</option> >{ option.label }</option>
)) } )) }
</select> </select>

View File

@ -19,7 +19,7 @@ const ListingHeader = React.createClass({
<ListingColumn <ListingColumn
onSort={this.props.onSort} onSort={this.props.onSort}
sort_by={this.props.sort_by} sort_by={this.props.sort_by}
key={'column-' + index} key={`column-${index}`}
column={renderColumn} /> column={renderColumn} />
); );
}); });

View File

@ -44,7 +44,7 @@ const ListingItem = React.createClass({
checkbox = ( checkbox = (
<th className="check-column" scope="row"> <th className="check-column" scope="row">
<label className="screen-reader-text">{ <label className="screen-reader-text">{
'Select ' + this.props.item[this.props.columns[0].name] `Select ${this.props.item[this.props.columns[0].name]}`
}</label> }</label>
<input <input
type="checkbox" type="checkbox"
@ -74,7 +74,7 @@ const ListingItem = React.createClass({
if (action.name === 'trash') { if (action.name === 'trash') {
custom_action = ( custom_action = (
<span key={'action-' + index} className="trash"> <span key={`action-${index}`} className="trash">
{(!is_first) ? ' | ' : ''} {(!is_first) ? ' | ' : ''}
<a <a
href="javascript:;" href="javascript:;"
@ -90,7 +90,7 @@ const ListingItem = React.createClass({
custom_action = ( custom_action = (
<span <span
onClick={this.props.onRefreshItems} onClick={this.props.onRefreshItems}
key={'action-' + index} className={action.name}> key={`action-${index}`} className={action.name}>
{(!is_first) ? ' | ' : ''} {(!is_first) ? ' | ' : ''}
{ action.link(this.props.item) } { action.link(this.props.item) }
</span> </span>
@ -98,7 +98,7 @@ const ListingItem = React.createClass({
} else if (action.link) { } else if (action.link) {
custom_action = ( custom_action = (
<span <span
key={'action-' + index} className={action.name}> key={`action-${index}`} className={action.name}>
{(!is_first) ? ' | ' : ''} {(!is_first) ? ' | ' : ''}
{ action.link(this.props.item) } { action.link(this.props.item) }
</span> </span>
@ -106,7 +106,7 @@ const ListingItem = React.createClass({
} else { } else {
custom_action = ( custom_action = (
<span <span
key={'action-' + index} className={action.name}> key={`action-${index}`} className={action.name}>
{(!is_first) ? ' | ' : ''} {(!is_first) ? ' | ' : ''}
<a href="javascript:;" onClick={ <a href="javascript:;" onClick={
(action.onClick !== undefined) (action.onClick !== undefined)
@ -186,7 +186,7 @@ const ListingItem = React.createClass({
const row_classes = classNames({ 'is-expanded': this.state.expanded }); const row_classes = classNames({ 'is-expanded': this.state.expanded });
return ( return (
<tr className={row_classes} data-automation-id={'listing_item_' + this.props.item.id}> <tr className={row_classes} data-automation-id={`listing_item_${this.props.item.id}`}>
{ checkbox } { checkbox }
{ this.props.onRenderItem(this.props.item, actions) } { this.props.onRenderItem(this.props.item, actions) }
</tr> </tr>
@ -418,8 +418,8 @@ const Listing = React.createClass({
if (ret.indexOf(':') !== -1) { if (ret.indexOf(':') !== -1) {
const params = this.getParams(); const params = this.getParams();
Object.keys(params).map((key) => { Object.keys(params).map((key) => {
if (ret.indexOf(':' + key) !== -1) { if (ret.indexOf(`:${key}`) !== -1) {
ret = ret.replace(':' + key, params[key]); ret = ret.replace(`:${key}`, params[key]);
} }
}); });
} }

View File

@ -53,7 +53,7 @@ define(
} }
return ( return (
<span key={'step-' + index}> <span key={`step-${index}`}>
<span className={stepClasses}> <span className={stepClasses}>
{ label } { label }
</span> </span>

View File

@ -19,8 +19,8 @@ const QueueMixin = {
newsletter_id: newsletter.id, newsletter_id: newsletter.id,
}, },
}).done(() => { }).done(() => {
jQuery('#resume_' + newsletter.id).show(); jQuery(`#resume_${newsletter.id}`).show();
jQuery('#pause_' + newsletter.id).hide(); jQuery(`#pause_${newsletter.id}`).hide();
}).fail((response) => { }).fail((response) => {
if (response.errors.length > 0) { if (response.errors.length > 0) {
MailPoet.Notice.error( MailPoet.Notice.error(
@ -39,8 +39,8 @@ const QueueMixin = {
newsletter_id: newsletter.id, newsletter_id: newsletter.id,
}, },
}).done(() => { }).done(() => {
jQuery('#pause_' + newsletter.id).show(); jQuery(`#pause_${newsletter.id}`).show();
jQuery('#resume_' + newsletter.id).hide(); jQuery(`#resume_${newsletter.id}`).hide();
}).fail((response) => { }).fail((response) => {
if (response.errors.length > 0) { if (response.errors.length > 0) {
MailPoet.Notice.error( MailPoet.Notice.error(
@ -95,7 +95,7 @@ const QueueMixin = {
{ newsletter.queue.count_processed } / { newsletter.queue.count_total } { newsletter.queue.count_processed } / { newsletter.queue.count_total }
&nbsp;&nbsp; &nbsp;&nbsp;
<a <a
id={'resume_' + newsletter.id} id={`resume_${newsletter.id}`}
className="button" className="button"
style={{ display: (newsletter.queue.status === 'paused') style={{ display: (newsletter.queue.status === 'paused')
? 'inline-block' : 'none' }} ? 'inline-block' : 'none' }}
@ -103,7 +103,7 @@ const QueueMixin = {
onClick={this.resumeSending.bind(null, newsletter)} onClick={this.resumeSending.bind(null, newsletter)}
>{MailPoet.I18n.t('resume')}</a> >{MailPoet.I18n.t('resume')}</a>
<a <a
id={'pause_' + newsletter.id} id={`pause_${newsletter.id}`}
className="button mailpoet_pause" className="button mailpoet_pause"
style={{ display: (newsletter.queue.status === null) style={{ display: (newsletter.queue.status === null)
? 'inline-block' : 'none' }} ? 'inline-block' : 'none' }}
@ -128,7 +128,7 @@ const QueueMixin = {
<div className={progressClasses}> <div className={progressClasses}>
<span <span
className="mailpoet_progress_bar" className="mailpoet_progress_bar"
style={{ width: progress_bar_width + '%' }} style={{ width: `${progress_bar_width}%` }}
></span> ></span>
<span className="mailpoet_progress_label"> <span className="mailpoet_progress_label">
{ percentage } { percentage }
@ -393,8 +393,8 @@ const MailerMixin = {
.replace('%$1s', state.meta.mta_log.error.error_message); .replace('%$1s', state.meta.mta_log.error.error_message);
} }
if (state.meta.mta_log.error.error_code) { if (state.meta.mta_log.error.error_code) {
mailer_error_notice += ' ' + MailPoet.I18n.t('mailerErrorCode') mailer_error_notice += ` ${MailPoet.I18n.t('mailerErrorCode')
.replace('%$1s', state.meta.mta_log.error.error_code); .replace('%$1s', state.meta.mta_log.error.error_code)}`;
} }
return ( return (
<div> <div>

View File

@ -35,7 +35,7 @@ const ListingTabs = React.createClass({
return ( return (
<Link <Link
key={'tab-' + index} key={`tab-${index}`}
className={tabClasses} className={tabClasses}
to={tab.link} to={tab.link}
onClick={() => MailPoet.trackEvent(`Tab Emails > ${tab.name} clicked`, onClick={() => MailPoet.trackEvent(`Tab Emails > ${tab.name} clicked`,

View File

@ -238,7 +238,7 @@ const NewsletterListWelcome = React.createClass({
); );
break; break;
} }
sendingEvent += ' [' + sendingDelay + ']'; sendingEvent += ` [${sendingDelay}]`;
} }
// add a "period" at the end if we do have a sendingEvent // add a "period" at the end if we do have a sendingEvent
sendingEvent += '.'; sendingEvent += '.';

View File

@ -120,7 +120,7 @@ define(
MailPoet.trackEvent('Emails > Welcome email activated', { MailPoet.trackEvent('Emails > Welcome email activated', {
'MailPoet Free version': window.mailpoet_version, 'MailPoet Free version': window.mailpoet_version,
'List type': opts.event, 'List type': opts.event,
Delay: opts.afterTimeNumber + ' ' + opts.afterTimeType, Delay: `${opts.afterTimeNumber} ${opts.afterTimeType}`,
}); });
} else if (response2.data.type === 'notification') { } else if (response2.data.type === 'notification') {
MailPoet.Notice.success( MailPoet.Notice.success(
@ -324,7 +324,7 @@ define(
&nbsp;{MailPoet.I18n.t('orSimply')}&nbsp; &nbsp;{MailPoet.I18n.t('orSimply')}&nbsp;
<a <a
href={ href={
'?page=mailpoet-newsletter-editor&id=' + this.props.params.id `?page=mailpoet-newsletter-editor&id=${this.props.params.id}`
} }
onClick={this.handleRedirectToDesign}> onClick={this.handleRedirectToDesign}>
{MailPoet.I18n.t('goBackToDesign')} {MailPoet.I18n.t('goBackToDesign')}

View File

@ -42,7 +42,7 @@ define(
return !segment.deleted_at; return !segment.deleted_at;
}, },
getLabel: function (segment) { getLabel: function (segment) {
return segment.name + ' (' + parseInt(segment.subscribers, 10).toLocaleString() + ')'; return `${segment.name} (${parseInt(segment.subscribers, 10).toLocaleString()})`;
}, },
transformChangedValue: function (segment_ids) { transformChangedValue: function (segment_ids) {
const all_segments = this.state.items; const all_segments = this.state.items;

View File

@ -16,7 +16,7 @@ define(
const jQuery = jq; const jQuery = jq;
const currentTime = window.mailpoet_current_time || '00:00'; const currentTime = window.mailpoet_current_time || '00:00';
const defaultDateTime = window.mailpoet_current_date + ' 00:00:00'; const defaultDateTime = `${window.mailpoet_current_date} 00:00:00`;
const timeOfDayItems = window.mailpoet_schedule_time_of_day; const timeOfDayItems = window.mailpoet_schedule_time_of_day;
const dateDisplayFormat = window.mailpoet_date_display_format; const dateDisplayFormat = window.mailpoet_date_display_format;
const dateStorageFormat = window.mailpoet_date_storage_format; const dateStorageFormat = window.mailpoet_date_storage_format;
@ -170,7 +170,7 @@ define(
const options = Object.keys(timeOfDayItems).map( const options = Object.keys(timeOfDayItems).map(
(value, index) => ( (value, index) => (
<option <option
key={'option-' + index} key={`option-${index}`}
value={value}> value={value}>
{ timeOfDayItems[value] } { timeOfDayItems[value] }
</option> </option>
@ -348,7 +348,7 @@ define(
return !segment.deleted_at; return !segment.deleted_at;
}, },
getLabel: function (segment) { getLabel: function (segment) {
return segment.name + ' (' + parseInt(segment.subscribers, 10).toLocaleString() + ')'; return `${segment.name} (${parseInt(segment.subscribers, 10).toLocaleString()})`;
}, },
transformChangedValue: function (segment_ids) { transformChangedValue: function (segment_ids) {
const all_segments = this.state.items; const all_segments = this.state.items;

View File

@ -151,7 +151,7 @@ const NewsletterTemplates = React.createClass({
}, },
}).done((response) => { }).done((response) => {
// TODO: Move this URL elsewhere // TODO: Move this URL elsewhere
window.location = 'admin.php?page=mailpoet-newsletter-editor&id=' + response.data.id; window.location = `admin.php?page=mailpoet-newsletter-editor&id=${response.data.id}`;
}).fail((response) => { }).fail((response) => {
if (response.errors.length > 0) { if (response.errors.length > 0) {
MailPoet.Notice.error( MailPoet.Notice.error(
@ -229,7 +229,7 @@ const NewsletterTemplates = React.createClass({
} }
return ( return (
<li key={'template-' + index}> <li key={`template-${index}`}>
<div className="mailpoet_thumbnail"> <div className="mailpoet_thumbnail">
{ thumbnail } { thumbnail }
</div> </div>
@ -249,7 +249,7 @@ const NewsletterTemplates = React.createClass({
&nbsp; &nbsp;
<a <a
className="button button-primary" className="button button-primary"
data-automation-id={'select_template_' + index} data-automation-id={`select_template_${index}`}
onClick={this.handleSelectTemplate.bind(null, template)} onClick={this.handleSelectTemplate.bind(null, template)}
> >
{MailPoet.I18n.t('select')} {MailPoet.I18n.t('select')}

View File

@ -22,7 +22,7 @@ const events = {
const availableSegmentValues = _.object(_.map( const availableSegmentValues = _.object(_.map(
availableSegments, availableSegments,
(segment) => { (segment) => {
const name = segment.name + ' (' + parseInt(segment.subscribers, 10).toLocaleString() + ')'; const name = `${segment.name} (${parseInt(segment.subscribers, 10).toLocaleString()})`;
return [segment.id, name]; return [segment.id, name];
} }
)); ));

View File

@ -78,7 +78,7 @@ define(
return !!(!segment.deleted_at && segment.type === 'default'); return !!(!segment.deleted_at && segment.type === 'default');
}, },
getLabel: function (segment) { getLabel: function (segment) {
return segment.name + ' (' + segment.subscribers + ')'; return `${segment.name} (${segment.subscribers})`;
}, },
getSearchLabel: function (segment, subscriber) { getSearchLabel: function (segment, subscriber) {
let label = ''; let label = '';
@ -110,7 +110,7 @@ define(
const custom_fields = window.mailpoet_custom_fields || []; const custom_fields = window.mailpoet_custom_fields || [];
custom_fields.map((custom_field) => { custom_fields.map((custom_field) => {
const field = { const field = {
name: 'cf_' + custom_field.id, name: `cf_${custom_field.id}`,
label: custom_field.name, label: custom_field.name,
type: custom_field.type, type: custom_field.type,
}; };