Moved DateInput from common to utils

src/utils/DateInput.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { isNil } from 'ramda';
+import DatePicker from 'react-datepicker';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
+import './DateInput.scss';
+
+export default class DateInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.inputRef = props.ref || React.createRef();
+  }
+
+  render() {
+    const { className, isClearable, selected } = this.props;
+    const showCalendarIcon = !isClearable || isNil(selected);
+
+    return (
+      <div className="date-input-container">
+        <DatePicker
+          {...this.props}
+          className={`date-input-container__input form-control ${className || ''}`}
+          dateFormat="YYYY-MM-DD"
+          readOnly
+          ref={this.inputRef}
+        />
+        {showCalendarIcon && (
+          <FontAwesomeIcon
+            icon={calendarIcon}
+            className="date-input-container__icon"
+            onClick={() => this.inputRef.current.input.focus()}
+          />
+        )}
+      </div>
+    );
+  }
+}

src/utils/DateInput.scss

@@ -0,0 +1,31 @@
+@import './mixins/vertical-align';
+@import './base';
+
+.date-input-container {
+  position: relative;
+}
+
+.date-input-container__input {
+  padding-right: 35px !important;
+  background-color: #fff !important;
+}
+
+.date-input-container__icon {
+  @include vertical-align();
+
+  right: .75rem;
+  cursor: pointer;
+}
+
+.react-datepicker__close-icon.react-datepicker__close-icon {
+  @include vertical-align();
+
+  right: 0;
+}
+
+.react-datepicker__close-icon.react-datepicker__close-icon:after {
+  right: .75rem;
+  line-height: 11px;
+  background-color: #333;
+  font-size: 14px;
+}