impaktapps-jsonforms 5.426.30 → 5.426.31

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-jsonforms",
-    "version": "5.426.30",
+    "version": "5.426.31",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

package/src/impaktapps-jsonforms/renderers/components/AutoComplete.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useContext, useEffect, useState } from "react";
+import React, { memo, useContext, useEffect, useState, useMemo } from "react";
 import { Autocomplete, TextField } from "@mui/material";
 import { DataContext } from "../context/Context";
 import ComponentWrapper from "../common/ComponentWrapper";
@@ -6,6 +6,7 @@ import { getFieldName } from "../permissions/getFieldName";
 import { inputProps } from "../interface/inputfieldProps";
 import { getComponentProps } from "../common/getComponentProps";
 import _ from "lodash";
+
 export const ImpaktAppsAutoComplete = memo(function CustomAutoComplete(
   props: inputProps | any
 ) {
@@ -20,56 +21,83 @@ export const ImpaktAppsAutoComplete = memo(function CustomAutoComplete(
     schema,
     options,
   } = props.props;
+
   const uischemaData = uischema?.config?.main;
   const { pageName, permissions, theme, setSchema, serviceProvider } =
     useContext(DataContext);
   const fieldName = getFieldName(path);
+
   const [changeState, setChangeState] = useState("");
   const [selectOptions, setSelectOptions] = useState(
     options || uischemaData.options || []
   );
-  const [value, setValue] = useState<any>(uischemaData.multiple ? [] : "");
+  const [value, setValue] = useState(uischemaData.multiple ? [] : "");
+
   useEffect(() => {
-    // const filteredOptions = [];
-    // options?.map((e) => {
-    //   if (uischemaData.multiple) {
-    //     if (!data?.includes(e?.value)) {
-    //       filteredOptions.push(e);
-    //     }
-    //   } else {
-    //     if (!(data === e?.value)) {
-    //       filteredOptions.push(e);
-    //     }
-    //   }
-    // });
     setSelectOptions(options || []);
   }, [options]);
+
   useEffect(() => {
     if (uischemaData.lazyLoading) {
       throttledFunction();
     }
   }, []);
-  function throttle(fn: any, delay: any) {
-    let timer: any;
+
+  useEffect(() => {
+    updateFreeSoloOptions();
+  }, [options, data]);
+
+  const throttledFunction = useMemo(
+    () =>
+      throttle((value) => {
+        serviceProvider(
+          props.ctx,
+          {
+            ...uischemaData,
+            onInputChange: uischemaData.lazyLoadFunction || "getSelectOptions",
+          },
+          {
+            event: { _reactName: "onInputChange" },
+            path,
+            ...uischemaData.additionalData,
+            paramValue: {
+              path,
+              serachValue: value,
+              currentValue: data,
+            },
+          }
+        ).then((response) => {
+          if (response) {
+            if (uischemaData.freeSolo) {
+              response.push({ const: changeState, title: changeState });
+            }
+            updateSchema({ options, response, setSchema, path, uischemaData });
+            const filteredOptions = response.filter(
+              (e) => !data?.includes(e?.const)
+            ).map((e) => ({ label: e.title, value: e.const }));
+            setSelectOptions(filteredOptions);
+          }
+        });
+      }, 1000),
+    [uischemaData, serviceProvider, data, changeState]
+  );
+
+  function throttle(fn, delay) {
+    let timer;
     return function (...args) {
       clearTimeout(timer);
       timer = setTimeout(() => fn(...args), delay);
     };
   }
-  useEffect(() => {
-    updateFreeSoloOptions();
-  }, []);
+
   function updateFreeSoloOptions() {
     if (uischemaData.freeSolo && !uischemaData.lazyLoading && data) {
-      // let Updatedresponse = [{const:data||"",title:data||""}];
       if (options) {
-        const OptionsClone = _.cloneDeep(options);
-        const updatedOptions = OptionsClone?.map((e: any) => {
-          return { const: e.value, title: e.label };
-        });
-        const filterResult = updatedOptions.filter((e) => {
-          return e.const === data;
-        });
+        const updatedOptions = _.cloneDeep(options).map((e) => ({
+          const: e.value,
+          title: e.label,
+        }));
+        const filterResult = updatedOptions.filter((e) => e.const === data);
         if (filterResult.length > 0) {
           return;
         }
@@ -92,42 +120,7 @@ export const ImpaktAppsAutoComplete = memo(function CustomAutoComplete(
       }
     }
   }
-  const throttledFunction = throttle((value) => {
-    serviceProvider(
-      props.ctx,
-      {
-        ...uischemaData,
-        onInputChange: uischemaData.lazyLoadFunction || "getSelectOptions",
-      },
-      {
-        event: { _reactName: "onInputChange" },
-        path,
-        ...uischemaData.additionalData,
-        paramValue: {
-          path,
-          serachValue: value,
-          currentValue: data,
-        },
-      }
-    ).then((response: any) => {
-      if (response) {
-        if (uischemaData.freeSolo) {
-          response[response.length] = {
-            const: changeState,
-            title: changeState,
-          };
-        }
-        updateSchema({ options, response, setSchema, path, uischemaData });
-        const filteredOptions = [];
-        response.map((e) => {
-          if (!data?.includes(e?.const)) {
-            filteredOptions.push({ label: e.title, value: e.const });
-          }
-        });
-        setSelectOptions(filteredOptions);
-      }
-    });
-  }, 1000);
+
   const findOptions = () => {
     const value = data
       ? uischemaData.multiple
@@ -138,11 +131,13 @@ export const ImpaktAppsAutoComplete = memo(function CustomAutoComplete(
       : "";
     setValue(value);
   };
+
   useEffect(() => {
     if (options) {
       findOptions();
     }
   }, [options, data]);
+
   return (
     <ComponentWrapper
       {...getComponentProps(
@@ -155,14 +150,10 @@ export const ImpaktAppsAutoComplete = memo(function CustomAutoComplete(
       <Autocomplete
         onChange={(event, newValue) => {
           if (uischemaData.multiple) {
-            if (newValue.length === 0) {
-              handleChange(path, undefined);
-            } else {
-              handleChange(
-                path,
-                newValue.map((e) => e?.value || e)
-              );
-            }
+            handleChange(
+              path,
+              newValue.length === 0 ? undefined : newValue.map((e) => e?.value || e)
+            );
           } else {
             handleChange(path, newValue === null ? undefined : newValue.value);
           }
@@ -170,7 +161,7 @@ export const ImpaktAppsAutoComplete = memo(function CustomAutoComplete(
         onInputChange={(event, newInputValue) => {
           uischemaData.lazyLoading && throttledFunction(newInputValue);
         }}
-        onMouseLeave={() => updateFreeSoloOptions()}
+        onMouseLeave={updateFreeSoloOptions}
         placeholder={uischemaData.placeholder}
         sx={{
           ...theme.InputFieldStyle,
@@ -180,59 +171,54 @@ export const ImpaktAppsAutoComplete = memo(function CustomAutoComplete(
             color: theme.myTheme.palette.text.input,
             border: `0.5px solid ${theme.myTheme.palette.text.input}`,
           },
-
           ".MuiAutocomplete-clearIndicator": {
-            color: theme.myTheme.palette.text.input, // Change this to the desired color for the close button
+            color: theme.myTheme.palette.text.input,
           },
         }}
-        // filterOptions={(x) => x}
-        // filterSelectedOptions
-        freeSolo={uischemaData.freeSolo ? true : false}
-        multiple={uischemaData.multiple ? true : false}
+        freeSolo={uischemaData.freeSolo ?? false}
+        multiple={uischemaData.multiple ?? false}
         id="tags-standard"
-        options={selectOptions?.map((option: any) => option)}
+        options={selectOptions}
         value={value}
-        renderInput={(params) => {
-          return (
-            <TextField
-              {...params}
-              size={uischemaData?.size ?? "medium"}
-              helperText={
-                errors !== ""
-                  ? errors.includes("pattern")
-                    ? uischemaData?.errorMessage
-                    : errors
-                  : uischemaData?.helperText
-              }
-              error={errors !== "" ? true : false}
-              sx={{
-                ...theme.InputFieldStyle,
-                fontSize: theme.myTheme.palette.typography.autoCompleteFontSize,
-                ...uischema?.config?.TextFieldStyle,
-              }}
-              variant="outlined"
-              label={uischemaData?.label}
-              disabled={
-                getComponentProps(
-                  `${pageName}:${fieldName}`,
-                  permissions,
-                  schema,
-                  rootSchema
-                ).disabled || uischemaData?.disabled
-              }
-              required={required}
-              placeholder={uischemaData?.placeholder}
-              onChange={
-                uischemaData.freeSolo
-                  ? (newValue) => {
-                      setChangeState(newValue.target.value);
-                      handleChange(path, newValue.target.value);
-                    }
-                  : () => {}
-              }
-            />
-          );
-        }}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            size={uischemaData?.size ?? "medium"}
+            helperText={
+              errors
+                ? errors.includes("pattern")
+                  ? uischemaData?.errorMessage
+                  : errors
+                : uischemaData?.helperText
+            }
+            error={!!errors}
+            sx={{
+              ...theme.InputFieldStyle,
+              fontSize: theme.myTheme.palette.typography.autoCompleteFontSize,
+              ...uischema?.config?.TextFieldStyle,
+            }}
+            variant="outlined"
+            label={uischemaData?.label}
+            disabled={
+              getComponentProps(
+                `${pageName}:${fieldName}`,
+                permissions,
+                schema,
+                rootSchema
+              ).disabled || uischemaData?.disabled
+            }
+            required={required}
+            placeholder={uischemaData?.placeholder}
+            onChange={
+              uischemaData.freeSolo
+                ? (newValue) => {
+                    setChangeState(newValue.target.value);
+                    handleChange(path, newValue.target.value);
+                  }
+                : undefined
+            }
+          />
+        )}
       />
     </ComponentWrapper>
   );
@@ -242,35 +228,30 @@ export default ImpaktAppsAutoComplete;
 
 function updateSchema(param) {
   if (param.uischemaData.multiple) {
-    param.setSchema((pre: any) => {
-      return {
-        ...pre,
-        properties: {
-          ...pre.properties,
-          [param.path]: {
-            ...pre.properties?.[param.path],
-            type: "array",
-            items: {
-              oneOf: param.response,
-            },
+    param.setSchema((pre) => ({
+      ...pre,
+      properties: {
+        ...pre.properties,
+        [param.path]: {
+          ...pre.properties?.[param.path],
+          type: "array",
+          items: {
+            oneOf: param.response,
           },
         },
-      };
-    });
+      },
+    }));
   } else {
-    param.setSchema((pre: any) => {
-      return {
-        ...pre,
-        properties: {
-          ...pre.properties,
-          [param.path]: {
-            ...pre.properties?.[param.path],
-
-            uniqueItems: true,
-            oneOf: param.response || [],
-          },
+    param.setSchema((pre) => ({
+      ...pre,
+      properties: {
+        ...pre.properties,
+        [param.path]: {
+          ...pre.properties?.[param.path],
+          uniqueItems: true,
+          oneOf: param.response || [],
         },
-      };
-    });
+      },
+    }));
   }
 }