@scheels-softdev/kendoreact-generics 2.6.5 → 2.6.7

package/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    preset: "ts-jest",
+    testEnvironment: "jsdom",
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@scheels-softdev/kendoreact-generics",
-    "version": "2.6.5",
+    "version": "2.6.7",
     "main": "index.js",
     "scripts": {
         "test": "jest",

package/src/FilterCellDropdown.tsx

@@ -0,0 +1,50 @@
+import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
+import { GridFilterCellProps } from "@progress/kendo-react-grid";
+import { Button } from "@progress/kendo-react-buttons";
+import { GenericDropdown } from "./GenericDropdown";
+
+interface DropdownFilterCellProps<T> extends GridFilterCellProps {
+    /** The data to populate the dropdown options */
+    data: T[];
+    /** The field names used to extract text values for display */
+    textField: keyof T;
+    /** The separator to use when concatenating multiple text values */
+    separator?: string;
+}
+
+// Define the DropdownFilterCell component with props of type DropdownFilterCellProps
+export function FilterCellDropdown<T>(props: DropdownFilterCellProps<T>) {
+    // Define a function that returns true if a value is not undefined or null, and is different from the default item
+    let hasValue: any = (value: string) => Boolean(value);
+
+    // Define an onChange function that will be called when the ComboBox value changes
+    const onChange = (event: ComboBoxChangeEvent) => {
+        // 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 : "", // Use the ID of the selected value as the filter value
+            operator: hasValue ? "eq" : "", // Use the "eq" operator if the value is non-empty, otherwise use an empty string
+            syntheticEvent: event.syntheticEvent,
+        });
+    };
+
+    // Define an onClearButtonClick function that will be called when the Clear button is clicked
+    const onClearButtonClick = (event: any) => {
+        event.preventDefault();
+        // Call the onChange function passed down as a prop, passing a filter object with empty values
+        props.onChange({
+            value: "", // Set the filter value to an empty string
+            operator: "", // Set the operator to an empty string
+            syntheticEvent: event,
+        });
+    };
+
+    // Render a div containing a GenericDropdownWithSearch component and a Clear button
+    return (
+        <div className="k-filtercell" data-testid="dropdownFilter">
+            <GenericDropdown data={props.data} onChange={onChange} selectedId={props.value} textField={props.textField} separator={props.separator} />
+            <Button title="Clear" disabled={!hasValue(props.value)} onClick={onClearButtonClick} icon="filter-clear" />
+        </div>
+    );
+}

package/src/GenericDropdown.tsx

@@ -0,0 +1,135 @@
+import { ComboBox, ComboBoxFilterChangeEvent, ComboBoxPageChangeEvent } from "@progress/kendo-react-dropdowns";
+import { filterBy, process } from "@progress/kendo-data-query";
+import { CSSProperties, useEffect, useRef, useState } from "react";
+import { Skeleton } from "@progress/kendo-react-indicators";
+import { Guard } from "@scheels-softdev/frontend-utility-functions";
+//TODO add a style property
+//TODO add metadata documentation
+// component that renders a dropdown with a search filter
+/**
+ * JSX Component for displaying items in a virtualized combobox
+ * @template T - The type of the data objects in the dropdown.
+ * @param {object} props - The component props.
+ * @returns {JSX.Element}
+ */
+
+type GenericDDProps<T> = {
+    /*1* The data to populate the dropdown options */
+    data: T[];
+    /** The ID of the currently selected item. (optional)*/
+    selectedId?: number;
+    /** The currently selected data object. (optional)*/
+    selectedData?: T;
+    /** Callback function triggered when the selected value changes*/
+    onChange: Function;
+    /**  The field names used to extract text values for display */
+    textField: keyof T;
+    /**  The separator to use when concatenating multiple text values. (optional)*/
+    separator?: string;
+    /**  Determines whether the dropdown is disabled. (optional)*/
+    idField?: keyof T;
+    /**  The field name used as the identity key (optional)*/
+    disabled?: boolean;
+    /** The label displayed for the dropdown (optional)*/
+    title?: string;
+    /** The Determines whether the clear button is hidden from the dropdown. (optional)*/
+    hideClearButton?: boolean;
+    /** Custom CSS properties for the component. (optional)*/
+    style?: CSSProperties;
+    isLoading?: boolean;
+};
+export function GenericDropdown<T>({
+    data,
+    selectedId,
+    selectedData,
+    onChange,
+    textField,
+    disabled,
+    idField,
+    title,
+    hideClearButton,
+    style,
+    isLoading,
+}: GenericDDProps<T>) {
+    //local state
+    const pageSize = 8;
+    if (selectedId !== undefined && selectedData !== undefined) {
+        throw new Error("You cannot provide both selectedData and selectedId to GenericDropdown.");
+    }
+
+    //useState
+    const [selectedObject, setSelectedObject] = useState<T | null>(null);
+    const [state, setState] = useState({
+        skip: 0,
+        total: data.length,
+        subsetData: data.slice(0, pageSize),
+    });
+
+    //trigger functions
+    useEffect(() => {
+        setSelectedObject(
+            selectedId
+                ? data.find((item: any) => selectedId === item[idField || "id"]) ?? null
+                : data.find((x) => Guard.Ensure.EqualObjects({ ...x, ...selectedData }, { ...x! })) ?? null
+        );
+    }, [selectedId, selectedData, data]);
+    useEffect(() => {
+        setState({
+            skip: 0,
+            total: data.length,
+            subsetData: data.slice(0, pageSize),
+        });
+    }, [data]);
+
+    //external function variables
+    let filteredData = useRef(data.slice());
+
+    //function creation
+    // function to handle filter changes
+    const onFilterChange = (event: ComboBoxFilterChangeEvent) => {
+        if (event.filter.value?.length) filteredData.current = filterBy(data.slice(), event.filter);
+        else filteredData.current = data;
+        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: ComboBoxPageChangeEvent) => {
+        console.log("page change data: ", event.page, filteredData.current);
+        const skip = event.page.skip;
+        const take = event.page.take;
+        const newSubsetData = filteredData.current.length ? filteredData.current.slice(skip, skip + take) : data.slice(skip, skip + take);
+        setState({ ...state, subsetData: newSubsetData, skip: skip });
+    };
+    return (
+        <div data-testid={"dropdown"}>
+            <ComboBox
+                style={style}
+                label={title}
+                disabled={disabled || isLoading}
+                data={state.subsetData} // data to display in the dropdown
+                textField={textField.toString()}
+                virtual={{
+                    // enable virtualization for large datasets
+                    total: state.total,
+                    pageSize: pageSize,
+                    skip: state.skip,
+                }}
+                suggest
+                onPageChange={pageChange} // handle page changes for virtualization
+                filterable={true} // enable filter
+                onFilterChange={onFilterChange} // handle filter changes
+                popupSettings={{
+                    height: "210px",
+                }}
+                onChange={(e) => onChange(e)}
+                onBlur={(e) => e.nativeEvent.preventDefault()}
+                clearButton={!hideClearButton}
+                value={selectedObject}
+            />
+        </div>
+    );
+}

package/src/MultiSelectDropdown.tsx

@@ -0,0 +1,79 @@
+import { useRef, useState } from "react";
+import { filterBy } from "@progress/kendo-data-query";
+import { MultiSelect, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent } from "@progress/kendo-react-dropdowns";
+export function MultiSelectDropdown<T>({
+    data,
+    selectedData,
+    textField,
+    onSelect,
+    title,
+    limit,
+}: {
+    /** The data array for the dropdown options. */
+    data: T[];
+    /** The array of selected data items. */
+    selectedData: T[];
+    /** The field names to use for text values in the dropdown. */
+    textField: keyof T;
+    /** The function to call when an item is selected or deselected. */
+    onSelect: Function;
+    /** The optional title of the dropdown. */
+    title?: string;
+    /** The optional limit of the maximum number of selected items. */
+    limit?: number;
+}) {
+    //local state
+    const pageSize = 8;
+    const [state, setState] = useState({
+        skip: 0,
+        total: data.length,
+        subsetData: data.slice(0, pageSize),
+    });
+
+    //external function variables
+    const filteredData = useRef(data.slice());
+    //function creation
+    // function to handle filter changes
+    const onFilterChange = (event: MultiSelectFilterChangeEvent) => {
+        if (event.filter.value?.length) filteredData.current = filterBy(data.slice(), event.filter);
+        else filteredData.current = data;
+        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: MultiSelectPageChangeEvent) => {
+        const skip = event.page.skip;
+        const take = event.page.take;
+        const newSubsetData = filteredData.current.slice(skip, skip + take);
+        setState({ ...state, subsetData: newSubsetData, skip: skip });
+    };
+
+    return (
+        <div data-testid={"multiselect"} style={{ width: "100%" }}>
+            <MultiSelect
+                label={title}
+                data={state.subsetData}
+                textField={textField.toString()} // name of the field to use for display text
+                style={{ width: "100%" }}
+                virtual={{
+                    total: state.total,
+                    pageSize: pageSize,
+                    skip: state.skip,
+                }}
+                onPageChange={pageChange}
+                filterable={true}
+                onFilterChange={onFilterChange}
+                popupSettings={{
+                    height: "210px",
+                }}
+                onChange={(e) => onSelect(limit && e.value.length ? e.value.slice(0, limit) : e.value)}
+                autoClose={false}
+                value={selectedData} ///right now: clears selected values whenever selected Vendor Value changes. This will need to be changed to something better in the future
+            />
+        </div>
+    );
+}

package/{PropTypes.d.ts → src/PropTypes.ts}

@@ -2,6 +2,7 @@ export type CommonProps = {
     isEditing?: boolean;
     id?: number;
 };
+
 export type GridChangeEvent = {
     value: any;
     field?: string;

package/src/Toolbar.tsx

@@ -0,0 +1,27 @@
+type CommonProps = {
+    id: number;
+    isEditing?: boolean;
+};
+export function ToolbarButton<T extends CommonProps>({
+    item,
+    data,
+    setData,
+}: {
+    /** The item object to add. */
+    item: T;
+    /** The data array. */
+    data: T[];
+    /** The function to set the updated data. */
+    setData: Function;
+}) {
+    return (
+        <button
+            title="Add new"
+            className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary"
+            onClick={() => setData([{ ...item, isEditing: true, id: 0 }, ...data])}
+            disabled={data.find((x) => x.isEditing) ? true : false}
+        >
+            Add Another
+        </button>
+    );
+}

package/src/Utility.ts

@@ -0,0 +1,19 @@
+// function to concatenate text values from dataItem using specified fields and separator
+export const getTextValue = (dataItem: any, fields: string[], separator?: string) => {
+    let textValue = "";
+    fields.forEach((field, index) => (textValue += index > 0 ? (separator ? separator : " ") + dataItem[field] : dataItem[field]));
+    return textValue;
+};
+
+export const getDropdownArray = <T>(data: T[], textFields: (keyof T)[], separator: string) => {
+    return data.map((x) => {
+        return {
+            ...x,
+            textValue: getTextValue(
+                x,
+                textFields.map((x) => x.toString()),
+                separator
+            ),
+        };
+    });
+};

package/{_index.test.js → src/_index.test.tsx}

@@ -1,70 +1,97 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { GenericDropdown } from "./GenericDropdown";
+import { GridChangeEvent } from "./PropTypes";
 import { fireEvent, render } from "@testing-library/react";
+type DataType = {
+    id: number;
+    name: string;
+};
 describe("GenericDropdown", () => {
-    const data = [];
+    const data: DataType[] = [];
     for (let i = 1; i < 20; i++) {
         data.push({ id: i, name: `Option ${i}` });
     }
     test("renders virtualized ordering by index when passed selectedData", () => {
         // 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: () => { }, textField: "name", selectedData: selectedData }));
+        let result = render(<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");
         // Simulate a change event on the input element by setting its target value to "O"
         fireEvent.change(input, { target: { value: "O" } });
+
         // Simulate a key down event on the input element with the key value of "ArrowDown"
         fireEvent.keyDown(input, { key: "ArrowDown" });
+
         // Query the rendered result for elements with the text "Option 1", "Option 2", and "Option 3"
         let item1 = result.queryByText("Option 1");
         let item2 = result.queryByText("Option 2");
         let item3 = result.queryByText("Option 3");
+
         // Ensure that item1, item2, and item3 are not undefined (i.e., they are rendered)
         expect(item1).not.toBeUndefined();
         expect(item2).not.toBeUndefined();
         expect(item3).not.toBeUndefined();
+
         // Ensure that there are no elements with the text "Option 9" (i.e., it is not rendered)
         expect(result.queryAllByText("Option 9")).toHaveLength(0);
     });
     test("renders virtualized ordering by index when passed selectedId", () => {
         // 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 }));
+        let result = render(<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");
         // Simulate a change event on the input element by setting its target value to "O"
         fireEvent.change(input, { target: { value: "O" } });
+
         // Simulate a key down event on the input element with the key value of "ArrowDown"
         fireEvent.keyDown(input, { key: "ArrowDown" });
+
         // Query the rendered result for elements with the text "Option 1", "Option 2", and "Option 3"
         let item1 = result.queryByText("Option 1");
         let item2 = result.queryByText("Option 2");
         let item3 = result.queryByText("Option 3");
+
         // Ensure that item1, item2, and item3 are not undefined (i.e., they are rendered)
         expect(item1).not.toBeUndefined();
         expect(item2).not.toBeUndefined();
         expect(item3).not.toBeUndefined();
+
         // Ensure that there are no elements with the text "Option 9" (i.e., it is not rendered)
         expect(result.queryAllByText("Option 9")).toHaveLength(0);
     });
+
     test("handles change event when selecting by object", () => {
         // 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) => (selectedData = data[e.value]), textField: "name", selectedData: selectedData }));
+        let result = render(
+            <GenericDropdown data={data} onChange={(e: GridChangeEvent) => (selectedData = data[e.value])} textField="name" selectedData={selectedData} />
+        );
+
         // 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");
         fireEvent.change(input, { target: { value: "O" } });
+
         // Get the item element with the text "Option 2"
         let item2 = result.getByText("Option 2");
+
         // Simulate a click event on the item element
         fireEvent.click(item2);
+
         // Ensure that the input element's value attribute is set to "Option 2"
         expect(selectedData.id).toBe(2);
     });
@@ -72,28 +99,43 @@ 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.value.id), textField: "name", selectedId: selectedId, idField: "id" }));
+        let result = render(
+            <GenericDropdown data={data} onChange={(e: GridChangeEvent) => (selectedId = e.value.id)} 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");
         fireEvent.change(input, { target: { value: "O" } });
+
         // Get the item element with the text "Option 2"
         let item2 = result.getByText("Option 2");
+
         // Simulate a click event on the item element
+
         fireEvent.click(item2);
+
         // Ensure that the input element's value attribute is set to "Option 2"
         expect(selectedId).toBe(2);
     });
+
     test("only displays items that match the search", () => {
         // 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) => (selectedData = data[e.value]), textField: "name", selectedData: selectedData }));
+        let result = render(
+            <GenericDropdown data={data} onChange={(e: GridChangeEvent) => (selectedData = data[e.value])} textField="name" selectedData={selectedData} />
+        );
+
         let input = result.getByRole("combobox"); // Get the input element by its role of "combobox"
         fireEvent.change(input, { target: { value: "9" } }); //simulate a change event on the input element
+
         // Query the rendered result for elements with the text "Option 1" and "Option 9", and store the results in variables
         let item1 = result.queryAllByText("Option 1");
         let item9 = result.queryAllByText("Option 9");
+
         // Ensure that there are no elements with the text "Option 1" and at least one element with the text "Option 9"
         expect(item1).toHaveLength(0);
         expect(item9.length).toBeGreaterThan(0);

package/src/commandCell/CommandCellCheckbox.tsx

@@ -0,0 +1,28 @@
+import { Checkbox } from "@progress/kendo-react-inputs";
+
+export function CommandCellCheckBox({
+    checked,
+    onCheck,
+    onUncheck,
+}: {
+    /** 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: Function;
+    /** Callback function to be called when the checkbox is unchecked. */
+    onUncheck: Function;
+}) {
+    const functionToRun = () => {
+        if (checked) {
+            onUncheck();
+        } else {
+            onCheck();
+        }
+    };
+
+    return (
+        <td className="justify-content-center" data-testid="checkbox">
+            <Checkbox checked={checked} onChange={functionToRun} />
+        </td>
+    );
+}

package/{commandCell/CommandCellDDWithoutId.d.ts → src/commandCell/CommandCellDDWithoutId.tsx}

@@ -1,5 +1,7 @@
 import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
-export declare function CommandCellDDWithoutId<T>(props: {
+import { GenericDropdown } from "../GenericDropdown";
+
+export function CommandCellDDWithoutId<T>(props: {
     /** The data array for the dropdown options. */
     data: T[];
     /** The currently selected data item. */
@@ -16,4 +18,16 @@ export declare function CommandCellDDWithoutId<T>(props: {
     isEditing?: boolean;
     /** Determines if the clear button should be displayed in the dropdown. */
     showClearButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}) {
+    // Function implementation...
+    return (
+        <td>
+            {props.checkEditField && !props.isEditing ? (
+                <></> //TODO remove this from Marketing display
+            ) : (
+                // If "props.checkEditField" is false or "props.isEditing" is true, render the GenericDropdownWithSearch component with the "props" passed to it
+                <GenericDropdown {...props} />
+            )}
+        </td>
+    );
+}

package/src/commandCell/CommandCellDate.tsx

@@ -0,0 +1,36 @@
+import { DatePicker } from "@progress/kendo-react-dateinputs";
+import moment from "moment";
+import { CommonProps, GridChangeEvent } from "../PropTypes";
+export 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;
+}) {
+    let valString = "" + dataItem[field];
+    let date = moment(valString).format("MM/DD/YY");
+    return (
+        <td data-testid="date">
+            {valString === undefined || dataItem.isEditing ? (
+                <DatePicker
+                    value={new Date(moment(valString).format("MMMM, DD YYYY"))}
+                    onChange={(e) =>
+                        onChange({
+                            field: field.toString(),
+                            value: moment(e.value),
+                            dataItem: dataItem,
+                        })
+                    }
+                />
+            ) : (
+                date
+            )}
+        </td>
+    );
+}

package/{commandCell/CommandCellDropdown.d.ts → src/commandCell/CommandCellDropdown.tsx}

@@ -1,5 +1,10 @@
 import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
-export declare function CommandCellDropdown<T>(props: {
+import { GenericDropdown } from "../GenericDropdown";
+import { CommonProps } from "../PropTypes";
+
+// 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<T>(props: {
     /** The data array for the dropdown options. */
     data: T[];
     /** The ID of the currently selected item. */
@@ -18,4 +23,15 @@ export declare function CommandCellDropdown<T>(props: {
     idField?: keyof T;
     /** Determines if the clear button should be displayed in the dropdown. */
     showClearButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}) {
+    return (
+        <td>
+            {props.checkEditField && !props.isEditing && props.data.length ? (
+                <></> //TODO remove this from Marketing display
+            ) : (
+                // If "props.checkEditField" is false or "props.isEditing" is true, render the GenericDropdownWithSearch component with the "props" passed to it
+                <GenericDropdown {...props} />
+            )}
+        </td>
+    );
+}

package/src/commandCell/CommandCellPrice.tsx

@@ -0,0 +1,9 @@
+export function CommandCellPrice({ cost }: { /** The cost value for the cell. */ cost: number }) {
+    let formattedCost: any = new Intl.NumberFormat("en", {
+        style: "currency",
+        currency: "USD",
+        minimumSignificantDigits: 2,
+        maximumFractionDigits: 3,
+    }).format(cost);
+    return <td data-testid="price">{formattedCost}</td>;
+}

package/src/commandCell/CommandCellSwitch.tsx

@@ -0,0 +1,21 @@
+import { GridCellProps } from "@progress/kendo-react-grid";
+import { Switch } from "@progress/kendo-react-inputs";
+export function CommandCellSwitch({
+    props,
+    changeFunction,
+}: {
+    /** The GridCellProps object containing cell-related properties. */
+    props: GridCellProps;
+    /** The function to call when the switch value changes. */
+    changeFunction: Function;
+}) {
+    return (
+        <td data-testid="switch">
+            {props.dataItem.isEditing ? (
+                <Switch onChange={() => changeFunction()} checked={props.dataItem[props.field!]} />
+            ) : (
+                props.dataItem[props.field!].toString()
+            )}
+        </td>
+    );
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "strict": true,
+        "jsx": "react-jsx",
+        "declaration": true,
+        "esModuleInterop": true,
+        "outDir": "dist",
+        "target": "es6",
+        "module": "es6",
+        "moduleResolution": "node"
+    },
+    "include": ["src"]
+}

package/FilterCellDropdown.d.ts

@@ -1,11 +0,0 @@
-import { GridFilterCellProps } from "@progress/kendo-react-grid";
-interface DropdownFilterCellProps<T> extends GridFilterCellProps {
-    /** The data to populate the dropdown options */
-    data: T[];
-    /** The field names used to extract text values for display */
-    textField: keyof T;
-    /** The separator to use when concatenating multiple text values */
-    separator?: string;
-}
-export declare function FilterCellDropdown<T>(props: DropdownFilterCellProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

package/FilterCellDropdown.js

@@ -1,32 +0,0 @@
-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);
-    // Define an onChange function that will be called when the ComboBox value changes
-    const onChange = (event) => {
-        var _a, _b;
-        // Update the hasValue variable based on the new value of the ComboBox
-        hasValue = hasValue((_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.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, onChange: onChange, selectedId: props.value, textField: props.textField, separator: props.separator }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
-}

package/GenericDropdown.d.ts

@@ -1,33 +0,0 @@
-import { CSSProperties } from "react";
-/**
- * JSX Component for displaying items in a virtualized combobox
- * @template T - The type of the data objects in the dropdown.
- * @param {object} props - The component props.
- * @returns {JSX.Element}
- */
-type GenericDDProps<T> = {
-    data: T[];
-    /** The ID of the currently selected item. (optional)*/
-    selectedId?: number;
-    /** The currently selected data object. (optional)*/
-    selectedData?: T;
-    /** Callback function triggered when the selected value changes*/
-    onChange: Function;
-    /**  The field names used to extract text values for display */
-    textField: keyof T;
-    /**  The separator to use when concatenating multiple text values. (optional)*/
-    separator?: string;
-    /**  Determines whether the dropdown is disabled. (optional)*/
-    idField?: keyof T;
-    /**  The field name used as the identity key (optional)*/
-    disabled?: boolean;
-    /** The label displayed for the dropdown (optional)*/
-    title?: string;
-    /** The Determines whether the clear button is hidden from the dropdown. (optional)*/
-    hideClearButton?: boolean;
-    /** Custom CSS properties for the component. (optional)*/
-    style?: CSSProperties;
-    isLoading?: boolean;
-};
-export declare function GenericDropdown<T>({ data, selectedId, selectedData, onChange, textField, disabled, idField, title, hideClearButton, style, isLoading, }: GenericDDProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

package/GenericDropdown.js

@@ -1,67 +0,0 @@
-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";
-import { Skeleton } from "@progress/kendo-react-indicators";
-import { Guard } from "@scheels-softdev/frontend-utility-functions";
-export function GenericDropdown({ data, selectedId, selectedData, onChange, textField, disabled, idField, title, hideClearButton, style, isLoading, }) {
-    //local state
-    const pageSize = 8;
-    if (selectedId !== undefined && selectedData !== undefined) {
-        throw new Error("You cannot provide both selectedData and selectedId to GenericDropdown.");
-    }
-    //useState
-    const [selectedObject, setSelectedObject] = useState(null);
-    const [state, setState] = useState({
-        skip: 0,
-        total: data.length,
-        subsetData: data.slice(0, pageSize),
-    });
-    //trigger functions
-    useEffect(() => {
-        var _a, _b;
-        setSelectedObject(selectedId
-            ? (_a = data.find((item) => selectedId === item[idField || "id"])) !== null && _a !== void 0 ? _a : null
-            : (_b = data.find((x) => Guard.Ensure.EqualObjects(Object.assign(Object.assign({}, x), selectedData), Object.assign({}, x)))) !== null && _b !== void 0 ? _b : null);
-    }, [selectedId, selectedData, data]);
-    useEffect(() => {
-        setState({
-            skip: 0,
-            total: data.length,
-            subsetData: data.slice(0, pageSize),
-        });
-    }, [data]);
-    //external function variables
-    let filteredData = useRef(data.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(data.slice(), event.filter);
-        else
-            filteredData.current = data;
-        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) => {
-        console.log("page change data: ", event.page, filteredData.current);
-        const skip = event.page.skip;
-        const take = event.page.take;
-        const newSubsetData = filteredData.current.length ? filteredData.current.slice(skip, skip + take) : data.slice(skip, skip + take);
-        setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
-    };
-    return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: data.length && !isLoading ? (_jsx(ComboBox, { style: style, label: title, disabled: disabled, data: state.subsetData, textField: textField.toString(), 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) => onChange(e), onBlur: (e) => e.nativeEvent.preventDefault(), clearButton: !hideClearButton, value: selectedObject })) : (_jsx(Skeleton, { shape: "rectangle", style: style ? style : { height: "40px", width: "100%" } })) })));
-}

package/MultiSelectDropdown.d.ts

@@ -1,14 +0,0 @@
-export declare function MultiSelectDropdown<T>({ data, selectedData, textField, onSelect, title, limit, }: {
-    /** The data array for the dropdown options. */
-    data: T[];
-    /** The array of selected data items. */
-    selectedData: T[];
-    /** The field names to use for text values in the dropdown. */
-    textField: keyof T;
-    /** The function to call when an item is selected or deselected. */
-    onSelect: Function;
-    /** The optional title of the dropdown. */
-    title?: string;
-    /** The optional limit of the maximum number of selected items. */
-    limit?: number;
-}): import("react/jsx-runtime").JSX.Element;

package/MultiSelectDropdown.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useState } from "react";
-import { filterBy } from "@progress/kendo-data-query";
-import { MultiSelect } from "@progress/kendo-react-dropdowns";
-export function MultiSelectDropdown({ data, selectedData, textField, onSelect, title, limit, }) {
-    //local state
-    const pageSize = 8;
-    const [state, setState] = useState({
-        skip: 0,
-        total: data.length,
-        subsetData: data.slice(0, pageSize),
-    });
-    //external function variables
-    const filteredData = useRef(data.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(data.slice(), event.filter);
-        else
-            filteredData.current = data;
-        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 }));
-    };
-    return (_jsx("div", Object.assign({ "data-testid": "multiselect", style: { width: "100%" } }, { children: _jsx(MultiSelect, { label: title, data: state.subsetData, textField: textField.toString(), style: { width: "100%" }, virtual: {
-                total: state.total,
-                pageSize: pageSize,
-                skip: state.skip,
-            }, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
-                height: "210px",
-            }, onChange: (e) => onSelect(limit && e.value.length ? e.value.slice(0, limit) : e.value), autoClose: false, value: selectedData }) })));
-}

package/PropTypes.js

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

package/Toolbar.d.ts

@@ -1,13 +0,0 @@
-type CommonProps = {
-    id: number;
-    isEditing?: boolean;
-};
-export declare function ToolbarButton<T extends CommonProps>({ item, data, setData, }: {
-    /** The item object to add. */
-    item: T;
-    /** The data array. */
-    data: T[];
-    /** The function to set the updated data. */
-    setData: Function;
-}): import("react/jsx-runtime").JSX.Element;
-export {};

package/Toolbar.js

@@ -1,4 +0,0 @@
-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]), disabled: data.find((x) => x.isEditing) ? true : false }, { children: "Add Another" })));
-}

package/Utility.d.ts

@@ -1,4 +0,0 @@
-export declare const getTextValue: (dataItem: any, fields: string[], separator?: string) => string;
-export declare const getDropdownArray: <T>(data: T[], textFields: (keyof T)[], separator: string) => (T & {
-    textValue: string;
-})[];

package/Utility.js

@@ -1,11 +0,0 @@
-// function to concatenate text values from dataItem using specified fields and separator
-export const getTextValue = (dataItem, fields, separator) => {
-    let textValue = "";
-    fields.forEach((field, index) => (textValue += index > 0 ? (separator ? separator : " ") + dataItem[field] : dataItem[field]));
-    return textValue;
-};
-export const getDropdownArray = (data, textFields, separator) => {
-    return data.map((x) => {
-        return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
-    });
-};

package/_index.test.d.ts

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

package/commandCell/CommandCellCheckbox.d.ts

@@ -1,8 +0,0 @@
-export declare function CommandCellCheckBox({ checked, onCheck, onUncheck, }: {
-    /** 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: Function;
-    /** Callback function to be called when the checkbox is unchecked. */
-    onUncheck: Function;
-}): 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, }) {
-    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 }) })));
-}

package/commandCell/CommandCellDDWithoutId.js

@@ -1,9 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { GenericDropdown } from "../GenericDropdown";
-export function CommandCellDDWithoutId(props) {
-    // Function implementation...
-    return (_jsx("td", { children: props.checkEditField && !props.isEditing ? (_jsx(_Fragment, {}) //TODO remove this from Marketing display
-        ) : (
-        // 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/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/CommandCellDropdown.js

@@ -1,10 +0,0 @@
-import { Fragment as _Fragment, 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.data.length ? (_jsx(_Fragment, {}) //TODO remove this from Marketing display
-        ) : (
-        // 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

@@ -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,7 +0,0 @@
-import { GridCellProps } from "@progress/kendo-react-grid";
-export declare function CommandCellSwitch({ props, changeFunction, }: {
-    /** The GridCellProps object containing cell-related properties. */
-    props: GridCellProps;
-    /** 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()) })));
-}

package/index.js

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