convert some React fields to ES6

- renamed empty label to placeholder

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

@@ -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;
         }

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

@@ -1,60 +1,54 @@
-define([
+import React from 'react'
-  'react'
-],
-function(
-  React
-) {
-  const FormFieldSelect = React.createClass({
-    render: function() {
-      if (this.props.field.values === undefined) {
-        return false;
-      }
 
-      let values = this.props.field.values;
+const FormFieldSelect = React.createClass({
-      let filter = false;
+  render() {
-      let empty_option = false;
+    if (this.props.field.values === undefined) {
+      return false;
+    }
 
-      if (this.props.field.empty_value_label !== undefined) {
+    let filter = false;
-        empty_option = (
+    let placeholder = false;
-          <option value="">{ this.props.field.empty_value_label }</option>
-        );
-      }
 
-      if (this.props.field['filter'] !== undefined) {
+    if (this.props.field.placeholder !== undefined) {
-        filter = this.props.field.filter;
+      placeholder = (
-      }
+        <option value="">{ this.props.field.placeholder }</option>
-
-      const options = Object.keys(values).map(
-        (value, index) => {
-
-          if (filter !== false && filter(this.props.item, value) === false) {
-            return;
-          }
-
-          return (
-            <option
-              key={ 'option-' + index }
-              value={ value }>
-              { this.props.field.values[value] }
-            </option>
-          );
-        }
-      );
-
-      return (
-        <select
-          name={ this.props.field.name }
-          id={ 'field_'+this.props.field.name }
-          value={ this.props.item[this.props.field.name] }
-          onChange={ this.props.onValueChange }
-          {...this.props.field.validation}
-        >
-          {empty_option}
-          {options}
-        </select>
       );
     }
-  });
 
-  return FormFieldSelect;
+    if (this.props.field['filter'] !== undefined) {
-});
+      filter = this.props.field.filter;
+    }
+
+    const options = Object.keys(this.props.field.values).map(
+      (value, index) => {
+
+        if (filter !== false && filter(this.props.item, value) === false) {
+          return;
+        }
+
+        return (
+          <option
+            key={ 'option-' + index }
+            value={ value }>
+            { this.props.field.values[value] }
+          </option>
+        );
+      }
+    );
+
+    return (
+      <select
+        name={ this.props.field.name }
+        id={ 'field_'+this.props.field.name }
+        value={ this.props.item[this.props.field.name] }
+        onChange={ this.props.onValueChange }
+        {...this.props.field.validation}
+      >
+        {placeholder}
+        {options}
+      </select>
+    );
+  }
+});
+
+module.exports = FormFieldSelect;

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

@@ -1,40 +1,35 @@
-define([
+import React from 'react'
-  'react'
-],
-function(
-  React
-) {
-  const FormFieldText = React.createClass({
-    render: function() {
-      let value = this.props.item[this.props.field.name];
-      if(value === undefined) {
-        value = this.props.field.defaultValue || '';
-      }
 
-      return (
+const FormFieldText = React.createClass({
-        <input
+  render() {
-          type="text"
+    let value = this.props.item[this.props.field.name];
-          disabled={
+    if (value === undefined) {
-            (this.props.field['disabled'] !== undefined)
+      value = this.props.field.defaultValue || '';
-            ? this.props.field.disabled(this.props.item)
-            : false
-          }
-          className={ (this.props.field.size) ? '' : 'regular-text' }
-          size={
-            (this.props.field.size !== 'auto' && this.props.field.size > 0)
-            ? this.props.field.size
-            : false
-          }
-          name={ this.props.field.name }
-          id={ 'field_'+this.props.field.name }
-          value={ value }
-          placeholder={ this.props.field.placeholder }
-          onChange={ this.props.onValueChange }
-          {...this.props.field.validation}
-        />
-      );
     }
-  });
 
-  return FormFieldText;
+    return (
+      <input
+        type="text"
+        disabled={
+          (this.props.field['disabled'] !== undefined)
+          ? this.props.field.disabled(this.props.item)
+          : false
+        }
+        className={ (this.props.field.size) ? '' : 'regular-text' }
+        size={
+          (this.props.field.size !== 'auto' && this.props.field.size > 0)
+          ? this.props.field.size
+          : false
+        }
+        name={ this.props.field.name }
+        id={ 'field_'+this.props.field.name }
+        value={ value }
+        placeholder={ this.props.field.placeholder }
+        onChange={ this.props.onValueChange }
+        {...this.props.field.validation}
+      />
+    );
+  }
 });
+
+module.exports = FormFieldText;

assets/js/src/subscribers/form.jsx

@@ -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.year_placeholder = MailPoet.I18n.t('year');
-          field.empty_month_label = MailPoet.I18n.t('month');
+          field.month_placeholder = MailPoet.I18n.t('month');
-          field.empty_day_label = MailPoet.I18n.t('day');
+          field.day_placeholder = MailPoet.I18n.t('day');
         break;
 
         case 'select':
-          field.empty_value_label = '-';
+          field.placeholder = '-';
         break;
       }