@scheels-softdev/kendoreact-generics 3.0.9 → 4.0.1

package/GenericDropdown.d.ts

@@ -1,16 +1,11 @@
-import React from "react";
-type GenericDDProps<T> = {
+import { ComboBoxProps } from "@progress/kendo-react-dropdowns";
+interface GenericDropdownProps<T> extends ComboBoxProps {
     data: T[];
-    selectedId?: string | number;
     selectedData?: T;
-    onChange: (selectedItem: T | null) => void;
-    textField: keyof T;
+    selectedId?: number;
     idField?: keyof T;
-    style?: React.CSSProperties;
-    isLoading?: boolean;
-    title?: string;
-    maxMenuHeight?: number;
-    menuStyle?: React.CSSProperties;
-};
-export declare function GenericDropdown<T extends Record<string, any>>({ data, selectedId, selectedData, onChange, textField, idField, style, isLoading, title, maxMenuHeight, menuStyle, }: GenericDDProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};
+    pageSize?: number;
+    onClear?: () => void;
+}
+export declare function GenericDropdown<T>({ data, selectedData, selectedId, idField, onClear, ...props }: GenericDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+export default GenericDropdown;

package/GenericDropdown.js

@@ -1,25 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Select from "react-select";
-export function GenericDropdown({ data, selectedId, selectedData, onChange, textField, idField, style, isLoading, title, maxMenuHeight, menuStyle, }) {
-    var _a, _b;
-    const options = data.map((item) => ({
-        value: item,
-        label: item[textField].toString(),
-    }));
-    const selectedOption = selectedId
-        ? (_a = options.find((option) => option.value.id === (selectedId === null || selectedId === void 0 ? void 0 : selectedId.toString()))) !== null && _a !== void 0 ? _a : null
-        : (_b = options.find((option) => option.value === selectedData)) !== null && _b !== void 0 ? _b : null;
-    const handleChange = (selectedOption) => {
-        if (selectedOption) {
-            const selectedItem = idField ? data.find((item) => item[idField].toString() === selectedOption.value.id) : selectedOption.value;
-            onChange(selectedItem !== null && selectedItem !== void 0 ? selectedItem : null);
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { ComboBox } from "@progress/kendo-react-dropdowns";
+export function GenericDropdown(_a) {
+    var { data, selectedData, selectedId, idField, onClear } = _a, props = __rest(_a, ["data", "selectedData", "selectedId", "idField", "onClear"]);
+    const [selectedItem, setSelectedItem] = useState(null);
+    // Effect to update the selectedItem when external ids or data change
+    useEffect(() => {
+        if (selectedData) {
+            setSelectedItem(selectedData);
+        }
+        else if (selectedId !== undefined && idField) {
+            const foundItem = data.find((item) => item[idField] === selectedId);
+            setSelectedItem(foundItem || null);
         }
         else {
-            onChange(null);
+            setSelectedItem(null);
         }
+    }, [selectedData, selectedId, idField, data]);
+    // Handle clearing the selection
+    const handleClear = () => {
+        setSelectedItem(null);
+        if (onClear)
+            onClear();
     };
-    return (_jsx(Select, { options: options, onChange: handleChange, value: selectedOption, isLoading: isLoading, isDisabled: isLoading, maxMenuHeight: maxMenuHeight, styles: {
-            control: (base) => (Object.assign(Object.assign({}, base), style)),
-            menu: (base) => (Object.assign(Object.assign({}, base), menuStyle)),
-        }, placeholder: title || "Select an option" }));
+    return (_jsxs("div", { children: [_jsx(ComboBox, Object.assign({ data: data, value: selectedItem, virtual: {
+                    pageSize: props.pageSize || 6,
+                    skip: 0,
+                    total: data.length,
+                } }, props)), _jsx("button", Object.assign({ onClick: handleClear }, { children: "Clear" })), " "] }));
 }
+export default GenericDropdown;

package/_index.test.js

@@ -10,7 +10,7 @@ describe("GenericDropdown", () => {
         // Set initial selectedData to the second item in the data array
         let selectedData = data[1];
         // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
-        let result = render(_jsx(GenericDropdown, { data: data, onChange: () => { }, textField: "name", selectedData: selectedData }));
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => { }, textField: "name", selectedData: selectedData }));
         // Get the input element by its role of "combobox"
         const input = result.getByRole("combobox");
         expect(input.getAttribute("value")).toBe("Option 2");
@@ -56,7 +56,7 @@ describe("GenericDropdown", () => {
         // Set initial selectedData to the second item in the data array
         let selectedData = data[1];
         // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
-        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = e), textField: "name", selectedData: selectedData }));
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = e.value), textField: "name", selectedData: selectedData }));
         // Get the input element by its role of "combobox"
         // Simulate a change event on the input element by setting its target value to "O"
         let input = result.getByRole("combobox");
@@ -72,7 +72,7 @@ describe("GenericDropdown", () => {
         // Set initial selectedData to the second item in the data array
         let selectedId = 1;
         // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
-        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedId = (e === null || e === void 0 ? void 0 : e.id) || null), textField: "name", selectedId: selectedId, idField: "id" }));
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedId = (e === null || e === void 0 ? void 0 : e.value.id) || null), textField: "name", selectedId: selectedId, idField: "id" }));
         // Get the input element by its role of "combobox"
         // Simulate a change event on the input element by setting its target value to "O"
         let input = result.getByRole("combobox");
@@ -88,7 +88,7 @@ describe("GenericDropdown", () => {
         // Set initial selectedData to the second item in the data array
         let selectedData = data[1];
         // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
-        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = e), textField: "name", selectedData: selectedData }));
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = e.value), textField: "name", selectedData: selectedData }));
         let input = result.getByRole("combobox"); // Get the input element by its role of "combobox"
         fireEvent.change(input, { target: { value: "9" } }); //simulate a change event on the input element
         // Query the rendered result for elements with the text "Option 1" and "Option 9", and store the results in variables

package/package.json

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