jattac.libs.web.responsive-table 0.9.2 → 0.11.0

package/dist/index.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var ZestTextbox = require('jattac.libs.web.zest-textbox');
+var md = require('react-icons/md');
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -488,18 +490,36 @@ class FilterPlugin {
             this.api = api;
         };
         this.renderHeader = () => {
-            var _a;
+            var _a, _b;
             if (!((_a = this.api.filterProps) === null || _a === void 0 ? void 0 : _a.showFilter)) {
                 return null;
             }
-            return (React.createElement("div", { style: { marginBottom: '1rem' } },
-                React.createElement("input", { type: "text", placeholder: this.api.filterProps.filterPlaceholder || "Search...", onChange: this.handleFilterChange, className: this.api.filterProps.className, style: {
-                        padding: '0.5rem',
-                        border: '1px solid #ccc',
-                        borderRadius: '4px',
-                    } })));
+            return (React.createElement("div", { style: { marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' } },
+                React.createElement(ZestTextbox, { value: this.filterText, placeholder: (_b = this.api.filterProps.filterPlaceholder) !== null && _b !== void 0 ? _b : 'Search...', onChange: this.handleFilterChange, className: this.api.filterProps.className, zest: { stretch: true } }),
+                React.createElement("button", { onClick: this.handleClear, "aria-label": "Clear filter", style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        minWidth: '2.75rem',
+                        minHeight: '2.75rem',
+                        padding: 0,
+                        border: 'none',
+                        borderRadius: '50%',
+                        background: 'transparent',
+                        cursor: 'pointer',
+                        color: '#666',
+                        opacity: this.filterText ? 1 : 0,
+                        pointerEvents: this.filterText ? 'auto' : 'none',
+                        transition: 'opacity 0.15s ease',
+                        flexShrink: 0,
+                    } },
+                    React.createElement(md.MdClose, { size: 20 }))));
         };
         this.processData = (data) => {
+            var _a;
+            if (((_a = this.api.filterProps) === null || _a === void 0 ? void 0 : _a.mode) === 'server') {
+                return data;
+            }
             if (!this.filterText || !this.api.columnDefinitions) {
                 return data;
             }
@@ -526,6 +546,10 @@ class FilterPlugin {
         _row, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         _column) => {
+            var _a;
+            if (((_a = this.api.filterProps) === null || _a === void 0 ? void 0 : _a.mode) === 'server') {
+                return content;
+            }
             if (!this.filterText || typeof content !== 'string') {
                 return content;
             }
@@ -538,10 +562,21 @@ class FilterPlugin {
                 clearTimeout(this.debounceTimeout);
             }
             this.debounceTimeout = setTimeout(() => {
+                var _a, _b;
                 this.filterText = currentFilterText;
                 this.api.forceUpdate();
+                (_b = (_a = this.api).onFilterChange) === null || _b === void 0 ? void 0 : _b.call(_a, currentFilterText);
             }, 300);
         };
+        this.handleClear = () => {
+            var _a, _b;
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            this.filterText = '';
+            this.api.forceUpdate();
+            (_b = (_a = this.api).onFilterChange) === null || _b === void 0 ? void 0 : _b.call(_a, '');
+        };
     }
 }
 
@@ -761,7 +796,7 @@ class SortPlugin {
 }
 
 const useTablePlugins = (props) => {
-    const { data, plugins, filterProps, selectionProps, sortProps, columnDefinitions, getScrollableElement, infiniteScrollProps, } = props;
+    const { data, plugins, filterProps, selectionProps, sortProps, columnDefinitions, getScrollableElement, infiniteScrollProps, onFilterChange, } = props;
     const [processedData, setProcessedData] = React.useState(data);
     const [activePlugins, setActivePlugins] = React.useState([]);
     // Persist internal plugins using refs to prevent state loss
@@ -835,6 +870,7 @@ const useTablePlugins = (props) => {
             filterProps: filterProps,
             selectionProps: selectionProps,
             columnDefinitions: columnDefinitions,
+            onFilterChange: onFilterChange,
         };
         // Initialize/Refresh all active plugins with the current API
         newActivePlugins.forEach((plugin) => {
@@ -860,6 +896,7 @@ const useTablePlugins = (props) => {
         getScrollableElement,
         infiniteScrollProps,
         getRawColumnDefinition,
+        onFilterChange,
     ]);
     const forceUpdatePlugins = React.useCallback(() => {
         setProcessedData(initializePlugins());
@@ -1030,7 +1067,10 @@ const useTableDataSource = (props) => {
     const [totalCount, setTotalCount] = React.useState(undefined);
     const [isLoading, setIsLoading] = React.useState(false);
     const [isFetchingMore, setIsFetchingMore] = React.useState(false);
+    const [error, setError] = React.useState(undefined);
     const isInitialMount = React.useRef(true);
+    const dataLengthRef = React.useRef(0);
+    dataLengthRef.current = data.length;
     const fetchData = React.useCallback((page, isAppend) => __awaiter(void 0, void 0, void 0, function* () {
         if (!dataSource)
             return;
@@ -1041,6 +1081,7 @@ const useTableDataSource = (props) => {
             setIsLoading(true);
         }
         try {
+            setError(undefined);
             const params = {
                 page,
                 pageSize,
@@ -1062,7 +1103,7 @@ const useTableDataSource = (props) => {
             setCurrentPage(page);
             // Intelligent hasMore detection
             if (newTotalCount !== undefined) {
-                const currentTotalLoaded = (isAppend ? data.length : 0) + newItems.length;
+                const currentTotalLoaded = (isAppend ? dataLengthRef.current : 0) + newItems.length;
                 setHasMore(currentTotalLoaded < newTotalCount);
             }
             else {
@@ -1070,15 +1111,16 @@ const useTableDataSource = (props) => {
                 setHasMore(newItems.length === pageSize);
             }
         }
-        catch (error) {
-            console.error('Error fetching data from dataSource:', error);
+        catch (err) {
+            setError(err);
             setHasMore(false);
+            console.error('Error fetching data from dataSource:', err);
         }
         finally {
             setIsLoading(false);
             setIsFetchingMore(false);
         }
-    }), [dataSource, pageSize, sort, filter, data.length]);
+    }), [dataSource, pageSize, sort, filter]);
     const loadNextPage = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (isLoading || isFetchingMore || !hasMore || !dataSource)
             return;
@@ -1109,6 +1151,7 @@ const useTableDataSource = (props) => {
         isFetchingMore,
         loadNextPage,
         resetAndFetch,
+        error,
     };
 };
 
@@ -1116,8 +1159,9 @@ const useTableDataSource = (props) => {
  * A highly customizable, mobile-first responsive React table.
  * Supports static data or async data sources with built-in infinite scroll.
  */
-function ResponsiveTable(props) {
-    const { columnDefinitions, data: initialData, dataSource, pageSize, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, mobileCardClassName, } = props;
+function ResponsiveTableInner(props, ref) {
+    var _a;
+    const { columnDefinitions, data: initialData, dataSource, pageSize, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, mobileCardClassName, onDataSourceStateChange, onPageChange, onDataSourceError, } = props;
     const tableContainerRef = React.useRef(null);
     const headerRef = React.useRef(null);
     const { isMobile, isHeaderSticky } = useResponsiveTable({
@@ -1130,29 +1174,72 @@ function ResponsiveTable(props) {
     const getScrollableElement = React.useCallback(() => tableContainerRef.current, []);
     // Track active sort state for dataSource
     const [activeSort /*, setActiveSort*/] = React.useState((sortProps === null || sortProps === void 0 ? void 0 : sortProps.initialSortColumn) ? { columnId: sortProps.initialSortColumn, direction: sortProps.initialSortDirection || 'asc' } : undefined);
-    const { data: sourceData, isLoading: isSourceLoading, isFetchingMore, hasMore, totalCount, currentPage, loadNextPage, } = useTableDataSource({
+    // Track active filter state for dataSource
+    const [activeFilter, setActiveFilter] = React.useState('');
+    const handleFilterChange = React.useCallback((text) => {
+        setActiveFilter(text);
+    }, []);
+    const isServerFilter = !!dataSource && !!(filterProps === null || filterProps === void 0 ? void 0 : filterProps.showFilter) && (filterProps === null || filterProps === void 0 ? void 0 : filterProps.mode) !== 'client';
+    const resolvedFilterProps = filterProps
+        ? Object.assign(Object.assign({}, filterProps), { mode: isServerFilter ? 'server' : ((_a = filterProps.mode) !== null && _a !== void 0 ? _a : 'client') }) : undefined;
+    const { data: sourceData, isLoading: isSourceLoading, isFetchingMore, hasMore, totalCount, currentPage, loadNextPage, error, resetAndFetch, } = useTableDataSource({
         dataSource,
         pageSize,
         initialData,
         sort: activeSort,
-        // We'll need to extract filter state if we want to support dataSource filtering
+        filter: isServerFilter ? activeFilter : undefined,
     });
+    React.useImperativeHandle(ref, () => ({
+        loadNextPage: () => loadNextPage(),
+        resetAndFetch: () => resetAndFetch(),
+        getState: () => ({
+            data: sourceData,
+            currentPage,
+            hasMore,
+            totalCount,
+            isLoading: isSourceLoading,
+            isFetchingMore,
+            error,
+        }),
+    }), [loadNextPage, resetAndFetch, sourceData, currentPage, hasMore, totalCount, isSourceLoading, isFetchingMore, error]);
     const currentDataToProcess = dataSource ? sourceData : initialData;
     const { processedData, activePlugins, visibleColumns } = useTablePlugins({
         data: currentDataToProcess,
         plugins,
-        filterProps,
+        onFilterChange: isServerFilter ? handleFilterChange : undefined,
+        filterProps: resolvedFilterProps,
         selectionProps,
         sortProps,
         columnDefinitions,
         getScrollableElement,
         infiniteScrollProps,
     });
-    // Sync sort state from SortPlugin back to our local state to trigger dataSource re-fetch
+    // Fire onDataSourceStateChange when dataSource state changes
+    React.useEffect(() => {
+        if (dataSource && onDataSourceStateChange) {
+            onDataSourceStateChange({
+                data: sourceData,
+                currentPage,
+                hasMore,
+                totalCount,
+                isLoading: isSourceLoading,
+                isFetchingMore,
+                error,
+            });
+        }
+    }, [dataSource, sourceData, currentPage, hasMore, totalCount, isSourceLoading, isFetchingMore, error, onDataSourceStateChange]);
+    // Fire onPageChange when page changes
     React.useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        activePlugins.find(p => p.id === 'sort');
-    }, [activePlugins, dataSource]);
+        if (dataSource && onPageChange) {
+            onPageChange(currentPage);
+        }
+    }, [dataSource, currentPage, onPageChange]);
+    // Fire onDataSourceError when error occurs
+    React.useEffect(() => {
+        if (dataSource && error && onDataSourceError) {
+            onDataSourceError(error);
+        }
+    }, [dataSource, error, onDataSourceError]);
     const hasData = React.useMemo(() => processedData.length > 0, [processedData]);
     const noDataSvg = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#ccc", height: "40", width: "40", viewBox: "0 0 24 24" },
         React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z" })));
@@ -1220,6 +1307,31 @@ function ResponsiveTable(props) {
     if (isLoading && !hasData) {
         return React.createElement(SkeletonView, { isMobile: isMobile, columnDefinitions: visibleColumns });
     }
+    if (error && !isLoading && !hasData) {
+        return (React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '4rem 2rem',
+                gap: '1rem',
+                color: '#6c757d',
+                border: '2px dashed #e0e0e0',
+                borderRadius: '12px',
+                backgroundColor: '#f8f9fa',
+            } },
+            React.createElement("div", { style: { fontWeight: 500, fontSize: '1.1rem' } }, "Failed to load data"),
+            React.createElement("div", { style: { fontSize: '0.85rem', textAlign: 'center' } }, error.message),
+            React.createElement("button", { onClick: resetAndFetch, style: {
+                    padding: '0.5rem 1.5rem',
+                    backgroundColor: '#007bff',
+                    color: '#fff',
+                    border: 'none',
+                    borderRadius: '6px',
+                    cursor: 'pointer',
+                    fontWeight: 500,
+                } }, "Retry")));
+    }
     return (React.createElement(TableProvider, { value: {
             data: currentDataToProcess,
             processedData,
@@ -1238,6 +1350,7 @@ function ResponsiveTable(props) {
                 isLoading: isSourceLoading,
                 isFetchingMore,
                 loadNextPage,
+                error,
             } : undefined,
             mobileCardClassName,
         } },
@@ -1247,6 +1360,7 @@ function ResponsiveTable(props) {
             (hasData || isLoading) && isMobile && (React.createElement(MobileView, { mobileFooter: mobileFooter })),
             (hasData || isLoading) && !isMobile && (React.createElement(DesktopView, { maxHeight: maxHeight, isHeaderSticky: isHeaderSticky, tableContainerRef: tableContainerRef, headerRef: headerRef, footerRows: footerRows, renderPluginFooters: renderPluginFooters })))));
 }
+const ResponsiveTable = React.forwardRef(ResponsiveTableInner);
 
 class InfiniteScrollPlugin {
     constructor() {
@@ -1306,4 +1420,5 @@ exports.InfiniteScrollPlugin = InfiniteScrollPlugin;
 exports.SelectionPlugin = SelectionPlugin;
 exports.SortPlugin = SortPlugin;
 exports.default = ResponsiveTable;
+exports.useTableContext = useTableContext;
 //# sourceMappingURL=index.js.map