convert some React fields to ES6

- renamed empty label to placeholder
This commit is contained in:
Jonathan Labreuille
2016-05-19 15:19:31 +02:00
parent 6074aa927b
commit 4c265d1339
4 changed files with 93 additions and 104 deletions

View File

@@ -10,9 +10,9 @@ define([
const yearsRange = 100;
const years = [];
if (this.props.empty_value_label !== undefined) {
if (this.props.placeholder !== undefined) {
years.push((
<option value="" key={ 0 }>{ this.props.empty_value_label }</option>
<option value="" key={ 0 }>{ this.props.placeholder }</option>
));
}
@@ -41,9 +41,9 @@ define([
render() {
const months = [];
if (this.props.empty_value_label !== undefined) {
if (this.props.placeholder !== undefined) {
months.push((
<option value="" key={ 0 }>{ this.props.empty_value_label }</option>
<option value="" key={ 0 }>{ this.props.placeholder }</option>
));
}
@@ -71,9 +71,9 @@ define([
render() {
const days = [];
if (this.props.empty_value_label !== undefined) {
if (this.props.placeholder !== undefined) {
days.push((
<option value="" key={ 0 }>{ this.props.empty_value_label }</option>
<option value="" key={ 0 }>{ this.props.placeholder }</option>
));
}
@@ -178,7 +178,7 @@ define([
key={ 'year' }
name={ this.props.field.name }
year={ this.state.year }
empty_value_label={ this.props.field.empty_year_label }
placeholder={ this.props.field.year_placeholder }
/>);
break;
@@ -190,7 +190,7 @@ define([
name={ this.props.field.name }
month={ this.state.month }
monthNames={ monthNames }
empty_value_label={ this.props.field.empty_month_label }
placeholder={ this.props.field.month_placeholder }
/>);
break;
@@ -201,7 +201,7 @@ define([
key={ 'day' }
name={ this.props.field.name }
day={ this.state.day }
empty_value_label={ this.props.field.empty_day_label }
placeholder={ this.props.field.day_placeholder }
/>);
break;
}

View File

@@ -1,22 +1,17 @@
define([
'react'
],
function(
React
) {
import React from 'react'
const FormFieldSelect = React.createClass({
render: function() {
render() {
if (this.props.field.values === undefined) {
return false;
}
let values = this.props.field.values;
let filter = false;
let empty_option = false;
let placeholder = false;
if (this.props.field.empty_value_label !== undefined) {
empty_option = (
<option value="">{ this.props.field.empty_value_label }</option>
if (this.props.field.placeholder !== undefined) {
placeholder = (
<option value="">{ this.props.field.placeholder }</option>
);
}
@@ -24,7 +19,7 @@ function(
filter = this.props.field.filter;
}
const options = Object.keys(values).map(
const options = Object.keys(this.props.field.values).map(
(value, index) => {
if (filter !== false && filter(this.props.item, value) === false) {
@@ -49,12 +44,11 @@ function(
onChange={ this.props.onValueChange }
{...this.props.field.validation}
>
{empty_option}
{placeholder}
{options}
</select>
);
}
});
return FormFieldSelect;
});
module.exports = FormFieldSelect;

View File

@@ -1,11 +1,7 @@
define([
'react'
],
function(
React
) {
import React from 'react'
const FormFieldText = React.createClass({
render: function() {
render() {
let value = this.props.item[this.props.field.name];
if (value === undefined) {
value = this.props.field.defaultValue || '';
@@ -36,5 +32,4 @@ function(
}
});
return FormFieldText;
});
module.exports = FormFieldText;

View File

@@ -117,16 +117,16 @@ define(
field.values = custom_field.params.values;
}
// add empty values' label for selects (date, select)
// add placeholders for selects (date, select)
switch(custom_field.type) {
case 'date':
field.empty_year_label = MailPoet.I18n.t('year');
field.empty_month_label = MailPoet.I18n.t('month');
field.empty_day_label = MailPoet.I18n.t('day');
field.year_placeholder = MailPoet.I18n.t('year');
field.month_placeholder = MailPoet.I18n.t('month');
field.day_placeholder = MailPoet.I18n.t('day');
break;
case 'select':
field.empty_value_label = '-';
field.placeholder = '-';
break;
}