@scheels-softdev/kendoreact-generics 2.2.1 → 2.2.3
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/FilterCellDropdown.js
CHANGED
@@ -28,5 +28,5 @@ export function FilterCellDropdown(props) {
|
|
28
28
|
});
|
29
29
|
};
|
30
30
|
// Render a div containing a GenericDropdownWithSearch component and a Clear button
|
31
|
-
return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data,
|
31
|
+
return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data, onChange: onChange, selectedId: props.value, textFields: [...props.textFields], separator: props.separator }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
|
32
32
|
}
|
package/GenericDropdown.d.ts
CHANGED
@@ -1,19 +1,30 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
1
|
+
import { CSSProperties } from "react";
|
2
|
+
/**
|
3
|
+
* JSX Component for displaying selected images in a fullscreen Modal
|
4
|
+
* @param {object} props
|
5
|
+
@param {T[]} props.data array of data objects
|
6
|
+
@param {number?} props.selectedId id of the selected data object
|
7
|
+
@param {T?} props.selectedData if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
|
8
|
+
@param {Function} props.onChange function to call when the selected value changes
|
9
|
+
@param {(keyof T)[]?} props.textFields array of field names to use for text values
|
10
|
+
@param {string?} props.separator optional separator to use for concatenating text values
|
11
|
+
@param {object?} props.disabled boolean to disable the dropdown
|
12
|
+
@param {keyof T?} props.idField if the id field to look at isn't 'id', what is it?
|
13
|
+
@param {string?} props.title the label of the dropdown
|
14
|
+
@param {boolean?} props.showClearButton set to false if you want to hide clear button
|
15
|
+
@param {CSSProperties?} props.style the CSS Properties you want to use. It is generally recommended to do styling in your App.css file but if necessary this prop is available to you
|
16
|
+
* @returns
|
17
|
+
*/
|
18
|
+
export declare function GenericDropdown<T>({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, }: {
|
9
19
|
data: T[];
|
10
20
|
selectedId?: number;
|
11
21
|
selectedData?: T;
|
12
|
-
|
22
|
+
onChange: Function;
|
13
23
|
textFields: (keyof T)[];
|
14
24
|
separator?: string;
|
15
25
|
idField?: keyof T;
|
16
26
|
disabled?: boolean;
|
17
27
|
title?: string;
|
18
|
-
|
28
|
+
hideClearButton?: boolean;
|
29
|
+
style?: CSSProperties;
|
19
30
|
}): import("react/jsx-runtime").JSX.Element;
|
package/GenericDropdown.js
CHANGED
@@ -3,15 +3,26 @@ 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
5
|
import { getTextValue } from "./Utility";
|
6
|
+
//TODO add a style property
|
7
|
+
//TODO add metadata documentation
|
6
8
|
// component that renders a dropdown with a search filter
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
9
|
+
/**
|
10
|
+
* JSX Component for displaying selected images in a fullscreen Modal
|
11
|
+
* @param {object} props
|
12
|
+
@param {T[]} props.data array of data objects
|
13
|
+
@param {number?} props.selectedId id of the selected data object
|
14
|
+
@param {T?} props.selectedData if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
|
15
|
+
@param {Function} props.onChange function to call when the selected value changes
|
16
|
+
@param {(keyof T)[]?} props.textFields array of field names to use for text values
|
17
|
+
@param {string?} props.separator optional separator to use for concatenating text values
|
18
|
+
@param {object?} props.disabled boolean to disable the dropdown
|
19
|
+
@param {keyof T?} props.idField if the id field to look at isn't 'id', what is it?
|
20
|
+
@param {string?} props.title the label of the dropdown
|
21
|
+
@param {boolean?} props.showClearButton set to false if you want to hide clear button
|
22
|
+
@param {CSSProperties?} props.style the CSS Properties you want to use. It is generally recommended to do styling in your App.css file but if necessary this prop is available to you
|
23
|
+
* @returns
|
24
|
+
*/
|
25
|
+
export function GenericDropdown({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, }) {
|
15
26
|
if (selectedId !== undefined && selectedData !== undefined) {
|
16
27
|
throw new Error("You cannot provide both selectedData and selectedId to GenericDropdown.");
|
17
28
|
}
|
@@ -70,12 +81,12 @@ idField, title, showClearButton, }) {
|
|
70
81
|
console.log(returnVal);
|
71
82
|
return returnVal;
|
72
83
|
};
|
73
|
-
return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: _jsx(ComboBox, { style:
|
84
|
+
return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: _jsx(ComboBox, { style: style, label: title, disabled: disabled, data: state.subsetData, textField: "textValue", virtual: {
|
74
85
|
// enable virtualization for large datasets
|
75
86
|
total: state.total,
|
76
87
|
pageSize: pageSize,
|
77
88
|
skip: state.skip,
|
78
89
|
}, suggest: true, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
|
79
90
|
height: "210px",
|
80
|
-
}, onChange: (e) =>
|
91
|
+
}, onChange: (e) => onChange(e), onBlur: (e) => e.nativeEvent.preventDefault(), clearButton: !hideClearButton, value: !selectedId && !selectedData ? null : findByIndex(selectedId, idField, dataList) || findByValue(selectedData, dataList) || null }) })));
|
81
92
|
}
|
package/README.md
CHANGED
@@ -35,7 +35,7 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
35
35
|
data: T[];
|
36
36
|
selectedId: number;
|
37
37
|
selectedData?: T;
|
38
|
-
|
38
|
+
onChange: event: (ComboBoxChangeEvent) => void;
|
39
39
|
textFields: (keyof T)[];
|
40
40
|
separator?: string;
|
41
41
|
idField?: keyof T;
|
@@ -47,7 +47,7 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
47
47
|
|
48
48
|
- Array of T. the Definition of what T is matters for the "textFields" prop
|
49
49
|
|
50
|
-
####
|
50
|
+
#### onChange
|
51
51
|
|
52
52
|
- Event passed is a ComboBoxChangeEvent (from kendo-react-dropdowns)
|
53
53
|
|
@@ -171,7 +171,7 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
171
171
|
data: T[];
|
172
172
|
selectedId: number;
|
173
173
|
textFields: (keyof T)[];
|
174
|
-
|
174
|
+
onChange: (e: ComboBoxChangeEvent) => void;
|
175
175
|
separator?: string;
|
176
176
|
checkEditField?: boolean;
|
177
177
|
isEditing?: boolean;
|
@@ -189,7 +189,7 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
189
189
|
- This is defined as (keyof T)[].
|
190
190
|
- For example, if my dropdown is fed a list of employee Statuses, I could feed it a "StatusName" field (assuming my Status objects have that key) and it could display something like "Active", "Terminated", or "On Leave"
|
191
191
|
|
192
|
-
####
|
192
|
+
#### onChange
|
193
193
|
|
194
194
|
- Pass what you want the event to do. the event you will be passed is a ComboBoxChangeEvent. The relevant information you're likely to need is stored in e.target.value
|
195
195
|
|
@@ -288,7 +288,7 @@ cost: number
|
|
288
288
|
data: T[]
|
289
289
|
selectedData: T
|
290
290
|
textFields: (keyof T)[]
|
291
|
-
|
291
|
+
onChange: (e: ComboBoxChangeEvent) => void
|
292
292
|
separator?: string
|
293
293
|
checkEditField?: boolean
|
294
294
|
isEditing?: boolean
|
@@ -307,7 +307,7 @@ showClearButton?: boolean
|
|
307
307
|
- This is defined as (keyof T)[].
|
308
308
|
- For example, if my dropdown is fed a list of employee objects with a `firstName`, `lastName`, and `id` key, I would pass `["firstName","lastName"]` to see "John Williams", or `["firstName","lastName","id"]` to see "John Doe 19382032141".
|
309
309
|
|
310
|
-
####
|
310
|
+
#### onChange
|
311
311
|
|
312
312
|
- Pass what you want the event to do. The event you will be passed is a ComboBoxChangeEvent. The relevant information you're likely to need is stored in `e.target.value`.
|
313
313
|
|
@@ -3,7 +3,7 @@ export declare function CommandCellDDWithoutId<T>(props: {
|
|
3
3
|
data: T[];
|
4
4
|
selectedData: T;
|
5
5
|
textFields: (keyof T)[];
|
6
|
-
|
6
|
+
onChange: (e: ComboBoxChangeEvent) => void;
|
7
7
|
separator?: string;
|
8
8
|
checkEditField?: boolean;
|
9
9
|
isEditing?: boolean;
|
@@ -3,7 +3,7 @@ export declare function CommandCellDropdown<T>(props: {
|
|
3
3
|
data: T[];
|
4
4
|
selectedId: number;
|
5
5
|
textFields: (keyof T)[];
|
6
|
-
|
6
|
+
onChange: (e: ComboBoxChangeEvent) => void;
|
7
7
|
separator?: string;
|
8
8
|
checkEditField?: boolean;
|
9
9
|
isEditing?: boolean;
|