@scheels-softdev/kendoreact-generics 1.6.7 → 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.
@@ -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
- // function to concatenate text values from dataItem using specified fields and separator
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
@@ -1,7 +1,9 @@
1
- export declare function MultiSelectDropdown<T>({ data, selectedData, field, selectEvent, title, }: {
1
+ export declare function MultiSelectDropdown<T>({ data, selectedData, textFields, selectEvent, title, separator, idField, }: {
2
2
  data: T[];
3
- selectedData: T[];
4
- field: keyof T;
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;
@@ -1,20 +1,30 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import React, { useEffect } from "react";
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, field, selectEvent, title, }) {
7
- const filteredData = React.useRef(data.slice());
8
- const [state, setState] = React.useState({
9
- subsetData: data.slice(0, pageSize),
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: data.length,
15
+ total: dataList.length,
16
+ subsetData: dataList.slice(0, pageSize),
12
17
  });
13
- const [filter, setFilter] = React.useState({ field: field.toString(), operator: "contains", ignoreCase: true, value: "" });
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
- event.filter.ignoreCase = true;
16
- setFilter(event.filter);
17
- filteredData.current = filterBy(data.slice(), event.filter);
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
- useEffect(() => {
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 newsubsetData = filteredData.current.slice(skip, skip + take);
40
- setState(Object.assign(Object.assign({}, state), { subsetData: newsubsetData, skip: skip }));
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
- if (data.length > 0 && filteredData.current.length === 0) {
44
- const filter = { field: field.toString(), ignoreCase: true, operator: "contains", value: "" };
45
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
46
- filter.ignoreCase = true;
47
- filteredData.current = filterBy(data.slice(), filter);
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, filter: filter.value, onFilterChange: onFilterChange, autoClose: false, style: { width: "100%" } }));
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
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scheels-softdev/kendoreact-generics",
3
- "version": "1.6.7",
3
+ "version": "1.6.8",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",