@scheels-softdev/kendoreact-generics 2.1.20 → 2.2.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/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
 
@@ -31,12 +34,14 @@ Note: This package has only been tested with typescript. if you're using javascr
31
34
 
32
35
  data: T[];
33
36
  selectedId: number;
34
- changeEvent: Function;
37
+ selectedData?: T;
38
+ changeEvent: event: (ComboBoxChangeEvent) => void;
35
39
  textFields: (keyof T)[];
36
40
  separator?: string;
37
41
  idField?: keyof T;
38
42
  disabled?: boolean;
39
43
  title?: string;
44
+ showClearButton?: boolean;
40
45
 
41
46
  #### data
42
47
 
@@ -48,7 +53,11 @@ Note: This package has only been tested with typescript. if you're using javascr
48
53
 
49
54
  #### selectedId
50
55
 
51
- - 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
56
+ - The id 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)
57
+
58
+ #### selectedData
59
+
60
+ - 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
52
61
 
53
62
  #### textFields
54
63
 
@@ -74,6 +83,10 @@ Note: This package has only been tested with typescript. if you're using javascr
74
83
  - The label that appears in your multiselect when there aren't any options selected, or just above the multiselect when there are
75
84
  - For example, if we want to use it to send a letter to an employee, we would pass "Selected Employee" here
76
85
 
86
+ #### showClearButton (optional)
87
+
88
+ - A boolean indicating whether the clear button should show up or not
89
+
77
90
  ---
78
91
 
79
92
  ## MultiSelect Dropdown
@@ -222,21 +235,122 @@ Note: This package has only been tested with typescript. if you're using javascr
222
235
  ### Props
223
236
 
224
237
  checked: boolean;
225
- functionToRunOnCheck: Function;
226
- functionToRunOnUncheck: Function;
238
+ onCheck: Function;
239
+ onUncheck: Function;
227
240
 
228
241
  #### checked
229
242
 
230
243
  - boolean value for whether or not the checkbox should display a checkmark
231
244
 
232
- #### functionToRunOnCheck
245
+ #### onCheck
233
246
 
234
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.
235
248
 
236
- #### functionToRunOnUncheck
249
+ #### onUncheck
237
250
 
238
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.
239
252
 
240
253
  ---
241
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
+
242
356
  ## More Updates to the README Coming Soon!
@@ -1,5 +1,5 @@
1
- export declare function CommandCellCheckBox({ checked, functionToRunOnCheck, functionToRunOnUncheck, }: {
1
+ export declare function CommandCellCheckBox({ checked, onCheck, onUncheck }: {
2
2
  checked: boolean;
3
- functionToRunOnCheck: Function;
4
- functionToRunOnUncheck: Function;
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, functionToRunOnCheck, functionToRunOnUncheck, }) {
3
+ export function CommandCellCheckBox({ checked, onCheck, onUncheck }) {
4
4
  const functionToRun = () => {
5
5
  if (checked) {
6
- functionToRunOnUncheck();
6
+ onUncheck();
7
7
  }
8
8
  else {
9
- functionToRunOnCheck();
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 }) })));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scheels-softdev/kendoreact-generics",
3
- "version": "2.1.20",
3
+ "version": "2.2.1",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",