@scheels-softdev/kendoreact-generics 4.0.8 → 4.0.10

package/GenericDropdown.d.ts

@@ -0,0 +1,16 @@
+import { ComboBoxProps } from "@progress/kendo-react-dropdowns";
+interface BaseProps<T> extends ComboBoxProps {
+    data: T[];
+    pageSize?: number;
+    onClear?: () => void;
+}
+interface SelectedDataProps<T> {
+    selectedData?: T;
+}
+interface SelectedIdProps<T> {
+    selectedId?: number;
+    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 default GenericDropdown;

package/GenericDropdown.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { ComboBox } from "@progress/kendo-react-dropdowns";
+// GenericDropdown component definition
+export function GenericDropdown(_a) {
+    var { data, onClear } = _a, props = __rest(_a, ["data", "onClear"]);
+    // Compute selected item based on the provided props using type guards
+    const selectedItem = useMemo(() => {
+        var _a;
+        if ("selectedData" in props) {
+            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;
+        }
+        return null;
+    }, [props, data]);
+    const [state, setState] = React.useState({
+        subsetData: data.slice(0, 6),
+        skip: 0,
+    });
+    const pageChange = (event) => {
+        const skip = event.page.skip;
+        const take = event.page.take;
+        const newSubsetData = data.slice(skip, skip + take);
+        setState({
+            subsetData: newSubsetData,
+            skip: skip,
+        });
+    };
+    return (_jsx(ComboBox, Object.assign({ data: state.subsetData, value: selectedItem, virtual: {
+            pageSize: 6,
+            skip: state.skip,
+            total: data.length,
+        }, onPageChange: pageChange }, props)));
+}
+export default GenericDropdown;

package/MultiSelectDropdown.d.ts

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

@@ -0,0 +1,44 @@
+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/{src/PropTypes.ts → PropTypes.d.ts}

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

package/PropTypes.js

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

package/Toolbar.d.ts

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

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

package/Utility.d.ts

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

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

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

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

@@ -1,138 +1,99 @@
-import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
+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: DataType[] = [];
+    const data = [];
     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(<GenericDropdown data={data} onChange={(e) => {}} textField="name" selectedData={selectedData} />);
-
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => { }, 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(<GenericDropdown data={data} onChange={() => {}} textField="name" selectedId={selectedId} idField="id" />);
-
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: () => { }, textField: "name", selectedId: selectedId, idField: "id" }));
         // 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: DataType | null = data[1];
-
+        let selectedData = data[1];
         // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
-        let result = render(<GenericDropdown data={data} onChange={(e) => (selectedData = e.value)} textField="name" selectedData={selectedData} />);
-
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = 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);
     });
     test("handles change event when selecting by id", () => {
         // Set initial selectedData to the second item in the data array
-        let selectedId: number | null = 1;
+        let selectedId = 1;
         // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
-        let result = render(
-            <GenericDropdown data={data} onChange={(e) => (selectedId = e?.value.id || null)} textField="name" selectedId={selectedId} idField="id" />
-        );
-
+        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" }));
         // 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: DataType | null = data[1];
-
+        let selectedData = data[1];
         // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
-        let result = render(<GenericDropdown data={data} onChange={(e) => (selectedData = e.value)} textField="name" selectedData={selectedData} />);
-
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = 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/commandCell/CommandCellCheckbox.d.ts

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

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

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

@@ -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, 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

@@ -0,0 +1,3 @@
+export declare function CommandCellPrice({ cost }: {
+    cost: number;
+}): import("react/jsx-runtime").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,12 @@
+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

@@ -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.js

@@ -0,0 +1,7 @@
+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.8",
+    "version": "4.0.10",
     "main": "index.js",
     "scripts": {
         "test": "jest",

package/jest.config.js

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

package/src/GenericDropdown.tsx

@@ -1,65 +0,0 @@
-import React, { useMemo } from "react";
-import { ComboBox, ComboBoxPageChangeEvent, ComboBoxProps } from "@progress/kendo-react-dropdowns";
-
-// Define the base properties that are always required
-interface BaseProps<T> extends ComboBoxProps {
-    data: T[];
-    pageSize?: number;
-    onClear?: () => void;
-}
-
-// Option 1: Props when only selectedData is provided
-interface SelectedDataProps<T> {
-    selectedData?: T;
-}
-
-// Option 2: Props when selectedId and idField are both provided
-interface SelectedIdProps<T> {
-    selectedId?: number;
-    idField: keyof T;
-}
-
-// Combining the props into a union type
-type GenericDropdownProps<T> = BaseProps<T> & (SelectedDataProps<T> | SelectedIdProps<T>);
-
-// GenericDropdown component definition
-export function GenericDropdown<T>({ data, pageSize = 6, onClear, ...props }: GenericDropdownProps<T>) {
-    // Compute selected item based on the provided props using type guards
-    const selectedItem = useMemo(() => {
-        if ("selectedData" in props) {
-            return props.selectedData;
-        } else if ("selectedId" in props && "idField" in props) {
-            return data.find((item) => item[props.idField] === props.selectedId) ?? null;
-        }
-        return null;
-    }, [props, data]);
-    const [skip, setSkip] = React.useState(0);
-    const [state, setState] = React.useState({
-        subsetData: data.slice(0, pageSize),
-        skip: 0,
-    });
-    const pageChange = (event: ComboBoxPageChangeEvent) => {
-        const skip = event.page.skip;
-        const take = event.page.take;
-        const newSubsetData = data.slice(skip, skip + take);
-        setState({
-            subsetData: newSubsetData,
-            skip: skip,
-        });
-    };
-    return (
-        <ComboBox
-            data={state.subsetData}
-            value={selectedItem}
-            virtual={{
-                pageSize,
-                skip,
-                total: data.length,
-            }}
-            onPageChange={pageChange}
-            {...props}
-        />
-    );
-}
-
-export default GenericDropdown;

package/src/MultiSelectDropdown.tsx

@@ -1,79 +0,0 @@
-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/src/Toolbar.tsx

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

@@ -1,19 +0,0 @@
-// 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/src/commandCell/CommandCellCheckbox.tsx

@@ -1,31 +0,0 @@
-import { Checkbox, CheckboxChangeEvent } from "@progress/kendo-react-inputs";
-
-export 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;
-}) {
-    const functionToRun = () => {
-        if (checked) {
-            onUncheck();
-        } else {
-            onCheck();
-        }
-    };
-
-    return (
-        <td className="justify-content-center" data-testid="checkbox">
-            <Checkbox checked={checked} onChange={functionToRun} disabled={disabled} />
-        </td>
-    );
-}

package/src/commandCell/CommandCellDate.tsx

@@ -1,36 +0,0 @@
-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/src/commandCell/CommandCellPrice.tsx

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

@@ -1,20 +0,0 @@
-import { Switch } from "@progress/kendo-react-inputs";
-export 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;
-}) {
-    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

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