@scheels-softdev/kendoreact-generics 1.6.7 → 1.6.8

package/GenericDropdown.js

@@ -2,12 +2,7 @@ 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";
-// function to concatenate text values from dataItem using specified fields and separator
-const getTextValue = (dataItem, fields, separator) => {
-    let textValue = "";
-    fields.forEach((field, index) => (textValue += index > 0 ? (separator ? separator : " ") + dataItem[field] : dataItem[field]));
-    return textValue;
-};
+import { getTextValue } from "./Utility";
 // component that renders a dropdown with a search filter
 export function GenericDropdown({ data, // array of data objects
 selectedId, // id of the selected data object

package/MultiSelectDropdown.d.ts

@@ -1,7 +1,9 @@
-export declare function MultiSelectDropdown<T>({ data, selectedData, field, selectEvent, title, }: {
+export declare function MultiSelectDropdown<T>({ data, selectedData, textFields, selectEvent, title, separator, idField, }: {
     data: T[];
-    selectedData: T[];
-    field: keyof T;
+    selectedData: number[];
+    textFields: (keyof T)[];
     selectEvent: Function;
     title: string;
+    separator?: string;
+    idField?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/MultiSelectDropdown.js

@@ -1,20 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import { filterBy } from "@progress/kendo-data-query";
 import { MultiSelect } from "@progress/kendo-react-dropdowns";
+import { getTextValue } from "./Utility";
 const pageSize = 10;
-export function MultiSelectDropdown({ data, selectedData, field, selectEvent, title, }) {
-    const filteredData = React.useRef(data.slice());
-    const [state, setState] = React.useState({
-        subsetData: data.slice(0, pageSize),
+export function MultiSelectDropdown({ data, selectedData, textFields, selectEvent, title, separator, idField, }) {
+    //local state
+    const pageSize = 8;
+    const [dataList, setDataList] = useState(data.map((x) => {
+        return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
+    }));
+    const [state, setState] = useState({
         skip: 0,
-        total: data.length,
+        total: dataList.length,
+        subsetData: dataList.slice(0, pageSize),
     });
-    const [filter, setFilter] = React.useState({ field: field.toString(), operator: "contains", ignoreCase: true, value: "" });
+    //external function variables
+    const filteredData = useRef(dataList.slice());
+    //function creation
+    // function to handle filter changes
     const onFilterChange = (event) => {
-        event.filter.ignoreCase = true;
-        setFilter(event.filter);
-        filteredData.current = filterBy(data.slice(), event.filter);
+        var _a;
+        if ((_a = event.filter.value) === null || _a === void 0 ? void 0 : _a.length)
+            filteredData.current = filterBy(dataList.slice(), event.filter);
+        else
+            filteredData.current = dataList;
         const newData = filteredData.current.slice(0, pageSize);
         setState({
             subsetData: newData,
@@ -22,41 +32,22 @@ export function MultiSelectDropdown({ data, selectedData, field, selectEvent, ti
             total: filteredData.current.length,
         });
     };
-    useEffect(() => {
-        if (data.length > 0) {
-            filteredData.current = filterBy(data, filter);
-            const newData = filteredData.current.slice(0, pageSize);
-            setState({
-                subsetData: newData,
-                skip: 0,
-                total: filteredData.current.length,
-            });
-        }
-    }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
+    // function to handle page changes for virtualization
     const pageChange = (event) => {
         const skip = event.page.skip;
         const take = event.page.take;
-        const newsubsetData = filteredData.current.slice(skip, skip + take);
-        setState(Object.assign(Object.assign({}, state), { subsetData: newsubsetData, skip: skip }));
+        const newSubsetData = filteredData.current.slice(skip, skip + take);
+        setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
     };
+    //change event listeners
     useEffect(() => {
-        if (data.length > 0 && filteredData.current.length === 0) {
-            const filter = { field: field.toString(), ignoreCase: true, operator: "contains", value: "" };
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            filter.ignoreCase = true;
-            filteredData.current = filterBy(data.slice(), filter);
-            const newData = filteredData.current.slice(0, pageSize);
-            setState({
-                subsetData: newData,
-                skip: 0,
-                total: filteredData.current.length,
-            });
-        }
-        // I disabled on purpose otherwise we will create a redundant update stack if we track state
-    }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
-    return (_jsx(MultiSelect, { label: title, dataItemKey: field.toString(), textField: field.toString(), data: state.subsetData, value: selectedData, virtual: {
+        setDataList(data.map((x) => {
+            return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
+        }));
+    }, [data, textFields, separator]);
+    return (_jsx(MultiSelect, { label: title, dataItemKey: textFields.toString(), data: state.subsetData, value: dataList.filter((item) => selectedData.filter((x) => item[idField || "id"] === x)), virtual: {
             total: state.total,
             pageSize: pageSize,
             skip: state.skip,
-        }, onChange: (e) => selectEvent(e.value), onPageChange: pageChange, filterable: true, filter: filter.value, onFilterChange: onFilterChange, autoClose: false, style: { width: "100%" } }));
+        }, onChange: (e) => selectEvent(e.value), onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, autoClose: false, style: { width: "100%" } }));
 }

package/Utility.d.ts

@@ -0,0 +1 @@
+export declare const getTextValue: (dataItem: any, fields: string[], separator?: string) => string;

package/Utility.js

@@ -0,0 +1,6 @@
+// function to concatenate text values from dataItem using specified fields and separator
+export const getTextValue = (dataItem, fields, separator) => {
+    let textValue = "";
+    fields.forEach((field, index) => (textValue += index > 0 ? (separator ? separator : " ") + dataItem[field] : dataItem[field]));
+    return textValue;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@scheels-softdev/kendoreact-generics",
-    "version": "1.6.7",
+    "version": "1.6.8",
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",