@scheels-softdev/kendoreact-generics 1.2.1

package/FilterCellDropdown.d.ts

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

package/FilterCellDropdown.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@progress/kendo-react-buttons";
+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);
+    // 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
+        hasValue = hasValue(event.target.value.id);
+        // Call the onChange function passed down as a prop, passing a filter object with the new value and operator
+        props.onChange({
+            value: hasValue ? event.target.value.id : "",
+            operator: hasValue ? "eq" : "",
+            syntheticEvent: event.syntheticEvent,
+        });
+    };
+    // Define an onClearButtonClick function that will be called when the Clear button is clicked
+    const onClearButtonClick = (event) => {
+        event.preventDefault();
+        // Call the onChange function passed down as a prop, passing a filter object with empty values
+        props.onChange({
+            value: "",
+            operator: "",
+            syntheticEvent: event,
+        });
+    };
+    // 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" })] })));
+}

package/GenericDropdown.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare function GenericDropdown<T>({ data, // array of data objects
+selectedId, // id of the selected data object
+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, }: {
+    data: T[];
+    selectedId: number;
+    changeEvent: Function;
+    textFields: (keyof T)[];
+    separator?: string;
+    disabled?: boolean;
+}): JSX.Element;

package/GenericDropdown.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComboBox } from "@progress/kendo-react-dropdowns";
+import { filterBy } from "@progress/kendo-data-query";
+import { useEffect, useRef, useState } from "react";
+// function to concatenate text values from dataItem using specified fields and separator
+const getTextValue = (dataItem, fields, separator) => {
+    let textValue = "";
+    fields.forEach((field, index) => (textValue += index > 0 ? (separator ? separator : " ") + dataItem[field] : dataItem[field]));
+    return textValue;
+};
+// component that renders a dropdown with a search filter
+export function GenericDropdown({ data, // array of data objects
+selectedId, // id of the selected data object
+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
+ }) {
+    //redux state
+    //local state
+    const pageSize = 15;
+    const [dataList, setDataList] = useState(data.map((x) => {
+        return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
+    }));
+    const [state, setState] = useState({
+        skip: 0,
+        total: dataList.length,
+        subsetData: dataList.slice(0, pageSize),
+    });
+    //external function variables
+    const filteredData = useRef(dataList.slice());
+    //function creation
+    // function to handle filter changes
+    const onFilterChange = (event) => {
+        var _a;
+        if ((_a = event.filter.value) === null || _a === void 0 ? void 0 : _a.length)
+            filteredData.current = filterBy(dataList.slice(), event.filter);
+        else
+            filteredData.current = dataList;
+        const newData = filteredData.current.slice(0, pageSize);
+        setState({
+            subsetData: newData,
+            skip: 0,
+            total: filteredData.current.length,
+        });
+    };
+    // function to handle page changes for virtualization
+    const pageChange = (event) => {
+        const skip = event.page.skip;
+        const take = event.page.take;
+        const newSubsetData = filteredData.current.slice(skip, skip + take);
+        setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
+    };
+    //change event listeners
+    useEffect(() => {
+        setDataList(data.map((x) => {
+            return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
+        }));
+    }, [data, textFields, separator]);
+    return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: _jsx(ComboBox, { disabled: disabled, style: {
+                maxWidth: "var(--app-nav-width)",
+            }, data: state.subsetData, textField: "textValue", virtual: {
+                // enable virtualization for large datasets
+                total: state.total,
+                pageSize: pageSize,
+                skip: state.skip,
+            }, 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.id) }) })));
+}

package/PropTypes.d.ts

@@ -0,0 +1,9 @@
+export type CommonProps = {
+    isEditing?: boolean;
+    id: number;
+};
+export type GridChangeEvent = {
+    value: any;
+    field?: string;
+    dataItem: any;
+};

package/PropTypes.js

@@ -0,0 +1 @@
+export {};

package/Toolbar.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type CommonProps = {
+    id: number;
+    isEditing?: boolean;
+};
+export declare function ToolbarButton<T extends CommonProps>({ item, data, setData }: {
+    item: T;
+    data: T[];
+    setData: Function;
+}): JSX.Element;
+export {};

package/Toolbar.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ToolbarButton({ item, data, setData }) {
+    return (_jsx("button", Object.assign({ title: "Add new", className: "k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary", onClick: () => setData([Object.assign(Object.assign({}, item), { isEditing: true, id: 0 }), ...data]) }, { children: "Add Another" })));
+}

package/commandCell/CommandCellCheckbox.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function CommandCellCheckBox({ checked, functionToRunOnCheck, functionToRunOnUncheck, }: {
+    checked: boolean;
+    functionToRunOnCheck: Function;
+    functionToRunOnUncheck: Function;
+}): JSX.Element;

package/commandCell/CommandCellCheckbox.js

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

package/commandCell/CommandCellDate.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CommonProps, GridChangeEvent } from "../PropTypes";
+export declare function CommandCellDate<T extends CommonProps>({ dataItem, chgFn: changeFunction, field, }: {
+    dataItem: T;
+    chgFn: (e: GridChangeEvent) => void;
+    field: keyof T;
+}): JSX.Element;

package/commandCell/CommandCellDate.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatePicker } from "@progress/kendo-react-dateinputs";
+import moment from "moment";
+export function CommandCellDate({ dataItem, chgFn: changeFunction, 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) => changeFunction({
+                field: field.toString(),
+                value: moment(e.value),
+                dataItem: dataItem,
+            }) })) : (date) })));
+}

package/commandCell/CommandCellDropdown.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
+import { CommonProps } from "../PropTypes";
+export declare function CommandCellDropdown<T extends CommonProps>(props: {
+    data: T[];
+    selectedId: number;
+    textFields: (keyof T)[];
+    changeEvent: (e: ComboBoxChangeEvent) => void;
+    separator?: string;
+    checkEditField?: boolean;
+    isEditing?: boolean;
+}): JSX.Element;

package/commandCell/CommandCellDropdown.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GenericDropdown } from "../GenericDropdown";
+// This exports a function component called "CommandCellDropdown"
+// It takes in various props that are used to render a dropdown in a table cell
+export function CommandCellDropdown(props) {
+    return (_jsx("td", { children: props.checkEditField && !props.isEditing ? (props.textFields.map((x) => props.data.find((y) => y.id === props.selectedId)[x]).join(props.separator || " ")) : (
+        // If "props.checkEditField" is false or "props.isEditing" is true, render the GenericDropdownWithSearch component with the "props" passed to it
+        _jsx(GenericDropdown, Object.assign({}, props))) }));
+}

package/commandCell/CommandCellPrice.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function CommandCellPrice({ cost }: {
+    cost: number;
+}): JSX.Element;

package/commandCell/CommandCellPrice.js

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { GridCellProps } from "@progress/kendo-react-grid";
+export declare function CommandCellSwitch({ props, changeFunction }: {
+    props: GridCellProps;
+    changeFunction: Function;
+}): JSX.Element;

package/commandCell/CommandCellSwitch.js

@@ -0,0 +1,5 @@
+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()) })));
+}

package/index.d.ts

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

package/index.js

@@ -0,0 +1,8 @@
+export { CommandCellCheckBox } from "./commandCell/CommandCellCheckbox";
+export { CommandCellDate } from "./commandCell/CommandCellDate";
+export { CommandCellDropdown } from "./commandCell/CommandCellDropdown";
+export { CommandCellPrice } from "./commandCell/CommandCellPrice";
+export { CommandCellSwitch } from "./commandCell/CommandCellSwitch";
+export { FilterCellDropdown } from "./FilterCellDropdown";
+export { ToolbarButton } from "./Toolbar";
+export { GenericDropdown } from "./GenericDropdown";

package/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "@scheels-softdev/kendoreact-generics",
+    "version": "1.2.1",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "clean": "rm -r ./dist && mkdir dist",
+        "build": "npm run clean && tsc && cp package.json README.md ./dist"
+    },
+    "keywords": [
+        "kendo"
+    ],
+    "author": "JaegerEdward98",
+    "license": "ISC",
+    "dependencies": {
+        "@progress/kendo-data-query": "^1.6.0",
+        "npmrc": "^1.1.1"
+    },
+    "devDependencies": {
+        "@progress/kendo-react-dateinputs": "^5.12.0",
+        "@progress/kendo-react-dropdowns": "^5.12.0",
+        "@progress/kendo-react-grid": "^5.12.0",
+        "@progress/kendo-react-inputs": "^5.12.0",
+        "@types/moment": "^2.13.0",
+        "@types/react": "^18.0.28",
+        "moment": "^2.29.4",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "typescript": "^4.9.5"
+    },
+    "description": ""
+}