@scheels-softdev/kendoreact-generics 2.8.4 → 2.8.6

package/GenericDropdown.js

@@ -1,29 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ComboBox } from "@progress/kendo-react-dropdowns";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { filterBy } from "@progress/kendo-data-query";
+import { useEffect, useRef, useState } from "react";
 import { Guard } from "@scheels-softdev/frontend-utility-functions";
 export function GenericDropdown({ data, selectedId, selectedData, onChange, textField, disabled, idField, title, hideClearButton, style, isLoading, suggest, }) {
-    var _a, _b;
+    //local state
     const pageSize = 8;
     if (selectedId !== undefined && selectedData !== undefined) {
         throw new Error("You cannot provide both selectedData and selectedId to GenericDropdown.");
     }
-    const [selectedObject, setSelectedObject] = useState(selectedId
-        ? (_a = data.find((item) => (selectedId === item ? item[idField || "id"] : 0))) !== null && _a !== void 0 ? _a : undefined
-        : (_b = data.find((x) => Guard.Ensure.EqualObjects(Object.assign(Object.assign({}, x), selectedData), Object.assign({}, (x !== null && x !== void 0 ? x : {}))))) !== null && _b !== void 0 ? _b : undefined);
+    //useState
+    const [selectedObject, setSelectedObject] = useState(undefined);
     const [state, setState] = useState({
         skip: 0,
         total: data.length,
         subsetData: data.slice(0, pageSize),
     });
+    //trigger functions
     useEffect(() => {
         var _a, _b;
-        if (selectedId || selectedData) {
+        if (!selectedId && !selectedData)
+            setSelectedObject(undefined);
+        else {
             setSelectedObject(selectedId
-                ? (_a = data.find((item) => (selectedId === item ? item[idField || "id"] : 0))) !== null && _a !== void 0 ? _a : undefined
+                ? (_a = data.find((item) => selectedId === item[idField || "id"])) !== null && _a !== void 0 ? _a : undefined
                 : (_b = data.find((x) => Guard.Ensure.EqualObjects(Object.assign(Object.assign({}, x), selectedData), Object.assign({}, (x !== null && x !== void 0 ? x : {}))))) !== null && _b !== void 0 ? _b : undefined);
         }
-    }, [selectedId, selectedData, state.subsetData, data, idField]);
+    }, [selectedId, selectedData, data]);
     useEffect(() => {
         setState({
             skip: 0,
@@ -31,39 +34,32 @@ export function GenericDropdown({ data, selectedId, selectedData, onChange, text
             subsetData: data.slice(0, pageSize),
         });
     }, [data]);
-    const filteredData = useMemo(() => {
-        return data.filter((item) => {
-            return item[textField] !== undefined && item[textField] !== null;
-        });
-    }, [data, textField]);
-    const onFilterChange = useCallback((event) => {
+    //external function variables
+    let filteredData = useRef(data.slice());
+    //function creation
+    // function to handle filter changes
+    const onFilterChange = (event) => {
         var _a;
-        if ((_a = event.filter.value) === null || _a === void 0 ? void 0 : _a.length) {
-            const filtered = data.filter((item) => {
-                var _a;
-                return (_a = item[textField]) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().includes(event.filter.value.toLowerCase());
-            });
-            setState({
-                subsetData: filtered.slice(0, pageSize),
-                skip: 0,
-                total: filtered.length,
-            });
-        }
-        else {
-            setState({
-                subsetData: data.slice(0, pageSize),
-                skip: 0,
-                total: data.length,
-            });
-        }
-    }, [data, pageSize, textField]);
-    const pageChange = useCallback((event) => {
+        if ((_a = event.filter.value) === null || _a === void 0 ? void 0 : _a.length)
+            filteredData.current = filterBy(data.slice(), event.filter);
+        else
+            filteredData.current = data;
+        const newData = filteredData.current.slice(0, pageSize);
+        setState({
+            subsetData: newData,
+            skip: 0,
+            total: filteredData.current.length,
+        });
+    };
+    // function to handle page changes for virtualization
+    const pageChange = (event) => {
         const skip = event.page.skip;
         const take = event.page.take;
-        const newSubsetData = filteredData.slice(skip, skip + take);
+        const newSubsetData = filteredData.current.length ? filteredData.current.slice(skip, skip + take) : data.slice(skip, skip + take);
         setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
-    }, [filteredData, state]);
+    };
     return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: _jsx(ComboBox, { style: style, label: title, disabled: disabled || isLoading, data: state.subsetData, textField: textField.toString(), virtual: {
+                // enable virtualization for large datasets
                 total: state.total,
                 pageSize: pageSize,
                 skip: state.skip,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@scheels-softdev/kendoreact-generics",
-    "version": "2.8.4",
+    "version": "2.8.6",
     "main": "index.js",
     "scripts": {
         "test": "jest",