mig-schema-table 3.0.40 → 3.0.42

package/dist/SchemaTable/index.js

@@ -314,6 +314,18 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         delete newColumnFilterMap[propName];
         setColumnFilterMap(newColumnFilterMap);
     }, [columnFilterMap]);
+    const onSetSortColumn = React.useCallback((x) => {
+        if (data instanceof Function) {
+            setIsDirty(true);
+        }
+        setSortColumn(x);
+    }, [data]);
+    const onSetSortAsc = React.useCallback((x) => {
+        if (data instanceof Function) {
+            setIsDirty(true);
+        }
+        setSortAsc(x);
+    }, [data]);
     const SchemaTableTh = React.useCallback(({ style, index }) => {
         const propName = columnNames[index];
         const propConfig = config ? config[propName] : undefined;
@@ -326,7 +338,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         const schema = (propName === SELECT_ALL_COLUMN_NAME
             ? { type: "boolean" }
             : properties[propName]);
-        return (_jsx(Th, { isAllChecked: isAllRowsChecked, columnFilterStatus: columnFilterStatus, disableColumnFilter: disableColumnFilter, isSortable: !!isSortable, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: propConfig, propName: propName, schema: schema, setPopoverConfig: setPopoverConfig, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
+        return (_jsx(Th, { isAllChecked: isAllRowsChecked, columnFilterStatus: columnFilterStatus, disableColumnFilter: disableColumnFilter, isSortable: !!isSortable, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: propConfig, propName: propName, schema: schema, setPopoverConfig: setPopoverConfig, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
     }, [
         checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
         columnFilterMap,
@@ -337,6 +349,8 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         isColumnFilterable,
         isSortable,
         onSelectAllIndexesHandler,
+        onSetSortAsc,
+        onSetSortColumn,
         properties,
         sortAsc,
         sortColumn,
@@ -367,6 +381,15 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         }
         setSearchQuery(e.currentTarget.value);
     }, [data]);
+    const refreshData = React.useCallback(() => {
+        setIsDirty(false);
+        setSourceData(undefined);
+    }, []);
+    const onSearchKeyDown = React.useCallback((e) => {
+        if (e.key === "Enter" && isDirty) {
+            refreshData();
+        }
+    }, [isDirty, refreshData]);
     const getRowHeight = React.useCallback(() => rowHeight, [rowHeight]);
     const rowWidth = dynamicWidthColumnCount ? width : fixedWidthColumnsWidth;
     const rowCount = React.useMemo(() => (sortedRenderData ? sortedRenderData.length : 0), [sortedRenderData]);
@@ -384,17 +407,16 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
         if (!popoverConfig) {
             return;
         }
+        if (data instanceof Function) {
+            setIsDirty(true);
+        }
         if (newColumnFilterValue === undefined) {
             disableColumnFilter(popoverConfig.propName);
             return;
         }
         setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue })));
-    }, [disableColumnFilter, popoverConfig]);
-    const onRefreshDataClick = React.useCallback(() => {
-        setIsDirty(false);
-        setSourceData(undefined);
-    }, []);
-    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, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, 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: {
+    }, [data, disableColumnFilter, 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: onSearchKeyDown, 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),
                     border: "1px solid #BBB",
@@ -403,6 +425,6 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
                     backgroundColor: "#CCC",
                     alignItems: "center",
                     justifyContent: "center",
-                } }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: onRefreshDataClick, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { referenceElement: popoverConfig.referenceElement, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName], propConfig: popoverConfig.propConfig })) : null] })));
+                } }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { referenceElement: popoverConfig.referenceElement, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName], propConfig: popoverConfig.propConfig })) : null] })));
 }
 export default React.memo(SchemaTable);

package/package.json

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