@scheels-softdev/kendoreact-generics 2.2.1 → 2.2.3

package/FilterCellDropdown.js

@@ -28,5 +28,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.textFields], 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, onChange: 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.d.ts

@@ -1,19 +1,30 @@
-export declare function GenericDropdown<T>({ data, // array of data objects
-selectedId, // id of the selected data object
-selectedData, //if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
-changeEvent, // function to call when the selected value changes
-textFields, // array of field names to use for text values
-separator, // optional separator to use for concatenating text values
-disabled, // boolean to disable the dropdown
-idField, title, showClearButton, }: {
+import { CSSProperties } from "react";
+/**
+ * JSX Component for displaying selected images in a fullscreen Modal
+ * @param {object} props
+    @param {T[]} props.data array of data objects
+    @param {number?} props.selectedId id of the selected data object
+    @param {T?} props.selectedData if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
+    @param {Function} props.onChange function to call when the selected value changes
+    @param {(keyof T)[]?} props.textFields array of field names to use for text values
+    @param {string?} props.separator optional separator to use for concatenating text values
+    @param {object?} props.disabled boolean to disable the dropdown
+    @param {keyof T?} props.idField if the id field to look at isn't 'id', what is it?
+    @param {string?} props.title the label of the dropdown
+    @param {boolean?} props.showClearButton set to false if you want to hide clear button
+    @param {CSSProperties?} props.style the CSS Properties you want to use. It is generally recommended to do styling in your App.css file but if necessary this prop is available to you
+ * @returns
+ */
+export declare function GenericDropdown<T>({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, }: {
     data: T[];
     selectedId?: number;
     selectedData?: T;
-    changeEvent: Function;
+    onChange: Function;
     textFields: (keyof T)[];
     separator?: string;
     idField?: keyof T;
     disabled?: boolean;
     title?: string;
-    showClearButton?: boolean;
+    hideClearButton?: boolean;
+    style?: CSSProperties;
 }): import("react/jsx-runtime").JSX.Element;

package/GenericDropdown.js

@@ -3,15 +3,26 @@ 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
 // component that renders a dropdown with a search filter
-export function GenericDropdown({ data, // array of data objects
-selectedId, // id of the selected data object
-selectedData, //if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
-changeEvent, // function to call when the selected value changes
-textFields, // array of field names to use for text values
-separator, // optional separator to use for concatenating text values
-disabled, // boolean to disable the dropdown
-idField, title, showClearButton, }) {
+/**
+ * JSX Component for displaying selected images in a fullscreen Modal
+ * @param {object} props
+    @param {T[]} props.data array of data objects
+    @param {number?} props.selectedId id of the selected data object
+    @param {T?} props.selectedData if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
+    @param {Function} props.onChange function to call when the selected value changes
+    @param {(keyof T)[]?} props.textFields array of field names to use for text values
+    @param {string?} props.separator optional separator to use for concatenating text values
+    @param {object?} props.disabled boolean to disable the dropdown
+    @param {keyof T?} props.idField if the id field to look at isn't 'id', what is it?
+    @param {string?} props.title the label of the dropdown
+    @param {boolean?} props.showClearButton set to false if you want to hide clear button
+    @param {CSSProperties?} props.style the CSS Properties you want to use. It is generally recommended to do styling in your App.css file but if necessary this prop is available to you
+ * @returns
+ */
+export function GenericDropdown({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, }) {
     if (selectedId !== undefined && selectedData !== undefined) {
         throw new Error("You cannot provide both selectedData and selectedId to GenericDropdown.");
     }
@@ -70,12 +81,12 @@ idField, title, showClearButton, }) {
         console.log(returnVal);
         return returnVal;
     };
-    return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: _jsx(ComboBox, { style: { width: "100%" }, label: title, disabled: disabled, data: state.subsetData, textField: "textValue", virtual: {
+    return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: _jsx(ComboBox, { style: style, label: title, disabled: disabled, data: state.subsetData, textField: "textValue", virtual: {
                 // enable virtualization for large datasets
                 total: state.total,
                 pageSize: pageSize,
                 skip: state.skip,
             }, suggest: true, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
                 height: "210px",
-            }, onChange: (e) => changeEvent(e), onBlur: (e) => e.nativeEvent.preventDefault(), clearButton: showClearButton, value: !selectedId && !selectedData ? null : findByIndex(selectedId, idField, dataList) || findByValue(selectedData, dataList) || null }) })));
+            }, onChange: (e) => onChange(e), onBlur: (e) => e.nativeEvent.preventDefault(), clearButton: !hideClearButton, value: !selectedId && !selectedData ? null : findByIndex(selectedId, idField, dataList) || findByValue(selectedData, dataList) || null }) })));
 }

package/README.md

@@ -35,7 +35,7 @@ Note: This package has only been tested with typescript. if you're using javascr
     data: T[];
     selectedId: number;
     selectedData?: T;
-    changeEvent: event: (ComboBoxChangeEvent) => void;
+    onChange: event: (ComboBoxChangeEvent) => void;
     textFields: (keyof T)[];
     separator?: string;
     idField?: keyof T;
@@ -47,7 +47,7 @@ Note: This package has only been tested with typescript. if you're using javascr
 
 -   Array of T. the Definition of what T is matters for the "textFields" prop
 
-#### changeEvent
+#### onChange
 
 -   Event passed is a ComboBoxChangeEvent (from kendo-react-dropdowns)
 
@@ -171,7 +171,7 @@ Note: This package has only been tested with typescript. if you're using javascr
     data: T[];
     selectedId: number;
     textFields: (keyof T)[];
-    changeEvent: (e: ComboBoxChangeEvent) => void;
+    onChange: (e: ComboBoxChangeEvent) => void;
     separator?: string;
     checkEditField?: boolean;
     isEditing?: boolean;
@@ -189,7 +189,7 @@ Note: This package has only been tested with typescript. if you're using javascr
 -   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
+#### onChange
 
 -   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
 
@@ -288,7 +288,7 @@ cost: number
 data: T[]
 selectedData: T
 textFields: (keyof T)[]
-changeEvent: (e: ComboBoxChangeEvent) => void
+onChange: (e: ComboBoxChangeEvent) => void
 separator?: string
 checkEditField?: boolean
 isEditing?: boolean
@@ -307,7 +307,7 @@ showClearButton?: boolean
 -   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
+#### onChange
 
 -   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`.
 

package/commandCell/CommandCellDDWithoutId.d.ts

@@ -3,7 +3,7 @@ export declare function CommandCellDDWithoutId<T>(props: {
     data: T[];
     selectedData: T;
     textFields: (keyof T)[];
-    changeEvent: (e: ComboBoxChangeEvent) => void;
+    onChange: (e: ComboBoxChangeEvent) => void;
     separator?: string;
     checkEditField?: boolean;
     isEditing?: boolean;

package/commandCell/CommandCellDropdown.d.ts

@@ -3,7 +3,7 @@ export declare function CommandCellDropdown<T>(props: {
     data: T[];
     selectedId: number;
     textFields: (keyof T)[];
-    changeEvent: (e: ComboBoxChangeEvent) => void;
+    onChange: (e: ComboBoxChangeEvent) => void;
     separator?: string;
     checkEditField?: boolean;
     isEditing?: boolean;

package/package.json

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