@scheels-softdev/kendoreact-generics 2.2.0 → 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
 
@@ -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: Function;
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
- functionToRunOnCheck: Function;
236
- functionToRunOnUncheck: Function;
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
- #### functionToRunOnCheck
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
- #### functionToRunOnUncheck
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, 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.2.0",
3
+ "version": "2.2.1",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",