@scheels-softdev/kendoreact-generics 1.7.4 → 2.0.1

package/FilterCellDropdown.d.ts

@@ -1,8 +1,7 @@
 import { GridFilterCellProps } from "@progress/kendo-react-grid";
 interface DropdownFilterCellProps<T> extends GridFilterCellProps {
-    defaultItem?: any;
     data: T[];
-    descriptionKeys: (keyof T)[];
+    textFields: (keyof T)[];
     separator?: string;
 }
 export declare function FilterCellDropdown<T>(props: DropdownFilterCellProps<T>): import("react/jsx-runtime").JSX.Element;

package/FilterCellDropdown.js

@@ -4,7 +4,7 @@ import { GenericDropdown } from "./GenericDropdown";
 // Define the DropdownFilterCell component with props of type DropdownFilterCellProps
 export function FilterCellDropdown(props) {
     // Define a function that returns true if a value is not undefined or null, and is different from the default item
-    let hasValue = (value) => Boolean(value && value !== props.defaultItem);
+    let hasValue = (value) => Boolean(value);
     // Define an onChange function that will be called when the ComboBox value changes
     const onChange = (event) => {
         // Update the hasValue variable based on the new value of the ComboBox
@@ -27,5 +27,5 @@ export function FilterCellDropdown(props) {
         });
     };
     // Render a div containing a GenericDropdownWithSearch component and a Clear button
-    return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data, changeEvent: onChange, selectedId: props.value, textFields: [...props.descriptionKeys], separator: props.separator }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
+    return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data, changeEvent: onChange, selectedId: props.value, textFields: [...props.textFields], separator: props.separator }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
 }

package/MultiSelectDropdown.d.ts

@@ -3,7 +3,7 @@ export declare function MultiSelectDropdown<T>({ data, selectedData, textFields,
     selectedData: T[];
     textFields: (keyof T)[];
     selectEvent: Function;
-    title: string;
+    title?: string;
     separator?: string;
     limit?: number;
 }): import("react/jsx-runtime").JSX.Element;

package/MultiSelectDropdown.js

@@ -3,7 +3,6 @@ import { useEffect, useRef, useState } from "react";
 import { filterBy } from "@progress/kendo-data-query";
 import { MultiSelect } from "@progress/kendo-react-dropdowns";
 import { getTextValue } from "./Utility";
-const pageSize = 10;
 export function MultiSelectDropdown({ data, selectedData, textFields, selectEvent, title, separator, limit, }) {
     //local state
     const pageSize = 8;

package/README.md

@@ -0,0 +1,164 @@
+# KendoReact Generics
+
+## About This Package
+
+### What is this package?
+
+This package is a collection of Wrappers for various kendo components that we've found ourselves modifying in the same ways over and over across projects in the same ways.
+@progress/kendo-react-licensing along with a valid kendo license is recommended (or required depending on whether they change their 'no license' warning to an error in the future).
+
+### What modifications have you made specifically?
+
+-   Most of what we're doing has to do with virtualization. The setup for virtualization is a lengthy task, both in lines of code and dev hours. This package exists to help us streamline that process.
+-   The other modifications have to do with adding support for placing Comboboxes, Checkboxes, Datepickers, and Switches from Kendo into a Kendo Grid Cell or Filter Cell and handling those events appropriately
+
+## Components
+
+Note: This package has only been tested with typescript. if you're using javascript, use at your own risk
+
+-   [Generic Dropdown](#generic-dropdown)
+-   [MultiSelect Dropdown](#multiselect-dropdown)
+-   [Filter Cell Dropdown](#filter-cell-dropdown)
+-   [Command Cell Dropdown](#command-cell-dropdown)
+
+---
+
+## Generic Dropdown
+
+### Usage
+
+<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
+
+-   Array of T. the Definition of what T is matters for the "textFields" prop
+
+#### changeEvent
+
+-   Event passed is a ComboBoxChangeEvent (from kendo-react-dropdowns)
+
+#### selectedId
+
+-   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
+
+#### 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"
+
+### Optional props
+
+#### separator
+
+-   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 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
+
+-   If you want to conditionally disable the dropdown you can do that here
+
+#### title
+
+-   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
+
+---
+
+## MultiSelect Dropdown
+
+### Usage
+
+<MultiSelectDropdown
+data={myDataArray}
+selectedData={mySelectedDataArray}
+textFields={["firstName", "lastName"]}
+separator=" - "
+selectEvent={setSelectedVend}
+title="Vendor(s)"
+limit={10}
+/>
+
+### Required props
+
+#### data
+
+-   Array of T. the Definition of what T is matters for the "textFields" prop
+
+#### selectedData
+
+-   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
+
+#### 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"
+
+#### selectEvent
+
+-   "Event" you're given should just be your new array of selected Items
+
+### Optional props
+
+#### title
+
+-   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
+
+-   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
+
+-   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.
+
+---
+
+## Filter Cell Dropdown
+
+### Usage
+
+<FilterCellDropdown
+data={myStatusArray}
+textFields={["StatusName"]}
+/>
+
+### Required props
+
+#### {...FilterCellProps}
+
+-   all of the default props that are passed from kendo grid when trying to override the filter cell
+
+#### data
+
+-   Array of T. What you want to display in the dropdown. the Definition of what T is matters for the "textFields" prop
+
+#### 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"
+
+### Optional props
+
+#### separator
+
+-   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
+
+---
+
+## More Updates to the README Coming Soon!

package/package.json

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