fixed react forms (new bug discovered on new forms with default values not saved)

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

@@ -9,6 +9,13 @@ define([
     render() {
       const yearsRange = 100;
       const years = [];
+
+      if (this.props.empty_value_label !== undefined) {
+        years.push((
+          <option value="" key={ 0 }>{ this.props.empty_value_label }</option>
+        ));
+      }
+
       const currentYear = Moment().year();
       for (let i = currentYear; i >= currentYear - yearsRange; i--) {
         years.push((
@@ -33,6 +40,13 @@ define([
   class FormFieldDateMonth extends React.Component {
     render() {
       const months = [];
+
+      if (this.props.empty_value_label !== undefined) {
+        months.push((
+          <option value="" key={ 0 }>{ this.props.empty_value_label }</option>
+        ));
+      }
+
       for (let i = 1; i <= 12; i++) {
         months.push((
           <option
@@ -56,6 +70,13 @@ define([
   class FormFieldDateDay extends React.Component {
     render() {
       const days = [];
+
+      if (this.props.empty_value_label !== undefined) {
+        days.push((
+          <option value="" key={ 0 }>{ this.props.empty_value_label }</option>
+        ));
+      }
+
       for (let i = 1; i <= 31; i++) {
         days.push((
           <option
@@ -81,9 +102,9 @@ define([
     constructor(props) {
       super(props);
       this.state = {
-        year: Moment().year(),
-        month: 1,
-        day: 1
+        year: undefined,
+        month: undefined,
+        day: undefined
       }
     }
     componentDidMount() {
@@ -112,7 +133,7 @@ define([
         `${this.state.month}/${this.state.day}/${this.state.year}`,
         'M/D/YYYY'
       ).valueOf();
-      if (!isNaN(newTimeStamp) && parseInt(newTimeStamp, 10) > 0) {
+      if (~~(newTimeStamp) > 0) {
         // convert milliseconds to seconds
         newTimeStamp /= 1000;
         return this.props.onValueChange({
@@ -158,6 +179,7 @@ define([
               key={ 'year' }
               name={ this.props.field.name }
               year={ this.state.year }
+              empty_value_label={ this.props.field.empty_year_label }
             />);
           break;
 
@@ -169,6 +191,7 @@ define([
               name={ this.props.field.name }
               month={ this.state.month }
               monthNames={ monthNames }
+              empty_value_label={ this.props.field.empty_month_label }
             />);
           break;
 
@@ -179,6 +202,7 @@ define([
               key={ 'day' }
               name={ this.props.field.name }
               day={ this.state.day }
+              empty_value_label={ this.props.field.empty_day_label }
             />);
           break;
         }

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

@@ -10,12 +10,27 @@ function(
         return false;
       }
 
-      var values = (this.props.field.filterValues !== undefined)
-        ? this.props.field.filterValues(this.props.item)
-        : this.props.field.values;
+      let values = this.props.field.values;
+      let filter = false;
+      let empty_option = false;
+
+      if (this.props.field.empty_value_label !== undefined) {
+        empty_option = (
+          <option value="">{ this.props.field.empty_value_label }</option>
+        );
+      }
+
+      if (this.props.field['filter'] !== undefined) {
+        filter = this.props.field.filter;
+      }
 
       const options = Object.keys(values).map(
         (value, index) => {
+
+          if (filter !== false && filter(this.props.item, value) === false) {
+            return;
+          }
+
           return (
             <option
               key={ 'option-' + index }
@@ -34,6 +49,7 @@ function(
           onChange={ this.props.onValueChange }
           {...this.props.field.validation}
         >
+          {empty_option}
           {options}
         </select>
       );

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

@@ -4,9 +4,9 @@ define([
 function(
   React
 ) {
-  var FormFieldText = React.createClass({
+  const FormFieldText = React.createClass({
     render: function() {
-      var value = this.props.item[this.props.field.name];
+      let value = this.props.item[this.props.field.name];
       if(value === undefined) {
         value = this.props.field.defaultValue || '';
       }
@@ -15,9 +15,9 @@ function(
         <input
           type="text"
           disabled={
-            (this.props.field.disabled !== undefined)
+            (this.props.field['disabled'] !== undefined)
             ? this.props.field.disabled(this.props.item)
-            : ''
+            : false
           }
           className={ (this.props.field.size) ? '' : 'regular-text' }
           size={

assets/js/src/form/form.jsx

@@ -37,9 +37,13 @@ define(
         return this.props.errors ? this.props.errors : this.state.errors;
       },
       componentDidMount: function() {
-        if(this.props.params.id !== undefined) {
-          if(this.isMounted()) {
+        if(this.isMounted()) {
+          if(this.props.params.id !== undefined) {
             this.loadItem(this.props.params.id);
+          } else {
+            this.setState({
+              item: jQuery('.mailpoet_form').serializeObject()
+            });
           }
         }
       },
@@ -167,12 +171,15 @@ define(
           { 'mailpoet_form_loading': this.state.loading || this.props.loading }
         );
 
+        var beforeFormContent = false;
+        var afterFormContent = false;
+
         if (this.props.beforeFormContent !== undefined) {
-          var beforeFormContent = this.props.beforeFormContent(this.getValues())
+          beforeFormContent = this.props.beforeFormContent(this.getValues());
         }
 
         if (this.props.afterFormContent !== undefined) {
-          var afterFormContent = this.props.afterFormContent(this.getValues())
+          afterFormContent = this.props.afterFormContent(this.getValues());
         }
 
         var fields = this.props.fields.map(function(field, i) {
@@ -200,7 +207,7 @@ define(
 
         return (
           <div>
-            { beforeFormContent }
+            { beforeFormContent  }
             <form
               id={ this.props.id }
               ref="form"