@scheels-softdev/kendoreact-generics 2.2.0 → 2.2.2

package/GenericDropdown.js

@@ -3,6 +3,9 @@ import { ComboBox } from "@progress/kendo-react-dropdowns";
 import { filterBy } from "@progress/kendo-data-query";
 import { useEffect, useRef, useState } from "react";
 import { getTextValue } from "./Utility";
+//TODO add a style property
+//TODO add metadata documentation
+// TODO change changeEvent to onChange
 // component that renders a dropdown with a search filter
 export function GenericDropdown({ data, // array of data objects
 selectedId, // id of the selected data object

package/README.md

@@ -22,6 +22,9 @@ Note: This package has only been tested with typescript. if you're using javascr
 -   [Command Cell Dropdown](#command-cell-dropdown)
 -   [Command Cell Date](#command-cell-date)
 -   [Command Cell Checkbox](#command-cell-checkbox)
+-   [Command Cell Switch](#command-cell-switch)
+-   [Command Cell Price](#command-cell-checkbox)
+-   [Command Cell DD Without Id](#command-cell-checkbox)
 
 ---
 
@@ -32,7 +35,7 @@ Note: This package has only been tested with typescript. if you're using javascr
     data: T[];
     selectedId: number;
     selectedData?: T;
-    changeEvent: Function;
+    changeEvent: event: (ComboBoxChangeEvent) => void;
     textFields: (keyof T)[];
     separator?: string;
     idField?: keyof T;
@@ -232,21 +235,122 @@ Note: This package has only been tested with typescript. if you're using javascr
 ### Props
 
     checked: boolean;
-    functionToRunOnCheck: Function;
-    functionToRunOnUncheck: Function;
+    onCheck: Function;
+    onUncheck: Function;
 
 #### checked
 
 -   boolean value for whether or not the checkbox should display a checkmark
 
-#### functionToRunOnCheck
+#### onCheck
 
 -   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.
 
-#### functionToRunOnUncheck
+#### onUncheck
 
 -   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.
 
 ---
 
+## Command Cell Switch
+
+### Props
+
+props: GridCellProps
+changeFunction: Function
+
+### props
+
+-   this component will assume you have an isEditing key in your object, otherwise it will just generate a string (in the current version)
+
+### changeFunction
+
+-   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.
+
+---
+
+## CommandCellPrice
+
+### Props
+
+cost: number
+
+### cost
+
+-   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
+
+---
+
+## Command Cell Dropdown Without ID
+
+### Props
+
+data: T[]
+selectedData: T
+textFields: (keyof T)[]
+changeEvent: (e: ComboBoxChangeEvent) => void
+separator?: string
+checkEditField?: boolean
+isEditing?: boolean
+showClearButton?: boolean
+
+#### data
+
+-   Array of T. What you want to display in the dropdown. The definition of what T is matters for the "textFields" prop.
+
+#### selectedData
+
+-   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.
+
+#### textFields
+
+-   This is defined as (keyof T)[].
+-   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".
+
+#### changeEvent
+
+-   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`.
+
+#### separator (optional)
+
+-   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.
+-   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.
+
+#### checkEditField (optional)
+
+-   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.
+
+#### isEditing (optional)
+
+-   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.
+
+#### showClearButton (optional)
+
+-   A boolean indicating whether the clear button should show up or not.
+
+---
+
+## ToolbarButton
+
+### Props
+
+item: T
+data: T[]
+setData: Function
+
+### item
+
+An item of type T used for adding a new element.
+
+### data
+
+An array of T objects representing the existing data.
+
+### setData
+
+A function used to update the data array.
+Note: The T type extends the CommonProps interface, which includes the following properties:
+
+---
+
 ## More Updates to the README Coming Soon!

package/commandCell/CommandCellCheckbox.d.ts

@@ -1,5 +1,5 @@
-export declare function CommandCellCheckBox({ checked, functionToRunOnCheck, functionToRunOnUncheck, }: {
+export declare function CommandCellCheckBox({ checked, onCheck, onUncheck }: {
     checked: boolean;
-    functionToRunOnCheck: Function;
-    functionToRunOnUncheck: Function;
+    onCheck: Function;
+    onUncheck: Function;
 }): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellCheckbox.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox } from "@progress/kendo-react-inputs";
-export function CommandCellCheckBox({ checked, functionToRunOnCheck, functionToRunOnUncheck, }) {
+export function CommandCellCheckBox({ checked, onCheck, onUncheck }) {
     const functionToRun = () => {
         if (checked) {
-            functionToRunOnUncheck();
+            onUncheck();
         }
         else {
-            functionToRunOnCheck();
+            onCheck();
         }
     };
     return (_jsx("td", Object.assign({ className: "justify-content-center", "data-testid": "checkbox" }, { children: _jsx(Checkbox, { checked: checked, onChange: functionToRun }) })));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@scheels-softdev/kendoreact-generics",
-    "version": "2.2.0",
+    "version": "2.2.2",
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",