@scheels-softdev/kendoreact-generics 2.8.13 → 2.9.1

package/FilterCellDropdown.d.ts

@@ -4,8 +4,6 @@ interface DropdownFilterCellProps<T> extends GridFilterCellProps {
     data: T[];
     /** The field names used to extract text values for display */
     textField: keyof T;
-    /** The separator to use when concatenating multiple text values */
-    separator?: string;
 }
 export declare function FilterCellDropdown<T>(props: DropdownFilterCellProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/FilterCellDropdown.js

@@ -28,5 +28,5 @@ export function FilterCellDropdown(props) {
         });
     };
     // Render a div containing a GenericDropdownWithSearch component and a Clear button
-    return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data, onChange: onChange, selectedId: props.value, textField: props.textField, separator: props.separator }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
+    return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data, onChange: onChange, selectedId: props.value, textField: props.textField }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
 }

package/GenericDropdown.d.ts

@@ -15,20 +15,15 @@ type GenericDDProps<T> = {
     onChange: Function;
     /**  The field names used to extract text values for display */
     textField: keyof T;
-    /**  The separator to use when concatenating multiple text values. (optional)*/
-    separator?: string;
     /**  Determines whether the dropdown is disabled. (optional)*/
     idField?: keyof T;
-    /**  The field name used as the identity key (optional)*/
-    disabled?: boolean;
-    /** The label displayed for the dropdown (optional)*/
-    title?: string;
     /** The Determines whether the clear button is hidden from the dropdown. (optional)*/
     hideClearButton?: boolean;
     /** Custom CSS properties for the component. (optional)*/
     style?: CSSProperties;
     isLoading?: boolean;
     suggest?: boolean;
+    title?: string;
 };
-export declare function GenericDropdown<T>({ data, selectedId, selectedData, onChange, textField, disabled, idField, title, hideClearButton, style, isLoading, suggest, }: GenericDDProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function GenericDropdown<T>(props: GenericDDProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/GenericDropdown.js

@@ -1,69 +1,28 @@
 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 { Guard } from "@scheels-softdev/frontend-utility-functions";
-export function GenericDropdown({ data, selectedId, selectedData, onChange, textField, disabled, idField, title, hideClearButton, style, isLoading, suggest, }) {
-    //local state
-    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);
+import { useState } from "react";
+const total = 5000;
+const pageSize = 12;
+export function GenericDropdown(props) {
+    var _a, _b, _c, _d;
     const [state, setState] = useState({
+        subsetData: props.data.slice(0, pageSize),
         skip: 0,
-        total: data.length,
-        subsetData: data.slice(0, pageSize),
     });
-    //trigger functions
-    useEffect(() => {
-        var _a, _b;
-        if (!selectedId && !selectedData)
-            setSelectedObject(undefined);
-        else {
-            setSelectedObject(selectedId
-                ? (_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, data]);
-    useEffect(() => {
-        setState({
-            skip: 0,
-            total: data.length,
-            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,
-        });
-    };
-    // function to handle page changes for virtualization
     const pageChange = (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);
-        setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
+        const newSubsetData = props.data.slice(skip, skip + take);
+        setState({
+            subsetData: newSubsetData,
+            skip: skip,
+        });
     };
-    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,
-            }, suggest: suggest, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
-                height: "210px",
-            }, onChange: (e) => onChange(e), onBlur: (e) => e.nativeEvent.preventDefault(), clearButton: !hideClearButton, value: selectedObject !== null && selectedObject !== void 0 ? selectedObject : undefined }) })));
+    return (_jsx(ComboBox, { data: state.subsetData, dataItemKey: (_b = (_a = props.idField) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : undefined, textField: props.textField.toString(), virtual: {
+            total: total,
+            pageSize: pageSize,
+            skip: state.skip,
+        }, label: (_c = props.title) !== null && _c !== void 0 ? _c : "Select an option", onPageChange: pageChange, popupSettings: {
+            height: "250px",
+        }, style: Object.assign({ width: "300px" }, props.style), onChange: (event) => props.onChange(event), disabled: props.isLoading, value: (_d = props.selectedData) !== null && _d !== void 0 ? _d : props.data.find((d) => d[props.idField] === props.selectedId) }));
 }

package/package.json

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