Fix eslint6 react/self-closing-bracket-location

[MAILPOET-1140]

.eslintrc.es6.json

@@ -31,7 +31,6 @@
     "react/jsx-boolean-value": 0,
     "react/jsx-no-bind": 0,
     "react/no-array-index-key": 0,
-    "react/jsx-closing-bracket-location": 0,
     "react/no-string-refs": 0,
     "react/no-did-mount-set-state": 0,
     "react/prefer-stateless-function": 0,

assets/js/src/form/fields/checkbox.jsx

@@ -28,7 +28,7 @@ define([
                 checked={isChecked}
                 onChange={this.onValueChange}
                 name={this.props.field.name}
-                />
+              />
               { this.props.field.values[value] }
             </label>
           </p>

assets/js/src/form/fields/date.jsx

@@ -22,7 +22,7 @@ define([
           <option
             key={i}
             value={i}
-         >{ i }</option>
+          >{ i }</option>
         ));
       }
       return (
@@ -52,7 +52,7 @@ define([
           <option
             key={i}
             value={i}
-         >{ this.props.monthNames[i - 1] }</option>
+          >{ this.props.monthNames[i - 1] }</option>
         ));
       }
       return (

assets/js/src/form/fields/radio.jsx

@@ -20,7 +20,8 @@ define([
                 checked={selectedValue === value}
                 value={value}
                 onChange={this.props.onValueChange}
-                name={this.props.field.name} />
+                name={this.props.field.name}
+              />
               { this.props.field.values[value] }
             </label>
           </p>

assets/js/src/form/fields/select.jsx

@@ -50,7 +50,8 @@ const FormFieldSelect = React.createClass({
         (value, index) => (
           <option
             key={`option-${index}`}
-            value={value}>
+            value={value}
+          >
             { this.props.field.values[value] }
           </option>
           )

assets/js/src/form/form.jsx

@@ -194,7 +194,8 @@ define(
               field={field}
               item={this.getValues()}
               onValueChange={onValueChange}
-              key={`field-${i}`} />
+              key={`field-${i}`}
+            />
           );
         });
 
@@ -207,7 +208,8 @@ define(
               className="button button-primary"
               type="submit"
               value={MailPoet.I18n.t('save')}
-              disabled={this.state.loading} />
+              disabled={this.state.loading}
+            />
           );
         }
 

assets/js/src/help-tooltip.jsx

@@ -32,14 +32,14 @@ function Tooltip(props) {
         data-event="click"
         data-tip
         data-for={tooltipId}
-       />
+      />
       <ReactTooltip
         globalEventOff="click"
         multiline={true}
         id={tooltipId}
         efect="solid"
         place={props.place}
-        >
+      >
         {tooltip}
       </ReactTooltip>
     </span>

assets/js/src/listing/bulk_actions.jsx

@@ -84,7 +84,8 @@ define([
         <div className="alignleft actions bulkactions">
           <label
             className="screen-reader-text"
-            htmlFor="bulk-action-selector-top">
+            htmlFor="bulk-action-selector-top"
+          >
             {MailPoet.I18n.t('selectBulkAction')}
           </label>
 
@@ -99,14 +100,15 @@ define([
               <option
                 value={action.name}
                 key={`action-${index}`}
-                >{ action.label }</option>
+              >{ action.label }</option>
               )) }
           </select>
           <input
             onClick={this.handleApplyAction}
             type="submit"
             defaultValue={MailPoet.I18n.t('apply')}
-            className="button action" />
+            className="button action"
+          />
 
           { this.state.extra }
         </div>

assets/js/src/listing/filters.jsx

@@ -52,12 +52,12 @@ define([
             ref={`filter-${i}`}
             key={`filter-${i}`}
             name={filter}
-            >
+          >
             { filters[filter].map((option, j) => (
               <option
                 value={option.value}
                 key={`filter-option-${j}`}
-                >{ option.label }</option>
+              >{ option.label }</option>
                 )) }
           </select>
           ));
@@ -71,7 +71,8 @@ define([
             onClick={this.handleFilterAction}
             type="submit"
             defaultValue={MailPoet.I18n.t('filter')}
-            className="button" />
+            className="button"
+          />
         );
       }
 

assets/js/src/listing/groups.jsx

@@ -19,7 +19,8 @@ define(['react', 'classnames'], (React, classNames) => {
             <a
               href="javascript:;"
               className={classes}
-              onClick={this.handleSelect.bind(this, group.name)} >
+              onClick={this.handleSelect.bind(this, group.name)}
+            >
               {group.label}
               <span className="count">({ parseInt(group.count, 10).toLocaleString() })</span>
             </a>

assets/js/src/listing/header.jsx

@@ -20,7 +20,8 @@ const ListingHeader = React.createClass({
           onSort={this.props.onSort}
           sort_by={this.props.sort_by}
           key={`column-${index}`}
-          column={renderColumn} />
+          column={renderColumn}
+        />
       );
     });
 
@@ -29,7 +30,8 @@ const ListingHeader = React.createClass({
     if (this.props.is_selectable === true) {
       checkbox = (
         <th
-          className="manage-column column-cb check-column">
+          className="manage-column column-cb check-column"
+        >
           <label className="screen-reader-text">
             {MailPoet.I18n.t('selectAll')}
           </label>
@@ -38,7 +40,8 @@ const ListingHeader = React.createClass({
             name="select_all"
             ref="toggle"
             checked={this.props.selection}
-            onChange={this.handleSelectItems} />
+            onChange={this.handleSelectItems}
+          />
         </th>
       );
     }

assets/js/src/listing/listing.jsx

@@ -53,7 +53,8 @@ const ListingItem = React.createClass({
               this.props.item.selected || this.props.selection === 'all'
             }
             onChange={this.handleSelectItem}
-            disabled={this.props.selection === 'all'} />
+            disabled={this.props.selection === 'all'}
+          />
         </th>
       );
     }
@@ -77,7 +78,8 @@ const ListingItem = React.createClass({
                 onClick={this.handleTrashItem.bind(
                   null,
                   this.props.item.id
-                )}>
+                )}
+              >
                 {MailPoet.I18n.t('moveToTrash')}
               </a>
             </span>
@@ -86,7 +88,8 @@ const ListingItem = React.createClass({
           customAction = (
             <span
               onClick={this.props.onRefreshItems}
-              key={`action-${index}`} className={action.name}>
+              key={`action-${index}`} className={action.name}
+            >
               {(!isFirst) ? ' | ' : ''}
               { action.link(this.props.item) }
             </span>
@@ -94,7 +97,8 @@ const ListingItem = React.createClass({
         } else if (action.link) {
           customAction = (
             <span
-              key={`action-${index}`} className={action.name}>
+              key={`action-${index}`} className={action.name}
+            >
               {(!isFirst) ? ' | ' : ''}
               { action.link(this.props.item) }
             </span>
@@ -102,7 +106,8 @@ const ListingItem = React.createClass({
         } else {
           customAction = (
             <span
-              key={`action-${index}`} className={action.name}>
+              key={`action-${index}`} className={action.name}
+            >
               {(!isFirst) ? ' | ' : ''}
               <a href="javascript:;" onClick={
                 (action.onClick !== undefined)
@@ -111,7 +116,8 @@ const ListingItem = React.createClass({
                     this.props.onRefreshItems
                   )
                 : false
-              }>{ action.label }</a>
+              }
+              >{ action.label }</a>
             </span>
           );
         }
@@ -159,7 +165,8 @@ const ListingItem = React.createClass({
           </div>
           <button
             onClick={this.handleToggleItem.bind(null, this.props.item.id)}
-            className="toggle-row" type="button">
+            className="toggle-row" type="button"
+          >
             <span className="screen-reader-text">{MailPoet.I18n.t('showMoreDetails')}</span>
           </button>
         </div>
@@ -172,7 +179,8 @@ const ListingItem = React.createClass({
           </div>
           <button
             onClick={this.handleToggleItem.bind(null, this.props.item.id)}
-            className="toggle-row" type="button">
+            className="toggle-row" type="button"
+          >
             <span className="screen-reader-text">{MailPoet.I18n.t('showMoreDetails')}</span>
           </button>
         </div>
@@ -213,7 +221,8 @@ const ListingItems = React.createClass({
                 this.props.columns.length
                 + (this.props.is_selectable ? 1 : 0)
               }
-              className="colspanchange">
+              className="colspanchange"
+            >
               {message}
             </td>
           </tr>
@@ -235,7 +244,8 @@ const ListingItems = React.createClass({
           <td colSpan={
                 this.props.columns.length
                 + (this.props.is_selectable ? 1 : 0)
-              }>
+              }
+          >
             {
                 (this.props.selection !== 'all')
                 ? MailPoet.I18n.t('selectAllLabel')
@@ -247,7 +257,8 @@ const ListingItems = React.createClass({
               &nbsp;
             <a
               onClick={this.props.onSelectAll}
-              href="javascript:;">{
+              href="javascript:;"
+            >{
                   (this.props.selection !== 'all')
                   ? MailPoet.I18n.t('selectAllLink')
                   : MailPoet.I18n.t('clearSelection')
@@ -274,7 +285,8 @@ const ListingItems = React.createClass({
               item_actions={this.props.item_actions}
               group={this.props.group}
               key={`item-${renderItem.id}-${index}`}
-              item={renderItem} />
+              item={renderItem}
+            />
           );
         })}
       </tbody>
@@ -822,7 +834,8 @@ const Listing = React.createClass({
             bulk_actions={bulkActions}
             selection={this.state.selection}
             selected_ids={this.state.selected_ids}
-            onBulkAction={this.handleBulkAction} />
+            onBulkAction={this.handleBulkAction}
+          />
           <ListingFilters
             filters={this.state.filters}
             filter={this.state.filter}
@@ -836,7 +849,8 @@ const Listing = React.createClass({
             count={this.state.count}
             page={this.state.page}
             limit={this.state.limit}
-            onSetPage={this.handleSetPage} />
+            onSetPage={this.handleSetPage}
+          />
         </div>
         <table className={tableClasses}>
           <thead>
@@ -847,7 +861,8 @@ const Listing = React.createClass({
               sort_by={sortBy}
               sort_order={sortOrder}
               columns={columns}
-              is_selectable={bulkActions.length > 0} />
+              is_selectable={bulkActions.length > 0}
+            />
           </thead>
 
           <ListingItems
@@ -868,7 +883,8 @@ const Listing = React.createClass({
             limit={this.state.limit}
             item_actions={itemActions}
             messages={messages}
-            items={items} />
+            items={items}
+          />
 
           <tfoot>
             <ListingHeader
@@ -878,7 +894,8 @@ const Listing = React.createClass({
               sort_by={sortBy}
               sort_order={sortOrder}
               columns={columns}
-              is_selectable={bulkActions.length > 0} />
+              is_selectable={bulkActions.length > 0}
+            />
           </tfoot>
 
         </table>
@@ -888,12 +905,14 @@ const Listing = React.createClass({
             bulk_actions={bulkActions}
             selection={this.state.selection}
             selected_ids={this.state.selected_ids}
-            onBulkAction={this.handleBulkAction} />
+            onBulkAction={this.handleBulkAction}
+          />
           <ListingPages
             count={this.state.count}
             page={this.state.page}
             limit={this.state.limit}
-            onSetPage={this.handleSetPage} />
+            onSetPage={this.handleSetPage}
+          />
         </div>
       </div>
     );

assets/js/src/listing/pages.jsx

@@ -78,7 +78,8 @@ define([
           previousPage = (
             <a href="javascript:;"
               onClick={this.setPreviousPage}
-              className="prev-page">
+              className="prev-page"
+            >
               <span className="screen-reader-text">{MailPoet.I18n.t('previousPage')}</span>
               <span aria-hidden="true">‹</span>
             </a>
@@ -89,7 +90,8 @@ define([
           firstPage = (
             <a href="javascript:;"
               onClick={this.setFirstPage}
-              className="first-page">
+              className="first-page"
+            >
               <span className="screen-reader-text">{MailPoet.I18n.t('firstPage')}</span>
               <span aria-hidden="true">«</span>
             </a>
@@ -100,7 +102,8 @@ define([
           nextPage = (
             <a href="javascript:;"
               onClick={this.setNextPage}
-              className="next-page">
+              className="next-page"
+            >
               <span className="screen-reader-text">{MailPoet.I18n.t('nextPage')}</span>
               <span aria-hidden="true">›</span>
             </a>
@@ -111,7 +114,8 @@ define([
           lastPage = (
             <a href="javascript:;"
               onClick={this.setLastPage}
-              className="last-page">
+              className="last-page"
+            >
               <span className="screen-reader-text">{MailPoet.I18n.t('lastPage')}</span>
               <span aria-hidden="true">»</span>
             </a>
@@ -132,7 +136,8 @@ define([
             <span className="paging-input">
               <label
                 className="screen-reader-text"
-                htmlFor="current-page-selector">{MailPoet.I18n.t('currentPage')}</label>
+                htmlFor="current-page-selector"
+              >{MailPoet.I18n.t('currentPage')}</label>
               <input
                 type="text"
                 onChange={this.handleChangeManualPage}
@@ -144,7 +149,8 @@ define([
                 value={pageValue}
                 name="paged"
                 id="current-page-selector"
-                className="current-page" />
+                className="current-page"
+              />
               {MailPoet.I18n.t('pageOutOf')}&nbsp;
               <span className="total-pages">
                 {Math.ceil(this.props.count / this.props.limit).toLocaleString()}

assets/js/src/listing/search.jsx

@@ -30,11 +30,13 @@ define([
               id="search_input"
               ref="search"
               name="s"
-              defaultValue={this.props.search} />
+              defaultValue={this.props.search}
+            />
             <input
               type="submit"
               defaultValue={MailPoet.I18n.t('searchLabel')}
-              className="button" />
+              className="button"
+            />
           </p>
         </form>
       );

assets/js/src/newsletters/listings/mixins.jsx

@@ -101,7 +101,7 @@ const QueueMixin = {
                 ? 'inline-block' : 'none' }}
             href="javascript:;"
             onClick={this.resumeSending.bind(null, newsletter)}
-            >{MailPoet.I18n.t('resume')}</a>
+          >{MailPoet.I18n.t('resume')}</a>
           <a
             id={`pause_${newsletter.id}`}
             className="button mailpoet_pause"
@@ -109,7 +109,7 @@ const QueueMixin = {
                   ? 'inline-block' : 'none' }}
             href="javascript:;"
             onClick={this.pauseSending.bind(null, newsletter)}
-            >{MailPoet.I18n.t('pause')}</a>
+          >{MailPoet.I18n.t('pause')}</a>
         </span>
         );
     }
@@ -129,7 +129,7 @@ const QueueMixin = {
           <span
             className="mailpoet_progress_bar"
             style={{ width: `${progressBarWidth}%` }}
-               />
+          />
           <span className="mailpoet_progress_label">
             { percentage }
           </span>
@@ -309,7 +309,7 @@ const StatisticsMixin = {
             key={`stats-${newsletter.id}`}
             to={params.link}
             onClick={params.onClick || null}
-            >
+          >
             {content}
           </Link>
           {afterContent}

assets/js/src/newsletters/listings/notification.jsx

@@ -271,7 +271,7 @@ const NewsletterListNotification = React.createClass({
     return (
       <Link
         to={`/notification/history/${newsletter.id}`}
-        >{ MailPoet.I18n.t('viewHistory') }</Link>
+      >{ MailPoet.I18n.t('viewHistory') }</Link>
     );
   },
   renderItem: function (newsletter, actions) {

assets/js/src/newsletters/send.jsx

@@ -346,7 +346,8 @@ define(
                       className="button button-primary"
                       type="button"
                       onClick={this.handleResume}
-                      value={MailPoet.I18n.t('resume')} />
+                      value={MailPoet.I18n.t('resume')}
+                    />
                   :
                     <input
                       className="button button-primary"
@@ -354,19 +355,21 @@ define(
                       onClick={this.handleSend}
                       value={MailPoet.I18n.t('send')}
                       {...sendButtonOptions}
-                  />
+                    />
                 }
                 &nbsp;
                 <input
                   className="button button-secondary"
                   type="submit"
-                  value={MailPoet.I18n.t('saveDraftAndClose')} />
+                  value={MailPoet.I18n.t('saveDraftAndClose')}
+                />
                 &nbsp;{MailPoet.I18n.t('orSimply')}&nbsp;
                 <a
                   href={
                     `?page=mailpoet-newsletter-editor&id=${this.props.params.id}`
                   }
-                  onClick={this.handleRedirectToDesign}>
+                  onClick={this.handleRedirectToDesign}
+                >
                   {MailPoet.I18n.t('goBackToDesign')}
                 </a>.
               </p>

assets/js/src/newsletters/send/standard.jsx

@@ -160,7 +160,8 @@ define(
             disabled={this.props.disabled}
             onChange={this.onChange}
             ref="dateInput"
-            {...this.props.validation} />
+            {...this.props.validation}
+          />
         );
       },
     });
@@ -171,7 +172,8 @@ define(
           (value, index) => (
             <option
               key={`option-${index}`}
-              value={value}>
+              value={value}
+            >
               { timeOfDayItems[value] }
             </option>
             )
@@ -238,13 +240,15 @@ define(
               displayFormat={dateDisplayFormat}
               storageFormat={dateStorageFormat}
               disabled={this.props.disabled}
-              validation={this.props.dateValidation} />
+              validation={this.props.dateValidation}
+            />
             <TimeSelect
               name="time"
               value={this.state.time}
               onChange={this.handleChange}
               disabled={this.props.disabled}
-              validation={this.props.timeValidation} />
+              validation={this.props.timeValidation}
+            />
           </span>
         );
       },
@@ -298,7 +302,8 @@ define(
                 value={this.getCurrentValue().scheduledAt}
                 onChange={this.handleValueChange}
                 disabled={this.props.field.disabled}
-                dateValidation={this.getDateValidation()} />
+                dateValidation={this.getDateValidation()}
+              />
               &nbsp;
               <span>
                 {MailPoet.I18n.t('websiteTimeIs')} <code>{currentTime}</code>
@@ -315,7 +320,8 @@ define(
               checked={this.isScheduled()}
               disabled={this.props.field.disabled}
               name="isScheduled"
-              onChange={this.handleCheckboxChange} />
+              onChange={this.handleCheckboxChange}
+            />
 
             {schedulingOptions}
           </div>

assets/js/src/newsletters/templates/import_template.jsx

@@ -102,7 +102,8 @@ class ImportTemplate extends React.Component {
             <input
               className="button button-primary"
               type="submit"
-              value={MailPoet.I18n.t('upload')} />
+              value={MailPoet.I18n.t('upload')}
+            />
           </p>
         </form>
       </div>

assets/js/src/newsletters/templates/tabs.jsx

@@ -8,7 +8,7 @@ const Tabs = ({ tabs, selected, select }) => (
           href="javascript:"
           className={selected === name ? 'current' : ''}
           onClick={() => select(name)}
-          > {label}
+        > {label}
         </a></li>
       ))}
     </ul>

assets/js/src/newsletters/templates/template_box.jsx

@@ -133,7 +133,7 @@ class TemplateBox extends React.Component {
             className="button button-primary"
             data-automation-id={`select_template_${index}`}
             onClick={this.onSelect}
-            > {MailPoet.I18n.t('select')} </a>
+          > {MailPoet.I18n.t('select')} </a>
         </div>
         { readonly === '1' ? false : deleteLink }
       </li>

assets/js/src/newsletters/types/automatic_emails/events_list.jsx

@@ -22,7 +22,8 @@ class AutomaticEmailEventsList extends React.Component {
       if (this.automaticEmail.premium) {
         action = (
           <a href="?page=mailpoet-premium"
-            target="_blank">
+            target="_blank"
+          >
             {MailPoet.I18n.t('premiumFeatureLink')}
           </a>
         );

assets/js/src/newsletters/types/notification/notification.jsx

@@ -75,14 +75,16 @@ define(
             <Scheduling
               item={this.state}
               field={field}
-              onValueChange={this.handleValueChange} />
+              onValueChange={this.handleValueChange}
+            />
 
             <p className="submit">
               <input
                 className="button button-primary"
                 type="button"
                 onClick={this.handleNext}
-                value={MailPoet.I18n.t('next')} />
+                value={MailPoet.I18n.t('next')}
+              />
             </p>
           </div>
         );

assets/js/src/newsletters/types/notification/scheduling.jsx

@@ -93,7 +93,8 @@ const NotificationScheduling = React.createClass({
         <Select
           field={timeOfDayField}
           item={this.getCurrentValue()}
-          onValueChange={this.handleTimeOfDayChange} />
+          onValueChange={this.handleTimeOfDayChange}
+        />
       );
     }
 
@@ -102,7 +103,8 @@ const NotificationScheduling = React.createClass({
         <Select
           field={weekDayField}
           item={this.getCurrentValue()}
-          onValueChange={this.handleWeekDayChange} />
+          onValueChange={this.handleWeekDayChange}
+        />
       );
     }
 
@@ -111,7 +113,8 @@ const NotificationScheduling = React.createClass({
         <Select
           field={monthDayField}
           item={this.getCurrentValue()}
-          onValueChange={this.handleMonthDayChange} />
+          onValueChange={this.handleMonthDayChange}
+        />
       );
     }
 
@@ -120,7 +123,8 @@ const NotificationScheduling = React.createClass({
         <Select
           field={nthWeekDayField}
           item={this.getCurrentValue()}
-          onValueChange={this.handleNthWeekDayChange} />
+          onValueChange={this.handleNthWeekDayChange}
+        />
       );
     }
 
@@ -129,7 +133,8 @@ const NotificationScheduling = React.createClass({
         <Select
           field={intervalField}
           item={this.getCurrentValue()}
-          onValueChange={this.handleIntervalChange} />
+          onValueChange={this.handleIntervalChange}
+        />
 
         {nthWeekDaySelection}
         {monthDaySelection}

assets/js/src/newsletters/types/welcome/scheduling.jsx

@@ -130,14 +130,16 @@ const WelcomeScheduling = React.createClass({
         <Select
           field={roleField}
           item={this.getCurrentValue()}
-          onValueChange={this.handleRoleChange} />
+          onValueChange={this.handleRoleChange}
+        />
       );
     } else {
       roleSegmentSelection = (
         <Select
           field={segmentField}
           item={this.getCurrentValue()}
-          onValueChange={this.handleSegmentChange} />
+          onValueChange={this.handleSegmentChange}
+        />
       );
     }
     if (value.afterTimeType !== 'immediate') {
@@ -145,7 +147,8 @@ const WelcomeScheduling = React.createClass({
         <Text
           field={afterTimeNumberField}
           item={this.getCurrentValue()}
-          onValueChange={this.handleAfterTimeNumberChange} />
+          onValueChange={this.handleAfterTimeNumberChange}
+        />
       );
     }
 
@@ -154,7 +157,8 @@ const WelcomeScheduling = React.createClass({
         <Select
           field={events}
           item={this.getCurrentValue()}
-          onValueChange={this.handleEventChange} />
+          onValueChange={this.handleEventChange}
+        />
 
         { roleSegmentSelection }
 
@@ -163,7 +167,8 @@ const WelcomeScheduling = React.createClass({
         <Select
           field={afterTimeTypeField}
           item={this.getCurrentValue()}
-          onValueChange={this.handleAfterTimeTypeChange} />
+          onValueChange={this.handleAfterTimeTypeChange}
+        />
       </div>
     );
   },