@scheels-softdev/kendoreact-generics 2.8.1 → 2.8.3

package/GenericDropdown.js

@@ -1,32 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ComboBox } from "@progress/kendo-react-dropdowns";
-import { filterBy } from "@progress/kendo-data-query";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, 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, }) {
-    //local state
+    var _a, _b;
     const pageSize = 8;
     if (selectedId !== undefined && selectedData !== undefined) {
         throw new Error("You cannot provide both selectedData and selectedId to GenericDropdown.");
     }
-    //useState
-    const [selectedObject, setSelectedObject] = useState(undefined);
+    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);
     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[idField || "id"])) !== null && _a !== void 0 ? _a : undefined
+                ? (_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);
         }
-    }, [selectedId, selectedData, data]);
+    }, [selectedId, selectedData, state.subsetData, data, idField]);
     useEffect(() => {
         setState({
             skip: 0,
@@ -34,32 +34,39 @@ export function GenericDropdown({ data, selectedId, selectedData, onChange, text
             subsetData: data.slice(0, pageSize),
         });
     }, [data]);
-    //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)
-            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,
+    const filteredData = useMemo(() => {
+        return data.filter((item) => {
+            return item[textField] !== undefined && item[textField] !== null;
         });
-    };
-    // function to handle page changes for virtualization
-    const pageChange = (event) => {
+    }, [data, textField]);
+    const onFilterChange = useCallback((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) => {
         const skip = event.page.skip;
         const take = event.page.take;
-        const newSubsetData = filteredData.current.length ? filteredData.current.slice(skip, skip + take) : data.slice(skip, skip + take);
+        const newSubsetData = filteredData.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.1",
+    "version": "2.8.3",
     "main": "index.js",
     "scripts": {
         "test": "jest",