Redesign form/fields/date component

[MAILPOET-2787]

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

@@ -2,6 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import Select from "../../common/form/select/select";
 
 function FormFieldDateYear(props) {
   const yearsRange = 100;
@@ -25,14 +26,14 @@ function FormFieldDateYear(props) {
     ));
   }
   return (
-    <select
+    <Select
+      isMinWidth
       name={`${props.name}[year]`}
       value={props.year}
       onChange={props.onValueChange}
-      className={classnames({ mailpoet_date_year: props.addDefaultClasses })}
     >
       { years }
-    </select>
+    </Select>
   );
 }
 
@@ -44,7 +45,6 @@ FormFieldDateYear.propTypes = {
     PropTypes.string,
     PropTypes.number,
   ]).isRequired,
-  addDefaultClasses: PropTypes.bool.isRequired,
 };
 
 function FormFieldDateMonth(props) {
@@ -67,14 +67,14 @@ function FormFieldDateMonth(props) {
     ));
   }
   return (
-    <select
+    <Select
+      isMinWidth
       name={`${props.name}[month]`}
       value={props.month}
       onChange={props.onValueChange}
-      className={classnames({ mailpoet_date_month: props.addDefaultClasses })}
     >
       { months }
-    </select>
+    </Select>
   );
 }
 
@@ -87,7 +87,6 @@ FormFieldDateMonth.propTypes = {
     PropTypes.number,
   ]).isRequired,
   monthNames: PropTypes.arrayOf(PropTypes.string).isRequired,
-  addDefaultClasses: PropTypes.bool.isRequired,
 };
 
 function FormFieldDateDay(props) {
@@ -111,14 +110,14 @@ function FormFieldDateDay(props) {
   }
 
   return (
-    <select
+    <Select
+      isMinWidth
       name={`${props.name}[day]`}
       value={props.day}
       onChange={props.onValueChange}
-      className={classnames({ mailpoet_date_day: props.addDefaultClasses })}
     >
       { days }
-    </select>
+    </Select>
   );
 }
 
@@ -130,7 +129,6 @@ FormFieldDateDay.propTypes = {
     PropTypes.string,
     PropTypes.number,
   ]).isRequired,
-  addDefaultClasses: PropTypes.bool.isRequired,
 };
 
 class FormFieldDate extends React.Component {
@@ -260,7 +258,6 @@ class FormFieldDate extends React.Component {
               onValueChange={this.onValueChange}
               key="year"
               name={this.props.field.name}
-              addDefaultClasses={this.props.addDefaultClasses}
               year={this.state.year}
               placeholder={this.props.field.year_placeholder}
             />
@@ -272,7 +269,6 @@ class FormFieldDate extends React.Component {
               onValueChange={this.onValueChange}
               key="month"
               name={this.props.field.name}
-              addDefaultClasses={this.props.addDefaultClasses}
               month={this.state.month}
               monthNames={monthNames}
               placeholder={this.props.field.month_placeholder}
@@ -285,7 +281,6 @@ class FormFieldDate extends React.Component {
               onValueChange={this.onValueChange}
               key="day"
               name={this.props.field.name}
-              addDefaultClasses={this.props.addDefaultClasses}
               day={this.state.day}
               placeholder={this.props.field.day_placeholder}
             />
@@ -314,11 +309,6 @@ FormFieldDate.propTypes = {
     params: PropTypes.object, //  eslint-disable-line react/forbid-prop-types
   }).isRequired,
   onValueChange: PropTypes.func.isRequired,
-  addDefaultClasses: PropTypes.bool,
-};
-
-FormFieldDate.defaultProps = {
-  addDefaultClasses: false,
 };
 
 export default FormFieldDate;