@scheels-softdev/kendoreact-generics 2.2.0 → 2.2.2
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
CHANGED
@@ -3,6 +3,9 @@ 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
|
8
|
+
// TODO change changeEvent to onChange
|
6
9
|
// component that renders a dropdown with a search filter
|
7
10
|
export function GenericDropdown({ data, // array of data objects
|
8
11
|
selectedId, // id of the selected data object
|
package/README.md
CHANGED
@@ -22,6 +22,9 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
22
22
|
- [Command Cell Dropdown](#command-cell-dropdown)
|
23
23
|
- [Command Cell Date](#command-cell-date)
|
24
24
|
- [Command Cell Checkbox](#command-cell-checkbox)
|
25
|
+
- [Command Cell Switch](#command-cell-switch)
|
26
|
+
- [Command Cell Price](#command-cell-checkbox)
|
27
|
+
- [Command Cell DD Without Id](#command-cell-checkbox)
|
25
28
|
|
26
29
|
---
|
27
30
|
|
@@ -32,7 +35,7 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
32
35
|
data: T[];
|
33
36
|
selectedId: number;
|
34
37
|
selectedData?: T;
|
35
|
-
changeEvent:
|
38
|
+
changeEvent: event: (ComboBoxChangeEvent) => void;
|
36
39
|
textFields: (keyof T)[];
|
37
40
|
separator?: string;
|
38
41
|
idField?: keyof T;
|
@@ -232,21 +235,122 @@ Note: This package has only been tested with typescript. if you're using javascr
|
|
232
235
|
### Props
|
233
236
|
|
234
237
|
checked: boolean;
|
235
|
-
|
236
|
-
|
238
|
+
onCheck: Function;
|
239
|
+
onUncheck: Function;
|
237
240
|
|
238
241
|
#### checked
|
239
242
|
|
240
243
|
- boolean value for whether or not the checkbox should display a checkmark
|
241
244
|
|
242
|
-
####
|
245
|
+
#### onCheck
|
243
246
|
|
244
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.
|
245
248
|
|
246
|
-
####
|
249
|
+
#### onUncheck
|
247
250
|
|
248
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.
|
249
252
|
|
250
253
|
---
|
251
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
|
+
changeEvent: (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
|
+
#### changeEvent
|
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
|
+
## ToolbarButton
|
334
|
+
|
335
|
+
### Props
|
336
|
+
|
337
|
+
item: T
|
338
|
+
data: T[]
|
339
|
+
setData: Function
|
340
|
+
|
341
|
+
### item
|
342
|
+
|
343
|
+
An item of type T used for adding a new element.
|
344
|
+
|
345
|
+
### data
|
346
|
+
|
347
|
+
An array of T objects representing the existing data.
|
348
|
+
|
349
|
+
### setData
|
350
|
+
|
351
|
+
A function used to update the data array.
|
352
|
+
Note: The T type extends the CommonProps interface, which includes the following properties:
|
353
|
+
|
354
|
+
---
|
355
|
+
|
252
356
|
## More Updates to the README Coming Soon!
|
@@ -1,5 +1,5 @@
|
|
1
|
-
export declare function CommandCellCheckBox({ checked,
|
1
|
+
export declare function CommandCellCheckBox({ checked, onCheck, onUncheck }: {
|
2
2
|
checked: boolean;
|
3
|
-
|
4
|
-
|
3
|
+
onCheck: Function;
|
4
|
+
onUncheck: Function;
|
5
5
|
}): import("react/jsx-runtime").JSX.Element;
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
2
|
import { Checkbox } from "@progress/kendo-react-inputs";
|
3
|
-
export function CommandCellCheckBox({ checked,
|
3
|
+
export function CommandCellCheckBox({ checked, onCheck, onUncheck }) {
|
4
4
|
const functionToRun = () => {
|
5
5
|
if (checked) {
|
6
|
-
|
6
|
+
onUncheck();
|
7
7
|
}
|
8
8
|
else {
|
9
|
-
|
9
|
+
onCheck();
|
10
10
|
}
|
11
11
|
};
|
12
12
|
return (_jsx("td", Object.assign({ className: "justify-content-center", "data-testid": "checkbox" }, { children: _jsx(Checkbox, { checked: checked, onChange: functionToRun }) })));
|