@scheels-softdev/kendoreact-generics 2.5.6 → 2.6.0

package/FilterCellDropdown.d.ts

@@ -3,7 +3,7 @@ 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;
+    textFields: (keyof T)[];
     /** The separator to use when concatenating multiple text values */
     separator?: string;
 }

package/FilterCellDropdown.js

@@ -28,5 +28,5 @@ export function FilterCellDropdown(props) {
         });
     };
     // Render a div containing a GenericDropdownWithSearch component and a Clear button
-    return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data, onChange: onChange, selectedId: props.value, textField: props.textField, separator: props.separator }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
+    return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data, onChange: onChange, selectedId: props.value, textFields: [...props.textFields], separator: props.separator }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
 }

package/GenericDropdown.d.ts

@@ -14,7 +14,7 @@ type GenericDDProps<T> = {
     /** Callback function triggered when the selected value changes*/
     onChange: Function;
     /**  The field names used to extract text values for display */
-    textField: keyof T;
+    textFields: (keyof T)[];
     /**  The separator to use when concatenating multiple text values. (optional)*/
     separator?: string;
     /**  Determines whether the dropdown is disabled. (optional)*/
@@ -29,5 +29,5 @@ type GenericDDProps<T> = {
     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 declare function GenericDropdown<T>({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, isLoading, }: GenericDDProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/GenericDropdown.js

@@ -1,29 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ComboBox } from "@progress/kendo-react-dropdowns";
 import { filterBy } from "@progress/kendo-data-query";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { getTextValue } from "./Utility";
 import { Skeleton } from "@progress/kendo-react-indicators";
-export function GenericDropdown({ data, selectedId, selectedData, onChange, textField, disabled, idField, title, hideClearButton, style, isLoading, }) {
+export function GenericDropdown({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, isLoading, }) {
     if (selectedId !== undefined && selectedData !== undefined) {
         throw new Error("You cannot provide both selectedData and selectedId to GenericDropdown.");
     }
     //local state
     const pageSize = 8;
+    const [dataList, setDataList] = useState([]);
     const [state, setState] = useState({
         skip: 0,
-        total: data.length,
-        subsetData: data.slice(0, pageSize),
+        total: dataList.length,
+        subsetData: dataList.slice(0, pageSize),
     });
     //external function variables
-    let filteredData = useRef(data.slice());
+    let 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(data.slice(), event.filter);
+            filteredData.current = filterBy(dataList.slice(), event.filter);
         else
-            filteredData.current = data;
+            filteredData.current = dataList;
         const newData = filteredData.current.slice(0, pageSize);
         setState({
             subsetData: newData,
@@ -36,18 +38,36 @@ export function GenericDropdown({ data, selectedId, selectedData, onChange, text
         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);
+        const newSubsetData = filteredData.current.length ? filteredData.current.slice(skip, skip + take) : dataList.slice(skip, skip + take);
         setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
     };
+    //change event listeners
+    useEffect(() => {
+        dataList;
+    });
+    useEffect(() => {
+        if (data.length) {
+            setDataList(data.map((x) => {
+                return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
+            }));
+            setState(Object.assign(Object.assign({}, state), { total: data.length, subsetData: data.map((x) => {
+                    return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
+                }) }));
+        }
+    }, [data, textFields, separator]);
     const findByIndex = (id, idKey) => {
-        const item = data.find((item) => id === item[idKey || "id"]);
+        console.log(id, data, idField);
+        const item = dataList.find((item) => id === item[idKey || "id"]);
+        console.log(item);
         return item;
     };
     const findByValue = (item) => {
-        const returnVal = data.find((x) => JSON.stringify(Object.assign(Object.assign({}, x), selectedData)) === JSON.stringify(Object.assign({}, x)));
+        console.log(item, data);
+        const returnVal = dataList.find((x) => JSON.stringify(Object.assign(Object.assign({}, x), selectedData)) === JSON.stringify(Object.assign({}, x)));
+        console.log(returnVal);
         return returnVal;
     };
-    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: {
+    return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: dataList.length && !isLoading ? (_jsx(ComboBox, { style: style, label: title, disabled: disabled, data: state.subsetData, textField: "textValue", virtual: {
                 // enable virtualization for large datasets
                 total: state.total,
                 pageSize: pageSize,

package/MultiSelectDropdown.d.ts

@@ -1,14 +1,16 @@
-export declare function MultiSelectDropdown<T>({ data, selectedData, textField, selectEvent, title, limit, }: {
+export declare function MultiSelectDropdown<T>({ data, selectedData, textFields, selectEvent, title, separator, 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;
+    textFields: (keyof T)[];
     /** The function to call when an item is selected or deselected. */
     selectEvent: Function;
     /** The optional title of the dropdown. */
     title?: string;
+    /** The optional separator to use for concatenating text values. */
+    separator?: string;
     /** The optional limit of the maximum number of selected items. */
     limit?: number;
 }): import("react/jsx-runtime").JSX.Element;

package/MultiSelectDropdown.js

@@ -1,25 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { filterBy } from "@progress/kendo-data-query";
 import { MultiSelect } from "@progress/kendo-react-dropdowns";
-export function MultiSelectDropdown({ data, selectedData, textField, selectEvent, title, limit, }) {
+import { getTextValue } from "./Utility";
+export function MultiSelectDropdown({ data, selectedData, textFields, selectEvent, title, separator, limit, }) {
     //local state
     const pageSize = 8;
+    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: data.length,
-        subsetData: data.slice(0, pageSize),
+        total: dataList.length,
+        subsetData: dataList.slice(0, pageSize),
     });
     //external function variables
-    const filteredData = useRef(data.slice());
+    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(data.slice(), event.filter);
+            filteredData.current = filterBy(dataList.slice(), event.filter);
         else
-            filteredData.current = data;
+            filteredData.current = dataList;
         const newData = filteredData.current.slice(0, pageSize);
         setState({
             subsetData: newData,
@@ -34,7 +38,13 @@ export function MultiSelectDropdown({ data, selectedData, textField, selectEvent
         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: {
+    //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": "multiselect", style: { width: "100%" } }, { children: _jsx(MultiSelect, { label: title, data: state.subsetData, textField: "textValue", style: { width: "100%" }, virtual: {
                 total: state.total,
                 pageSize: pageSize,
                 skip: state.skip,

package/commandCell/CommandCellDDWithoutId.d.ts

@@ -5,7 +5,7 @@ export declare function CommandCellDDWithoutId<T>(props: {
     /** The currently selected data item. */
     selectedData: T;
     /** The field names to use for text values in the dropdown. */
-    textField: keyof T;
+    textFields: (keyof T)[];
     /** Callback function to be called when the selected value changes. */
     onChange: (e: ComboBoxChangeEvent) => void;
     /** Optional separator to use for concatenating text values. */

package/commandCell/CommandCellDDWithoutId.js

@@ -1,9 +1,8 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { 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
-        ) : (
+    return (_jsx("td", { children: props.checkEditField && !props.isEditing ? (props.textFields.map((x) => props.data.find((y) => y === props.selectedData)[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/CommandCellDropdown.d.ts

@@ -5,7 +5,7 @@ export declare function CommandCellDropdown<T>(props: {
     /** The ID of the currently selected item. */
     selectedId: number;
     /** The field names to use for text values in the dropdown. */
-    textField: keyof T;
+    textFields: (keyof T)[];
     /** Callback function to be called when the selected value changes. */
     onChange: (e: ComboBoxChangeEvent) => void;
     /** Optional separator to use for concatenating text values. */

package/commandCell/CommandCellDropdown.js

@@ -1,10 +1,11 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+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.data.length ? (_jsx(_Fragment, {}) //TODO remove this from Marketing display
-        ) : (
+    return (_jsx("td", { children: props.checkEditField && !props.isEditing && props.data.length ? (props.textFields
+            .map((x) => props.data.find((y) => y[props.idField ? props.idField : "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/package.json

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