@scheels-softdev/kendoreact-generics 2.5.6 → 2.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.
- package/MultiSelectDropdown.d.ts +2 -2
- package/MultiSelectDropdown.js +2 -2
- package/README.md +39 -206
- package/package.json +1 -1
package/MultiSelectDropdown.d.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
export declare function MultiSelectDropdown<T>({ data, selectedData, textField,
|
1
|
+
export declare function MultiSelectDropdown<T>({ data, selectedData, textField, onSelect, title, limit, }: {
|
2
2
|
/** The data array for the dropdown options. */
|
3
3
|
data: T[];
|
4
4
|
/** The array of selected data items. */
|
@@ -6,7 +6,7 @@ export declare function MultiSelectDropdown<T>({ data, selectedData, textField,
|
|
6
6
|
/** The field names to use for text values in the dropdown. */
|
7
7
|
textField: keyof T;
|
8
8
|
/** The function to call when an item is selected or deselected. */
|
9
|
-
|
9
|
+
onSelect: Function;
|
10
10
|
/** The optional title of the dropdown. */
|
11
11
|
title?: string;
|
12
12
|
/** The optional limit of the maximum number of selected items. */
|
package/MultiSelectDropdown.js
CHANGED
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, useState } from "react";
|
3
3
|
import { filterBy } from "@progress/kendo-data-query";
|
4
4
|
import { MultiSelect } from "@progress/kendo-react-dropdowns";
|
5
|
-
export function MultiSelectDropdown({ data, selectedData, textField,
|
5
|
+
export function MultiSelectDropdown({ data, selectedData, textField, onSelect, title, limit, }) {
|
6
6
|
//local state
|
7
7
|
const pageSize = 8;
|
8
8
|
const [state, setState] = useState({
|
@@ -40,5 +40,5 @@ export function MultiSelectDropdown({ data, selectedData, textField, selectEvent
|
|
40
40
|
skip: state.skip,
|
41
41
|
}, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
|
42
42
|
height: "210px",
|
43
|
-
}, onChange: (e) =>
|
43
|
+
}, onChange: (e) => onSelect(limit && e.value.length ? e.value.slice(0, limit) : e.value), autoClose: false, value: selectedData }) })));
|
44
44
|
}
|
package/README.md
CHANGED
@@ -36,56 +36,59 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
36
36
|
selectedId: number;
|
37
37
|
selectedData?: T;
|
38
38
|
onChange: event: (ComboBoxChangeEvent) => void;
|
39
|
-
|
40
|
-
separator?: string;
|
41
|
-
idField?: keyof T;
|
39
|
+
textField: keyof T;
|
42
40
|
disabled?: boolean;
|
41
|
+
idField?: keyof T;
|
43
42
|
title?: string;
|
44
|
-
|
43
|
+
hideClearButton?: boolean;
|
44
|
+
style?: React.CSSProperties;
|
45
|
+
isLoading?: boolean;
|
45
46
|
|
46
47
|
#### data
|
47
48
|
|
48
49
|
- Array of T. the Definition of what T is matters for the "textFields" prop
|
49
50
|
|
50
|
-
####
|
51
|
-
|
52
|
-
- Event passed is a ComboBoxChangeEvent (from kendo-react-dropdowns)
|
53
|
-
|
54
|
-
#### selectedId
|
51
|
+
#### selectedId OR selectedData
|
55
52
|
|
56
|
-
-
|
53
|
+
- selectedId is the unique identifier of the item selected. By default the dropdown will assume your item has an "id" property. if it doesn't have an Id but has a unique identifier, see optional keys (idField)
|
54
|
+
- selectedData is a reference to the full selected object.
|
55
|
+
- Only one of these 2 is needed. it will just use selectedId if both are provided
|
57
56
|
|
58
|
-
####
|
57
|
+
#### onChange
|
59
58
|
|
60
|
-
-
|
59
|
+
- Event passed is a ComboBoxChangeEvent (from kendo-react-dropdowns)
|
61
60
|
|
62
|
-
####
|
61
|
+
#### textField
|
63
62
|
|
64
|
-
-
|
65
|
-
- For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass
|
63
|
+
- The field of each object to actually display
|
64
|
+
- For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass "firstName" to see "John" or "lastName" to see "Doe".
|
65
|
+
If you need to include multiple fields of the object, see https://www.npmjs.com/package/@scheels-softdev/frontend-utility-functions?activeTab=readme
|
66
66
|
|
67
|
-
####
|
67
|
+
#### disabled (optional)
|
68
68
|
|
69
|
-
-
|
70
|
-
- For example, if we want our employee's names separated by a comma, we would pass ", " here
|
69
|
+
- If you want to conditionally disable the dropdown you can do that here
|
71
70
|
|
72
71
|
#### idField (optional)
|
73
72
|
|
74
73
|
- IdField is a keyof T, much like textFields. while textFields determines what's displayed in the dropdown, idField overrides what field of each object the dropdown looks at to compare against the selectedId prop
|
75
74
|
- For example, if our employee's id field is employeeId instead of just id, we would pass "employeeId" here
|
76
75
|
|
77
|
-
#### disabled (optional)
|
78
|
-
|
79
|
-
- If you want to conditionally disable the dropdown you can do that here
|
80
|
-
|
81
76
|
#### title (optional)
|
82
77
|
|
83
78
|
- The label that appears in your multiselect when there aren't any options selected, or just above the multiselect when there are
|
84
79
|
- For example, if we want to use it to send a letter to an employee, we would pass "Selected Employee" here
|
85
80
|
|
86
|
-
####
|
81
|
+
#### hideClearButton (optional)
|
82
|
+
|
83
|
+
- A boolean indicating whether the clear button should be hidden. by default it will be shown
|
84
|
+
|
85
|
+
#### style (optional)
|
87
86
|
|
88
|
-
-
|
87
|
+
- An override to the default styling that ships with kendo
|
88
|
+
|
89
|
+
#### isLoading (optional)
|
90
|
+
|
91
|
+
- A boolean indicating whether your data is still loading or not
|
89
92
|
|
90
93
|
---
|
91
94
|
|
@@ -95,10 +98,9 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
95
98
|
|
96
99
|
data: T[];
|
97
100
|
selectedData: T[];
|
98
|
-
|
99
|
-
|
101
|
+
textField: keyof T;
|
102
|
+
onSelect: Function;
|
100
103
|
title?: string;
|
101
|
-
separator?: string;
|
102
104
|
limit?: number;
|
103
105
|
|
104
106
|
#### data
|
@@ -109,12 +111,13 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
109
111
|
|
110
112
|
- The id of the item selected. By default the dropdown will assume your item has an "id" property. if it doesn't, see optional parameters
|
111
113
|
|
112
|
-
####
|
114
|
+
#### textField
|
113
115
|
|
114
|
-
-
|
115
|
-
- For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass
|
116
|
+
- The field of each object to actually display
|
117
|
+
- For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass "firstName" to see "John" or "lastName" to see "Doe".
|
118
|
+
If you need to include multiple fields of the object, see https://www.npmjs.com/package/@scheels-softdev/frontend-utility-functions?activeTab=readme
|
116
119
|
|
117
|
-
####
|
120
|
+
#### onSelect
|
118
121
|
|
119
122
|
- "Event" you're given should just be your new array of selected Items
|
120
123
|
|
@@ -123,11 +126,6 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
123
126
|
- The label that appears in your multiselect when there aren't any options selected, or just above the multiselect when there are
|
124
127
|
- For example, if we want to use it to send work anniversary letters to multiple employees, we would pass "Selected Employees" here
|
125
128
|
|
126
|
-
#### separator (optional)
|
127
|
-
|
128
|
-
- This defines what your text fields are separated by. by default, it is assumed you only want a space between them. Use this prop if you want to change this
|
129
|
-
- For example, if we want our employee's names separated by a comma, we would pass ", " here
|
130
|
-
|
131
129
|
#### limit (optional)
|
132
130
|
|
133
131
|
- The upper limit of how many items the user can select at once.
|
@@ -141,7 +139,7 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
141
139
|
|
142
140
|
{...GridFilterCellProps} (from @progress/kendo-react-grid)
|
143
141
|
data: T[];
|
144
|
-
|
142
|
+
textField: keyof T;
|
145
143
|
separator?: string;
|
146
144
|
|
147
145
|
#### {...FilterCellProps}
|
@@ -152,10 +150,11 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
152
150
|
|
153
151
|
- Array of T. What you want to display in the dropdown. the Definition of what T is matters for the "textFields" prop
|
154
152
|
|
155
|
-
####
|
153
|
+
#### textField
|
156
154
|
|
157
|
-
-
|
158
|
-
- For example, if my dropdown is fed a list of employee
|
155
|
+
- The field of each object to actually display
|
156
|
+
- For example, if my dropdown is fed a list of employee objects with a firstName, lastName, and id key, I would pass "firstName" to see "John" or "lastName" to see "Doe".
|
157
|
+
If you need to include multiple fields of the object, see https://www.npmjs.com/package/@scheels-softdev/frontend-utility-functions?activeTab=readme
|
159
158
|
|
160
159
|
#### separator (optional)
|
161
160
|
|
@@ -164,172 +163,6 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
164
163
|
|
165
164
|
---
|
166
165
|
|
167
|
-
## Command Cell Dropdown
|
168
|
-
|
169
|
-
### Props
|
170
|
-
|
171
|
-
data: T[];
|
172
|
-
selectedId: number;
|
173
|
-
textFields: (keyof T)[];
|
174
|
-
onChange: (e: ComboBoxChangeEvent) => void;
|
175
|
-
separator?: string;
|
176
|
-
checkEditField?: boolean;
|
177
|
-
isEditing?: boolean;
|
178
|
-
|
179
|
-
#### data
|
180
|
-
|
181
|
-
- Array of T. What you want to display in the dropdown. the Definition of what T is matters for the "textFields" prop
|
182
|
-
|
183
|
-
#### selectedId
|
184
|
-
|
185
|
-
- all of the default props that are passed from kendo grid when trying to override the filter cell
|
186
|
-
|
187
|
-
#### textFields
|
188
|
-
|
189
|
-
- This is defined as (keyof T)[].
|
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
|
-
|
192
|
-
#### onChange
|
193
|
-
|
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
|
-
|
196
|
-
#### separator (optional)
|
197
|
-
|
198
|
-
- This defines what your text fields are separated by. by default, it is assumed you only want a space between them. Use this prop if you want to change this
|
199
|
-
- For example, if some of our associates only know the status IDs for Active, Terminated, or On Leave and we want to display them side by side, we might want to add a "dash" seporator. to do this we would pass " - " here
|
200
|
-
|
201
|
-
#### checkEditField (optional)
|
202
|
-
|
203
|
-
- This is for optional conditional rendering. If this is true, it will only render a dropdown if isEditing is true. if this is false, it will always render a dropdown
|
204
|
-
|
205
|
-
#### isEditing (optional)
|
206
|
-
|
207
|
-
- This goes along with the checkEditField prop. If both are true, it will render a dropdown. Otherwise, only text containing the selected value will be displayed
|
208
|
-
|
209
|
-
---
|
210
|
-
|
211
|
-
## Command Cell Date
|
212
|
-
|
213
|
-
### Props
|
214
|
-
|
215
|
-
dataItem: T;
|
216
|
-
chgFn: (e: GridChangeEvent) => void;
|
217
|
-
field: keyof T;
|
218
|
-
|
219
|
-
#### dataItem
|
220
|
-
|
221
|
-
- an object containing a date. if used per Telerik(Kendo)'s documentation, the value will come from props.dataItem
|
222
|
-
|
223
|
-
#### field
|
224
|
-
|
225
|
-
- which key in your dataItem object is a date?
|
226
|
-
|
227
|
-
#### chgFn
|
228
|
-
|
229
|
-
- A handler function for a gridchangeevent.
|
230
|
-
|
231
|
-
---
|
232
|
-
|
233
|
-
## Command Cell Checkbox
|
234
|
-
|
235
|
-
### Props
|
236
|
-
|
237
|
-
checked: boolean;
|
238
|
-
onCheck: Function;
|
239
|
-
onUncheck: Function;
|
240
|
-
|
241
|
-
#### checked
|
242
|
-
|
243
|
-
- boolean value for whether or not the checkbox should display a checkmark
|
244
|
-
|
245
|
-
#### onCheck
|
246
|
-
|
247
|
-
- what function do you want to run when checking the checkbox. I highly recommend a function that actually changes your value passed into `checked` to true.
|
248
|
-
|
249
|
-
#### onUncheck
|
250
|
-
|
251
|
-
- what function do you want to run when unchecking the checkbox. I highly recommend a function that actually changes your value passed into `checked` to false.
|
252
|
-
|
253
|
-
---
|
254
|
-
|
255
|
-
## Command Cell Switch
|
256
|
-
|
257
|
-
### Props
|
258
|
-
|
259
|
-
props: GridCellProps
|
260
|
-
changeFunction: Function
|
261
|
-
|
262
|
-
### props
|
263
|
-
|
264
|
-
- this component will assume you have an isEditing key in your object, otherwise it will just generate a string (in the current version)
|
265
|
-
|
266
|
-
### changeFunction
|
267
|
-
|
268
|
-
- what function do you want to run on change? I highly recommend a function that actually toggles the value of the field you're trying to change.
|
269
|
-
|
270
|
-
---
|
271
|
-
|
272
|
-
## CommandCellPrice
|
273
|
-
|
274
|
-
### Props
|
275
|
-
|
276
|
-
cost: number
|
277
|
-
|
278
|
-
### cost
|
279
|
-
|
280
|
-
- the number you want formatted to USD. support for other currencies or for thousandths will come eventually with optional props, but those don't exist yet
|
281
|
-
|
282
|
-
---
|
283
|
-
|
284
|
-
## Command Cell Dropdown Without ID
|
285
|
-
|
286
|
-
### Props
|
287
|
-
|
288
|
-
data: T[]
|
289
|
-
selectedData: T
|
290
|
-
textFields: (keyof T)[]
|
291
|
-
onChange: (e: ComboBoxChangeEvent) => void
|
292
|
-
separator?: string
|
293
|
-
checkEditField?: boolean
|
294
|
-
isEditing?: boolean
|
295
|
-
showClearButton?: boolean
|
296
|
-
|
297
|
-
#### data
|
298
|
-
|
299
|
-
- Array of T. What you want to display in the dropdown. The definition of what T is matters for the "textFields" prop.
|
300
|
-
|
301
|
-
#### selectedData
|
302
|
-
|
303
|
-
- The item selected. The dropdown will compare this object to the list of objects you gave it for the data prop to try to find the right index.
|
304
|
-
|
305
|
-
#### textFields
|
306
|
-
|
307
|
-
- This is defined as (keyof T)[].
|
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
|
-
|
310
|
-
#### onChange
|
311
|
-
|
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
|
-
|
314
|
-
#### separator (optional)
|
315
|
-
|
316
|
-
- This defines what your text fields are separated by. By default, it is assumed you only want a space between them. Use this prop if you want to change this.
|
317
|
-
- For example, if some of our associates only know the status IDs for Active, Terminated, or On Leave and we want to display them side by side, we might want to add a "dash" separator. To do this, we would pass " - " here.
|
318
|
-
|
319
|
-
#### checkEditField (optional)
|
320
|
-
|
321
|
-
- This is for optional conditional rendering. If this is true, it will only render a dropdown if `isEditing` is true. If this is false, it will always render a dropdown.
|
322
|
-
|
323
|
-
#### isEditing (optional)
|
324
|
-
|
325
|
-
- This goes along with the `checkEditField` prop. If both are true, it will render a dropdown. Otherwise, only text containing the selected value will be displayed.
|
326
|
-
|
327
|
-
#### showClearButton (optional)
|
328
|
-
|
329
|
-
- A boolean indicating whether the clear button should show up or not.
|
330
|
-
|
331
|
-
---
|
332
|
-
|
333
166
|
## ToolbarButton
|
334
167
|
|
335
168
|
### Props
|