updating formik fields and formik utils to better reflect form fields #…

…556

app/components/formik/ControlCheckbox.js

@@ -1,8 +1,8 @@
-import { Control } from 'react-redux-form/immutable';
+import React from 'react';
 import styled from 'styled-components';
 
-const ControlCheckbox = styled(Control.checkbox)`
+const ControlCheckbox = styled.input`
   margin-right: 5px;
 `;
 
-export default ControlCheckbox;
+export default <ControlCheckbox type='checkbox' />;

app/components/formik/ControlSelect.js

@@ -1,7 +1,6 @@
-import { Control } from 'react-redux-form/immutable';
 import styled from 'styled-components';
 
-const ControlSelect = styled(Control.select)`
+const ControlSelect = styled.select`
   background:#ffffff;
   border:1px solid #E0E1E2;
   color:#000;

app/components/formik/ControlTextArea.js

@@ -1,8 +1,7 @@
-import { Control } from 'react-redux-form/immutable';
 import styled from 'styled-components';
 import { palette } from 'styled-theme';
 
-const ControlTextArea = styled(Control.textarea)`
+const ControlTextArea = styled.textarea`
   background-color: ${palette('background', 0)};
   width: 100%;
   border: 1px solid ${palette('light', 1)};

app/components/formik/DateControl/InputComponent.js

@@ -15,7 +15,6 @@ class InputComponent extends React.Component {
   focus = () => {
     this.input.focus();
   }
-
   render() {
     return (
       <StyledInput

app/components/formik/DateControl/index.js

@@ -1,30 +1,110 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
+import { toLower } from 'lodash/string';
 
-import { Control } from 'react-redux-form/immutable';
-
-import DatePicker from './DatePicker';
-
-export class DateControl extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
-  render() {
-    const { model, ...props } = this.props;
-    return (
-      <Control
-        type="date"
-        component={DatePicker}
-        model={model}
-        mapProps={{
-          onChange: (cprops) => cprops.onChange,
-          error: ({ fieldValue }) => !fieldValue.valid,
-        }}
+// eslint-disable-next-line import/no-unresolved
+import { isValid, format, parse, startOfToday, getYear, getMonth } from 'date-fns';
+import validateDateFormat from 'components/forms/validators/validate-date-format';
+import { DayPicker } from 'react-day-picker';
+import { useField, useFormikContext } from "formik";
+
+import { DATE_FORMAT, DB_DATE_FORMAT } from 'themes/config';
+
+import InputComponent from './InputComponent';
+import DatePickerStyle from './styles';
+
+const DateControl = (props) => {
+  const { value, onChange } = props;
+  const { setFieldValue } = useFormikContext();
+  const [field] = useField(props);
+
+  const inputRef = useRef(null);
+  const [showDayPicker, setShowDayPicker] = useState(false);
+
+  const handleDateChange = (valueDate) => {
+    if (valueDate) {
+      const formattedDB = format(valueDate, DB_DATE_FORMAT);
+      if (formattedDB) {
+        setShowDayPicker(false);
+        setFieldValue(field.name, formattedDB);
+        return onChange(formattedDB);
+      }
+    }
+    return null;
+  };
+
+  const handleInputChange = ({ target }) => {
+    const inputValue = target.value;
+    // if it's the right format, store as db format
+    if (inputValue !== '' && validateDateFormat(inputValue, DATE_FORMAT)) {
+      // parse from input format to db format
+      const formattedDB = format(
+        parse(inputValue, DATE_FORMAT, new Date()),
+        DB_DATE_FORMAT,
+      );
+      onChange(formattedDB);
+    } else {
+      // wrong format but store value for input field
+      onChange(inputValue);
+    }
+  };
+
+  const formattedDay = value
+    && validateDateFormat(value, DB_DATE_FORMAT)
+    ? format(parse(value, DB_DATE_FORMAT, new Date()), DATE_FORMAT)
+    : value;
+
+  const selected = value && validateDateFormat(value, DB_DATE_FORMAT) ? parse(value, DB_DATE_FORMAT, new Date()) : null;
+
+  const handleInputFocus = () => {
+    setShowDayPicker(true);
+  };
+
+  const handleInputBlur = (event) => {
+    // on click outside, close day picker
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setShowDayPicker(false);
+    }
+  };
+  const getDefaultMonth = (selectedDate) => {
+    const defaultDate = isValid(selectedDate) ? selectedDate : startOfToday();
+    const year = getYear(defaultDate);
+    const month = getMonth(defaultDate);
+    return new Date(year, month);
+  };
+
+  return (
+    <div onBlur={handleInputBlur} style={{ position: 'relative' }}>
+      <InputComponent
         {...props}
+        ref={inputRef}
+        value={formattedDay}
+        onChange={handleInputChange}
+        onFocus={handleInputFocus}
+        placeholder={toLower(DATE_FORMAT)}
       />
-    );
-  }
-}
+      {showDayPicker && (
+        <DayPicker
+          mode="single"
+          name="date"
+          defaultMonth={getDefaultMonth(selected)}
+          selected={selected}
+          onSelect={handleDateChange}
+          placeholder={toLower(DATE_FORMAT)}
+          // locale={'us-EN'}
+          weekStartsOn={1}
+          fixedWeeks
+          showOutsideDays
+        />
+      )}
+      <DatePickerStyle />
+    </div>
+  );
+};
 
 DateControl.propTypes = {
-  model: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
 };
 
 export default DateControl;

app/components/formik/ImportFileSelectControl/index.js

@@ -1,21 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Control } from 'react-redux-form/immutable';
 import SelectFile from './SelectFile';
 
-const ImportFileSelectControl = (props) => {
-  const { model, ...otherProps } = props;
-  return (
-    <Control.input
-      model={model}
-      component={SelectFile}
-      {...otherProps}
-    />
-  );
-};
-
-ImportFileSelectControl.propTypes = {
-  model: PropTypes.string.isRequired,
-};
+const ImportFileSelectControl = (props) => <SelectFile {...props} />;
 
 export default ImportFileSelectControl;