feat(Table): Improved context communication and values update for tab…

…le body
DevoInc · Dec 12, 2023 · 5a2441a · 5a2441a
1 parent 1dd2810
commit 5a2441a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 34 deletions.
diff --git a/packages/table/src/core/Table/Table.tsx b/packages/table/src/core/Table/Table.tsx
@@ -34,11 +34,13 @@ export const Table: React.FC<TableProps> = ({
   const theme = useTheme();
 
   const ref = React.useRef<HTMLDivElement>();
+
   const refinedColumnDefs: ColDef[] = getCollatedColumns(
     defaultColumnDef,
     columnDefs,
     types,
   );
+
   const sizes = getSizes(theme, visualOptions?.density ?? 'default');
 
   const { rowVirtualizer, columnVirtualizer } = useTableVirtualization({
@@ -50,6 +52,7 @@ export const Table: React.FC<TableProps> = ({
   });
 
   const { hasScroll } = useTableScroll(rowVirtualizer, ref);
+
   const { measures } = useTableMeasures({
     ref,
     rowVirtualizer,
@@ -77,8 +80,6 @@ export const Table: React.FC<TableProps> = ({
             scrolled={hasScroll}
           />
           <TableBody
-            height={getTableEvalHeight(measures?.body?.total?.height)}
-            width={getTableEvalWidth(measures?.body?.total?.width)}
             columnDefs={refinedColumnDefs}
             columnVirtualizer={columnVirtualizer}
             data={data}

diff --git a/packages/table/src/core/Table/context.tsx b/packages/table/src/core/Table/context.tsx
@@ -78,10 +78,14 @@ export const TableContextProvider = ({
   children,
   value,
 }: TableContextProviderProps) => {
-  const [context] = React.useState({
+  const [context, setContext] = React.useState({
     ...merge({}, defaultTableContext, value),
   });
 
+  React.useEffect(() => {
+    setContext(merge({}, defaultTableContext, value));
+  }, [value]);
+
   return (
     <TableContext.Provider value={context}>{children}</TableContext.Provider>
   );

diff --git a/packages/table/src/core/TableBody/TableBody.tsx b/packages/table/src/core/TableBody/TableBody.tsx
@@ -5,14 +5,13 @@ import { StyledTableBody } from './StyledTableBody';
 import { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import { Box, Typography } from '@devoinc/genesys-ui';
 import { TableContext } from '../Table/context';
+import { getTableEvalHeight, getTableEvalWidth } from '../utils';
 
 export interface TableBodyProps {
   columnDefs: ColDef[];
   columnVirtualizer: Virtualizer<HTMLDivElement, Element>;
   data: unknown;
   rowVirtualizer: Virtualizer<HTMLDivElement, Element>;
-  height?: React.CSSProperties['height'];
-  width?: React.CSSProperties['width'];
 }
 
 const renderMessage = (message: React.ReactNode) => {
@@ -45,17 +44,14 @@ export const TableBody: React.FC<TableBodyProps> = ({
   columnVirtualizer,
   data,
   rowVirtualizer,
-  height,
-  width,
 }) => {
-  const { texts } = React.useContext(TableContext);
+  const { visualOptions, texts, measures } = React.useContext(TableContext);
   const emptyMessage = getEmptyMessage(data, texts, rowVirtualizer);
-  const { visualOptions } = React.useContext(TableContext);
 
   return (
     <StyledTableBody
-      $height={height}
-      $width={width}
+      $height={getTableEvalHeight(measures?.body?.total?.height)}
+      $width={getTableEvalWidth(measures?.body?.total?.width)}
       highlightColumnsOnHover={visualOptions?.highlightColumnsOnHover}
     >
       {emptyMessage ? (

diff --git a/packages/table/src/core/hooks/useTableMeasures.ts b/packages/table/src/core/hooks/useTableMeasures.ts
@@ -1,5 +1,6 @@
+import React, { useEffect } from 'react';
 import { Virtualizer } from '@tanstack/react-virtual';
-import { SizesConfig } from '../../declarations';
+import { MeasuresConfig, SizesConfig } from '../../declarations';
 
 interface UseTableMeasuresParams {
   ref: React.MutableRefObject<HTMLDivElement>;
@@ -14,26 +15,27 @@ export const useTableMeasures = ({
   columnVirtualizer,
   sizes,
 }: UseTableMeasuresParams) => {
-  const tableWrapperHeight = ref?.current?.offsetHeight;
-  const tableWrapperWidth = ref?.current?.offsetWidth;
-  const tableVisibleBodyHeight = tableWrapperHeight - sizes.head.height;
+  const [measures, setMeasures] = React.useState<MeasuresConfig>();
 
-  const measures = {
-    wrapper: {
-      height: tableWrapperHeight,
-      width: tableWrapperWidth,
-    },
-    body: {
-      total: {
-        height: rowVirtualizer?.getTotalSize(),
-        width: columnVirtualizer?.getTotalSize(),
+  useEffect(() => {
+    setMeasures({
+      wrapper: {
+        height: ref?.current?.offsetHeight,
+        width: ref?.current?.offsetWidth,
       },
-      visible: {
-        height: tableVisibleBodyHeight,
-        width: tableWrapperWidth,
+      body: {
+        total: {
+          height: rowVirtualizer?.getTotalSize(),
+          width: columnVirtualizer?.getTotalSize(),
+        },
+        visible: {
+          height: ref?.current?.offsetHeight - sizes.head.height,
+          width: ref?.current?.offsetWidth,
+        },
       },
-    },
-  };
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref.current?.offsetHeight, ref.current?.offsetWidth]);
 
   return { measures };
 };
diff --git a/packages/table/src/core/utils/sizes.ts b/packages/table/src/core/utils/sizes.ts
@@ -1,19 +1,17 @@
 import { Brand } from '@devoinc/genesys-tokens-types';
 import { Density, SizesConfig } from '../../declarations';
 import { getPxFromRem } from '@devoinc/genesys-ui';
-import { TableBodyProps } from '../TableBody';
 
 /**
  * Returns the evaluated height of the table based in the virtualization
  */
-export const getTableEvalHeight = (
-  tableBodyHeight: TableBodyProps['height'],
-) => (tableBodyHeight !== 0 ? `${tableBodyHeight}px` : 'auto');
+export const getTableEvalHeight = (tableBodyHeight: number) =>
+  tableBodyHeight !== 0 ? `${tableBodyHeight}px` : 'auto';
 
 /**
  * Returns the evaluated width of the table based in the virtualization
  */
-export const getTableEvalWidth = (tableBodyWidth: TableBodyProps['width']) =>
+export const getTableEvalWidth = (tableBodyWidth: number) =>
   tableBodyWidth !== 0 ? `${tableBodyWidth}px` : '100%';
 
 /**