@scheels-softdev/kendoreact-generics 3.0.9 → 4.0.0

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.
@@ -1,16 +1,9 @@
1
- import React from "react";
2
- type GenericDDProps<T> = {
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
- onChange: (selectedItem: T | null) => void;
7
- textField: keyof T;
5
+ selectedId?: number;
8
6
  idField?: keyof T;
9
- style?: React.CSSProperties;
10
- isLoading?: boolean;
11
- title?: string;
12
- maxMenuHeight?: number;
13
- menuStyle?: React.CSSProperties;
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
+ }
8
+ export declare function GenericDropdown<T>({ data, selectedData, selectedId, idField, ...props }: GenericDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
9
+ export default GenericDropdown;
@@ -1,25 +1,34 @@
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
+ };
1
12
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import Select from "react-select";
3
- export function GenericDropdown({ data, selectedId, selectedData, onChange, textField, idField, style, isLoading, title, maxMenuHeight, menuStyle, }) {
4
- var _a, _b;
5
- const options = data.map((item) => ({
6
- value: item,
7
- label: item[textField].toString(),
8
- }));
9
- const selectedOption = selectedId
10
- ? (_a = options.find((option) => option.value.id === (selectedId === null || selectedId === void 0 ? void 0 : selectedId.toString()))) !== null && _a !== void 0 ? _a : null
11
- : (_b = options.find((option) => option.value === selectedData)) !== null && _b !== void 0 ? _b : null;
12
- const handleChange = (selectedOption) => {
13
- if (selectedOption) {
14
- const selectedItem = idField ? data.find((item) => item[idField].toString() === selectedOption.value.id) : selectedOption.value;
15
- onChange(selectedItem !== null && selectedItem !== void 0 ? selectedItem : null);
13
+ import React from "react";
14
+ import { ComboBox } from "@progress/kendo-react-dropdowns";
15
+ // Create the GenericDropdown component
16
+ export function GenericDropdown(_a) {
17
+ var { data, selectedData, selectedId, idField } = _a, props = __rest(_a, ["data", "selectedData", "selectedId", "idField"]);
18
+ // Determine the actual selected item based on id or direct data
19
+ const selectedItem = React.useMemo(() => {
20
+ if (selectedData) {
21
+ return selectedData;
16
22
  }
17
- else {
18
- onChange(null);
23
+ if (selectedId !== undefined && idField) {
24
+ return data.find((item) => item[idField] === selectedId);
19
25
  }
20
- };
21
- return (_jsx(Select, { options: options, onChange: handleChange, value: selectedOption, isLoading: isLoading, isDisabled: isLoading, maxMenuHeight: maxMenuHeight, styles: {
22
- control: (base) => (Object.assign(Object.assign({}, base), style)),
23
- menu: (base) => (Object.assign(Object.assign({}, base), menuStyle)),
24
- }, placeholder: title || "Select an option" }));
26
+ return undefined;
27
+ }, [selectedId, idField, selectedData, data]);
28
+ return (_jsx(ComboBox, Object.assign({ data: data, value: selectedItem, virtual: {
29
+ pageSize: 20,
30
+ skip: 0,
31
+ total: data.length,
32
+ } }, props)));
25
33
  }
34
+ 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
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scheels-softdev/kendoreact-generics",
3
- "version": "3.0.9",
3
+ "version": "4.0.0",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "test": "jest",