Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Fix ES6 react/jsx-curly-spacing eslint rule [MAILPOET-1082]

Browse Source
This commit is contained in:
stoletniy
2017-09-18 18:18:45 +03:00
parent 9e3010ab52
commit 0cdae52c66
39 changed files with 412 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.es6.json
View File

@ -30,7 +30,6 @@
"react/self-closing-comp": 0, "react/self-closing-comp": 0,
"react/jsx-closing-bracket-location": 0, "react/jsx-closing-bracket-location": 0,
"react/no-string-refs": 0, "react/no-string-refs": 0,
"react/jsx-curly-spacing": 0,
"react/no-did-mount-set-state": 0, "react/no-did-mount-set-state": 0,
"react/prefer-stateless-function": 0, "react/prefer-stateless-function": 0,
"jsx-a11y/label-has-for": 0, "jsx-a11y/label-has-for": 0,

8
assets/js/src/form/fields/checkbox.jsx
View File

@ -20,15 +20,15 @@ define([
const options = Object.keys(this.props.field.values).map( const options = Object.keys(this.props.field.values).map(
(value, index) => { (value, index) => {
return ( return (
<p key={ 'checkbox-' + index }> <p key={'checkbox-' + index}>
<label> <label>
<input <input
ref="checkbox" ref="checkbox"
type="checkbox" type="checkbox"
value="1" value="1"
checked={ isChecked } checked={isChecked}
onChange={ this.onValueChange } onChange={this.onValueChange}
name={ this.props.field.name } name={this.props.field.name}
/> />
{ this.props.field.values[value] } { this.props.field.values[value] }
</label> </label>

74
assets/js/src/form/fields/date.jsx
View File

@ -12,7 +12,7 @@ define([
if (this.props.placeholder !== undefined) { if (this.props.placeholder !== undefined) {
years.push(( years.push((
<option value="" key={ 0 }>{ this.props.placeholder }</option> <option value="" key={0}>{ this.props.placeholder }</option>
)); ));
} }
@ -20,16 +20,16 @@ define([
for (let i = currentYear; i >= currentYear - yearsRange; i -= 1) { for (let i = currentYear; i >= currentYear - yearsRange; i -= 1) {
years.push(( years.push((
<option <option
key={ i } key={i}
value={ i } value={i}
>{ i }</option> >{ i }</option>
)); ));
} }
return ( return (
<select <select
name={ `${this.props.name}[year]` } name={`${this.props.name}[year]`}
value={ this.props.year } value={this.props.year}
onChange={ this.props.onValueChange } onChange={this.props.onValueChange}
> >
{ years } { years }
</select> </select>
@ -43,23 +43,23 @@ define([
if (this.props.placeholder !== undefined) { if (this.props.placeholder !== undefined) {
months.push(( months.push((
<option value="" key={ 0 }>{ this.props.placeholder }</option> <option value="" key={0}>{ this.props.placeholder }</option>
)); ));
} }
for (let i = 1; i <= 12; i += 1) { for (let i = 1; i <= 12; i += 1) {
months.push(( months.push((
<option <option
key={ i } key={i}
value={ i } value={i}
>{ this.props.monthNames[i - 1] }</option> >{ this.props.monthNames[i - 1] }</option>
)); ));
} }
return ( return (
<select <select
name={ `${this.props.name}[month]` } name={`${this.props.name}[month]`}
value={ this.props.month } value={this.props.month}
onChange={ this.props.onValueChange } onChange={this.props.onValueChange}
> >
{ months } { months }
</select> </select>
@ -73,24 +73,24 @@ define([
if (this.props.placeholder !== undefined) { if (this.props.placeholder !== undefined) {
days.push(( days.push((
<option value="" key={ 0 }>{ this.props.placeholder }</option> <option value="" key={0}>{ this.props.placeholder }</option>
)); ));
} }
for (let i = 1; i <= 31; i += 1) { for (let i = 1; i <= 31; i += 1) {
days.push(( days.push((
<option <option
key={ i } key={i}
value={ i } value={i}
>{ i }</option> >{ i }</option>
)); ));
} }
return ( return (
<select <select
name={ `${this.props.name}[day]` } name={`${this.props.name}[day]`}
value={ this.props.day } value={this.props.day}
onChange={ this.props.onValueChange } onChange={this.props.onValueChange}
> >
{ days } { days }
</select> </select>
@ -205,33 +205,33 @@ define([
switch(type) { switch(type) {
case 'YYYY': case 'YYYY':
return (<FormFieldDateYear return (<FormFieldDateYear
onValueChange={ this.onValueChange.bind(this) } onValueChange={this.onValueChange.bind(this)}
ref={ 'year' } ref={'year'}
key={ 'year' } key={'year'}
name={ this.props.field.name } name={this.props.field.name}
year={ this.state.year } year={this.state.year}
placeholder={ this.props.field.year_placeholder } placeholder={this.props.field.year_placeholder}
/>); />);
case 'MM': case 'MM':
return (<FormFieldDateMonth return (<FormFieldDateMonth
onValueChange={ this.onValueChange.bind(this) } onValueChange={this.onValueChange.bind(this)}
ref={ 'month' } ref={'month'}
key={ 'month' } key={'month'}
name={ this.props.field.name } name={this.props.field.name}
month={ this.state.month } month={this.state.month}
monthNames={ monthNames } monthNames={monthNames}
placeholder={ this.props.field.month_placeholder } placeholder={this.props.field.month_placeholder}
/>); />);
case 'DD': case 'DD':
return (<FormFieldDateDay return (<FormFieldDateDay
onValueChange={ this.onValueChange.bind(this) } onValueChange={this.onValueChange.bind(this)}
ref={ 'day' } ref={'day'}
key={ 'day' } key={'day'}
name={ this.props.field.name } name={this.props.field.name}
day={ this.state.day } day={this.state.day}
placeholder={ this.props.field.day_placeholder } placeholder={this.props.field.day_placeholder}
/>); />);
} }
}); });

6
assets/js/src/form/fields/field.jsx
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>
); );
} else { } else {
return ( return (
<div key={ 'field-' + (data.index || 0) }> <div key={'field-' + (data.index || 0)}>
{ field } { field }
{ description } { description }
</div> </div>
@ -113,7 +113,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 }

10
assets/js/src/form/fields/radio.jsx
View File

@ -14,14 +14,14 @@ define([
const options = Object.keys(this.props.field.values).map( const options = Object.keys(this.props.field.values).map(
(value, index) => { (value, index) => {
return ( return (
<p key={ 'radio-' + index }> <p key={'radio-' + index}>
<label> <label>
<input <input
type="radio" type="radio"
checked={ selected_value === value } checked={selected_value === value}
value={ value } value={value}
onChange={ this.props.onValueChange } onChange={this.props.onValueChange}
name={ this.props.field.name } /> name={this.props.field.name} />
{ this.props.field.values[value] } { this.props.field.values[value] }
</label> </label>
</p> </p>

12
assets/js/src/form/fields/select.jsx
View File

@ -50,8 +50,8 @@ 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,10 +60,10 @@ 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}
> >
{placeholder} {placeholder}

14
assets/js/src/form/fields/selection.jsx
View File

@ -168,9 +168,9 @@ define([
return ( return (
<option <option
key={ 'option-'+index } key={'option-'+index}
value={ value } value={value}
title={ searchLabel } title={searchLabel}
> >
{ label } { label }
</option> </option>
@ -179,12 +179,12 @@ define([
return ( return (
<select <select
id={ this.props.field.id || this.props.field.name } id={this.props.field.id || this.props.field.name}
ref="select" ref="select"
disabled={this.props.field.disabled} disabled={this.props.field.disabled}
data-placeholder={ this.props.field.placeholder } data-placeholder={this.props.field.placeholder}
multiple={ this.props.field.multiple } multiple={this.props.field.multiple}
defaultValue={ this.getSelectedValues() } defaultValue={this.getSelectedValues()}
{...this.props.field.validation} {...this.props.field.validation}
>{ options }</select> >{ options }</select>
); );

12
assets/js/src/form/fields/text.jsx
View File

@ -15,17 +15,17 @@ const FormFieldText = React.createClass({
? this.props.field.disabled(this.props.item) ? this.props.field.disabled(this.props.item)
: false : false
} }
className={ (this.props.field.size) ? '' : 'regular-text' } className={(this.props.field.size) ? '' : 'regular-text'}
size={ size={
(this.props.field.size !== 'auto' && this.props.field.size > 0) (this.props.field.size !== 'auto' && this.props.field.size > 0)
? this.props.field.size ? this.props.field.size
: 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}
{...this.props.field.validation} {...this.props.field.validation}
/> />
); );

12
assets/js/src/form/fields/textarea.jsx
View File

@ -10,12 +10,12 @@ define([
<textarea <textarea
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}
onChange={ this.props.onValueChange } onChange={this.props.onValueChange}
{...this.props.field.validation} {...this.props.field.validation}
/> />
); );

14
assets/js/src/form/form.jsx
View File

@ -159,7 +159,7 @@ define(
if(this.getErrors() !== undefined) { if(this.getErrors() !== undefined) {
errors = this.getErrors().map((error, index) => { errors = this.getErrors().map((error, index) => {
return ( return (
<p key={ 'error-'+index } className="mailpoet_error"> <p key={'error-'+index} className="mailpoet_error">
{ error.message } { error.message }
</p> </p>
); );
@ -194,10 +194,10 @@ define(
return ( return (
<FormField <FormField
field={ field } field={field}
item={ this.getValues() } item={this.getValues()}
onValueChange={ onValueChange } onValueChange={onValueChange}
key={ 'field-'+i } /> key={'field-'+i} />
); );
}); });
@ -218,9 +218,9 @@ define(
<div> <div>
{ beforeFormContent } { beforeFormContent }
<form <form
id={ this.props.id } id={this.props.id}
ref="form" ref="form"
className={ formClasses } className={formClasses}
onSubmit={ onSubmit={
(this.props.onSubmit !== undefined) (this.props.onSubmit !== undefined)
? this.props.onSubmit ? this.props.onSubmit

8
assets/js/src/forms/forms.jsx
View File

@ -16,10 +16,10 @@ const container = document.getElementById('forms_container');
if(container) { if(container) {
ReactDOM.render(( ReactDOM.render((
<Router history={ history }> <Router history={history}>
<Route path="/" component={ App }> <Route path="/" component={App}>
<IndexRoute component={ FormList } /> <IndexRoute component={FormList} />
<Route path="*" component={ FormList } /> <Route path="*" component={FormList} />
</Route> </Route>
</Router> </Router>
), container); ), container);

26
assets/js/src/forms/list.jsx
View File

@ -87,7 +87,7 @@ const item_actions = [
label: MailPoet.I18n.t('edit'), label: MailPoet.I18n.t('edit'),
link: function (item) { link: function (item) {
return ( return (
<a href={ `admin.php?page=mailpoet-form-editor&id=${item.id}` }>{MailPoet.I18n.t('edit')}</a> <a href={`admin.php?page=mailpoet-form-editor&id=${item.id}`}>{MailPoet.I18n.t('edit')}</a>
); );
}, },
}, },
@ -158,11 +158,11 @@ const FormList = React.createClass({
return ( return (
<div> <div>
<td className={ row_classes }> <td className={row_classes}>
<strong> <strong>
<a <a
className="row-title" className="row-title"
href={ `admin.php?page=mailpoet-form-editor&id=${form.id}` } href={`admin.php?page=mailpoet-form-editor&id=${form.id}`}
>{ form.name }</a> >{ form.name }</a>
</strong> </strong>
{ actions } { actions }
@ -186,21 +186,21 @@ const FormList = React.createClass({
{MailPoet.I18n.t('pageTitle')} <a {MailPoet.I18n.t('pageTitle')} <a
className="page-title-action" className="page-title-action"
href="javascript:;" href="javascript:;"
onClick={ this.createForm } onClick={this.createForm}
>{MailPoet.I18n.t('new')}</a> >{MailPoet.I18n.t('new')}</a>
</h1> </h1>
<Listing <Listing
limit={ window.mailpoet_listing_per_page } limit={window.mailpoet_listing_per_page}
location={ this.props.location } location={this.props.location}
params={ this.props.params } params={this.props.params}
messages={ messages } messages={messages}
search={ false } search={false}
endpoint="forms" endpoint="forms"
onRenderItem={ this.renderItem } onRenderItem={this.renderItem}
columns={ columns } columns={columns}
bulk_actions={ bulk_actions } bulk_actions={bulk_actions}
item_actions={ item_actions } item_actions={item_actions}
/> />
</div> </div>
); );

8
assets/js/src/help/help.jsx
View File

@ -19,12 +19,12 @@ const container = document.getElementById('help_container');
if(container) { if(container) {
ReactDOM.render(( ReactDOM.render((
<Router history={ history }> <Router history={history}>
<Route path="/" component={ App }> <Route path="/" component={App}>
<IndexRedirect to="knowledgeBase" /> <IndexRedirect to="knowledgeBase" />
{/* Pages */} {/* Pages */}
<Route path="knowledgeBase(/)**" params={{ tab: 'knowledgeBase' }} component={ KnowledgeBase } /> <Route path="knowledgeBase(/)**" params={{ tab: 'knowledgeBase' }} component={KnowledgeBase} />
<Route path="systemInfo(/)**" params={{ tab: 'systemInfo' }} component={ SystemInfo } /> <Route path="systemInfo(/)**" params={{ tab: 'systemInfo' }} component={SystemInfo} />
</Route> </Route>
</Router> </Router>
), container); ), container);

6
assets/js/src/help/tabs.jsx
View File

@ -26,9 +26,9 @@ 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>
); );
}); });

8
assets/js/src/listing/bulk_actions.jsx
View File

@ -93,21 +93,21 @@ define([
<select <select
name="bulk_actions" name="bulk_actions"
ref="action" ref="action"
value={ this.state.action } value={this.state.action}
onChange={this.handleChangeAction} onChange={this.handleChangeAction}
> >
<option value="">{MailPoet.I18n.t('bulkActions')}</option> <option value="">{MailPoet.I18n.t('bulkActions')}</option>
{ this.props.bulk_actions.map((action, index) => { { this.props.bulk_actions.map((action, index) => {
return ( return (
<option <option
value={ action.name } value={action.name}
key={ 'action-' + index } key={'action-' + index}
>{ action.label }</option> >{ action.label }</option>
); );
}) } }) }
</select> </select>
<input <input
onClick={ this.handleApplyAction } onClick={this.handleApplyAction}
type="submit" type="submit"
defaultValue={MailPoet.I18n.t('apply')} defaultValue={MailPoet.I18n.t('apply')}
className="button action" /> className="button action" />

14
assets/js/src/listing/filters.jsx
View File

@ -52,15 +52,15 @@ define([
.map((filter, i) => { .map((filter, i) => {
return ( return (
<select <select
ref={ `filter-${i}` } ref={`filter-${i}`}
key={ `filter-${i}` } key={`filter-${i}`}
name={ filter } name={filter}
> >
{ filters[filter].map((option, j) => { { filters[filter].map((option, j) => {
return ( return (
<option <option
value={ option.value } value={option.value}
key={ 'filter-option-' + j } key={'filter-option-' + j}
>{ option.label }</option> >{ option.label }</option>
); );
}) } }) }
@ -74,7 +74,7 @@ define([
button = ( button = (
<input <input
id="post-query-submit" id="post-query-submit"
onClick={ this.handleFilterAction } onClick={this.handleFilterAction}
type="submit" type="submit"
defaultValue={MailPoet.I18n.t('filter')} defaultValue={MailPoet.I18n.t('filter')}
className="button" /> className="button" />
@ -85,7 +85,7 @@ define([
if (this.props.group === 'trash') { if (this.props.group === 'trash') {
empty_trash = ( empty_trash = (
<input <input
onClick={ this.handleEmptyTrash } onClick={this.handleEmptyTrash}
type="submit" type="submit"
value={MailPoet.I18n.t('emptyTrash')} value={MailPoet.I18n.t('emptyTrash')}
className="button" className="button"

14
assets/js/src/listing/header.jsx
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} />
); );
}); });
@ -37,8 +37,8 @@ const ListingHeader = React.createClass({
type="checkbox" type="checkbox"
name="select_all" name="select_all"
ref="toggle" ref="toggle"
checked={ this.props.selection } checked={this.props.selection}
onChange={ this.handleSelectItems } /> onChange={this.handleSelectItems} />
</th> </th>
); );
} }
@ -70,7 +70,7 @@ const ListingColumn = React.createClass({
if(this.props.column.sortable === true) { if(this.props.column.sortable === true) {
label = ( label = (
<a onClick={ this.handleSort }> <a onClick={this.handleSort}>
<span>{ this.props.column.label }</span> <span>{ this.props.column.label }</span>
<span className="sorting-indicator"></span> <span className="sorting-indicator"></span>
</a> </a>
@ -80,10 +80,10 @@ const ListingColumn = React.createClass({
} }
return ( return (
<th <th
className={ classes } className={classes}
id={this.props.column.name } id={this.props.column.name}
scope="col" scope="col"
width={ this.props.column.width || null } width={this.props.column.width || null}
>{label}</th> >{label}</th>
); );
}, },

186
assets/js/src/listing/listing.jsx
View File

@ -48,12 +48,12 @@ const ListingItem = React.createClass({
}</label> }</label>
<input <input
type="checkbox" type="checkbox"
value={ this.props.item.id } value={this.props.item.id}
checked={ checked={
this.props.item.selected || this.props.selection === 'all' this.props.item.selected || this.props.selection === 'all'
} }
onChange={ this.handleSelectItem } onChange={this.handleSelectItem}
disabled={ this.props.selection === 'all' } /> disabled={this.props.selection === 'all'} />
</th> </th>
); );
} }
@ -74,14 +74,14 @@ 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:;"
onClick={ this.handleTrashItem.bind( onClick={this.handleTrashItem.bind(
null, null,
this.props.item.id this.props.item.id
) }> )}>
{MailPoet.I18n.t('moveToTrash')} {MailPoet.I18n.t('moveToTrash')}
</a> </a>
</span> </span>
@ -89,8 +89,8 @@ const ListingItem = React.createClass({
} else if (action.refresh) { } else if (action.refresh) {
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)
@ -129,7 +129,7 @@ const ListingItem = React.createClass({
} else { } else {
item_actions = ( item_actions = (
<span className="edit"> <span className="edit">
<Link to={ `/edit/${ this.props.item.id }` }>{MailPoet.I18n.t('edit')}</Link> <Link to={`/edit/${ this.props.item.id }`}>{MailPoet.I18n.t('edit')}</Link>
</span> </span>
); );
} }
@ -143,7 +143,7 @@ const ListingItem = React.createClass({
<span> <span>
<a <a
href="javascript:;" href="javascript:;"
onClick={ this.handleRestoreItem.bind( onClick={this.handleRestoreItem.bind(
null, null,
this.props.item.id this.props.item.id
)} )}
@ -154,7 +154,7 @@ const ListingItem = React.createClass({
<a <a
className="submitdelete" className="submitdelete"
href="javascript:;" href="javascript:;"
onClick={ this.handleDeleteItem.bind( onClick={this.handleDeleteItem.bind(
null, null,
this.props.item.id this.props.item.id
)} )}
@ -162,7 +162,7 @@ const ListingItem = React.createClass({
</span> </span>
</div> </div>
<button <button
onClick={ this.handleToggleItem.bind(null, this.props.item.id) } 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> <span className="screen-reader-text">{MailPoet.I18n.t('showMoreDetails')}</span>
</button> </button>
@ -175,7 +175,7 @@ const ListingItem = React.createClass({
{ item_actions } { item_actions }
</div> </div>
<button <button
onClick={ this.handleToggleItem.bind(null, this.props.item.id) } 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> <span className="screen-reader-text">{MailPoet.I18n.t('showMoreDetails')}</span>
</button> </button>
@ -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 }> <tr className={row_classes}>
{ checkbox } { checkbox }
{ this.props.onRenderItem(this.props.item, actions) } { this.props.onRenderItem(this.props.item, actions) }
</tr> </tr>
@ -235,7 +235,7 @@ const ListingItems = React.createClass({
return ( return (
<tbody> <tbody>
<tr className={ select_all_classes }> <tr className={select_all_classes}>
<td colSpan={ <td colSpan={
this.props.columns.length this.props.columns.length
+ (this.props.is_selectable ? 1 : 0) + (this.props.is_selectable ? 1 : 0)
@ -250,7 +250,7 @@ const ListingItems = React.createClass({
} }
&nbsp; &nbsp;
<a <a
onClick={ this.props.onSelectAll } onClick={this.props.onSelectAll}
href="javascript:;">{ href="javascript:;">{
(this.props.selection !== 'all') (this.props.selection !== 'all')
? MailPoet.I18n.t('selectAllLink') ? MailPoet.I18n.t('selectAllLink')
@ -266,19 +266,19 @@ const ListingItems = React.createClass({
return ( return (
<ListingItem <ListingItem
columns={ this.props.columns } columns={this.props.columns}
onSelectItem={ this.props.onSelectItem } onSelectItem={this.props.onSelectItem}
onRenderItem={ this.props.onRenderItem } onRenderItem={this.props.onRenderItem}
onDeleteItem={ this.props.onDeleteItem } onDeleteItem={this.props.onDeleteItem}
onRestoreItem={ this.props.onRestoreItem } onRestoreItem={this.props.onRestoreItem}
onTrashItem={ this.props.onTrashItem } onTrashItem={this.props.onTrashItem}
onRefreshItems={ this.props.onRefreshItems } onRefreshItems={this.props.onRefreshItems}
selection={ this.props.selection } selection={this.props.selection}
is_selectable={ this.props.is_selectable } is_selectable={this.props.is_selectable}
item_actions={ this.props.item_actions } item_actions={this.props.item_actions}
group={ this.props.group } group={this.props.group}
key={ `item-${renderItem.id}-${index}` } key={`item-${renderItem.id}-${index}`}
item={ renderItem } /> item={renderItem} />
); );
})} })}
</tbody> </tbody>
@ -789,8 +789,8 @@ const Listing = React.createClass({
// search // search
let search = ( let search = (
<ListingSearch <ListingSearch
onSearch={ this.handleSearch } onSearch={this.handleSearch}
search={ this.state.search } search={this.state.search}
/> />
); );
if (this.props.search === false) { if (this.props.search === false) {
@ -800,9 +800,9 @@ const Listing = React.createClass({
// groups // groups
let groups = ( let groups = (
<ListingGroups <ListingGroups
groups={ this.state.groups } groups={this.state.groups}
group={ this.state.group } group={this.state.group}
onSelectGroup={ this.handleGroup } onSelectGroup={this.handleGroup}
/> />
); );
if (this.props.groups === false) { if (this.props.groups === false) {
@ -821,81 +821,81 @@ const Listing = React.createClass({
{ search } { search }
<div className="tablenav top clearfix"> <div className="tablenav top clearfix">
<ListingBulkActions <ListingBulkActions
count={ this.state.count } count={this.state.count}
bulk_actions={ bulk_actions } bulk_actions={bulk_actions}
selection={ this.state.selection } selection={this.state.selection}
selected_ids={ this.state.selected_ids } selected_ids={this.state.selected_ids}
onBulkAction={ this.handleBulkAction } /> onBulkAction={this.handleBulkAction} />
<ListingFilters <ListingFilters
filters={ this.state.filters } filters={this.state.filters}
filter={ this.state.filter } filter={this.state.filter}
group={ this.state.group } group={this.state.group}
onBeforeSelectFilter={ this.props.onBeforeSelectFilter || null } onBeforeSelectFilter={this.props.onBeforeSelectFilter || null}
onSelectFilter={ this.handleFilter } onSelectFilter={this.handleFilter}
onEmptyTrash={ this.handleEmptyTrash } onEmptyTrash={this.handleEmptyTrash}
/> />
<ListingPages <ListingPages
count={ this.state.count } count={this.state.count}
page={ this.state.page } page={this.state.page}
limit={ this.state.limit } limit={this.state.limit}
onSetPage={ this.handleSetPage } /> onSetPage={this.handleSetPage} />
</div> </div>
<table className={ table_classes }> <table className={table_classes}>
<thead> <thead>
<ListingHeader <ListingHeader
onSort={ this.handleSort } onSort={this.handleSort}
onSelectItems={ this.handleSelectItems } onSelectItems={this.handleSelectItems}
selection={ this.state.selection } selection={this.state.selection}
sort_by={ sort_by } sort_by={sort_by}
sort_order={ sort_order } sort_order={sort_order}
columns={ columns } columns={columns}
is_selectable={ bulk_actions.length > 0 } /> is_selectable={bulk_actions.length > 0} />
</thead> </thead>
<ListingItems <ListingItems
onRenderItem={ this.handleRenderItem } onRenderItem={this.handleRenderItem}
onDeleteItem={ this.handleDeleteItem } onDeleteItem={this.handleDeleteItem}
onRestoreItem={ this.handleRestoreItem } onRestoreItem={this.handleRestoreItem}
onTrashItem={ this.handleTrashItem } onTrashItem={this.handleTrashItem}
onRefreshItems={ this.handleRefreshItems } onRefreshItems={this.handleRefreshItems}
columns={ columns } columns={columns}
is_selectable={ bulk_actions.length > 0 } is_selectable={bulk_actions.length > 0}
onSelectItem={ this.handleSelectItem } onSelectItem={this.handleSelectItem}
onSelectAll={ this.handleSelectAll } onSelectAll={this.handleSelectAll}
selection={ this.state.selection } selection={this.state.selection}
selected_ids={ this.state.selected_ids } selected_ids={this.state.selected_ids}
loading={ this.state.loading } loading={this.state.loading}
group={ this.state.group } group={this.state.group}
count={ this.state.count } count={this.state.count}
limit={ this.state.limit } limit={this.state.limit}
item_actions={ item_actions } item_actions={item_actions}
messages={ messages } messages={messages}
items={ items } /> items={items} />
<tfoot> <tfoot>
<ListingHeader <ListingHeader
onSort={ this.handleSort } onSort={this.handleSort}
onSelectItems={ this.handleSelectItems } onSelectItems={this.handleSelectItems}
selection={ this.state.selection } selection={this.state.selection}
sort_by={ sort_by } sort_by={sort_by}
sort_order={ sort_order } sort_order={sort_order}
columns={ columns } columns={columns}
is_selectable={ bulk_actions.length > 0 } /> is_selectable={bulk_actions.length > 0} />
</tfoot> </tfoot>
</table> </table>
<div className="tablenav bottom"> <div className="tablenav bottom">
<ListingBulkActions <ListingBulkActions
count={ this.state.count } count={this.state.count}
bulk_actions={ bulk_actions } bulk_actions={bulk_actions}
selection={ this.state.selection } selection={this.state.selection}
selected_ids={ this.state.selected_ids } selected_ids={this.state.selected_ids}
onBulkAction={ this.handleBulkAction } /> onBulkAction={this.handleBulkAction} />
<ListingPages <ListingPages
count={ this.state.count } count={this.state.count}
page={ this.state.page } page={this.state.page}
limit={ this.state.limit } limit={this.state.limit}
onSetPage={ this.handleSetPage } /> onSetPage={this.handleSetPage} />
</div> </div>
</div> </div>
); );

18
assets/js/src/listing/pages.jsx
View File

@ -78,7 +78,7 @@ define([
if(this.props.page > 1) { if(this.props.page > 1) {
previousPage = ( previousPage = (
<a href="javascript:;" <a href="javascript:;"
onClick={ this.setPreviousPage } onClick={this.setPreviousPage}
className="prev-page"> className="prev-page">
<span className="screen-reader-text">{MailPoet.I18n.t('previousPage')}</span> <span className="screen-reader-text">{MailPoet.I18n.t('previousPage')}</span>
<span aria-hidden="true">‹</span> <span aria-hidden="true">‹</span>
@ -89,7 +89,7 @@ define([
if(this.props.page > 2) { if(this.props.page > 2) {
firstPage = ( firstPage = (
<a href="javascript:;" <a href="javascript:;"
onClick={ this.setFirstPage } onClick={this.setFirstPage}
className="first-page"> className="first-page">
<span className="screen-reader-text">{MailPoet.I18n.t('firstPage')}</span> <span className="screen-reader-text">{MailPoet.I18n.t('firstPage')}</span>
<span aria-hidden="true">«</span> <span aria-hidden="true">«</span>
@ -100,7 +100,7 @@ define([
if(this.props.page < this.getLastPage()) { if(this.props.page < this.getLastPage()) {
nextPage = ( nextPage = (
<a href="javascript:;" <a href="javascript:;"
onClick={ this.setNextPage } onClick={this.setNextPage}
className="next-page"> className="next-page">
<span className="screen-reader-text">{MailPoet.I18n.t('nextPage')}</span> <span className="screen-reader-text">{MailPoet.I18n.t('nextPage')}</span>
<span aria-hidden="true">›</span> <span aria-hidden="true">›</span>
@ -111,7 +111,7 @@ define([
if(this.props.page < this.getLastPage() - 1) { if(this.props.page < this.getLastPage() - 1) {
lastPage = ( lastPage = (
<a href="javascript:;" <a href="javascript:;"
onClick={ this.setLastPage } onClick={this.setLastPage}
className="last-page"> className="last-page">
<span className="screen-reader-text">{MailPoet.I18n.t('lastPage')}</span> <span className="screen-reader-text">{MailPoet.I18n.t('lastPage')}</span>
<span aria-hidden="true">»</span> <span aria-hidden="true">»</span>
@ -136,13 +136,13 @@ define([
htmlFor="current-page-selector">{MailPoet.I18n.t('currentPage')}</label> htmlFor="current-page-selector">{MailPoet.I18n.t('currentPage')}</label>
<input <input
type="text" type="text"
onChange={ this.handleChangeManualPage } onChange={this.handleChangeManualPage}
onKeyUp={ this.handleSetManualPage } onKeyUp={this.handleSetManualPage}
onBlur={ this.handleBlurManualPage } onBlur={this.handleBlurManualPage}
aria-describedby="table-paging" aria-describedby="table-paging"
size="2" size="2"
ref="page" ref="page"
value={ pageValue } value={pageValue}
name="paged" name="paged"
id="current-page-selector" id="current-page-selector"
className="current-page" /> className="current-page" />
@ -172,7 +172,7 @@ define([
.replace('%$1d', this.props.count.toLocaleString()); .replace('%$1d', this.props.count.toLocaleString());
} }
return ( return (
<div className={ classes }> <div className={classes}>
<span className="displaying-num">{ numberOfItemsLabel }</span> <span className="displaying-num">{ numberOfItemsLabel }</span>
{ pagination } { pagination }
</div> </div>

6
assets/js/src/newsletters/breadcrumb.jsx
View File

@ -48,13 +48,13 @@ define(
if(step['link'] !== undefined && this.props.step !== step.name) { if(step['link'] !== undefined && this.props.step !== step.name) {
label = ( label = (
<Link to={ step.link }>{ step.label }</Link> <Link to={step.link}>{ step.label }</Link>
); );
} }
return ( return (
<span key={ 'step-'+index }> <span key={'step-'+index}>
<span className={ stepClasses }> <span className={stepClasses}>
{ label } { label }
</span> </span>
{ (index < (this.state.steps.length - 1) ) ? ' > ' : '' } { (index < (this.state.steps.length - 1) ) ? ' > ' : '' }

20
assets/js/src/newsletters/listings/mixins.jsx
View File

@ -95,20 +95,20 @@ 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' }}
href="javascript:;" href="javascript:;"
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' }}
href="javascript:;" href="javascript:;"
onClick={ this.pauseSending.bind(null, newsletter) } onClick={this.pauseSending.bind(null, newsletter)}
>{MailPoet.I18n.t('pause')}</a> >{MailPoet.I18n.t('pause')}</a>
</span> </span>
); );
@ -125,10 +125,10 @@ const _QueueMixin = {
return ( return (
<div> <div>
<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 }
@ -285,9 +285,9 @@ const _StatisticsMixin = {
return ( return (
<div> <div>
<Link <Link
key={ `stats-${newsletter.id}` } key={`stats-${newsletter.id}`}
to={ params.link } to={params.link}
onClick={ params.onClick || null } onClick={params.onClick || null}
> >
{content} {content}
</Link> </Link>
@ -347,7 +347,7 @@ const _MailerMixin = {
<p> <p>
<a href="javascript:;" <a href="javascript:;"
className="button" className="button"
onClick={ this.resumeMailerSending } onClick={this.resumeMailerSending}
>{ MailPoet.I18n.t('mailerResumeSendingButton') }</a> >{ MailPoet.I18n.t('mailerResumeSendingButton') }</a>
</p> </p>
</div> </div>

44
assets/js/src/newsletters/listings/notification.jsx
View File

@ -104,7 +104,7 @@ const newsletter_actions = [
name: 'view', name: 'view',
link: function (newsletter) { link: function (newsletter) {
return ( return (
<a href={ newsletter.preview_url } target="_blank"> <a href={newsletter.preview_url} target="_blank">
{MailPoet.I18n.t('preview')} {MailPoet.I18n.t('preview')}
</a> </a>
); );
@ -114,7 +114,7 @@ const newsletter_actions = [
name: 'edit', name: 'edit',
link: function (newsletter) { link: function (newsletter) {
return ( return (
<a href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }> <a href={`?page=mailpoet-newsletter-editor&id=${ newsletter.id }`}>
{MailPoet.I18n.t('edit')} {MailPoet.I18n.t('edit')}
</a> </a>
); );
@ -184,9 +184,9 @@ const NewsletterListNotification = React.createClass({
renderStatus: function (newsletter) { renderStatus: function (newsletter) {
return ( return (
<select <select
data-id={ newsletter.id } data-id={newsletter.id}
defaultValue={ newsletter.status } defaultValue={newsletter.status}
onChange={ this.updateStatus } onChange={this.updateStatus}
> >
<option value="active">{ MailPoet.I18n.t('active') }</option> <option value="active">{ MailPoet.I18n.t('active') }</option>
<option value="draft">{ MailPoet.I18n.t('inactive') }</option> <option value="draft">{ MailPoet.I18n.t('inactive') }</option>
@ -269,7 +269,7 @@ const NewsletterListNotification = React.createClass({
} else { } else {
return ( return (
<Link <Link
to={ `/notification/history/${ newsletter.id }` } to={`/notification/history/${ newsletter.id }`}
>{ MailPoet.I18n.t('viewHistory') }</Link> >{ MailPoet.I18n.t('viewHistory') }</Link>
); );
} }
@ -283,25 +283,25 @@ const NewsletterListNotification = React.createClass({
return ( return (
<div> <div>
<td className={ rowClasses }> <td className={rowClasses}>
<strong> <strong>
<a <a
className="row-title" className="row-title"
href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` } href={`?page=mailpoet-newsletter-editor&id=${ newsletter.id }`}
>{ newsletter.subject }</a> >{ newsletter.subject }</a>
</strong> </strong>
{ actions } { actions }
</td> </td>
<td className="column" data-colname={ MailPoet.I18n.t('status') }> <td className="column" data-colname={MailPoet.I18n.t('status')}>
{ this.renderStatus(newsletter) } { this.renderStatus(newsletter) }
</td> </td>
<td className="column" data-colname={ MailPoet.I18n.t('settings') }> <td className="column" data-colname={MailPoet.I18n.t('settings')}>
{ this.renderSettings(newsletter) } { this.renderSettings(newsletter) }
</td> </td>
<td className="column" data-colname={ MailPoet.I18n.t('history') }> <td className="column" data-colname={MailPoet.I18n.t('history')}>
{ this.renderHistoryLink(newsletter) } { this.renderHistoryLink(newsletter) }
</td> </td>
<td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }> <td className="column-date" data-colname={MailPoet.I18n.t('lastModifiedOn')}>
<abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr> <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr>
</td> </td>
</div> </div>
@ -317,21 +317,21 @@ const NewsletterListNotification = React.createClass({
<ListingTabs tab="notification" /> <ListingTabs tab="notification" />
<Listing <Listing
limit={ window.mailpoet_listing_per_page } limit={window.mailpoet_listing_per_page}
location={ this.props.location } location={this.props.location}
params={ this.props.params } params={this.props.params}
endpoint="newsletters" endpoint="newsletters"
type="notification" type="notification"
base_url="notification" base_url="notification"
onRenderItem={ this.renderItem } onRenderItem={this.renderItem}
columns={ columns } columns={columns}
bulk_actions={ bulk_actions } bulk_actions={bulk_actions}
item_actions={ newsletter_actions } item_actions={newsletter_actions}
messages={ messages } messages={messages}
auto_refresh={ true } auto_refresh={true}
sort_by="updated_at" sort_by="updated_at"
sort_order="desc" sort_order="desc"
afterGetItems={ this.checkMailerStatus } afterGetItems={this.checkMailerStatus}
/> />
</div> </div>
); );

28
assets/js/src/newsletters/listings/notification_history.jsx
View File

@ -44,7 +44,7 @@ let newsletter_actions = [
name: 'view', name: 'view',
link: function (newsletter) { link: function (newsletter) {
return ( return (
<a href={ newsletter.preview_url } target="_blank"> <a href={newsletter.preview_url} target="_blank">
{MailPoet.I18n.t('preview')} {MailPoet.I18n.t('preview')}
</a> </a>
); );
@ -69,27 +69,27 @@ const NewsletterListNotificationHistory = React.createClass({
return ( return (
<div> <div>
<td className={ rowClasses }> <td className={rowClasses}>
<strong> <strong>
<a <a
href={ newsletter.preview_url } href={newsletter.preview_url}
target="_blank" target="_blank"
>{ newsletter.queue.newsletter_rendered_subject || newsletter.subject }</a> >{ newsletter.queue.newsletter_rendered_subject || newsletter.subject }</a>
</strong> </strong>
{ actions } { actions }
</td> </td>
<td className="column" data-colname={ MailPoet.I18n.t('status') }> <td className="column" data-colname={MailPoet.I18n.t('status')}>
{ this.renderQueueStatus(newsletter, meta.mta_log) } { this.renderQueueStatus(newsletter, meta.mta_log) }
</td> </td>
<td className="column" data-colname={ MailPoet.I18n.t('lists') }> <td className="column" data-colname={MailPoet.I18n.t('lists')}>
{ segments } { segments }
</td> </td>
{ (mailpoet_tracking_enabled === true) ? ( { (mailpoet_tracking_enabled === true) ? (
<td className="column" data-colname={ MailPoet.I18n.t('statistics') }> <td className="column" data-colname={MailPoet.I18n.t('statistics')}>
{ this.renderStatistics(newsletter, undefined, meta.current_time) } { this.renderStatistics(newsletter, undefined, meta.current_time) }
</td> </td>
) : null } ) : null }
<td className="column-date" data-colname={ MailPoet.I18n.t('sentOn') }> <td className="column-date" data-colname={MailPoet.I18n.t('sentOn')}>
{ (newsletter.sent_at) ? MailPoet.Date.format(newsletter.sent_at) : MailPoet.I18n.t('notSentYet') } { (newsletter.sent_at) ? MailPoet.Date.format(newsletter.sent_at) : MailPoet.I18n.t('notSentYet') }
</td> </td>
</div> </div>
@ -110,19 +110,19 @@ const NewsletterListNotificationHistory = React.createClass({
>{MailPoet.I18n.t('backToPostNotifications')}</Link> >{MailPoet.I18n.t('backToPostNotifications')}</Link>
<Listing <Listing
limit={ window.mailpoet_listing_per_page } limit={window.mailpoet_listing_per_page}
location={ this.props.location } location={this.props.location}
params={ this.props.params } params={this.props.params}
endpoint="newsletters" endpoint="newsletters"
type="notification_history" type="notification_history"
base_url="notification/history/:parent_id" base_url="notification/history/:parent_id"
onRenderItem={ this.renderItem } onRenderItem={this.renderItem}
columns={columns} columns={columns}
item_actions={ newsletter_actions } item_actions={newsletter_actions}
auto_refresh={ true } auto_refresh={true}
sort_by="sent_at" sort_by="sent_at"
sort_order="desc" sort_order="desc"
afterGetItems={ this.checkMailerStatus } afterGetItems={this.checkMailerStatus}
/> />
</div> </div>
); );

28
assets/js/src/newsletters/listings/standard.jsx
View File

@ -113,7 +113,7 @@ let newsletter_actions = [
name: 'view', name: 'view',
link: function (newsletter) { link: function (newsletter) {
return ( return (
<a href={ newsletter.preview_url } target="_blank"> <a href={newsletter.preview_url} target="_blank">
{MailPoet.I18n.t('preview')} {MailPoet.I18n.t('preview')}
</a> </a>
); );
@ -174,7 +174,7 @@ const NewsletterListStandard = React.createClass({
return ( return (
<div> <div>
<td className={ rowClasses }> <td className={rowClasses}>
<strong> <strong>
<a <a
className="row-title" className="row-title"
@ -184,18 +184,18 @@ const NewsletterListStandard = React.createClass({
</strong> </strong>
{ actions } { actions }
</td> </td>
<td className="column" data-colname={ MailPoet.I18n.t('status') }> <td className="column" data-colname={MailPoet.I18n.t('status')}>
{ this.renderQueueStatus(newsletter, meta.mta_log) } { this.renderQueueStatus(newsletter, meta.mta_log) }
</td> </td>
<td className="column" data-colname={ MailPoet.I18n.t('lists') }> <td className="column" data-colname={MailPoet.I18n.t('lists')}>
{ segments } { segments }
</td> </td>
{ (mailpoet_tracking_enabled === true) ? ( { (mailpoet_tracking_enabled === true) ? (
<td className="column" data-colname={ MailPoet.I18n.t('statistics') }> <td className="column" data-colname={MailPoet.I18n.t('statistics')}>
{ this.renderStatistics(newsletter, undefined, meta.current_time) } { this.renderStatistics(newsletter, undefined, meta.current_time) }
</td> </td>
) : null } ) : null }
<td className="column-date" data-colname={ MailPoet.I18n.t('sentOn') }> <td className="column-date" data-colname={MailPoet.I18n.t('sentOn')}>
<abbr>{ (newsletter.sent_at) ? MailPoet.Date.format(newsletter.sent_at) : MailPoet.I18n.t('notSentYet') }</abbr> <abbr>{ (newsletter.sent_at) ? MailPoet.Date.format(newsletter.sent_at) : MailPoet.I18n.t('notSentYet') }</abbr>
</td> </td>
</div> </div>
@ -218,21 +218,21 @@ const NewsletterListStandard = React.createClass({
<ListingTabs tab="standard" /> <ListingTabs tab="standard" />
<Listing <Listing
limit={ window.mailpoet_listing_per_page } limit={window.mailpoet_listing_per_page}
location={ this.props.location } location={this.props.location}
params={ this.props.params } params={this.props.params}
endpoint="newsletters" endpoint="newsletters"
type="standard" type="standard"
base_url="standard" base_url="standard"
onRenderItem={this.renderItem} onRenderItem={this.renderItem}
columns={columns} columns={columns}
bulk_actions={ bulk_actions } bulk_actions={bulk_actions}
item_actions={ newsletter_actions } item_actions={newsletter_actions}
messages={ messages } messages={messages}
auto_refresh={ true } auto_refresh={true}
sort_by="sent_at" sort_by="sent_at"
sort_order="desc" sort_order="desc"
afterGetItems={ this.checkMailerStatus } afterGetItems={this.checkMailerStatus}
/> />
</div> </div>
); );

6
assets/js/src/newsletters/listings/tabs.jsx
View File

@ -35,9 +35,9 @@ 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`,
{ 'MailPoet Free version': window.mailpoet_version } { 'MailPoet Free version': window.mailpoet_version }
)} )}

42
assets/js/src/newsletters/listings/welcome.jsx
View File

@ -103,7 +103,7 @@ let newsletter_actions = [
name: 'view', name: 'view',
link: function (newsletter) { link: function (newsletter) {
return ( return (
<a href={ newsletter.preview_url } target="_blank"> <a href={newsletter.preview_url} target="_blank">
{MailPoet.I18n.t('preview')} {MailPoet.I18n.t('preview')}
</a> </a>
); );
@ -113,7 +113,7 @@ let newsletter_actions = [
name: 'edit', name: 'edit',
link: function (newsletter) { link: function (newsletter) {
return ( return (
<a href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` }> <a href={`?page=mailpoet-newsletter-editor&id=${ newsletter.id }`}>
{MailPoet.I18n.t('edit')} {MailPoet.I18n.t('edit')}
</a> </a>
); );
@ -164,9 +164,9 @@ const NewsletterListWelcome = React.createClass({
<div> <div>
<p> <p>
<select <select
data-id={ newsletter.id } data-id={newsletter.id}
defaultValue={ newsletter.status } defaultValue={newsletter.status}
onChange={ this.updateStatus } onChange={this.updateStatus}
> >
<option value="active">{ MailPoet.I18n.t('active') }</option> <option value="active">{ MailPoet.I18n.t('active') }</option>
<option value="draft">{ MailPoet.I18n.t('inactive') }</option> <option value="draft">{ MailPoet.I18n.t('inactive') }</option>
@ -256,30 +256,30 @@ const NewsletterListWelcome = React.createClass({
return ( return (
<div> <div>
<td className={ rowClasses }> <td className={rowClasses}>
<strong> <strong>
<a <a
className="row-title" className="row-title"
href={ `?page=mailpoet-newsletter-editor&id=${ newsletter.id }` } href={`?page=mailpoet-newsletter-editor&id=${ newsletter.id }`}
>{ newsletter.subject }</a> >{ newsletter.subject }</a>
</strong> </strong>
{ actions } { actions }
</td> </td>
<td className="column" data-colname={ MailPoet.I18n.t('status') }> <td className="column" data-colname={MailPoet.I18n.t('status')}>
{ this.renderStatus(newsletter) } { this.renderStatus(newsletter) }
</td> </td>
<td className="column" data-colname={ MailPoet.I18n.t('settings') }> <td className="column" data-colname={MailPoet.I18n.t('settings')}>
{ this.renderSettings(newsletter) } { this.renderSettings(newsletter) }
</td> </td>
{ (mailpoet_tracking_enabled === true) ? ( { (mailpoet_tracking_enabled === true) ? (
<td className="column" data-colname={ MailPoet.I18n.t('statistics') }> <td className="column" data-colname={MailPoet.I18n.t('statistics')}>
{ this.renderStatistics( { this.renderStatistics(
newsletter, newsletter,
newsletter.total_sent > 0 && newsletter.statistics newsletter.total_sent > 0 && newsletter.statistics
) } ) }
</td> </td>
) : null } ) : null }
<td className="column-date" data-colname={ MailPoet.I18n.t('lastModifiedOn') }> <td className="column-date" data-colname={MailPoet.I18n.t('lastModifiedOn')}>
<abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr> <abbr>{ MailPoet.Date.format(newsletter.updated_at) }</abbr>
</td> </td>
</div> </div>
@ -295,21 +295,21 @@ const NewsletterListWelcome = React.createClass({
<ListingTabs tab="welcome" /> <ListingTabs tab="welcome" />
<Listing <Listing
limit={ window.mailpoet_listing_per_page } limit={window.mailpoet_listing_per_page}
location={ this.props.location } location={this.props.location}
params={ this.props.params } params={this.props.params}
endpoint="newsletters" endpoint="newsletters"
type="welcome" type="welcome"
base_url="welcome" base_url="welcome"
onRenderItem={ this.renderItem } onRenderItem={this.renderItem}
columns={ columns } columns={columns}
bulk_actions={ bulk_actions } bulk_actions={bulk_actions}
item_actions={ newsletter_actions } item_actions={newsletter_actions}
messages={ messages } messages={messages}
auto_refresh={ true } auto_refresh={true}
sort_by="updated_at" sort_by="updated_at"
sort_order="desc" sort_order="desc"
afterGetItems={ this.checkMailerStatus } afterGetItems={this.checkMailerStatus}
/> />
</div> </div>
); );

22
assets/js/src/newsletters/newsletters.jsx
View File

@ -31,23 +31,23 @@ if(container) {
extra_routes = Hooks.applyFilters('mailpoet_newsletters_before_router', extra_routes); extra_routes = Hooks.applyFilters('mailpoet_newsletters_before_router', extra_routes);
const mailpoet_listing = ReactDOM.render(( const mailpoet_listing = ReactDOM.render((
<Router history={ history }> <Router history={history}>
<Route path="/" component={ App }> <Route path="/" component={App}>
<IndexRedirect to="standard" /> <IndexRedirect to="standard" />
{/* Listings */} {/* Listings */}
<Route path="standard(/)**" params={{ tab: 'standard' }} component={ NewsletterListStandard } /> <Route path="standard(/)**" params={{ tab: 'standard' }} component={NewsletterListStandard} />
<Route path="welcome(/)**" component={ NewsletterListWelcome } /> <Route path="welcome(/)**" component={NewsletterListWelcome} />
<Route path="notification/history/:parent_id(/)**" component={ NewsletterListNotificationHistory } /> <Route path="notification/history/:parent_id(/)**" component={NewsletterListNotificationHistory} />
<Route path="notification(/)**" component={ NewsletterListNotification } /> <Route path="notification(/)**" component={NewsletterListNotification} />
{/* Newsletter: type selection */} {/* Newsletter: type selection */}
<Route path="new" component={ NewsletterTypes } /> <Route path="new" component={NewsletterTypes} />
{/* New newsletter: types */} {/* New newsletter: types */}
<Route path="new/standard" component={ NewsletterTypeStandard } /> <Route path="new/standard" component={NewsletterTypeStandard} />
<Route path="new/notification" component={ NewsletterTypeNotification } /> <Route path="new/notification" component={NewsletterTypeNotification} />
{/* Template selection */} {/* Template selection */}
<Route name="template" path="template/:id" component={ NewsletterTemplates } /> <Route name="template" path="template/:id" component={NewsletterTemplates} />
{/* Sending options */} {/* Sending options */}
<Route path="send/:id" component={ NewsletterSend } /> <Route path="send/:id" component={NewsletterSend} />
{/* Extra routes */} {/* Extra routes */}
{ extra_routes.map(rt => <Route key={rt.path} path={rt.path} component={rt.component} />) } { extra_routes.map(rt => <Route key={rt.path} path={rt.path} component={rt.component} />) }
</Route> </Route>

10
assets/js/src/newsletters/send.jsx
View File

@ -293,9 +293,9 @@ define(
<Form <Form
id="mailpoet_newsletter" id="mailpoet_newsletter"
fields={ fields } fields={fields}
item={ this.state.item } item={this.state.item}
loading={ this.state.loading } loading={this.state.loading}
onChange={this.handleFormChange} onChange={this.handleFormChange}
onSubmit={this.handleSave} onSubmit={this.handleSave}
> >
@ -305,13 +305,13 @@ define(
<input <input
className="button button-primary" className="button button-primary"
type="button" type="button"
onClick={ this.handleResume } onClick={this.handleResume}
value={MailPoet.I18n.t('resume')} /> value={MailPoet.I18n.t('resume')} />
: :
<input <input
className="button button-primary" className="button button-primary"
type="button" type="button"
onClick={ this.handleSend } onClick={this.handleSend}
value={MailPoet.I18n.t('send')} value={MailPoet.I18n.t('send')}
{...this.getSendButtonOptions()} {...this.getSendButtonOptions()}
/> />

6
assets/js/src/newsletters/send/standard.jsx
View File

@ -157,7 +157,7 @@ define(
size="10" size="10"
name={this.getFieldName()} name={this.getFieldName()}
value={this.getDisplayDate(this.props.value)} value={this.getDisplayDate(this.props.value)}
readOnly={ true } readOnly={true}
disabled={this.props.disabled} disabled={this.props.disabled}
onChange={this.onChange} onChange={this.onChange}
ref="dateInput" ref="dateInput"
@ -172,8 +172,8 @@ define(
(value, index) => { (value, index) => {
return ( return (
<option <option
key={ 'option-' + index } key={'option-' + index}
value={ value }> value={value}>
{ timeOfDayItems[value] } { timeOfDayItems[value] }
</option> </option>
); );

12
assets/js/src/newsletters/templates.jsx
View File

@ -219,7 +219,7 @@ define(
<div className="mailpoet_delete"> <div className="mailpoet_delete">
<a <a
href="javascript:;" href="javascript:;"
onClick={ this.handleDeleteTemplate.bind(null, template) } onClick={this.handleDeleteTemplate.bind(null, template)}
> >
{MailPoet.I18n.t('delete')} {MailPoet.I18n.t('delete')}
</a> </a>
@ -231,14 +231,14 @@ define(
&& template.thumbnail.length > 0) { && template.thumbnail.length > 0) {
thumbnail = ( thumbnail = (
<a href="javascript:;" onClick={this.handleShowTemplate.bind(null, template)}> <a href="javascript:;" onClick={this.handleShowTemplate.bind(null, template)}>
<img src={ template.thumbnail } /> <img src={template.thumbnail} />
<div className="mailpoet_overlay"></div> <div className="mailpoet_overlay"></div>
</a> </a>
); );
} }
return ( return (
<li key={ 'template-'+index }> <li key={'template-'+index}>
<div className="mailpoet_thumbnail"> <div className="mailpoet_thumbnail">
{ thumbnail } { thumbnail }
</div> </div>
@ -251,14 +251,14 @@ define(
<div className="mailpoet_actions"> <div className="mailpoet_actions">
<a <a
className="button button-secondary" className="button button-secondary"
onClick={ this.handleShowTemplate.bind(null, template) } onClick={this.handleShowTemplate.bind(null, template)}
> >
{MailPoet.I18n.t('preview')} {MailPoet.I18n.t('preview')}
</a> </a>
&nbsp; &nbsp;
<a <a
className="button button-primary" className="button button-primary"
onClick={ this.handleSelectTemplate.bind(null, template) } onClick={this.handleSelectTemplate.bind(null, template)}
> >
{MailPoet.I18n.t('select')} {MailPoet.I18n.t('select')}
</a> </a>
@ -280,7 +280,7 @@ define(
<Breadcrumb step="template" /> <Breadcrumb step="template" />
<ul className={ boxClasses }> <ul className={boxClasses}>
{ templates } { templates }
</ul> </ul>

4
assets/js/src/newsletters/types.jsx
View File

@ -58,7 +58,7 @@ define(
description: MailPoet.I18n.t('regularNewsletterTypeDescription'), description: MailPoet.I18n.t('regularNewsletterTypeDescription'),
action: function () { action: function () {
return ( return (
<a className="button button-primary" onClick={ this.createNewsletter.bind(null, 'standard') }> <a className="button button-primary" onClick={this.createNewsletter.bind(null, 'standard')}>
{MailPoet.I18n.t('create')} {MailPoet.I18n.t('create')}
</a> </a>
); );
@ -84,7 +84,7 @@ define(
description: MailPoet.I18n.t('postNotificationNewsletterTypeDescription'), description: MailPoet.I18n.t('postNotificationNewsletterTypeDescription'),
action: function () { action: function () {
return ( return (
<a className="button button-primary" onClick={ this.setupNewsletter.bind(null, 'notification') }> <a className="button button-primary" onClick={this.setupNewsletter.bind(null, 'notification')}>
{MailPoet.I18n.t('setUp')} {MailPoet.I18n.t('setUp')}
</a> </a>
); );

2
assets/js/src/newsletters/types/notification/notification.jsx
View File

@ -82,7 +82,7 @@ define(
<input <input
className="button button-primary" className="button button-primary"
type="button" type="button"
onClick={ this.handleNext } onClick={this.handleNext}
value={MailPoet.I18n.t('next')} /> value={MailPoet.I18n.t('next')} />
</p> </p>
</div> </div>

30
assets/js/src/newsletters/types/welcome/scheduling.jsx
View File

@ -130,42 +130,42 @@ const WelcomeScheduling = React.createClass({
if (value.event === 'user') { if (value.event === 'user') {
roleSegmentSelection = ( roleSegmentSelection = (
<Select <Select
field={ roleField } field={roleField}
item={ this._getCurrentValue() } item={this._getCurrentValue()}
onValueChange={ this.handleRoleChange } /> onValueChange={this.handleRoleChange} />
); );
} else { } else {
roleSegmentSelection = ( roleSegmentSelection = (
<Select <Select
field={ segmentField } field={segmentField}
item={ this._getCurrentValue() } item={this._getCurrentValue()}
onValueChange={ this.handleSegmentChange } /> onValueChange={this.handleSegmentChange} />
); );
} }
if (value.afterTimeType !== 'immediate') { if (value.afterTimeType !== 'immediate') {
timeNumber = ( timeNumber = (
<Text <Text
field={ afterTimeNumberField } field={afterTimeNumberField}
item={ this._getCurrentValue() } item={this._getCurrentValue()}
onValueChange={ this.handleAfterTimeNumberChange } /> onValueChange={this.handleAfterTimeNumberChange} />
); );
} }
return ( return (
<div> <div>
<Select <Select
field={ events } field={events}
item={ this._getCurrentValue() } item={this._getCurrentValue()}
onValueChange={ this.handleEventChange } /> onValueChange={this.handleEventChange} />
{ roleSegmentSelection } { roleSegmentSelection }
{ timeNumber } { timeNumber }
<Select <Select
field={ afterTimeTypeField } field={afterTimeTypeField}
item={ this._getCurrentValue() } item={this._getCurrentValue()}
onValueChange={ this.handleAfterTimeTypeChange } /> onValueChange={this.handleAfterTimeTypeChange} />
</div> </div>
); );
}, },

6
assets/js/src/segments/form.jsx
View File

@ -51,9 +51,9 @@ define(
<Form <Form
endpoint="segments" endpoint="segments"
fields={ fields } fields={fields}
params={ this.props.params } params={this.props.params}
messages={ messages } messages={messages}
/> />
</div> </div>
); );

38
assets/js/src/segments/list.jsx
View File

@ -99,7 +99,7 @@ const item_actions = [
name: 'edit', name: 'edit',
link: function (item) { link: function (item) {
return ( return (
<Link to={ `/edit/${item.id}` }>{MailPoet.I18n.t('edit')}</Link> <Link to={`/edit/${item.id}`}>{MailPoet.I18n.t('edit')}</Link>
); );
}, },
display: function (segment) { display: function (segment) {
@ -180,7 +180,7 @@ const item_actions = [
name: 'view_subscribers', name: 'view_subscribers',
link: function (item) { link: function (item) {
return ( return (
<a href={ item.subscribers_url }>{MailPoet.I18n.t('viewSubscribers')}</a> <a href={item.subscribers_url}>{MailPoet.I18n.t('viewSubscribers')}</a>
); );
}, },
}, },
@ -216,35 +216,35 @@ const SegmentList = React.createClass({
segment_name = ( segment_name = (
<Link <Link
className="row-title" className="row-title"
to={ `/edit/${segment.id}` } to={`/edit/${segment.id}`}
>{ segment.name }</Link> >{ segment.name }</Link>
); );
} }
return ( return (
<div> <div>
<td className={ rowClasses }> <td className={rowClasses}>
<strong> <strong>
{ segment_name } { segment_name }
</strong> </strong>
{ actions } { actions }
</td> </td>
<td className="column-date" data-colname={ MailPoet.I18n.t('description') }> <td className="column-date" data-colname={MailPoet.I18n.t('description')}>
<abbr>{ segment.description }</abbr> <abbr>{ segment.description }</abbr>
</td> </td>
<td className="column-date" data-colname={ MailPoet.I18n.t('subscribed') }> <td className="column-date" data-colname={MailPoet.I18n.t('subscribed')}>
<abbr>{ subscribed.toLocaleString() }</abbr> <abbr>{ subscribed.toLocaleString() }</abbr>
</td> </td>
<td className="column-date" data-colname={ MailPoet.I18n.t('unconfirmed') }> <td className="column-date" data-colname={MailPoet.I18n.t('unconfirmed')}>
<abbr>{ unconfirmed.toLocaleString() }</abbr> <abbr>{ unconfirmed.toLocaleString() }</abbr>
</td> </td>
<td className="column-date" data-colname={ MailPoet.I18n.t('unsubscribed') }> <td className="column-date" data-colname={MailPoet.I18n.t('unsubscribed')}>
<abbr>{ unsubscribed.toLocaleString() }</abbr> <abbr>{ unsubscribed.toLocaleString() }</abbr>
</td> </td>
<td className="column-date" data-colname={ MailPoet.I18n.t('bounced') }> <td className="column-date" data-colname={MailPoet.I18n.t('bounced')}>
<abbr>{ bounced.toLocaleString() }</abbr> <abbr>{ bounced.toLocaleString() }</abbr>
</td> </td>
<td className="column-date" data-colname={ MailPoet.I18n.t('createdOn') }> <td className="column-date" data-colname={MailPoet.I18n.t('createdOn')}>
<abbr>{ MailPoet.Date.format(segment.created_at) }</abbr> <abbr>{ MailPoet.Date.format(segment.created_at) }</abbr>
</td> </td>
</div> </div>
@ -258,16 +258,16 @@ const SegmentList = React.createClass({
</h1> </h1>
<Listing <Listing
limit={ window.mailpoet_listing_per_page } limit={window.mailpoet_listing_per_page}
location={ this.props.location } location={this.props.location}
params={ this.props.params } params={this.props.params}
messages={ messages } messages={messages}
search={ false } search={false}
endpoint="segments" endpoint="segments"
onRenderItem={ this.renderItem } onRenderItem={this.renderItem}
columns={ columns } columns={columns}
bulk_actions={ bulk_actions } bulk_actions={bulk_actions}
item_actions={ item_actions } item_actions={item_actions}
sort_by="name" sort_by="name"
sort_order="asc" sort_order="asc"
/> />

12
assets/js/src/segments/segments.jsx
View File

@ -18,12 +18,12 @@ const container = document.getElementById('segments_container');
if(container) { if(container) {
ReactDOM.render(( ReactDOM.render((
<Router history={ history }> <Router history={history}>
<Route path="/" component={ App }> <Route path="/" component={App}>
<IndexRoute component={ SegmentList } /> <IndexRoute component={SegmentList} />
<Route path="new" component={ SegmentForm } /> <Route path="new" component={SegmentForm} />
<Route path="edit/:id" component={ SegmentForm } /> <Route path="edit/:id" component={SegmentForm} />
<Route path="*" component={ SegmentList } /> <Route path="*" component={SegmentList} />
</Route> </Route>
</Router> </Router>
), container); ), container);

12
assets/js/src/subscribers/form.jsx
View File

@ -159,7 +159,7 @@ define(
/\[link\](.*?)\[\/link\]/g, /\[link\](.*?)\[\/link\]/g,
(match, i) => ( (match, i) => (
<a <a
key={ i } key={i}
href={`user-edit.php?user_id=${ subscriber.wp_user_id }`} href={`user-edit.php?user_id=${ subscriber.wp_user_id }`}
>{ match }</a> >{ match }</a>
) )
@ -193,11 +193,11 @@ define(
<Form <Form
endpoint="subscribers" endpoint="subscribers"
fields={ fields } fields={fields}
params={ this.props.params } params={this.props.params}
messages={ messages } messages={messages}
beforeFormContent={ beforeFormContent } beforeFormContent={beforeFormContent}
afterFormContent={ afterFormContent } afterFormContent={afterFormContent}
/> />
</div> </div>
); );

34
assets/js/src/subscribers/list.jsx
View File

@ -88,7 +88,7 @@ const messages = {
<div> <div>
<p>{MailPoet.I18n.t('bouncedSubscribersHelp')}</p> <p>{MailPoet.I18n.t('bouncedSubscribersHelp')}</p>
<p> <p>
<a href={ 'admin.php?page=mailpoet-premium' } className="button-primary"> <a href={'admin.php?page=mailpoet-premium'} className="button-primary">
{MailPoet.I18n.t('bouncedSubscribersPremiumButtonText')} {MailPoet.I18n.t('bouncedSubscribersPremiumButtonText')}
</a> </a>
</p> </p>
@ -117,7 +117,7 @@ const bulk_actions = [
}; };
return ( return (
<Selection field={ field } /> <Selection field={field} />
); );
}, },
getData: function () { getData: function () {
@ -149,7 +149,7 @@ const bulk_actions = [
}; };
return ( return (
<Selection field={ field } /> <Selection field={field} />
); );
}, },
getData: function () { getData: function () {
@ -181,7 +181,7 @@ const bulk_actions = [
}; };
return ( return (
<Selection field={ field } /> <Selection field={field} />
); );
}, },
getData: function () { getData: function () {
@ -230,7 +230,7 @@ const item_actions = [
label: MailPoet.I18n.t('edit'), label: MailPoet.I18n.t('edit'),
link: function (subscriber) { link: function (subscriber) {
return ( return (
<Link to={ `/edit/${subscriber.id}` }>{MailPoet.I18n.t('edit')}</Link> <Link to={`/edit/${subscriber.id}`}>{MailPoet.I18n.t('edit')}</Link>
); );
}, },
}, },
@ -303,11 +303,11 @@ const SubscriberList = React.createClass({
return ( return (
<div> <div>
<td className={ row_classes }> <td className={row_classes}>
<strong> <strong>
<Link <Link
className="row-title" className="row-title"
to={ `/edit/${ subscriber.id }` } to={`/edit/${ subscriber.id }`}
>{ subscriber.email }</Link> >{ subscriber.email }</Link>
</strong> </strong>
<p style={{ margin: 0 }}> <p style={{ margin: 0 }}>
@ -350,17 +350,17 @@ const SubscriberList = React.createClass({
</h1> </h1>
<Listing <Listing
limit={ window.mailpoet_listing_per_page } limit={window.mailpoet_listing_per_page}
location={ this.props.location } location={this.props.location}
params={ this.props.params } params={this.props.params}
endpoint="subscribers" endpoint="subscribers"
onRenderItem={ this.renderItem } onRenderItem={this.renderItem}
columns={ columns } columns={columns}
bulk_actions={ bulk_actions } bulk_actions={bulk_actions}
item_actions={ item_actions } item_actions={item_actions}
messages={ messages } messages={messages}
sort_by={ 'created_at' } sort_by={'created_at'}
sort_order={ 'desc' } sort_order={'desc'}
/> />
</div> </div>
); );

12
assets/js/src/subscribers/subscribers.jsx
View File

@ -17,12 +17,12 @@ const container = document.getElementById('subscribers_container');
if(container) { if(container) {
ReactDOM.render(( ReactDOM.render((
<Router history={ history }> <Router history={history}>
<Route path="/" component={ App }> <Route path="/" component={App}>
<IndexRoute component={ SubscriberList } /> <IndexRoute component={SubscriberList} />
<Route path="new" component={ SubscriberForm } /> <Route path="new" component={SubscriberForm} />
<Route path="edit/:id" component={ SubscriberForm } /> <Route path="edit/:id" component={SubscriberForm} />
<Route path="*" component={ SubscriberList } /> <Route path="*" component={SubscriberList} />
</Route> </Route>
</Router> </Router>
), container); ), container);