mig-schema-table 3.0.45 → 3.0.47

package/dist/SchemaTable/index.js

@@ -15,10 +15,17 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
     const [searchQuery, setSearchQuery] = React.useState("");
     const [columnFilterMap, setColumnFilterMap] = React.useState({});
     const [popoverConfig, setPopoverConfig] = React.useState();
-    const [sourceData, setSourceData] = React.useState(Array.isArray(data) ? data : undefined);
+    const isDataFunction = data instanceof Function;
+    const [sourceData, setSourceData] = React.useState(isDataFunction ? undefined : data);
     const [isDirty, setIsDirty] = React.useState(false);
     React.useEffect(() => {
-        if (sourceData !== undefined || !(data instanceof Function)) {
+        if (isDataFunction) {
+            return;
+        }
+        setSourceData(data);
+    }, [data, isDataFunction]);
+    React.useEffect(() => {
+        if (!isDataFunction || sourceData !== undefined) {
             return;
         }
         data({
@@ -27,7 +34,15 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
             sortColumn,
             sortAsc,
         }).then(setSourceData);
-    }, [columnFilterMap, data, searchQuery, sortAsc, sortColumn, sourceData]);
+    }, [
+        columnFilterMap,
+        data,
+        isDataFunction,
+        searchQuery,
+        sortAsc,
+        sortColumn,
+        sourceData,
+    ]);
     const { properties = {} } = schema;
     const columnNames = React.useMemo(() => {
         const columns = Object.keys(properties);
@@ -171,7 +186,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
     const filteredRenderData = React.useMemo(() => {
         if (!renderData ||
             (!isColumnFilterable && !isSearchable) ||
-            data instanceof Function) {
+            isDataFunction) {
             return renderData;
         }
         return renderData.filter((item) => {
@@ -220,7 +235,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         renderData,
         isColumnFilterable,
         isSearchable,
-        data,
+        isDataFunction,
         searchQuery,
         columnNames,
         columnFilterMap,
@@ -229,10 +244,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
     ]);
     // Sort the filtered data
     const sortedRenderData = React.useMemo(() => {
-        if (!sortColumn ||
-            !filteredRenderData ||
-            !sourceData ||
-            data instanceof Function) {
+        if (!sortColumn || !filteredRenderData || !sourceData || isDataFunction) {
             return filteredRenderData;
         }
         const sortSchema = properties[sortColumn];
@@ -288,7 +300,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         sortColumn,
         filteredRenderData,
         sourceData,
-        data,
+        isDataFunction,
         properties,
         config,
         sortAsc,
@@ -312,23 +324,23 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
     const disableColumnFilter = React.useCallback((propName) => {
         const newColumnFilterMap = Object.assign({}, columnFilterMap);
         delete newColumnFilterMap[propName];
-        if (data instanceof Function) {
+        if (isDataFunction) {
             setIsDirty(true);
         }
         setColumnFilterMap(newColumnFilterMap);
-    }, [columnFilterMap, data]);
+    }, [columnFilterMap, isDataFunction]);
     const onSetSortColumn = React.useCallback((x) => {
-        if (data instanceof Function) {
+        if (isDataFunction) {
             setIsDirty(true);
         }
         setSortColumn(x);
-    }, [data]);
+    }, [isDataFunction]);
     const onSetSortAsc = React.useCallback((x) => {
-        if (data instanceof Function) {
+        if (isDataFunction) {
             setIsDirty(true);
         }
         setSortAsc(x);
-    }, [data]);
+    }, [isDataFunction]);
     const SchemaTableTh = React.useCallback(({ style, index }) => {
         const propName = columnNames[index];
         const propConfig = config ? config[propName] : undefined;
@@ -379,11 +391,11 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         sortedRenderData,
     ]);
     const onSearchChange = React.useCallback((e) => {
-        if (data instanceof Function) {
+        if (isDataFunction) {
             setIsDirty(true);
         }
         setSearchQuery(e.currentTarget.value);
-    }, [data]);
+    }, [isDataFunction]);
     const refreshData = React.useCallback(() => {
         setIsDirty(false);
         setSourceData(undefined);
@@ -413,7 +425,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         if (!popoverConfig) {
             return;
         }
-        if (data instanceof Function) {
+        if (isDataFunction) {
             setIsDirty(true);
         }
         if (newColumnFilterValue === undefined) {
@@ -421,7 +433,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
             return;
         }
         setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue })));
-    }, [data, disableColumnFilter, popoverConfig]);
+    }, [disableColumnFilter, isDataFunction, popoverConfig]);
     return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)) : (_jsx("div", Object.assign({ style: {
                     width: rowWidth,
                     height: Math.max(50, tableBodyHeight),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.45",
+  "version": "3.0.47",
   "main": "dist/index.js",
   "files": [
     "dist/"