fixed review items

Author: dashu-baba

src/components/DateInput/index.jsx

@@ -6,11 +6,12 @@
 import React from "react";
 import PT from "prop-types";
 import DatePicker from "react-datepicker";
+import cn from "classnames";
 import "./styles.module.scss";
 
 const DateInput = (props) => {
   return (
-    <div styleName={`datepicker-wrapper ${props.className}`}>
+    <div styleName={cn("datepicker-wrapper", props.className)}>
       <DatePicker
         dateFormat="MM/dd/yyyy"
         placeholderText={props.placeholder}
@@ -30,6 +31,7 @@ DateInput.propTypes = {
   placeholder: PT.string,
   onBlur: PT.func,
   onFocus: PT.func,
+  className: PT.string
 };
 
 export default DateInput;

src/components/FormField/index.jsx

@@ -13,16 +13,11 @@ import ReactSelect from "../../components/ReactSelect";
 import DateInput from "../../components/DateInput";
 import "./styles.module.scss";
 
-const updateInput = (field, input) => {
-  field.input = input;
-}
-
 const FormField = ({ field, isGroupField }) => {
   return (
     <Field name={field.name}>
       {({ input, meta }) => (
         <div styleName={isGroupField ? "field-group-field" : ""}>
-          {updateInput(field, input)}
           { !field.readonly && (             
             <label
               styleName={
@@ -40,7 +35,7 @@ const FormField = ({ field, isGroupField }) => {
               placeholder={field.placeholder}
               value={input.value ?? ""}
               type="text"
-              className={meta.error && meta.touched ? "error" : ""}
+              className={meta.error && (meta.touched || field.showError) ? "error" : ""}
               readonly={field.readonly}
               onChange={input.onChange}
               onBlur={input.onBlur}
@@ -56,7 +51,7 @@ const FormField = ({ field, isGroupField }) => {
               onChange={input.onChange}
               onBlur={input.onBlur}
               onFocus={input.onFocus}
-              className={meta.error && meta.touched ? "error" : ""}
+              className={meta.error && (meta.touched || field.showError) ? "error" : ""}
             />
           )}
           {field.type === FORM_FIELD_TYPE.TEXTAREA && (
@@ -66,7 +61,7 @@ const FormField = ({ field, isGroupField }) => {
               onChange={input.onChange}
               onBlur={input.onBlur}
               onFocus={input.onFocus}
-              className={meta.error && meta.touched ? "error" : ""}
+              className={meta.error && (meta.touched || field.showError) ? "error" : ""}
             />
           )}
           {field.type === FORM_FIELD_TYPE.DATE && (
@@ -76,7 +71,7 @@ const FormField = ({ field, isGroupField }) => {
               onChange={input.onChange}
               onBlur={input.onBlur}
               onFocus={input.onFocus}
-              className={meta.error && meta.touched ? "error" : ""}
+              className={meta.error && (meta.touched || field.showError) ? "error" : ""}
             />
           )}
           {field.type === FORM_FIELD_TYPE.SELECT && (
@@ -89,7 +84,7 @@ const FormField = ({ field, isGroupField }) => {
               onFocus={input.onFocus}
             />
           )}
-          {(field.isRequired || field.customValidator) && meta.error &&  meta.touched && (
+          {(field.isRequired || field.customValidator) && meta.error &&  (meta.touched || field.showError) && (
             <div styleName="field-error">{meta.error}</div>
           )}
         </div>
@@ -117,7 +112,7 @@ FormField.prototype = {
       maxLength: PT.number,
       styleName: PT.string,
       readonly: PT.string,
-      input: PT.object
+      showError: PT.bool
     })
   ).isRequired,
   isGroupField: PT.bool,

src/components/FormField/styles.module.scss

@@ -45,9 +45,9 @@ input:read-only {
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   font-weight: 400;
   width: 100%;
-  height: 40px;
-  line-height: 40px;
-  padding: 0 10px;
+  min-height: 40px;
+  line-height: 20px;
+  padding: 9px 10px;
   margin: 10px 0 5px;
   font-size: 15px;
   color: #ff5b52;

src/components/TCForm/index.jsx

@@ -120,6 +120,7 @@ TCForm.propTypes = {
         maxLength: PT.number,
         styleName: PT.string,
         readonly: PT.string,
+        showError: PT.bool
       })
     ).isRequired,
     onSubmit: PT.func,

src/components/TCForm/utils.js

@@ -68,7 +68,7 @@ export const createConfigurationObject = (fields) => {
  * @returns {Function} configuration object
  */
 export const getValidator = (fields) => {
-  return (values, inputs) => {
+  return (values) => {
     const errors = {};
     fields
       .filter((f) => f.isRequired || f.customValidator)
@@ -79,7 +79,6 @@ export const getValidator = (fields) => {
           const error = f.customValidator(f, fields, values);
           if(error){
             errors[f.name] = error;
-            f.input.onBlur();
           }
         }
       });

src/components/TextInput/index.jsx

@@ -5,12 +5,13 @@
  */
 import React from "react";
 import PT from "prop-types";
+import cn from "classnames";
 import "./styles.module.scss";
 
 function TextInput(props) {
   return (
     <input
-      styleName={`TextInput ${props.className} ${props.readonly ? "readonly" : ""}`}
+      styleName={cn("TextInput", props.className, {"readonly": props.readonly})}
       maxLength={props.maxLength}
       min={props.minValue}
       onChange={(event) => {

src/routes/ResourceBookingForm/utils.js

@@ -4,6 +4,7 @@
  * utility class
  */
 import moment from 'moment';
+import _ from 'lodash';
 import {
   STATUS_OPTIONS,
   FORM_ROW_TYPE,
@@ -47,11 +48,14 @@ export const getEditResourceBookingConfig = (onSubmit) => {
         name: "startDate",
         placeholder: "Start Date",
         customValidator: (field, fields, values) => {
+          const endDateField = _.find(fields, {'name': 'endDate'});
           const startDate = values[field.name];
           const endDate = values['endDate'];
           if(startDate && endDate && moment(endDate).startOf('day').isBefore(moment(startDate).startOf('day'))){
+            endDateField.showError = true;
             return 'Start Date should not be after End Date';
           }
+          endDateField.showError = false;
           return null;
         }
       },
@@ -61,13 +65,14 @@ export const getEditResourceBookingConfig = (onSubmit) => {
         name: "endDate",
         placeholder: "End Date",
         customValidator: (field, fields, values) => {
+          const startDateField = _.find(fields, {'name': 'startDate'});
           const endDate = values[field.name];
           const startDate = values['startDate'];
           if(startDate && endDate && moment(endDate).startOf('day').isBefore(moment(startDate).startOf('day'))){
-            return 'End Date should not be before Start Date';
-          }else if(!startDate && endDate){
+            startDateField.showError = true;
             return 'End Date should not be before Start Date';
           }
+          startDateField.showError = false;
           return null;
         }
       },