ES6 rules

This commit is contained in:
Amine Ben hammou
2018-04-18 18:08:47 +02:00
parent 940c1a66aa
commit 8890dac207
3 changed files with 101 additions and 107 deletions

View File

@@ -12,7 +12,7 @@ function printData(data) {
const printableData = Object.keys(data).map(key => `${key}: ${data[key]}`); const printableData = Object.keys(data).map(key => `${key}: ${data[key]}`);
return (<textarea return (<textarea
readOnly={true} readOnly
onFocus={handleFocus} onFocus={handleFocus}
value={printableData.join('\n')} value={printableData.join('\n')}
style={{ style={{

View File

@@ -22,7 +22,7 @@ const tabs = [
]; ];
function Tabs(props) { function Tabs(props) {
const tabLinks = tabs.map((tab, index) => { const tabLinks = tabs.map((tab) => {
const tabClasses = classNames( const tabClasses = classNames(
'nav-tab', 'nav-tab',
{ 'nav-tab-active': (props.tab === tab.name) } { 'nav-tab-active': (props.tab === tab.name) }
@@ -30,7 +30,7 @@ function Tabs(props) {
return ( return (
<Link <Link
key={`tab-${index}`} key={`tab-${tab.name}`}
className={tabClasses} className={tabClasses}
to={tab.link} to={tab.link}
>{ tab.label }</Link> >{ tab.label }</Link>

View File

@@ -1,120 +1,114 @@
define([ import React from 'react';
'react', import MailPoet from 'mailpoet';
'mailpoet',
],
(
React,
MailPoet
) => {
const ListingBulkActions = React.createClass({
getInitialState: function getInitialState() {
return {
action: false,
extra: false,
};
},
handleChangeAction: function handleChangeAction(e) {
this.setState({
action: e.target.value,
extra: false,
}, () => {
const action = this.getSelectedAction();
// action on select callback
if (action !== null && action.onSelect !== undefined) {
this.setState({
extra: action.onSelect(e),
});
}
});
},
handleApplyAction: function handleApplyAction(e) {
e.preventDefault();
const ListingBulkActions = React.createClass({
getInitialState: function getInitialState() {
return {
action: false,
extra: false,
};
},
handleChangeAction: function handleChangeAction(e) {
this.setState({
action: e.target.value,
extra: false,
}, () => {
const action = this.getSelectedAction(); const action = this.getSelectedAction();
if (action === null) { // action on select callback
return; if (action !== null && action.onSelect !== undefined) {
this.setState({
extra: action.onSelect(e),
});
} }
});
},
handleApplyAction: function handleApplyAction(e) {
e.preventDefault();
const selectedIds = (this.props.selection !== 'all') const action = this.getSelectedAction();
? this.props.selected_ids
: [];
const data = (action.getData !== undefined) if (action === null) {
? action.getData() return;
: {}; }
data.action = this.state.action; const selectedIds = (this.props.selection !== 'all')
? this.props.selected_ids
: [];
let onSuccess = () => {}; const data = (action.getData !== undefined)
if (action.onSuccess !== undefined) { ? action.getData()
onSuccess = action.onSuccess; : {};
data.action = this.state.action;
let onSuccess = () => {};
if (action.onSuccess !== undefined) {
onSuccess = action.onSuccess;
}
if (data.action) {
const promise = this.props.onBulkAction(selectedIds, data);
if (promise !== false) {
promise.then(onSuccess);
} }
}
if (data.action) { this.setState({
const promise = this.props.onBulkAction(selectedIds, data); action: false,
if (promise !== false) { extra: false,
promise.then(onSuccess); });
} },
} getSelectedAction: function getSelectedAction() {
const selectedAction = this.action.value;
this.setState({ if (selectedAction.length > 0) {
action: false, const action = this.props.bulk_actions.filter(act => (act.name === selectedAction));
extra: false,
}); if (action.length > 0) {
}, return action[0];
getSelectedAction: function getSelectedAction() {
const selectedAction = this.action.value;
if (selectedAction.length > 0) {
const action = this.props.bulk_actions.filter(act => (act.name === selectedAction));
if (action.length > 0) {
return action[0];
}
} }
}
return null;
},
render: function render() {
if (this.props.bulk_actions.length === 0) {
return null; return null;
}, }
render: function render() {
if (this.props.bulk_actions.length === 0) {
return null;
}
return ( return (
<div className="alignleft actions bulkactions"> <div className="alignleft actions bulkactions">
<label <label
className="screen-reader-text" className="screen-reader-text"
htmlFor="bulk-action-selector-top" htmlFor="bulk-action-selector-top"
> >
{MailPoet.I18n.t('selectBulkAction')} {MailPoet.I18n.t('selectBulkAction')}
</label> </label>
<select <select
name="bulk_actions" name="bulk_actions"
ref={(c) => { this.action = c; }} ref={(c) => { this.action = c; }}
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 => (
<option <option
value={action.name} value={action.name}
key={`action-${index}`} key={`action-${action.name}`}
>{ 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"
/> />
{ this.state.extra } { this.state.extra }
</div> </div>
); );
}, },
});
return ListingBulkActions;
}); });
export default ListingBulkActions;