@scheels-softdev/kendoreact-generics 2.4.2 → 2.4.4

package/GenericDropdown.d.ts

@@ -5,7 +5,7 @@ import { CSSProperties } from "react";
  * @param {object} props - The component props.
  * @returns {JSX.Element}
  */
-export declare function GenericDropdown<T>({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, }: {
+type GenericDDProps<T> = {
     data: T[];
     /** The ID of the currently selected item. (optional)*/
     selectedId?: number;
@@ -27,4 +27,7 @@ export declare function GenericDropdown<T>({ data, selectedId, selectedData, onC
     hideClearButton?: boolean;
     /** Custom CSS properties for the component. (optional)*/
     style?: CSSProperties;
-}): import("react/jsx-runtime").JSX.Element;
+    isLoading?: boolean;
+};
+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

@@ -4,27 +4,13 @@ import { filterBy } from "@progress/kendo-data-query";
 import { useEffect, useRef, useState } from "react";
 import { getTextValue } from "./Utility";
 import { Skeleton } from "@progress/kendo-react-indicators";
-//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}
- */
-export function GenericDropdown({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, }) {
+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.");
     }
-    useEffect(() => {
-        console.log(selectedId);
-    }, [selectedId]);
     //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 [dataList, setDataList] = useState([]);
     const [state, setState] = useState({
         skip: 0,
         total: dataList.length,
@@ -56,9 +42,14 @@ export function GenericDropdown({ data, selectedId, selectedData, onChange, text
     };
     //change event listeners
     useEffect(() => {
-        setDataList(data.map((x) => {
-            return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
-        }));
+        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), { 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) => {
         console.log(id, data, idField);
@@ -72,13 +63,12 @@ export function GenericDropdown({ data, selectedId, selectedData, onChange, text
         console.log(returnVal);
         return returnVal;
     };
-    return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: data.length ?
-            _jsx(ComboBox, { style: style, label: title, disabled: disabled, data: state.subsetData, textField: "textValue", 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: !selectedId && !selectedData ? null : findByIndex(selectedId, idField) || findByValue(selectedData) || null }) : _jsx(Skeleton, { shape: "rectangle", style: style ? style : { height: "40px", width: "100%" } }) })));
+    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,
+                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: !selectedId && !selectedData ? null : findByIndex(selectedId, idField) || findByValue(selectedData) || null })) : (_jsx(Skeleton, { shape: "rectangle", style: style ? style : { height: "40px", width: "100%" } })) })));
 }

package/package.json

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