fix(Grid): fixes extra white-space on fast scroll

Closes innovaccer#327
aditya-kumawat · Sep 3, 2020 · 31838bc · 31838bc
1 parent cfcb00e
commit 31838bc
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/core/components/organisms/grid/GridBody.tsx b/core/components/organisms/grid/GridBody.tsx
@@ -43,14 +43,16 @@ export const GridBody = (props: GridBodyProps) => {
   const totalPages = Math.ceil(totalRecords / pageSize);
   const dummyRows = withPagination && page === totalPages ? totalRecords - (page - 1) * pageSize : pageSize;
   const rows = loading ? Array.from({ length: dummyRows }, () => ({})) : data.slice(offset, offset + buffer);
+  const topPadding = Math.max(0, offset * avgRowHeight);
+  const bottomPadding = Math.max(0, ((withPagination ? dummyRows : data.length) - inView - offset - 1) * avgRowHeight);
 
   return (
     <div className="Grid-body">
       {!loading && (
         <div
           className="GridBody-padding"
           style={{
-            height: `${offset * avgRowHeight}px`
+            height: topPadding
           }}
         />
       )}
@@ -70,7 +72,7 @@ export const GridBody = (props: GridBodyProps) => {
         <div
           className="GridBody-padding"
           style={{
-            height: `${((withPagination ? dummyRows : data.length) - inView - offset - 1) * avgRowHeight}px`
+            height: bottomPadding
           }}
         />
       )}

diff --git a/core/components/organisms/grid/MainGrid.tsx b/core/components/organisms/grid/MainGrid.tsx
@@ -53,6 +53,8 @@ export const MainGrid = (props: MainGridProps) => {
 
   React.useEffect(() => {
     setState(initialState);
+    const el = _this.gridRef!.querySelector('.Grid');
+    if(el) el.scrollTop = 0;
   }, [page]);
 
   const {

diff --git a/core/components/organisms/table/Table.tsx b/core/components/organisms/table/Table.tsx
@@ -7,7 +7,6 @@ import {
   onSelectFunction,
   onSelectAllFunction,
   GridProps,
-  FetchDataOptions,
   fetchDataFunction,
   RowData,
   updateSchemaFunction,
@@ -359,7 +358,7 @@ export class Table extends React.Component<TableProps, TableState> {
       searchTerm: undefined,
     };
 
-    this.updateData({});
+    this.updateData();
   }
 
   static defaultProps = defaultProps;
@@ -396,13 +395,25 @@ export class Table extends React.Component<TableProps, TableState> {
       || prevState.filterList !== this.state.filterList
       || prevState.sortingList !== this.state.sortingList
       || prevState.searchTerm !== this.state.searchTerm) {
-      if (!this.props.loading) this.updateData({});
+      if (!this.props.loading) this.updateData();
     }
   }
 
-  updateData = debounce(250, (_options: FetchDataOptions) => {
-    this.onSelect(-1, false);
+  updateData = () => {
+    const {
+      async
+    } = this.state;
 
+    if (async) {
+      this.setState({
+        loading: true
+      });
+    }
+
+    this.debounceUpdate();
+  };
+
+  debounceUpdate = debounce(250, () => {
     const {
       fetchData,
       pageSize,
@@ -419,8 +430,9 @@ export class Table extends React.Component<TableProps, TableState> {
       searchTerm
     } = this.state;
 
+    this.onSelect(-1, false);
+
     const opts = {
-      // ...options,
       page,
       pageSize,
       sortingList,
@@ -434,9 +446,6 @@ export class Table extends React.Component<TableProps, TableState> {
     }
 
     if (async) {
-      this.setState({
-        loading: true
-      });
       if (fetchData) {
         fetchData(opts)
           .then((res: any) => {