Merge pull request #96 from dashu-baba/issue-85

Added capability to inject custom validator

Author: maxceem

src/components/DateInput/index.jsx

@@ -6,17 +6,19 @@
 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">
+    <div styleName={cn("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>
@@ -29,6 +31,7 @@ DateInput.propTypes = {
   placeholder: PT.string,
   onBlur: PT.func,
   onFocus: PT.func,
+  className: PT.string
 };
 
 export default DateInput;

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

@@ -72,6 +72,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 && (
@@ -84,7 +85,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>

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

@@ -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

@@ -71,10 +71,15 @@ export const getValidator = (fields) => {
   return (values) => {
     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;
+          }
         }
       });
     return errors;

src/components/TextInput/index.jsx

@@ -5,14 +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) => {
@@ -38,6 +37,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,8 @@
  *
  * utility class
  */
+import moment from "moment";
+import _ from "lodash";
 import {
   STATUS_OPTIONS,
   FORM_ROW_TYPE,
@@ -45,12 +47,42 @@ export const getEditResourceBookingConfig = (onSubmit) => {
         type: FORM_FIELD_TYPE.DATE,
         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"))
+          ) {
+            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 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";
+          }
+          return null;
+        },
       },
       {
         label: "Status",