jattac.libs.web.responsive-table 0.1.6 → 0.2.1

package/src/Plugins/FilterPlugin.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin';
+import IResponsiveTableColumnDefinition from '../Data/IResponsiveTableColumnDefinition';
+
+export class FilterPlugin<TData> implements IResponsiveTablePlugin<TData> {
+  public id = 'filter';
+  private filterText = '';
+  private api!: IPluginAPI<TData>;
+
+  constructor() {
+  }
+
+  public onPluginInit = (api: IPluginAPI<TData>) => {
+    this.api = api;
+  };
+
+  public renderHeader = () => {
+    if (!this.api.filterProps?.showFilter) {
+      return null;
+    }
+    return (
+      <div style={{ float: 'right', marginBottom: '1rem' }}>
+        <input
+          type="text"
+          placeholder={this.api.filterProps.filterPlaceholder || "Search..."}
+          onChange={this.handleFilterChange}
+          style={{
+            padding: '0.5rem',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+          }}
+        />
+      </div>
+    );
+  };
+
+  public processData = (data: TData[]): TData[] => {
+    if (!this.filterText || !this.api.columnDefinitions) {
+      return data;
+    }
+
+    const lowercasedFilter = this.filterText.toLowerCase();
+
+    return data.filter((row) => {
+      return this.api.columnDefinitions!.some((colDef) => {
+        // If colDef is a function, it won't have getFilterableValue, so skip it.
+        if (typeof colDef === 'function') {
+          return false;
+        }
+
+        // Now we know colDef is an object (IResponsiveTableColumnDefinition<TData>)
+        const typedColDef = colDef as IResponsiveTableColumnDefinition<TData>;
+
+        // Check if getFilterableValue exists and is a function
+        if (typedColDef.getFilterableValue && typeof typedColDef.getFilterableValue === 'function') {
+          const value = typedColDef.getFilterableValue(row);
+          return value?.toString().toLowerCase().includes(lowercasedFilter);
+        }
+        return false; // If getFilterableValue is not present or not a function
+      });
+    });
+  };
+
+  private handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // Debounce the filter change
+    setTimeout(() => {
+      this.filterText = e.target.value;
+      this.api.forceUpdate();
+    }, 300);
+  };
+}

package/src/Plugins/IResponsiveTablePlugin.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { ColumnDefinition } from '../UI/ResponsiveTable';
+
+export interface IResponsiveTablePlugin<TData> {
+  // A unique identifier for the plugin
+  id: string;
+
+  // Optional: Renders a UI component above the table
+  renderHeader?: () => ReactNode;
+
+  // Optional: Renders a UI component below the table
+  renderFooter?: () => ReactNode;
+
+  // Optional: Processes the data before it's rendered
+  processData?: (data: TData[]) => TData[];
+
+  // Optional: A callback that the table can use to provide the plugin with its own API
+  onPluginInit?: (api: IPluginAPI<TData>) => void;
+}
+
+export interface IPluginAPI<TData> {
+  // Function to get the current data from the table
+  getData: () => TData[];
+
+  // Function to force the table to re-render
+  forceUpdate: () => void;
+
+  // Function to get the column definitions from the table
+  columnDefinitions: ColumnDefinition<TData>[];
+
+  // Function to get the scrollable element of the table
+  getScrollableElement?: () => HTMLElement | null;
+
+  // Optional: Infinite scroll props from the ResponsiveTable component
+  infiniteScrollProps?: {
+    enableInfiniteScroll?: boolean;
+    onLoadMore?: (currentData: TData[]) => Promise<TData[] | null>;
+    hasMore?: boolean;
+    loadingMoreComponent?: ReactNode;
+    noMoreDataComponent?: ReactNode;
+  };
+
+  // Optional: Filter props from the ResponsiveTable component
+  filterProps?: {
+    showFilter?: boolean;
+    filterPlaceholder?: string;
+  };
+}

package/src/Plugins/InfiniteScrollPlugin.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin';
+
+export class InfiniteScrollPlugin<TData> implements IResponsiveTablePlugin<TData> {
+  public id = 'infinite-scroll';
+  private api!: IPluginAPI<TData>;
+  private isLoadingMore = false;
+
+  constructor() {
+  }
+
+  public onPluginInit = (api: IPluginAPI<TData>) => {
+    this.api = api;
+    this.attachScrollListener();
+  };
+
+  private attachScrollListener = () => {
+    const scrollableElement = this.api.getScrollableElement?.();
+    if (scrollableElement) {
+      scrollableElement.addEventListener('scroll', this.handleScroll);
+    }
+  };
+
+  private handleScroll = async () => {
+    const scrollableElement = this.api.getScrollableElement?.();
+    if (!scrollableElement || !this.api.infiniteScrollProps?.enableInfiniteScroll) {
+      return;
+    }
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
+
+    const scrollThreshold = 200; // Load more data when 200px from the bottom
+
+    if (
+      scrollHeight - scrollTop - clientHeight < scrollThreshold &&
+      this.api.infiniteScrollProps.hasMore &&
+      !this.isLoadingMore
+    ) {
+      this.isLoadingMore = true;
+      this.api.forceUpdate(); // Trigger re-render to show loading component
+
+      const newData = await this.api.infiniteScrollProps.onLoadMore?.(this.api.getData());
+
+      if (newData) {
+        // The main component will handle appending data via processData
+      } else {
+        // No more data, update hasMore in parent if necessary
+      }
+
+      this.isLoadingMore = false;
+      this.api.forceUpdate(); // Trigger re-render to hide loading component
+    }
+  };
+
+  public processData = (data: TData[]): TData[] => {
+    // This plugin doesn't modify the data directly, but rather triggers loading more.
+    // The main component's data prop should be updated by the consumer of the table.
+    return data;
+  };
+
+  public renderFooter = () => {
+    if (!this.api.infiniteScrollProps) {
+      return null;
+    }
+
+    if (this.isLoadingMore) {
+      return this.api.infiniteScrollProps.loadingMoreComponent || <div>Loading more...</div>;
+    } else if (!this.api.infiniteScrollProps.hasMore) {
+      return this.api.infiniteScrollProps.noMoreDataComponent || <div>No more data.</div>;
+    }
+    return null;
+  };
+}

package/src/Styles/ResponsiveTable.module.css

@@ -1,5 +1,5 @@
 /* Using CSS variables for a more maintainable and themeable design */
-:root {
+.responsiveTable {
   --table-border-color: #e0e0e0;
   --table-header-bg: #f8f9fa;
   --table-row-hover-bg: #e9ecef;
@@ -226,3 +226,28 @@
   font-weight: 500; /* Less aggressive than bold */
   font-size: 1rem;
 }
+
+.row-exit {
+  opacity: 0;
+  transform: scaleY(0);
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+}
+
+.row-enter {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
+}
+
+.row-flash {
+  animation: flash 0.5s ease-out;
+}
+
+@keyframes flash {
+  0% {
+    background-color: var(--table-row-hover-bg);
+  }
+  100% {
+    background-color: transparent;
+  }
+}