@scheels-softdev/kendoreact-generics 2.8.12 → 2.9.0

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

@@ -1,14 +1,4 @@
 import { CSSProperties } from "react";
-import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
-/**
- * Handles the change event of a dropdown.
- *
- * @param {ComboBoxChangeEvent} e - The change event object.
- * @param {(value: T) => void} setFunction - The function to set the value.
- * @param {T} nullEventValue - The value to set when the event value is null.
- * @param {string} valueKey - The key to access the value in the event object.
- */
-export declare function handleDropdownChange<T>(e: ComboBoxChangeEvent, setFunction: (value: T) => void, nullEventValue: T, valueKey?: string): void;
 /**
  * JSX Component for displaying items in a virtualized combobox
  * @template T - The type of the data objects in the dropdown.
@@ -22,23 +12,18 @@ type GenericDDProps<T> = {
     /** The currently selected data object. (optional)*/
     selectedData?: T;
     /** Callback function triggered when the selected value changes*/
-    onChange: (e: ComboBoxChangeEvent) => void;
+    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,79 +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";
-/**
- * Handles the change event of a dropdown.
- *
- * @param {ComboBoxChangeEvent} e - The change event object.
- * @param {(value: T) => void} setFunction - The function to set the value.
- * @param {T} nullEventValue - The value to set when the event value is null.
- * @param {string} valueKey - The key to access the value in the event object.
- */
-export function handleDropdownChange(e, setFunction, nullEventValue, valueKey) {
-    Guard.Catch.NullEmptyOrWhitespace(e.target.value)
-        ? setFunction(nullEventValue)
-        : setFunction(Guard.Catch.NullEmptyOrWhitespace(valueKey) ? e.target.value : e.target.value[valueKey !== null && valueKey !== void 0 ? valueKey : ""]);
-}
-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(null);
+import { useState } from "react";
+const total = 5000;
+const pageSize = 12;
+export function GenericDropdown(props) {
+    var _a, _b, _c;
     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;
-        console.log(selectedData, selectedId);
-        setSelectedObject(selectedId
-            ? (_a = data.find((item) => selectedId === item[idField || "id"])) !== null && _a !== void 0 ? _a : null
-            : (_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 : null);
-    }, [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) => handleDropdownChange(e, () => onChange(e.value), {}, idField === null || idField === void 0 ? void 0 : idField.toString()), onBlur: (e) => e.nativeEvent.preventDefault(), clearButton: !hideClearButton, value: selectedObject }) })));
+    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,
+        }, onPageChange: pageChange, popupSettings: {
+            height: "250px",
+        }, placeholder: props.title, style: { width: "300px" }, onChange: (event) => props.onChange(event), disabled: props.isLoading, value: (_c = props.selectedData) !== null && _c !== void 0 ? _c : props.data.find((d) => d[props.idField] === props.selectedId) }));
 }

package/package.json

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