Fix PropType eslint warnings for form fields

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 class FormFieldCheckbox extends React.Component {
   onValueChange = (e) => {
@@ -41,4 +42,13 @@ class FormFieldCheckbox extends React.Component {
   }
 }
 
+FormFieldCheckbox.propTypes = {
+  onValueChange: PropTypes.func.isRequired,
+  field: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    values: PropTypes.object.isRequired,
+  }).isRequired,
+  item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
 export default FormFieldCheckbox;

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

@@ -36,7 +36,10 @@ FormFieldDateYear.propTypes = {
   name: PropTypes.string.isRequired,
   placeholder: PropTypes.string.isRequired,
   onValueChange: PropTypes.func.isRequired,
-  year: PropTypes.string.isRequired,
+  year: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]).isRequired,
 };
 
 function FormFieldDateMonth(props) {
@@ -71,7 +74,10 @@ FormFieldDateMonth.propTypes = {
   name: PropTypes.string.isRequired,
   placeholder: PropTypes.string.isRequired,
   onValueChange: PropTypes.func.isRequired,
-  month: PropTypes.string.isRequired,
+  month: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]).isRequired,
   monthNames: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
@@ -108,7 +114,10 @@ FormFieldDateDay.propTypes = {
   name: PropTypes.string.isRequired,
   placeholder: PropTypes.string.isRequired,
   onValueChange: PropTypes.func.isRequired,
-  day: PropTypes.string.isRequired,
+  day: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]).isRequired,
 };
 
 class FormFieldDate extends React.Component {

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

@@ -7,6 +7,7 @@ import FormFieldCheckbox from 'form/fields/checkbox.jsx';
 import FormFieldSelection from 'form/fields/selection.jsx';
 import FormFieldDate from 'form/fields/date.jsx';
 import jQuery from 'jquery';
+import PropTypes from 'prop-types';
 
 class FormField extends React.Component {
   renderField = (data, inline = false) => {
@@ -117,4 +118,23 @@ class FormField extends React.Component {
   }
 }
 
+FormField.propTypes = {
+  onValueChange: PropTypes.func,
+  field: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    values: PropTypes.object,
+    tip: PropTypes.string,
+    label: PropTypes.string,
+    fields: PropTypes.array,
+    description: PropTypes.string,
+  }).isRequired,
+  item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+FormField.defaultProps = {
+  onValueChange: function onValueChange() {
+    // no-op
+  },
+};
+
 export default FormField;

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

@@ -1,6 +1,7 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-class FormFieldRadio extends React.Component {
+class FormFieldRadio extends React.Component { // eslint-disable-line react/prefer-stateless-function, max-len
   render() {
     if (this.props.field.values === undefined) {
       return false;
@@ -33,4 +34,20 @@ class FormFieldRadio extends React.Component {
   }
 }
 
+FormFieldRadio.propTypes = {
+  onValueChange: PropTypes.func,
+  field: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }).isRequired,
+  item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+FormFieldRadio.defaultProps = {
+  onValueChange: function onValueChange() {
+    // no-op
+  },
+};
+
+
 export default FormFieldRadio;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import _ from 'underscore';
+import PropTypes from 'prop-types';
 
 class FormFieldSelect extends React.Component {
   render() {
@@ -73,4 +74,26 @@ class FormFieldSelect extends React.Component {
   }
 }
 
+FormFieldSelect.propTypes = {
+  onValueChange: PropTypes.func,
+  field: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    values: PropTypes.object,
+    placeholder: PropTypes.string,
+    filter: PropTypes.func,
+    sortBy: PropTypes.func,
+    validation: PropTypes.object,
+  }).isRequired,
+  item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  automationId: PropTypes.string,
+};
+
+FormFieldSelect.defaultProps = {
+  automationId: '',
+  onValueChange: function onValueChange() {
+    // no-op
+  },
+};
+
+
 module.exports = FormFieldSelect;

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

@@ -3,20 +3,9 @@ import jQuery from 'jquery';
 import _ from 'underscore';
 import 'react-dom';
 import 'select2';
+import PropTypes from 'prop-types';
 
 class Selection extends React.Component {
-  allowMultipleValues = () => {
-    return (this.props.field.multiple === true);
-  };
-
-  isSelect2Initialized = () => {
-    return (jQuery(`#${this.select.id}`).hasClass('select2-hidden-accessible') === true);
-  };
-
-  isSelect2Component = () => {
-    return this.allowMultipleValues() || this.props.field.forceSelect2;
-  };
-
   componentDidMount() {
     if (this.isSelect2Component()) {
       this.setupSelect2();
@@ -51,28 +40,57 @@ class Selection extends React.Component {
     return props.field.id || props.field.name;
   };
 
-  resetSelect2 = () => {
+  getSelectedValues = () => {
-    this.destroySelect2();
+    if (this.props.field.selected !== undefined) {
-    this.setupSelect2();
+      return this.props.field.selected(this.props.item);
-  };
+    } else if (this.props.item !== undefined && this.props.field.name !== undefined) {
-
+      if (this.allowMultipleValues()) {
-  destroySelect2 = () => {
+        if (_.isArray(this.props.item[this.props.field.name])) {
-    if (this.isSelect2Initialized()) {
+          return this.props.item[this.props.field.name].map(item => item.id);
-      jQuery(`#${this.select.id}`).select2('destroy');
+        }
-      this.cleanupAfterSelect2();
+      } else {
+        return this.props.item[this.props.field.name];
+      }
     }
+    return null;
   };
 
-  cleanupAfterSelect2 = () => {
+  getItems = () => {
-    // remove DOM elements created by Select2 that are not tracked by React
+    let items;
-    jQuery(`#${this.select.id}`)
+    if (typeof (window[`mailpoet_${this.props.field.endpoint}`]) !== 'undefined') {
-      .find('option:not(.default)')
+      items = window[`mailpoet_${this.props.field.endpoint}`];
-      .remove();
+    } else if (this.props.field.values !== undefined) {
+      items = this.props.field.values;
+    }
 
-    // unbind events (https://select2.org/programmatic-control/methods#event-unbinding)
+    if (_.isArray(items)) {
-    jQuery(`#${this.select.id}`)
+      if (this.props.field.filter !== undefined) {
-      .off('select2:unselecting')
+        items = items.filter(this.props.field.filter);
-      .off('select2:opening');
+      }
+    }
+
+    return items;
+  };
+
+  getLabel = (item) => {
+    if (this.props.field.getLabel !== undefined) {
+      return this.props.field.getLabel(item, this.props.item);
+    }
+    return item.name;
+  };
+
+  getSearchLabel = (item) => {
+    if (this.props.field.getSearchLabel !== undefined) {
+      return this.props.field.getSearchLabel(item, this.props.item);
+    }
+    return null;
+  };
+
+  getValue = (item) => {
+    if (this.props.field.getValue !== undefined) {
+      return this.props.field.getValue(item, this.props.item);
+    }
+    return item.id;
   };
 
   setupSelect2 = () => {
@@ -150,38 +168,36 @@ class Selection extends React.Component {
     select2.on('change', this.handleChange);
   };
 
-  getSelectedValues = () => {
+  resetSelect2 = () => {
-    if (this.props.field.selected !== undefined) {
+    this.destroySelect2();
-      return this.props.field.selected(this.props.item);
+    this.setupSelect2();
-    } else if (this.props.item !== undefined && this.props.field.name !== undefined) {
-      if (this.allowMultipleValues()) {
-        if (_.isArray(this.props.item[this.props.field.name])) {
-          return this.props.item[this.props.field.name].map(item => item.id);
-        }
-      } else {
-        return this.props.item[this.props.field.name];
-      }
-    }
-    return null;
   };
 
-  getItems = () => {
+  destroySelect2 = () => {
-    let items;
+    if (this.isSelect2Initialized()) {
-    if (typeof (window[`mailpoet_${this.props.field.endpoint}`]) !== 'undefined') {
+      jQuery(`#${this.select.id}`).select2('destroy');
-      items = window[`mailpoet_${this.props.field.endpoint}`];
+      this.cleanupAfterSelect2();
-    } else if (this.props.field.values !== undefined) {
-      items = this.props.field.values;
     }
-
-    if (_.isArray(items)) {
-      if (this.props.field.filter !== undefined) {
-        items = items.filter(this.props.field.filter);
-      }
-    }
-
-    return items;
   };
 
+  cleanupAfterSelect2 = () => {
+    // remove DOM elements created by Select2 that are not tracked by React
+    jQuery(`#${this.select.id}`)
+      .find('option:not(.default)')
+      .remove();
+
+    // unbind events (https://select2.org/programmatic-control/methods#event-unbinding)
+    jQuery(`#${this.select.id}`)
+      .off('select2:unselecting')
+      .off('select2:opening');
+  };
+
+  allowMultipleValues = () => (this.props.field.multiple === true);
+
+  isSelect2Initialized = () => (jQuery(`#${this.select.id}`).hasClass('select2-hidden-accessible') === true);
+
+  isSelect2Component = () => this.allowMultipleValues() || this.props.field.forceSelect2;
+
   handleChange = (e) => {
     if (this.props.onValueChange === undefined) return;
 
@@ -200,27 +216,6 @@ class Selection extends React.Component {
     });
   };
 
-  getLabel = (item) => {
-    if (this.props.field.getLabel !== undefined) {
-      return this.props.field.getLabel(item, this.props.item);
-    }
-    return item.name;
-  };
-
-  getSearchLabel = (item) => {
-    if (this.props.field.getSearchLabel !== undefined) {
-      return this.props.field.getSearchLabel(item, this.props.item);
-    }
-    return null;
-  };
-
-  getValue = (item) => {
-    if (this.props.field.getValue !== undefined) {
-      return this.props.field.getValue(item, this.props.item);
-    }
-    return item.id;
-  };
-
   // When it's impossible to represent the desired value in DOM,
   // this function may be used to transform the placeholder value into
   // desired value.
@@ -277,4 +272,39 @@ class Selection extends React.Component {
   }
 }
 
+Selection.propTypes = {
+  onValueChange: PropTypes.func,
+  field: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    values: PropTypes.object,
+    getLabel: PropTypes.func,
+    resetSelect2OnUpdate: PropTypes.bool,
+    selected: PropTypes.func,
+    endpoint: PropTypes.string,
+    filter: PropTypes.func,
+    getSearchLabel: PropTypes.func,
+    getValue: PropTypes.func,
+    placeholder: PropTypes.string,
+    remoteQuery: PropTypes.object,
+    extendSelect2Options: PropTypes.object,
+    multiple: PropTypes.bool,
+    forceSelect2: PropTypes.bool,
+    transformChangedValue: PropTypes.func,
+    disabled: PropTypes.bool,
+    validation: PropTypes.object,
+  }).isRequired,
+  item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  disabled: PropTypes.bool,
+  width: PropTypes.string,
+};
+
+Selection.defaultProps = {
+  onValueChange: function onValueChange() {
+    // no-op
+  },
+  disabled: false,
+  width: '',
+};
+
+
 export default Selection;

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

@@ -1,6 +1,7 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-class FormFieldText extends React.Component {
+class FormFieldText extends React.Component { // eslint-disable-line react/prefer-stateless-function, max-len
   render() {
     const name = this.props.field.name || null;
     const item = this.props.item || {};
@@ -54,4 +55,28 @@ class FormFieldText extends React.Component {
   }
 }
 
+FormFieldText.propTypes = {
+  onValueChange: PropTypes.func,
+  field: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    defaultValue: PropTypes.string,
+    id: PropTypes.string,
+    class: PropTypes.string,
+    size: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    disabled: PropTypes.func,
+    placeholder: PropTypes.string,
+    validation: PropTypes.object,
+  }).isRequired,
+  item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+FormFieldText.defaultProps = {
+  onValueChange: function onValueChange() {
+    // no-op
+  },
+};
+
 module.exports = FormFieldText;