@scheels-softdev/kendoreact-generics 1.7.3 → 2.0.0

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/GenericDropdown.js

@@ -56,7 +56,7 @@ idField, title, }) {
                 total: state.total,
                 pageSize: pageSize,
                 skip: state.skip,
-            }, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
+            }, suggest: true, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
                 height: "210px",
             }, onChange: (e) => e.value && changeEvent(e), onBlur: (e) => e.nativeEvent.preventDefault(), value: dataList.find((item) => selectedId === item[idField || "id"]) }) })));
 }

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,169 @@
+# 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={myDataArray}
+selectedData={mySelectedDataArray}
+textFields={["firstName", "lastName"]}
+separator=" - "
+selectEvent={setSelectedVend}
+title="Vendor(s)"
+limit={10}
+/>
+
+### 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 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
+
+---
+
+## More Updates to the README Coming Soon!

package/package.json

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