@scheels-softdev/kendoreact-generics 1.5.2 → 1.6.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.
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export declare function MultiSelectDropdown<T>({ data, selectedData, field, selectEvent, title, }: {
3
+ data: T[];
4
+ selectedData: T[];
5
+ field: keyof T;
6
+ selectEvent: Function;
7
+ title: string;
8
+ }): JSX.Element;
@@ -0,0 +1,63 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import React, { useEffect } from "react";
3
+ import { filterBy } from "@progress/kendo-data-query";
4
+ import { MultiSelect } from "@progress/kendo-react-dropdowns";
5
+ const pageSize = 10;
6
+ //TODO move this component to @scheels-softdev/kendoreact-generics NPM package
7
+ export function MultiSelectDropdown({ data, selectedData, field, selectEvent, title, }) {
8
+ const filteredData = React.useRef(data.slice());
9
+ const [state, setState] = React.useState({
10
+ subsetData: data.slice(0, pageSize),
11
+ skip: 0,
12
+ total: data.length,
13
+ });
14
+ const [filter, setFilter] = React.useState({ field: field.toString(), operator: "contains", ignoreCase: true, value: "" });
15
+ const onFilterChange = (event) => {
16
+ event.filter.ignoreCase = true;
17
+ setFilter(event.filter);
18
+ filteredData.current = filterBy(data.slice(), event.filter);
19
+ const newData = filteredData.current.slice(0, pageSize);
20
+ setState({
21
+ subsetData: newData,
22
+ skip: 0,
23
+ total: filteredData.current.length,
24
+ });
25
+ };
26
+ useEffect(() => {
27
+ if (data.length > 0) {
28
+ filteredData.current = filterBy(data, filter);
29
+ const newData = filteredData.current.slice(0, pageSize);
30
+ setState({
31
+ subsetData: newData,
32
+ skip: 0,
33
+ total: filteredData.current.length,
34
+ });
35
+ }
36
+ }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
37
+ const pageChange = (event) => {
38
+ const skip = event.page.skip;
39
+ const take = event.page.take;
40
+ const newsubsetData = filteredData.current.slice(skip, skip + take);
41
+ setState(Object.assign(Object.assign({}, state), { subsetData: newsubsetData, skip: skip }));
42
+ };
43
+ useEffect(() => {
44
+ if (data.length > 0 && filteredData.current.length === 0) {
45
+ const filter = { field: field.toString(), ignoreCase: true, operator: "contains", value: "" };
46
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
47
+ filter.ignoreCase = true;
48
+ filteredData.current = filterBy(data.slice(), filter);
49
+ const newData = filteredData.current.slice(0, pageSize);
50
+ setState({
51
+ subsetData: newData,
52
+ skip: 0,
53
+ total: filteredData.current.length,
54
+ });
55
+ }
56
+ // I disabled on purpose otherwise we will create a redundant update stack if we track state
57
+ }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
58
+ return (_jsx(MultiSelect, { label: title, dataItemKey: field.toString(), textField: field.toString(), data: state.subsetData, value: selectedData, virtual: {
59
+ total: state.total,
60
+ pageSize: pageSize,
61
+ skip: state.skip,
62
+ }, onChange: (e) => selectEvent(e.value), onPageChange: pageChange, filterable: true, filter: filter.value, onFilterChange: onFilterChange, autoClose: false, style: { width: "100%" } }));
63
+ }
package/index.d.ts CHANGED
@@ -7,3 +7,4 @@ export { FilterCellDropdown } from "./FilterCellDropdown";
7
7
  export { ToolbarButton } from "./Toolbar";
8
8
  export { GenericDropdown } from "./GenericDropdown";
9
9
  export { GridChangeEvent, CommonProps } from "./PropTypes";
10
+ export { MultiSelectDropdown } from "./MultiSelectDropdown";
package/index.js CHANGED
@@ -6,3 +6,4 @@ export { CommandCellSwitch } from "./commandCell/CommandCellSwitch";
6
6
  export { FilterCellDropdown } from "./FilterCellDropdown";
7
7
  export { ToolbarButton } from "./Toolbar";
8
8
  export { GenericDropdown } from "./GenericDropdown";
9
+ export { MultiSelectDropdown } from "./MultiSelectDropdown";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scheels-softdev/kendoreact-generics",
3
- "version": "1.5.2",
3
+ "version": "1.6.1",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",