@scheels-softdev/kendoreact-generics 3.0.9 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/GenericDropdown.d.ts +8 -13
- package/GenericDropdown.js +38 -20
- package/_index.test.js +4 -4
- package/package.json +1 -1
package/GenericDropdown.d.ts
CHANGED
@@ -1,16 +1,11 @@
|
|
1
|
-
import
|
2
|
-
|
1
|
+
import { ComboBoxProps } from "@progress/kendo-react-dropdowns";
|
2
|
+
interface GenericDropdownProps<T> extends ComboBoxProps {
|
3
3
|
data: T[];
|
4
|
-
selectedId?: string | number;
|
5
4
|
selectedData?: T;
|
6
|
-
|
7
|
-
textField: keyof T;
|
5
|
+
selectedId?: number;
|
8
6
|
idField?: keyof T;
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
};
|
15
|
-
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;
|
16
|
-
export {};
|
7
|
+
pageSize?: number;
|
8
|
+
onClear?: () => void;
|
9
|
+
}
|
10
|
+
export declare function GenericDropdown<T>({ data, selectedData, selectedId, idField, onClear, ...props }: GenericDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
|
11
|
+
export default GenericDropdown;
|
package/GenericDropdown.js
CHANGED
@@ -1,25 +1,43 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
2
|
+
var t = {};
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4
|
+
t[p] = s[p];
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8
|
+
t[p[i]] = s[p[i]];
|
9
|
+
}
|
10
|
+
return t;
|
11
|
+
};
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
13
|
+
import { useState, useEffect } from "react";
|
14
|
+
import { ComboBox } from "@progress/kendo-react-dropdowns";
|
15
|
+
export function GenericDropdown(_a) {
|
16
|
+
var { data, selectedData, selectedId, idField, onClear } = _a, props = __rest(_a, ["data", "selectedData", "selectedId", "idField", "onClear"]);
|
17
|
+
const [selectedItem, setSelectedItem] = useState(null);
|
18
|
+
// Effect to update the selectedItem when external ids or data change
|
19
|
+
useEffect(() => {
|
20
|
+
if (selectedData) {
|
21
|
+
setSelectedItem(selectedData);
|
22
|
+
}
|
23
|
+
else if (selectedId !== undefined && idField) {
|
24
|
+
const foundItem = data.find((item) => item[idField] === selectedId);
|
25
|
+
setSelectedItem(foundItem || null);
|
16
26
|
}
|
17
27
|
else {
|
18
|
-
|
28
|
+
setSelectedItem(null);
|
19
29
|
}
|
30
|
+
}, [selectedData, selectedId, idField, data]);
|
31
|
+
// Handle clearing the selection
|
32
|
+
const handleClear = () => {
|
33
|
+
setSelectedItem(null);
|
34
|
+
if (onClear)
|
35
|
+
onClear();
|
20
36
|
};
|
21
|
-
return (
|
22
|
-
|
23
|
-
|
24
|
-
|
37
|
+
return (_jsxs("div", { children: [_jsx(ComboBox, Object.assign({ data: data, value: selectedItem, virtual: {
|
38
|
+
pageSize: props.pageSize || 6,
|
39
|
+
skip: 0,
|
40
|
+
total: data.length,
|
41
|
+
} }, props)), _jsx("button", Object.assign({ onClick: handleClear }, { children: "Clear" })), " "] }));
|
25
42
|
}
|
43
|
+
export default GenericDropdown;
|
package/_index.test.js
CHANGED
@@ -10,7 +10,7 @@ describe("GenericDropdown", () => {
|
|
10
10
|
// Set initial selectedData to the second item in the data array
|
11
11
|
let selectedData = data[1];
|
12
12
|
// Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
|
13
|
-
let result = render(_jsx(GenericDropdown, { data: data, onChange: () => { }, textField: "name", selectedData: selectedData }));
|
13
|
+
let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => { }, textField: "name", selectedData: selectedData }));
|
14
14
|
// Get the input element by its role of "combobox"
|
15
15
|
const input = result.getByRole("combobox");
|
16
16
|
expect(input.getAttribute("value")).toBe("Option 2");
|
@@ -56,7 +56,7 @@ describe("GenericDropdown", () => {
|
|
56
56
|
// Set initial selectedData to the second item in the data array
|
57
57
|
let selectedData = data[1];
|
58
58
|
// Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
|
59
|
-
let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = e), textField: "name", selectedData: selectedData }));
|
59
|
+
let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = e.value), textField: "name", selectedData: selectedData }));
|
60
60
|
// Get the input element by its role of "combobox"
|
61
61
|
// Simulate a change event on the input element by setting its target value to "O"
|
62
62
|
let input = result.getByRole("combobox");
|
@@ -72,7 +72,7 @@ describe("GenericDropdown", () => {
|
|
72
72
|
// Set initial selectedData to the second item in the data array
|
73
73
|
let selectedId = 1;
|
74
74
|
// Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
|
75
|
-
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" }));
|
75
|
+
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" }));
|
76
76
|
// Get the input element by its role of "combobox"
|
77
77
|
// Simulate a change event on the input element by setting its target value to "O"
|
78
78
|
let input = result.getByRole("combobox");
|
@@ -88,7 +88,7 @@ describe("GenericDropdown", () => {
|
|
88
88
|
// Set initial selectedData to the second item in the data array
|
89
89
|
let selectedData = data[1];
|
90
90
|
// Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
|
91
|
-
let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = e), textField: "name", selectedData: selectedData }));
|
91
|
+
let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = e.value), textField: "name", selectedData: selectedData }));
|
92
92
|
let input = result.getByRole("combobox"); // Get the input element by its role of "combobox"
|
93
93
|
fireEvent.change(input, { target: { value: "9" } }); //simulate a change event on the input element
|
94
94
|
// Query the rendered result for elements with the text "Option 1" and "Option 9", and store the results in variables
|