fix: 🐛 [Table] Offset calculation logic with MUI breakpoints

✅ Closes: 278
melfore · Nov 24, 2022 · f668f37 · f668f37
1 parent c12f72a
commit f668f37
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 31 deletions.
diff --git a/src/components/Table/components/Head/index.tsx b/src/components/Table/components/Head/index.tsx
@@ -1,29 +1,25 @@
 import React, { CSSProperties, FC, useMemo } from "react";
 import { TableHead as MUITableHead, TableRow as MUITableRow } from "@material-ui/core";
 
-import { useMosaicContext } from "../../../../hooks/useMosaicContext";
 import { ITableHead } from "../../../../types/Table";
-import { TOOLBAR_HEIGHT, TOOLBAR_HEIGHT_MOBILE } from "../../utils";
 import TableHeadFilterCell from "../HeadFilter";
 
 const TableHead: FC<ITableHead> = ({ children, columns, dataCy, showFilters, sticky }) => {
-  const {
-    view: { mobile },
-  } = useMosaicContext();
-
-  const toolbarHeight = useMemo(() => (mobile ? TOOLBAR_HEIGHT_MOBILE : TOOLBAR_HEIGHT), [mobile]);
-
   const headerStyle = useMemo((): CSSProperties | undefined => {
+    if (!showFilters || !sticky) {
+      return;
+    }
+
     // mui table set sticky position at cell level (see HeadCell component).
     // When filters row is present, we need to set sticky positioning to the whole
     // table head in order to avoid tracking the actual height of the first header
     // row (which can vary depending on table width and cell content length).
-
-    if (showFilters && sticky) {
-      return { top: toolbarHeight, position: "sticky", zIndex: 1 };
-    }
-    return undefined;
-  }, [showFilters, sticky, toolbarHeight]);
+    return {
+      position: "sticky",
+      top: 0,
+      zIndex: 1,
+    };
+  }, [showFilters, sticky]);
 
   return (
     <MUITableHead data-cy={dataCy} style={headerStyle}>

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -5,10 +5,10 @@ import {
   TableBody as MUITableBody,
   TableContainer as MUITableContainer,
   TableRow as MUITableRow,
+  useMediaQuery,
   useTheme,
 } from "@material-ui/core";
 
-import { useMosaicContext } from "../../hooks/useMosaicContext";
 import { ITable, ITableAction, ITableOnSortCallback } from "../../types/Table";
 import { getComposedDataCy } from "../../utils";
 import localized, { ILocalizableProperty } from "../../utils/hocs/localized";
@@ -26,6 +26,7 @@ import TableToolbar from "./components/Toolbar";
 import {
   COLUMN_CHECKBOX_PATH,
   COLUMN_ROW_ACTIONS_PATH,
+  PAGINATION_TOOLBAR_BORDER,
   PAGINATION_TOOLBAR_HEIGHT,
   TOOLBAR_HEIGHT,
   TOOLBAR_HEIGHT_MOBILE,
@@ -91,6 +92,8 @@ const Table: FC<ITable> = ({
 }) => {
   const theme = useTheme();
 
+  const mobile = useMediaQuery(theme.breakpoints.down("xs"));
+
   const getRows = useCallback((rows: any) => [...rows].map((row, index) => ({ ...row, __mosaicTableId: index })), []);
 
   const getSelectedRowsIndexes = useCallback(
@@ -218,7 +221,11 @@ const Table: FC<ITable> = ({
     if (!!rowActions.length) {
       columns = [
         ...columns,
-        { label: "", path: COLUMN_ROW_ACTIONS_PATH, width: `${ROW_ACTION_DIMENSION * rowActions.length}px` },
+        {
+          label: "",
+          path: COLUMN_ROW_ACTIONS_PATH,
+          width: `${ROW_ACTION_DIMENSION * rowActions.length}px`,
+        },
       ];
     }
 
@@ -263,6 +270,8 @@ const Table: FC<ITable> = ({
     [onSortChange]
   );
 
+  const paginated = useMemo(() => !!onPageChange || !!onPageSizeChange, [onPageChange, onPageSizeChange]);
+
   const paginationStyle = useMemo((): CSSProperties => {
     const DEFAULT_PAGINATION_STYLE: CSSProperties = { backgroundColor: "inherit", position: "inherit" };
     if (!sticky) {
@@ -287,31 +296,34 @@ const Table: FC<ITable> = ({
     [externalStyle, height, sticky]
   );
 
-  const {
-    view: { mobile },
-  } = useMosaicContext();
-
-  const scrollContainerStyle = useMemo((): CSSProperties | undefined => {
-    const toolbarHeight = mobile ? TOOLBAR_HEIGHT_MOBILE : TOOLBAR_HEIGHT;
-    const extraOffset = mobile ? 9 : 2;
+  const scrollContainerStyle = useMemo((): CSSProperties => {
+    let toolbarHeight = TOOLBAR_HEIGHT;
+    if (mobile) {
+      toolbarHeight = TOOLBAR_HEIGHT_MOBILE;
+    }
 
-    let style: CSSProperties | undefined = undefined;
+    let offset = toolbarHeight;
+    if (paginated) {
+      offset += PAGINATION_TOOLBAR_BORDER + PAGINATION_TOOLBAR_HEIGHT;
+    }
 
+    let style: CSSProperties = {};
     if (sticky) {
-      const offset = toolbarHeight + PAGINATION_TOOLBAR_HEIGHT + extraOffset;
-
       style = {
         height: `calc(100% - ${offset}px)`,
         overflowY: "auto",
       };
     }
 
     if (tableLayout === "auto") {
-      return { ...style, overflowX: "auto" };
+      return {
+        ...style,
+        overflowX: "auto",
+      };
     }
 
     return style;
-  }, [mobile, sticky, tableLayout]);
+  }, [mobile, paginated, sticky, tableLayout]);
 
   const showHeaderFilters = useMemo(
     () => showFilters && columns.some((column) => !!column.renderFilter),
@@ -355,11 +367,9 @@ const Table: FC<ITable> = ({
             ) : (
               rows.map(({ __mosaicTableId, ...row }, rowIndex) => {
                 const key = `row-${__mosaicTableId}`;
-
                 const rowSelected = isRowSelected(__mosaicTableId);
                 const rowCallbackOptions = { indexes: [rowIndex], multiple: false };
                 const style = getRowStyle ? getRowStyle(row, rowCallbackOptions) : {};
-
                 const onRowSelection = () => onSelection(__mosaicTableId);
 
                 return (
@@ -410,7 +420,7 @@ const Table: FC<ITable> = ({
           </MUITableBody>
         </MUITable>
       </div>
-      {(onPageChange || onPageSizeChange) && (
+      {paginated && (
         <TablePagination
           dataCy={dataCy}
           onPageChange={onPageChange!}

diff --git a/src/components/Table/utils.ts b/src/components/Table/utils.ts
@@ -4,4 +4,5 @@ export const COLUMN_ROW_ACTIONS_PATH = "row-actions";
 export const TOOLBAR_HEIGHT = 64;
 export const TOOLBAR_HEIGHT_MOBILE = 56;
 
+export const PAGINATION_TOOLBAR_BORDER = 1;
 export const PAGINATION_TOOLBAR_HEIGHT = 64;