@scheels-softdev/kendoreact-generics 1.6.6 → 1.6.8
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.js +1 -6
- package/MultiSelectDropdown.d.ts +5 -3
- package/MultiSelectDropdown.js +30 -39
- package/Utility.d.ts +1 -0
- package/Utility.js +6 -0
- package/package.json +1 -1
package/GenericDropdown.js
CHANGED
@@ -2,12 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { ComboBox } from "@progress/kendo-react-dropdowns";
|
3
3
|
import { filterBy } from "@progress/kendo-data-query";
|
4
4
|
import { useEffect, useRef, useState } from "react";
|
5
|
-
|
6
|
-
const getTextValue = (dataItem, fields, separator) => {
|
7
|
-
let textValue = "";
|
8
|
-
fields.forEach((field, index) => (textValue += index > 0 ? (separator ? separator : " ") + dataItem[field] : dataItem[field]));
|
9
|
-
return textValue;
|
10
|
-
};
|
5
|
+
import { getTextValue } from "./Utility";
|
11
6
|
// component that renders a dropdown with a search filter
|
12
7
|
export function GenericDropdown({ data, // array of data objects
|
13
8
|
selectedId, // id of the selected data object
|
package/MultiSelectDropdown.d.ts
CHANGED
@@ -1,7 +1,9 @@
|
|
1
|
-
export declare function MultiSelectDropdown<T>({ data, selectedData,
|
1
|
+
export declare function MultiSelectDropdown<T>({ data, selectedData, textFields, selectEvent, title, separator, idField, }: {
|
2
2
|
data: T[];
|
3
|
-
selectedData:
|
4
|
-
|
3
|
+
selectedData: number[];
|
4
|
+
textFields: (keyof T)[];
|
5
5
|
selectEvent: Function;
|
6
6
|
title: string;
|
7
|
+
separator?: string;
|
8
|
+
idField?: string;
|
7
9
|
}): import("react/jsx-runtime").JSX.Element;
|
package/MultiSelectDropdown.js
CHANGED
@@ -1,20 +1,30 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
3
3
|
import { filterBy } from "@progress/kendo-data-query";
|
4
4
|
import { MultiSelect } from "@progress/kendo-react-dropdowns";
|
5
|
+
import { getTextValue } from "./Utility";
|
5
6
|
const pageSize = 10;
|
6
|
-
export function MultiSelectDropdown({ data, selectedData,
|
7
|
-
|
8
|
-
const
|
9
|
-
|
7
|
+
export function MultiSelectDropdown({ data, selectedData, textFields, selectEvent, title, separator, idField, }) {
|
8
|
+
//local state
|
9
|
+
const pageSize = 8;
|
10
|
+
const [dataList, setDataList] = useState(data.map((x) => {
|
11
|
+
return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
|
12
|
+
}));
|
13
|
+
const [state, setState] = useState({
|
10
14
|
skip: 0,
|
11
|
-
total:
|
15
|
+
total: dataList.length,
|
16
|
+
subsetData: dataList.slice(0, pageSize),
|
12
17
|
});
|
13
|
-
|
18
|
+
//external function variables
|
19
|
+
const filteredData = useRef(dataList.slice());
|
20
|
+
//function creation
|
21
|
+
// function to handle filter changes
|
14
22
|
const onFilterChange = (event) => {
|
15
|
-
|
16
|
-
|
17
|
-
|
23
|
+
var _a;
|
24
|
+
if ((_a = event.filter.value) === null || _a === void 0 ? void 0 : _a.length)
|
25
|
+
filteredData.current = filterBy(dataList.slice(), event.filter);
|
26
|
+
else
|
27
|
+
filteredData.current = dataList;
|
18
28
|
const newData = filteredData.current.slice(0, pageSize);
|
19
29
|
setState({
|
20
30
|
subsetData: newData,
|
@@ -22,41 +32,22 @@ export function MultiSelectDropdown({ data, selectedData, field, selectEvent, ti
|
|
22
32
|
total: filteredData.current.length,
|
23
33
|
});
|
24
34
|
};
|
25
|
-
|
26
|
-
if (data.length > 0) {
|
27
|
-
filteredData.current = filterBy(data, filter);
|
28
|
-
const newData = filteredData.current.slice(0, pageSize);
|
29
|
-
setState({
|
30
|
-
subsetData: newData,
|
31
|
-
skip: 0,
|
32
|
-
total: filteredData.current.length,
|
33
|
-
});
|
34
|
-
}
|
35
|
-
}, [data]); // eslint-disable-line react-hooks/exhaustive-deps
|
35
|
+
// function to handle page changes for virtualization
|
36
36
|
const pageChange = (event) => {
|
37
37
|
const skip = event.page.skip;
|
38
38
|
const take = event.page.take;
|
39
|
-
const
|
40
|
-
setState(Object.assign(Object.assign({}, state), { subsetData:
|
39
|
+
const newSubsetData = filteredData.current.slice(skip, skip + take);
|
40
|
+
setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
|
41
41
|
};
|
42
|
+
//change event listeners
|
42
43
|
useEffect(() => {
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
const newData = filteredData.current.slice(0, pageSize);
|
49
|
-
setState({
|
50
|
-
subsetData: newData,
|
51
|
-
skip: 0,
|
52
|
-
total: filteredData.current.length,
|
53
|
-
});
|
54
|
-
}
|
55
|
-
// I disabled on purpose otherwise we will create a redundant update stack if we track state
|
56
|
-
}, [data]); // eslint-disable-line react-hooks/exhaustive-deps
|
57
|
-
return (_jsx(MultiSelect, { label: title, dataItemKey: field.toString(), textField: field.toString(), data: state.subsetData, value: selectedData, virtual: {
|
44
|
+
setDataList(data.map((x) => {
|
45
|
+
return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
|
46
|
+
}));
|
47
|
+
}, [data, textFields, separator]);
|
48
|
+
return (_jsx(MultiSelect, { label: title, dataItemKey: textFields.toString(), data: state.subsetData, value: dataList.filter((item) => selectedData.filter((x) => item[idField || "id"] === x)), virtual: {
|
58
49
|
total: state.total,
|
59
50
|
pageSize: pageSize,
|
60
51
|
skip: state.skip,
|
61
|
-
}, onChange: (e) => selectEvent(e.value), onPageChange: pageChange, filterable: true,
|
52
|
+
}, onChange: (e) => selectEvent(e.value), onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, autoClose: false, style: { width: "100%" } }));
|
62
53
|
}
|
package/Utility.d.ts
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
export declare const getTextValue: (dataItem: any, fields: string[], separator?: string) => string;
|
package/Utility.js
ADDED
@@ -0,0 +1,6 @@
|
|
1
|
+
// function to concatenate text values from dataItem using specified fields and separator
|
2
|
+
export const getTextValue = (dataItem, fields, separator) => {
|
3
|
+
let textValue = "";
|
4
|
+
fields.forEach((field, index) => (textValue += index > 0 ? (separator ? separator : " ") + dataItem[field] : dataItem[field]));
|
5
|
+
return textValue;
|
6
|
+
};
|