@scheels-softdev/kendoreact-generics 4.0.16 → 4.0.18

package/GenericDropdown.d.ts

@@ -1,17 +1,19 @@
 import { ComboBoxProps } from "@progress/kendo-react-dropdowns";
-interface BaseProps<T> extends ComboBoxProps {
+interface BaseProps<T> extends Omit<ComboBoxProps, "textField"> {
     data: T[];
     pageSize?: number;
     onClear?: () => void;
-    textField: Extract<keyof T, string>;
+    textField: keyof T & string;
 }
 interface SelectedDataProps<T> {
     selectedData?: T;
 }
 interface SelectedIdProps<T> {
-    selectedId?: number;
+    selectedId?: number | string;
     idField: keyof T;
 }
 type GenericDropdownProps<T> = BaseProps<T> & (SelectedDataProps<T> | SelectedIdProps<T>);
-export declare function GenericDropdown<T>({ data, onClear, ...props }: GenericDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function GenericDropdown<T extends {
+    [K in keyof T]: string | number;
+}>({ data, textField, pageSize, ...props }: GenericDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
 export default GenericDropdown;

package/GenericDropdown.js

@@ -10,44 +10,45 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useMemo } from "react";
+import { useState, useMemo, useCallback } from "react";
 import { ComboBox } from "@progress/kendo-react-dropdowns";
 export function GenericDropdown(_a) {
-    var { data, onClear } = _a, props = __rest(_a, ["data", "onClear"]);
+    var { data, textField, pageSize = 6 } = _a, props = __rest(_a, ["data", "textField", "pageSize"]);
+    const [filteredData, setFilteredData] = useState(data);
+    const [state, setState] = useState({
+        subsetData: filteredData.slice(0, pageSize),
+        skip: 0,
+    });
     const selectedItem = useMemo(() => {
         var _a;
-        if ("selectedData" in props) {
+        if ("selectedData" in props && props.selectedData !== undefined) {
             return props.selectedData;
         }
-        else if ("selectedId" in props && "idField" in props) {
-            return (_a = data.find((item) => item[props.idField] === props.selectedId)) !== null && _a !== void 0 ? _a : null;
+        else if ("selectedId" in props && "idField" in props && props.selectedId !== undefined) {
+            return (_a = data.find((item) => item[props.idField] === String(props.selectedId))) !== null && _a !== void 0 ? _a : null;
         }
         return null;
     }, [props, data]);
-    const [state, setState] = React.useState({
-        skip: 0,
-        total: data.length,
-        subsetData: data.slice(0, 11),
-    });
-    const onFilterChange = (event) => {
-        const filteredData = data.filter((x) => x[props.textField].includes(event.filter.value));
-        const newData = filteredData.slice(0, 11);
+    const pageChange = useCallback((event) => {
+        const { skip, take } = event.page;
         setState({
-            subsetData: newData,
+            subsetData: filteredData.slice(skip, skip + take),
+            skip,
+        });
+    }, [filteredData]);
+    const handleFilter = useCallback((event) => {
+        const filterValue = event.filter.value;
+        const newData = data.filter((item) => item[textField].toString().toLowerCase().includes(filterValue.toLowerCase()));
+        setFilteredData(newData);
+        setState({
+            subsetData: newData.slice(0, pageSize),
             skip: 0,
-            total: filteredData.length,
         });
-    };
-    const pageChange = (event) => {
-        const skip = event.page.skip;
-        const take = event.page.take;
-        const newSubsetData = state.subsetData.slice(skip, skip + take);
-        setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
-    };
-    return (_jsx(ComboBox, Object.assign({ data: state.subsetData, value: selectedItem, virtual: {
-            total: state.total,
-            pageSize: 100,
+    }, [data, textField, pageSize]);
+    return (_jsx(ComboBox, Object.assign({ data: state.subsetData, value: selectedItem, textField: textField, filterable: true, onFilterChange: handleFilter, virtual: {
+            pageSize,
             skip: state.skip,
-        }, onPageChange: pageChange, onFilterChange: onFilterChange, dataItemKey: "idField" in props ? props.idField : undefined }, props)));
+            total: filteredData.length,
+        }, onPageChange: pageChange }, props)));
 }
 export default GenericDropdown;

package/_index.test.js

@@ -10,7 +10,7 @@ describe("GenericDropdown", () => {
         // Set initial selectedData to the second item in the data array
         let selectedData = data[1];
         // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
-        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => { }, textField: "name", selectedData: selectedData }));
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: () => { }, textField: "name", selectedData: selectedData }));
         // Get the input element by its role of "combobox"
         const input = result.getByRole("combobox");
         expect(input.getAttribute("value")).toBe("Option 2");
@@ -33,7 +33,7 @@ describe("GenericDropdown", () => {
         // Set initial selectedData to the second item in the data array
         let selectedId = 2;
         // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
-        let result = render(_jsx(GenericDropdown, { data: data, onChange: () => { }, textField: "name", selectedId: selectedId, idField: "id" }));
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: () => { }, textField: "name", selectedId: selectedId }));
         // Get the input element by its role of "combobox"
         const input = result.getByRole("combobox");
         expect(input.getAttribute("value")).toBe("Option 2");
@@ -72,7 +72,7 @@ describe("GenericDropdown", () => {
         // Set initial selectedData to the second item in the data array
         let selectedId = 1;
         // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
-        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedId = (e === null || e === void 0 ? void 0 : e.value.id) || null), textField: "name", selectedId: selectedId, idField: "id" }));
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => { var _a; return (selectedId = ((_a = e.value) === null || _a === void 0 ? void 0 : _a.id) || null); }, textField: "name", selectedId: selectedId, idField: "id" }));
         // Get the input element by its role of "combobox"
         // Simulate a change event on the input element by setting its target value to "O"
         let input = result.getByRole("combobox");

package/index.d.ts

@@ -1,7 +1,3 @@
-export { CommandCellCheckBox } from "./commandCell/CommandCellCheckbox";
-export { CommandCellDate } from "./commandCell/CommandCellDate";
-export { CommandCellPrice } from "./commandCell/CommandCellPrice";
-export { CommandCellSwitch } from "./commandCell/CommandCellSwitch";
 export { ToolbarButton } from "./Toolbar";
 export { GenericDropdown } from "./GenericDropdown";
 export { GridChangeEvent, CommonProps } from "./PropTypes";

package/index.js

@@ -1,7 +1,3 @@
-export { CommandCellCheckBox } from "./commandCell/CommandCellCheckbox";
-export { CommandCellDate } from "./commandCell/CommandCellDate";
-export { CommandCellPrice } from "./commandCell/CommandCellPrice";
-export { CommandCellSwitch } from "./commandCell/CommandCellSwitch";
 export { ToolbarButton } from "./Toolbar";
 export { GenericDropdown } from "./GenericDropdown";
 export { MultiSelectDropdown } from "./MultiSelectDropdown";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@scheels-softdev/kendoreact-generics",
-    "version": "4.0.16",
+    "version": "4.0.18",
     "main": "index.js",
     "scripts": {
         "test": "jest",
@@ -15,7 +15,6 @@
     "dependencies": {
         "@progress/kendo-data-query": "latest",
         "@progress/kendo-react-dateinputs": "latest",
-        "@progress/kendo-react-dropdowns": "latest",
         "@progress/kendo-react-indicators": "^5.14.1",
         "@progress/kendo-react-inputs": "latest",
         "@scheels-softdev/frontend-utility-functions": "^1.3.7",
@@ -35,7 +34,7 @@
     },
     "devDependencies": {
         "@progress/kendo-react-dateinputs": "latest",
-        "@progress/kendo-react-dropdowns": "latest",
+        "@progress/kendo-react-dropdowns": "^7.4.0",
         "@progress/kendo-react-inputs": "latest",
         "@types/moment": "^2.13.0",
         "@types/react": "^18.0.28",

package/commandCell/CommandCellCheckbox.d.ts

@@ -1,10 +0,0 @@
-export declare function CommandCellCheckBox({ checked, onCheck, onUncheck, disabled, }: {
-    /** Boolean value indicating whether the checkbox is checked (`true`) or unchecked (`false`). */
-    checked: boolean;
-    /** Callback function to be called when the checkbox is checked. */
-    onCheck: () => void;
-    /** Callback function to be called when the checkbox is unchecked. */
-    onUncheck: () => void;
-    /** Boolean value indicating whether the checkbox is disabled. */
-    disabled?: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellCheckbox.js

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

package/commandCell/CommandCellDate.d.ts

@@ -1,9 +0,0 @@
-import { CommonProps, GridChangeEvent } from "../PropTypes";
-export declare function CommandCellDate<T extends CommonProps>({ dataItem, onChange, field, }: {
-    /** The data item for the cell. */
-    dataItem: T;
-    /** Callback function to be called when the value changes. */
-    onChange: (e: GridChangeEvent) => void;
-    /** The field of the data item to display in the cell. this field must be formattable into a date. */
-    field: keyof T;
-}): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellDate.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { DatePicker } from "@progress/kendo-react-dateinputs";
-import moment from "moment";
-export function CommandCellDate({ dataItem, onChange, field, }) {
-    let valString = "" + dataItem[field];
-    let date = moment(valString).format("MM/DD/YY");
-    return (_jsx("td", Object.assign({ "data-testid": "date" }, { children: valString === undefined || dataItem.isEditing ? (_jsx(DatePicker, { value: new Date(moment(valString).format("MMMM, DD YYYY")), onChange: (e) => onChange({
-                field: field.toString(),
-                value: moment(e.value),
-                dataItem: dataItem,
-            }) })) : (date) })));
-}

package/commandCell/CommandCellPrice.d.ts

@@ -1,3 +0,0 @@
-export declare function CommandCellPrice({ cost }: {
-    cost: number;
-}): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellPrice.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function CommandCellPrice({ cost }) {
-    let formattedCost = new Intl.NumberFormat("en", {
-        style: "currency",
-        currency: "USD",
-        minimumSignificantDigits: 2,
-        maximumFractionDigits: 3,
-    }).format(cost);
-    return _jsx("td", Object.assign({ "data-testid": "price" }, { children: formattedCost }));
-}

package/commandCell/CommandCellSwitch.d.ts

@@ -1,12 +0,0 @@
-export declare function CommandCellSwitch<T extends {
-    isEditing: boolean;
-    [key: string]: any;
-}>({ props, changeFunction, }: {
-    /** The GridCellProps object containing cell-related properties. */
-    props: {
-        dataItem: T;
-        field?: keyof T;
-    };
-    /** The function to call when the switch value changes. */
-    changeFunction: Function;
-}): import("react/jsx-runtime").JSX.Element;

package/commandCell/CommandCellSwitch.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Switch } from "@progress/kendo-react-inputs";
-export function CommandCellSwitch({ props, changeFunction, }) {
-    return (_jsx("td", Object.assign({ "data-testid": "switch" }, { children: props.dataItem.isEditing ? (_jsx(Switch, { onChange: () => changeFunction(), checked: props.dataItem[props.field] })) : (props.dataItem[props.field].toString()) })));
-}