@scheels-softdev/kendoreact-generics 2.0.2 → 2.0.4

package/README.md

@@ -20,21 +20,23 @@ Note: This package has only been tested with typescript. if you're using javascr
 -   [MultiSelect Dropdown](#multiselect-dropdown)
 -   [Filter Cell Dropdown](#filter-cell-dropdown)
 -   [Command Cell Dropdown](#command-cell-dropdown)
+-   [Command Cell Date](#command-cell-date)
+-   [Command Cell Checkbox](#command-cell-checkbox)
 
 ---
 
 ## Generic Dropdown
 
-### Usage
+### Props
 
-<GenericDropdown
-data={MyDataArray}
-changeEvent={(e: ComboBoxChangeEvent) => setPrinterIp(e.target.value.ipAddress)}
-selectedId={MyDataArray.find((x) => x.id === selectedValue.id)?.id || 0}
-textFields={["name"]}
-/>
-
-### Required props
+    data: T[];
+    selectedId: number;
+    changeEvent: Function;
+    textFields: (keyof T)[];
+    separator?: string;
+    idField?: keyof T;
+    disabled?: boolean;
+    title?: string;
 
 #### data
 
@@ -53,23 +55,21 @@ textFields={["name"]}
 -   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"
 
-### Optional props
-
-#### separator
+#### 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 we want our employee's names separated by a comma, we would pass ", " here
 
-#### idField
+#### idField (optional)
 
 -   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
 -   For example, if our employee's id field is employeeId instead of just id, we would pass "employeeId" here
 
-#### disabled
+#### disabled (optional)
 
 -   If you want to conditionally disable the dropdown you can do that here
 
-#### title
+#### title (optional)
 
 -   The label that appears in your multiselect when there aren't any options selected, or just above the multiselect when there are
 -   For example, if we want to use it to send a letter to an employee, we would pass "Selected Employee" here
@@ -78,19 +78,15 @@ textFields={["name"]}
 
 ## MultiSelect Dropdown
 
-### Usage
+### Props
 
-<MultiSelectDropdown
-data={myDataArray}
-selectedData={mySelectedDataArray}
-textFields={["firstName", "lastName"]}
-separator=" - "
-selectEvent={setSelectedEmployee}
-title="Selected Employees"
-limit={10}
-/>
-
-### Required props
+    data: T[];
+    selectedData: T[];
+    textFields: (keyof T)[];
+    selectEvent: Function;
+    title?: string;
+    separator?: string;
+    limit?: number;
 
 #### data
 
@@ -109,19 +105,17 @@ limit={10}
 
 -   "Event" you're given should just be your new array of selected Items
 
-### Optional props
-
-#### title
+#### title (optional)
 
 -   The label that appears in your multiselect when there aren't any options selected, or just above the multiselect when there are
 -   For example, if we want to use it to send work anniversary letters to multiple employees, we would pass "Selected Employees" here
 
-#### separator
+#### 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 we want our employee's names separated by a comma, we would pass ", " here
 
-#### limit
+#### limit (optional)
 
 -   The upper limit of how many items the user can select at once.
 -   For example, if our meeting room only has room for 8 people, we would pass an 8.
@@ -130,14 +124,12 @@ limit={10}
 
 ## Filter Cell Dropdown
 
-### Usage
+### Props
 
-<FilterCellDropdown
-data={myStatusArray}
-textFields={["StatusName"]}
-/>
-
-### Required props
+    {...GridFilterCellProps} (from @progress/kendo-react-grid)
+    data: T[];
+    textFields: (keyof T)[];
+    separator?: string;
 
 #### {...FilterCellProps}
 
@@ -152,13 +144,99 @@ textFields={["StatusName"]}
 -   This is defined as (keyof T)[].
 -   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"
 
-### Optional props
+#### 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" seporator. to do this we would pass " - " here
+
+---
+
+## Command Cell Dropdown
+
+### Props
+
+    data: T[];
+    selectedId: number;
+    textFields: (keyof T)[];
+    changeEvent: (e: ComboBoxChangeEvent) => void;
+    separator?: string;
+    checkEditField?: boolean;
+    isEditing?: boolean;
+
+#### data
+
+-   Array of T. What you want to display in the dropdown. the Definition of what T is matters for the "textFields" prop
+
+#### selectedId
+
+-   all of the default props that are passed from kendo grid when trying to override the filter cell
+
+#### textFields
+
+-   This is defined as (keyof T)[].
+-   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"
+
+#### changeEvent
 
-#### separator
+-   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" seporator. 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
+
+---
+
+## Command Cell Date
+
+### Props
+
+    dataItem: T;
+    chgFn: (e: GridChangeEvent) => void;
+    field: keyof T;
+
+#### dataItem
+
+-   an object containing a date. if used per Telerik(Kendo)'s documentation, the value will come from props.dataItem
+
+#### field
+
+-   which key in your dataItem object is a date?
+
+#### chgFn
+
+-   A handler function for a gridchangeevent.
+
+---
+
+## Command Cell Checkbox
+
+### Props
+
+    checked: boolean;
+    functionToRunOnCheck: Function;
+    functionToRunOnUncheck: Function;
+
+#### checked
+
+-   boolean value for whether or not the checkbox should display a checkmark
+
+#### functionToRunOnCheck
+
+-   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
+
+-   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.
+
 ---
 
 ## More Updates to the README Coming Soon!

package/package.json

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