Added capability to inject custom validator

Author: dashu-baba

src/components/DateInput/index.jsx

@@ -10,13 +10,14 @@ import "./styles.module.scss";
 
 const DateInput = (props) => {
   return (
-    <div styleName="datepicker-wrapper">
+    <div styleName={`datepicker-wrapper ${props.className}`}>
       <DatePicker
         dateFormat="MM/dd/yyyy"
         placeholderText={props.placeholder}
         selected={props.value}
         onChange={props.onChange}
         onBlur={props.onBlur}
+        onCalendarClose={props.onBlur}
         onFocus={props.onFocus}
       />
     </div>

src/components/DateInput/styles.module.scss

@@ -4,6 +4,12 @@
   & > div {
     width: 100%;
   }
+  &.error {
+    input{
+      border-color: #fe665d;
+    }
+    
+  }
 }
 
 .datepicker-wrapper > div:nth-child(2) > div:nth-child(2) {

src/components/FormField/index.jsx

@@ -13,11 +13,16 @@ 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={
@@ -71,6 +76,7 @@ const FormField = ({ field, isGroupField }) => {
               onChange={input.onChange}
               onBlur={input.onBlur}
               onFocus={input.onFocus}
+              className={meta.error && meta.touched ? "error" : ""}
             />
           )}
           {field.type === FORM_FIELD_TYPE.SELECT && (
@@ -83,7 +89,7 @@ const FormField = ({ field, isGroupField }) => {
               onFocus={input.onFocus}
             />
           )}
-          {field.isRequired && meta.error &&  meta.touched && (
+          {(field.isRequired || field.customValidator) && meta.error &&  meta.touched && (
             <div styleName="field-error">{meta.error}</div>
           )}
         </div>
@@ -111,6 +117,7 @@ FormField.prototype = {
       maxLength: PT.number,
       styleName: PT.string,
       readonly: PT.string,
+      input: PT.object
     })
   ).isRequired,
   isGroupField: PT.bool,

src/components/TCForm/index.jsx

@@ -106,6 +106,7 @@ TCForm.propTypes = {
         label: PT.string,
         type: PT.oneOf(Object.values(FORM_FIELD_TYPE)).isRequired,
         isRequired: PT.bool,
+        customValidator: PT.func,
         validationMessage: PT.string,
         name: PT.string.isRequired,
         component: PT.element,

src/components/TCForm/utils.js

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

src/components/TextInput/index.jsx

@@ -10,9 +10,7 @@ import "./styles.module.scss";
 function TextInput(props) {
   return (
     <input
-      styleName={`TextInput ${props.className} ${
-        props.readonly ? "readonly" : ""
-      }`}
+      styleName={`TextInput ${props.className} ${props.readonly ? "readonly" : ""}`}
       maxLength={props.maxLength}
       min={props.minValue}
       onChange={(event) => {
@@ -33,6 +31,7 @@ function TextInput(props) {
       readOnly={props.readonly ?? false}
       onBlur={props.onBlur}
       onFocus={props.onFocus}
+      step={props.type === "number" ? ".01" : null}
     />
   );
 }

src/routes/ResourceBookingForm/utils.js

@@ -3,6 +3,7 @@
  *
  * utility class
  */
+import moment from 'moment';
 import {
   STATUS_OPTIONS,
   FORM_ROW_TYPE,
@@ -45,12 +46,30 @@ export const getEditResourceBookingConfig = (onSubmit) => {
         type: FORM_FIELD_TYPE.DATE,
         name: "startDate",
         placeholder: "Start Date",
+        customValidator: (field, fields, values) => {
+          const startDate = values[field.name];
+          const endDate = values['endDate'];
+          if(startDate && endDate && moment(endDate).startOf('day').isBefore(moment(startDate).startOf('day'))){
+            return 'Start Date should not be after End Date';
+          }
+          return null;
+        }
       },
       {
         label: "End Date",
         type: FORM_FIELD_TYPE.DATE,
         name: "endDate",
         placeholder: "End Date",
+        customValidator: (field, fields, values) => {
+          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){
+            return 'End Date should not be before Start Date';
+          }
+          return null;
+        }
       },
       {
         label: "Status",