@engagebay/engagebay-form-module 1.0.0-beta.0 → 1.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.0-beta.0",
+    "version": "1.0.0-beta.2",
     "description": "Provide base form components to reacho",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"

package/src/api/index.ts

@@ -1,4 +1,5 @@
-import axios, { AxiosRequestConfig } from "axios";
+import axios, {AxiosInstance, AxiosRequestConfig} from "axios";
+import {FormFieldSchema} from "../form/schema/FormFieldSchema";
 
 const BASE_API: AxiosRequestConfig = {
     baseURL:
@@ -23,3 +24,10 @@ reachoAPI.interceptors.request.use(
         return Promise.reject(error);
     }
 );
+
+export const getAxiosInstance = (fieldConfig: FormFieldSchema): AxiosInstance => {
+    if (fieldConfig.axiosInstance) {
+        return fieldConfig.axiosInstance;
+    }
+    return fieldConfig.disableHeaderInFetch ? axios : reachoAPI;
+};

package/src/form/formfields/DynamicMultiSelect.tsx

@@ -10,13 +10,12 @@ import {Listbox, ListboxButton} from "@headlessui/react";
 
 import {FormContext} from "../context/FormContext";
 import {getListOptions} from "../FormFieldUtils";
-import axios from "axios";
 import useDymanicReducer from "../hooks/useDynamicReducer";
 import {useDispatch} from "react-redux";
 import RenderFormField from "../util/RenderFormField";
 import {handleChange, registerFormField} from "../util";
 import RenderListOptions, {renderListBoxValue,} from "../util/RenderListOptions";
-import {reachoAPI} from "../../api";
+import {getAxiosInstance} from "../../api";
 
 const DynamicMultiSelect: React.FC<FormFieldComponentPropSchema> = (
     props: FormFieldComponentPropSchema
@@ -100,10 +99,9 @@ const DynamicMultiSelect: React.FC<FormFieldComponentPropSchema> = (
     }
     const fetchData = async () => {
         if (!props.fieldConfig.fetchUrl) return;
+        const axiosInstance = getAxiosInstance(props.fieldConfig);
+        let response = await axiosInstance.get(props.fieldConfig.fetchUrl);
 
-        let response = await (props.fieldConfig.disableHeaderInFetch
-            ? axios.get(props.fieldConfig.fetchUrl)
-            : reachoAPI.get(props.fieldConfig.fetchUrl));
         if (response.data) {
             const data: FieldOptionsSchema[] = getListOptions(
                 response.data,

package/src/form/formfields/DynamicSelect.tsx

@@ -15,8 +15,7 @@ import useDymanicReducer from "../hooks/useDynamicReducer";
 import RenderFormField from "../util/RenderFormField";
 import RenderListOptions, {renderListBoxValue,} from "../util/RenderListOptions";
 import {handleChange, registerFormField} from "../util";
-import {reachoAPI} from "../../api/index";
-import axios from "axios";
+import {getAxiosInstance} from "../../api";
 
 const DynamicSelect: React.FC<FormFieldComponentPropSchema> = (
     props: FormFieldComponentPropSchema
@@ -97,10 +96,10 @@ const DynamicSelect: React.FC<FormFieldComponentPropSchema> = (
     const fetchData = useCallback(async () => {
         if (!props.fieldConfig.fetchUrl) return;
 
+        const axiosInstance = getAxiosInstance(props.fieldConfig);
+
         try {
-            let response = await (props.fieldConfig.disableHeaderInFetch
-                ? axios.get(props.fieldConfig.fetchUrl)
-                : reachoAPI.get(props.fieldConfig.fetchUrl));
+            let response = await axiosInstance.get(props.fieldConfig.fetchUrl);
 
             if (response.data) {
                 const data: FieldOptionsSchema[] = getListOptions(response.data, props.fieldConfig.optionsConfig);

package/src/form/schema/FormFieldSchema.ts

@@ -10,6 +10,7 @@ import {
 } from "react-hook-form";
 import { Saga } from "redux-saga";
 import { emailIdsValidator, queryValidator } from "./CustomValidators";
+import { AxiosInstance } from 'axios';
 
 export enum FormFieldType {
     INPUT = "INPUT",
@@ -136,6 +137,7 @@ export type FormFieldSchema = {
     forceUpdate?: boolean;
     disableHeaderInFetch?: boolean;
     dropdownFieldConfig?: DropdownFieldConfig;
+    axiosInstance?: AxiosInstance
 
     /**
      * Redux configuration attribute

package/src/form/util/RenderListOptions.tsx

@@ -195,7 +195,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
                 )}
               </div>
               {option.helpText && (
-                <div className="mt-0 text-sm text-gray-500 font-normal truncate w-full !max-w-[150px]">
+                <div className="mt-0 text-xs text-gray-500 font-normal truncate w-full !max-w-[150px]">
                   {option.helpText}
                 </div>
               )}