@engagebay/engagebay-form-module 1.0.1 → 1.0.2-beta.0

package/src/form/formfields/ColorPickerField.tsx

@@ -8,52 +8,53 @@ import RenderFormField from "../util/RenderFormField";
 import { handleChange, registerFormField } from "../util";
 
 export const ColorPickerField: React.FC<FormFieldComponentPropSchema> = (
-    props: FormFieldComponentPropSchema
+  props: FormFieldComponentPropSchema
 ) => {
-    const formContext = useContext(FormContext);
+  const formContext = useContext(FormContext);
 
-    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
 
-    formContext.register(props.fieldConfig.name, registerOptions);
-
-    const getInput = () => {
-        return (
-            <Field className="flex" disabled={props.fieldConfig.disabled}>
-                <input
-                    type="color"
-                    onChange={(e) =>
-                        handleChange(
-                            e.target.value,
-                            formContext,
-                            props.fieldConfig,
-                            props.onChange
-                        )
-                    }
-                    defaultValue={props.fieldConfig.defaultValue as string}
-                    disabled={props.fieldConfig.readOnly}
-                    value={formContext.getValues(props.fieldConfig.name) ?? ""}
-                    className="inline-flex w-[30%] h-auto rounded-l-md border border-r-0 border-gray-300 px-2  cursor-pointer"></input>
-                <input
-                    type="text"
-                    value={formContext.getValues(props.fieldConfig.name) ?? ""}
-                    disabled={props.fieldConfig.readOnly}
-                    defaultValue={props.fieldConfig.defaultValue as string}
-                    maxLength={7}
-                    onChange={(e) =>
-                        handleChange(
-                            e.target.value,
-                            formContext,
-                            props.fieldConfig,
-                            props.onChange
-                        )
-                    }
-                    className="flex-1 form-input rounded-s-none"
-                />
-            </Field>
-        );
-    };
+  formContext.register(props.fieldConfig.name, registerOptions);
 
+  const getInput = () => {
     return (
-        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+      <Field className="flex" disabled={props.fieldConfig.disabled}>
+        <input
+          type="color"
+          onChange={(e) =>
+            handleChange(
+              e.target.value,
+              formContext,
+              props.fieldConfig,
+              props.onChange
+            )
+          }
+          defaultValue={props.fieldConfig.defaultValue as string}
+          disabled={props.fieldConfig.readOnly}
+          value={formContext.getValues(props.fieldConfig.name) ?? ""}
+          className="inline-flex w-[30%] h-auto rounded-l-md border-r-0 border-gray-300 cursor-pointer"
+        ></input>
+        <input
+          type="text"
+          value={formContext.getValues(props.fieldConfig.name) ?? ""}
+          disabled={props.fieldConfig.readOnly}
+          defaultValue={props.fieldConfig.defaultValue as string}
+          maxLength={7}
+          onChange={(e) =>
+            handleChange(
+              e.target.value,
+              formContext,
+              props.fieldConfig,
+              props.onChange
+            )
+          }
+          className="flex-1 form-input rounded-l-none"
+        />
+      </Field>
     );
+  };
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
 };

package/src/form/formfields/DatePickerField.tsx

@@ -8,82 +8,79 @@ import { handleChange, registerFormField } from "../util";
 import moment from "moment";
 
 const DatePicker: React.FC<FormFieldComponentPropSchema> = (
-    props: FormFieldComponentPropSchema
+  props: FormFieldComponentPropSchema
 ) => {
-    const formContext = useContext(FormContext);
-    const initialDate = formContext.getValues(props.fieldConfig.name)
-        ? {
-              startDate: formContext.getValues(props.fieldConfig.name),
-              endDate: formContext.getValues(props.fieldConfig.name),
-          }
-        : { startDate: "", endDate: "" };
-
-    useEffect(() => {
-        if (
-            props.fieldConfig.defaultValue &&
-            !formContext.getValues(props.fieldConfig.name)
-        ) {
-            formContext.setValue(
-                props.fieldConfig.name,
-                props.fieldConfig.defaultValue
-            );
-        }
-    }, [props.fieldConfig.forceUpdate]);
-
-    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+  const formContext = useContext(FormContext);
+  const initialDate = formContext.getValues(props.fieldConfig.name)
+    ? {
+        startDate: formContext.getValues(props.fieldConfig.name),
+        endDate: formContext.getValues(props.fieldConfig.name),
+      }
+    : { startDate: "", endDate: "" };
 
-    let hookProps = formContext.register(
+  useEffect(() => {
+    if (
+      props.fieldConfig.defaultValue &&
+      !formContext.getValues(props.fieldConfig.name)
+    ) {
+      formContext.setValue(
         props.fieldConfig.name,
-        registerOptions
-    );
+        props.fieldConfig.defaultValue
+      );
+    }
+  }, [props.fieldConfig.forceUpdate]);
 
-    function getInput() {
-        return (
-            <Datepicker
-                value={
-                    initialDate || {
-                        startDate: props.fieldConfig.defaultValue,
-                        endDate: props.fieldConfig.defaultValue,
-                    }
-                }
-                {...hookProps}
-                placeholder={
-                    props.fieldConfig.placeholder
-                        ? props.fieldConfig.placeholder
-                        : "YYYY-MM-DD"
-                }
-                asSingle={true}
-                popoverDirection="down"
-                useRange={false}
-                inputName={props.fieldConfig.name}
-                key={props.fieldConfig.name}
-                containerClassName={"relative"}
-                minDate={props.fieldConfig.minDate}
-                maxDate={props.fieldConfig.maxDate}
-                inputClassName={
-                    props.fieldConfig.customClassNames?.fieldClassName
-                        ? "form-input " +
-                          props.fieldConfig.customClassNames.fieldClassName
-                        : "form-input flex-1"
-                }
-                onChange={(dates) => {
-                    let date = null;
-                    if (dates?.startDate != null)
-                        date = moment(dates?.startDate).format("YYYY-MM-DD");
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
 
-                    handleChange(
-                        date,
-                        formContext,
-                        props.fieldConfig,
-                        props.onChange
-                    );
-                }}
-            />
-        );
-    }
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+
+  function getInput() {
     return (
-        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+      <Datepicker
+        value={
+          initialDate || {
+            startDate: props.fieldConfig.defaultValue,
+            endDate: props.fieldConfig.defaultValue,
+          }
+        }
+        {...hookProps}
+        placeholder={
+          props.fieldConfig.placeholder
+            ? props.fieldConfig.placeholder
+            : "YYYY-MM-DD"
+        }
+        asSingle={true}
+        popoverDirection="down"
+        useRange={false}
+        inputName={props.fieldConfig.name}
+        key={
+          props.fieldConfig.name +
+          "_" +
+          initialDate.startDate +
+          "_" +
+          initialDate.endDate
+        }
+        containerClassName={"relative"}
+        minDate={props.fieldConfig.minDate}
+        maxDate={props.fieldConfig.maxDate}
+        inputClassName={
+          props.fieldConfig.customClassNames?.fieldClassName
+            ? "form-input " + props.fieldConfig.customClassNames.fieldClassName
+            : "form-input flex-1"
+        }
+        onChange={(dates) => {
+          let date = null;
+          if (dates?.startDate != null)
+            date = moment(dates?.startDate).format("YYYY-MM-DD");
+
+          handleChange(date, formContext, props.fieldConfig, props.onChange);
+        }}
+      />
     );
+  }
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
 };
 
 export default DatePicker;

package/src/form/formfields/DynamicMultiSelect.tsx

@@ -1,189 +1,190 @@
-import React, {useContext, useEffect, useRef, useState} from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import {
-    FieldOptionsSchema,
-    FormFieldComponentPropSchema,
-    FormFieldType,
-    StoreStateSchema,
+  FieldOptionsSchema,
+  FormFieldComponentPropSchema,
+  FormFieldType,
+  StoreStateSchema,
 } from "../schema/FormFieldSchema";
-import {RegisterOptions} from "react-hook-form";
-import {Listbox, ListboxButton} from "@headlessui/react";
+import { RegisterOptions } from "react-hook-form";
+import { Listbox, ListboxButton } from "@headlessui/react";
 
-import {FormContext} from "../context/FormContext";
-import {getListOptions} from "../FormFieldUtils";
-import axios from "axios";
+import { FormContext } from "../context/FormContext";
+import { getListOptions } from "../FormFieldUtils";
 import useDymanicReducer from "../hooks/useDynamicReducer";
-import {useDispatch} from "react-redux";
+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 { handleChange, registerFormField } from "../util";
+import RenderListOptions, {
+  renderListBoxValue,
+} from "../util/RenderListOptions";
+import { getAxiosInstance } from "../../api";
 
 const DynamicMultiSelect: React.FC<FormFieldComponentPropSchema> = (
-    props: FormFieldComponentPropSchema
+  props: FormFieldComponentPropSchema
 ) => {
-    const dynamicSelectRef = useRef<HTMLUListElement>(null);
+  const dynamicSelectRef = useRef<HTMLUListElement>(null);
 
-    const formContext = useContext(FormContext);
+  const formContext = useContext(FormContext);
 
-    const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
-    const [loading, setLoading] = useState<boolean>(false);
+  const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
 
-    useEffect(() => {
-        const {fieldConfig} = props;
-
-        // Initialize dropdownFieldConfig with defaults if not already set
-        fieldConfig.dropdownFieldConfig = {
-            showCreateOption:
-                fieldConfig.dropdownFieldConfig?.showCreateOption ?? false,
-            showDeleteOption:
-                fieldConfig.dropdownFieldConfig?.showDeleteOption ?? true,
-            showSearchBox:
-                fieldConfig.dropdownFieldConfig?.showSearchBox ?? true,
-            showSelectedCount:
-                fieldConfig.dropdownFieldConfig?.showSelectedCount ?? true,
-        };
-
-        if (
-            !formContext.getValues(props.fieldConfig.name) &&
-            props.fieldConfig.defaultValue
-        ) {
-            formContext.setValue(
-                props.fieldConfig.name,
-                props.fieldConfig.defaultValue
-            );
-        }
-    }, []);
+  useEffect(() => {
+    const { fieldConfig } = props;
 
-    if (props.fieldConfig.store) {
-        const {state: state} = useDymanicReducer<StoreStateSchema<any>>({
-            reducerConfig: props.fieldConfig.store,
-        });
-
-        const dispatch = useDispatch();
-
-        useEffect(() => {
-            if (
-                props.fieldConfig.store?.initialFetchReducerAction &&
-                (!state || !state.data)
-            ) {
-                dispatch(props.fieldConfig.store.initialFetchReducerAction(""));
-            } else {
-                if (state && state.data && Array.isArray(state.data)) {
-                    const list: FieldOptionsSchema[] = getListOptions(
-                        state.data,
-                        props.fieldConfig.optionsConfig
-                    );
-                    setListOptions([...list]);
-                    setLoading(false);
-                }
-            }
-        }, []);
-
-        useEffect(() => {
-            if (state && state.data && Array.isArray(state.data)) {
-                const list = getListOptions(
-                    state.data,
-                    props.fieldConfig.optionsConfig
-                );
-                setListOptions([...list]);
-                setLoading(false);
-            }
-        }, [state]);
-    } else if (props.fieldConfig.fetchUrl) {
-        useEffect(() => {
-            fetchData();
-        }, []);
-    }
-    if (props.fieldConfig.options && props.fieldConfig.options.length > 0) {
-        let options = props.fieldConfig.options;
-        setListOptions(prevState => [...options, ...prevState]);
-    }
-    const fetchData = async () => {
-        if (!props.fieldConfig.fetchUrl) return;
-
-        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,
-                props.fieldConfig.optionsConfig
-            );
-            setListOptions([...data]);
-            if (props.fieldConfig.fetchCallback) {
-                props.fieldConfig.fetchCallback(response);
-            }
-        } else {
-            console.error(response.statusText);
-            setLoading(false);
-        }
+    // Initialize dropdownFieldConfig with defaults if not already set
+    fieldConfig.dropdownFieldConfig = {
+      showCreateOption:
+        fieldConfig.dropdownFieldConfig?.showCreateOption ?? false,
+      showDeleteOption:
+        fieldConfig.dropdownFieldConfig?.showDeleteOption ?? true,
+      showSearchBox: fieldConfig.dropdownFieldConfig?.showSearchBox ?? true,
+      showSelectedCount:
+        fieldConfig.dropdownFieldConfig?.showSelectedCount ?? true,
     };
 
-    let registerOptions: RegisterOptions = registerFormField(
-        props.fieldConfig,
-        true
-    );
-
-    let hookProps = formContext.register(
+    if (
+      !formContext.getValues(props.fieldConfig.name) &&
+      props.fieldConfig.defaultValue
+    ) {
+      formContext.setValue(
         props.fieldConfig.name,
-        registerOptions
-    );
+        props.fieldConfig.defaultValue
+      );
+    }
+  }, []);
+
+  if (props.fieldConfig.store) {
+    const { state: state } = useDymanicReducer<StoreStateSchema<any>>({
+      reducerConfig: props.fieldConfig.store,
+    });
+
+    const dispatch = useDispatch();
 
-    function getInput() {
-        return (
-            <Listbox
-                multiple
-                as={"div"}
-                value={formContext.getValues(props.fieldConfig.name) ?? []}
-                {...hookProps}
-                onChange={(selectedOptions) =>
-                    handleChange(
-                        selectedOptions,
-                        formContext,
-                        props.fieldConfig,
-                        props.onChange
-                    )
-                }
-                defaultValue={props.fieldConfig.defaultValue}
-                name={props.fieldConfig.name}
-                disabled={props.fieldConfig.disabled}
-                className={`relative form-listbox flex-1`}>
-                <ListboxButton
-                    className={
-                        props.fieldConfig.customClassNames?.fieldClassName
-                            ? "form-listbox-select " +
-                            props.fieldConfig.customClassNames.fieldClassName
-                            : "form-listbox-select"
-                    }>
-                    {renderListBoxValue(
-                            formContext,
-                            props.fieldConfig,
-                            listOptions,
-                            props.onChange
-                        )
-                    }
-                </ListboxButton>
-                <RenderListOptions
-                    formContext={formContext}
-                    onChange={props.onChange}
-                    formField={FormFieldType.DYNAMIC_MULTI_SELECT}
-                    ref={dynamicSelectRef}
-                    fieldConfig={props.fieldConfig}
-                    listOptions={listOptions}
-                    setListOptions={setListOptions}
-                    loading={loading}
-                    setLoading={setLoading}
-                />
-            </Listbox>
+    useEffect(() => {
+      if (
+        props.fieldConfig.store?.initialFetchReducerAction &&
+        (!state || !state.data)
+      ) {
+        dispatch(props.fieldConfig.store.initialFetchReducerAction(""));
+      } else {
+        if (state && state.data && Array.isArray(state.data)) {
+          const list: FieldOptionsSchema[] = getListOptions(
+            state.data,
+            props.fieldConfig.optionsConfig
+          );
+          setListOptions([...list]);
+          setLoading(false);
+        }
+      }
+    }, []);
+
+    useEffect(() => {
+      if (state && state.data && Array.isArray(state.data)) {
+        const list = getListOptions(
+          state.data,
+          props.fieldConfig.optionsConfig
         );
+        setListOptions([...list]);
+        setLoading(false);
+      }
+    }, [state]);
+  } else if (props.fieldConfig.fetchUrl) {
+    useEffect(() => {
+      fetchData();
+    }, []);
+  }
+  if (props.fieldConfig.options && props.fieldConfig.options.length > 0) {
+    let options = props.fieldConfig.options;
+    setListOptions((prevState) => [...options, ...prevState]);
+  }
+
+  const fetchData = async () => {
+    if (!props.fieldConfig.fetchUrl) return;
+    const axiosInstance = getAxiosInstance(
+      formContext.axiosInstance,
+      props.fieldConfig
+    );
+    let response = await axiosInstance.get(props.fieldConfig.fetchUrl);
+
+    if (response.data) {
+      const data: FieldOptionsSchema[] = getListOptions(
+        response.data,
+        props.fieldConfig.optionsConfig
+      );
+      setListOptions([...data]);
+      if (props.fieldConfig.fetchCallback) {
+        props.fieldConfig.fetchCallback(response);
+      }
+    } else {
+      console.error(response.statusText);
+      setLoading(false);
     }
-    if(props.fieldConfig.hideWhenNoResults && listOptions.length==0 )
-    {
-        return <></>
-    }
+  };
 
+  let registerOptions: RegisterOptions = registerFormField(
+    props.fieldConfig,
+    true
+  );
+
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+
+  function getInput() {
     return (
-        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput}/>
+      <Listbox
+        multiple
+        as={"div"}
+        value={formContext.getValues(props.fieldConfig.name) ?? []}
+        {...hookProps}
+        onChange={(selectedOptions) =>
+          handleChange(
+            selectedOptions,
+            formContext,
+            props.fieldConfig,
+            props.onChange
+          )
+        }
+        defaultValue={props.fieldConfig.defaultValue}
+        name={props.fieldConfig.name}
+        disabled={props.fieldConfig.disabled}
+        className={`relative form-listbox flex-1 overflow-hidden`}
+      >
+        <ListboxButton
+          static
+          className={
+            props.fieldConfig.customClassNames?.fieldClassName
+              ? "form-listbox-select " +
+                props.fieldConfig.customClassNames.fieldClassName
+              : "form-listbox-select"
+          }
+        >
+          {renderListBoxValue(
+            formContext,
+            props.fieldConfig,
+            listOptions,
+            props.onChange
+          )}
+        </ListboxButton>
+        <RenderListOptions
+          formContext={formContext}
+          onChange={props.onChange}
+          formField={FormFieldType.DYNAMIC_MULTI_SELECT}
+          ref={dynamicSelectRef}
+          fieldConfig={props.fieldConfig}
+          listOptions={listOptions}
+          setListOptions={setListOptions}
+          loading={loading}
+          setLoading={setLoading}
+        />
+      </Listbox>
     );
+  }
+  if (props.fieldConfig.hideWhenNoResults && listOptions.length == 0) {
+    return <></>;
+  }
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
 };
 export default DynamicMultiSelect;

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(formContext.axiosInstance, 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);