@scheels-softdev/kendoreact-generics 1.5.2 → 1.6.1

package/MultiSelectDropdown.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare function MultiSelectDropdown<T>({ data, selectedData, field, selectEvent, title, }: {
+    data: T[];
+    selectedData: T[];
+    field: keyof T;
+    selectEvent: Function;
+    title: string;
+}): JSX.Element;

package/MultiSelectDropdown.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import { filterBy } from "@progress/kendo-data-query";
+import { MultiSelect } from "@progress/kendo-react-dropdowns";
+const pageSize = 10;
+//TODO move this component to @scheels-softdev/kendoreact-generics NPM package
+export function MultiSelectDropdown({ data, selectedData, field, selectEvent, title, }) {
+    const filteredData = React.useRef(data.slice());
+    const [state, setState] = React.useState({
+        subsetData: data.slice(0, pageSize),
+        skip: 0,
+        total: data.length,
+    });
+    const [filter, setFilter] = React.useState({ field: field.toString(), operator: "contains", ignoreCase: true, value: "" });
+    const onFilterChange = (event) => {
+        event.filter.ignoreCase = true;
+        setFilter(event.filter);
+        filteredData.current = filterBy(data.slice(), event.filter);
+        const newData = filteredData.current.slice(0, pageSize);
+        setState({
+            subsetData: newData,
+            skip: 0,
+            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
+    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 }));
+    };
+    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: {
+            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%" } }));
+}

package/index.d.ts

@@ -7,3 +7,4 @@ export { FilterCellDropdown } from "./FilterCellDropdown";
 export { ToolbarButton } from "./Toolbar";
 export { GenericDropdown } from "./GenericDropdown";
 export { GridChangeEvent, CommonProps } from "./PropTypes";
+export { MultiSelectDropdown } from "./MultiSelectDropdown";

package/index.js

@@ -6,3 +6,4 @@ export { CommandCellSwitch } from "./commandCell/CommandCellSwitch";
 export { FilterCellDropdown } from "./FilterCellDropdown";
 export { ToolbarButton } from "./Toolbar";
 export { GenericDropdown } from "./GenericDropdown";
+export { MultiSelectDropdown } from "./MultiSelectDropdown";

package/package.json

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