use resize observer library

Author: mckervinc

package.json

@@ -65,28 +65,29 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/react-window": "^1.8.5",
     "cross-env": "^7.0.3",
-    "eslint-config-standard-react": "^13.0.0",
+    "eslint": "8.50.0",
     "eslint-config-standard": "^17.1.0",
+    "eslint-config-standard-react": "^13.0.0",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
-    "eslint": "8.50.0",
     "gh-pages": "^6.0.0",
     "postcss": "^8.4.30",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
+    "rollup": "^3.29.3",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.9.2",
-    "rollup": "^3.29.3",
     "typescript": "^5.2.2"
   },
   "dependencies": {
+    "react-resize-detector": "^9.1.0",
     "react-window": "^1.8.9"
   },
   "volta": {

src/AutoSizer.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useMemo } from "react";
+import { useResizeDetector } from "react-resize-detector";
 import { TableContext } from "./TableContext";
 import { DEFAULT_FOOTER_HEIGHT, DEFAULT_HEADER_HEIGHT, DEFAULT_ROW_HEIGHT } from "./constants";
 import { findFooterByUuid, findHeaderByUuid } from "./util";
@@ -90,7 +91,7 @@ const calculateHeight = (
   const borderOffset = !!table ? table.offsetHeight - table.clientHeight : 0;
 
   // if there are rows, let's do the calculation
-  if (!!nodes.length) {
+  if (nodes.length) {
     if (rowHeight > 0) {
       return headerOffset + nodes.length * rowHeight + footerOffset + borderOffset;
     }
@@ -116,8 +117,8 @@ const calculateHeight = (
 /**
  * This is a skinny AutoSizer based on react-virtualized-auto-sizer.
  * This removes the `bailout` functionality in order to allow the Table
- * to generate its own height. This also ignores a resize if the
- * dimensions of the window did not actually change (one less render).
+ * to generate its own height. This uses ResizeObserver to observe the
+ * container when it changes in order to provide the correct height
  */
 const AutoSizer = ({
   numRows,
@@ -131,22 +132,22 @@ const AutoSizer = ({
   children
 }: AutoSizerProps) => {
   // hooks
-  const resizeRef = useRef(0);
-  const ref = useRef<HTMLDivElement>(null);
+  const {
+    ref,
+    width: containerWidth,
+    height: containerHeight
+  } = useResizeDetector<HTMLDivElement>();
   const { uuid, columns, footerComponent } = useContext(TableContext);
-  const [dimensions, setDimensions] = useState({ containerHeight: 0, containerWidth: 0 });
 
   // variables
-  const { containerHeight, containerWidth } = dimensions;
   const hasFooter = useMemo(
     () => !!footerComponent || !!columns.find(c => !!c.footer),
     [columns, footerComponent]
   );
-  const fixedTableSize = !!tableHeight && tableHeight > 0 && !!tableWidth && tableWidth > 0;
 
   // calculate the computed height
   const computedHeight = useMemo(() => {
-    if (!!tableHeight && tableHeight > 0) {
+    if (tableHeight && tableHeight > 0) {
       return tableHeight;
     }
 
@@ -163,64 +164,14 @@ const AutoSizer = ({
   // calculate the actual height of the table
   const height = findCorrectHeight({
     computedHeight,
-    containerHeight,
+    containerHeight: containerHeight || 0,
     tableHeight: tableHeight || 0,
     minHeight: minTableHeight || 0,
     maxHeight: maxTableHeight || 0
   });
 
   // get actual width
-  const width = !!tableWidth && tableWidth > 0 ? tableWidth : containerWidth;
-
-  // functions
-  const calculateDimensions = useCallback(() => {
-    // base cases
-    if (!ref.current?.parentElement || fixedTableSize) {
-      return;
-    }
-
-    // get style
-    const parent = ref.current.parentElement;
-    const style = window.getComputedStyle(parent);
-    const paddingLeft = parseInt(style.paddingLeft) || 0;
-    const paddingRight = parseInt(style.paddingRight) || 0;
-    const paddingTop = parseInt(style.paddingTop) || 0;
-    const paddingBottom = parseInt(style.paddingBottom) || 0;
-
-    // find new dimensions
-    const newHeight = Math.max((parent.offsetHeight || 0) - paddingTop - paddingBottom, 0);
-    const newWidth = Math.max((parent.offsetWidth || 0) - paddingLeft - paddingRight, 0);
-
-    // update state
-    setDimensions(prev => {
-      const { containerHeight: oldHeight, containerWidth: oldWidth } = prev;
-      if (oldHeight !== newHeight || oldWidth !== newWidth) {
-        return { containerHeight: newHeight, containerWidth: newWidth };
-      }
-
-      return prev;
-    });
-  }, [fixedTableSize]);
-
-  const onResize = useCallback(() => {
-    window.clearTimeout(resizeRef.current);
-    resizeRef.current = window.setTimeout(calculateDimensions, 40);
-  }, [calculateDimensions]);
-
-  // effects
-  // on mount, calculate the dimensions
-  useEffect(() => calculateDimensions(), [calculateDimensions]);
-
-  // on resize, we have to re-calculate the dimensions
-  useEffect(() => {
-    window.removeEventListener("resize", onResize);
-    window.addEventListener("resize", onResize);
-    const m = resizeRef.current;
-    return () => {
-      window.clearTimeout(m);
-      window.removeEventListener("resize", onResize);
-    };
-  }, [onResize]);
+  const width = tableWidth && tableWidth > 0 ? tableWidth : containerWidth || 0;
 
   return <div ref={ref}>{height || width ? children({ height, width }) : null}</div>;
 };

src/Row.tsx

@@ -2,10 +2,10 @@ import React, { SVGProps, useCallback, useContext, useLayoutEffect, useRef } fro
 import { CacheFunction, ColumnProps, RowRenderProps, SubComponentProps } from "../index";
 //@ts-ignore TS2307
 import Minus from "./svg/minus-circle.svg";
+import { ListChildComponentProps } from "react-window";
+import { TableContext } from "./TableContext";
 //@ts-ignore TS2307
 import Plus from "./svg/plus-circle.svg";
-import { TableContext } from "./TableContext";
-import { ListChildComponentProps } from "react-window";
 import { cx } from "./util";
 
 interface TableCellProps<T> {
@@ -197,7 +197,7 @@ function Row<T>({
   const containerHeight = !rowHeight ? undefined : isExpanded && SubComponent ? rowHeight : "100%";
 
   // sub component props
-  const subProps = { row, index, isExpanded, clearSizeCache };
+  const subProps: SubComponentProps<T> = { row, index, isExpanded, clearSizeCache };
 
   // row styling
   const borderBottom = borders ? undefined : "none";
@@ -221,7 +221,7 @@ function Row<T>({
     if (height !== calculateHeight(rowRef.current, index)) {
       clearSizeCache(index);
     }
-  }, [rowRef, index, height, calculateHeight, clearSizeCache, pixelWidths]);
+  }, [index, height, calculateHeight, clearSizeCache, pixelWidths]);
 
   // effects
   // on expansion, clear the cache
@@ -234,7 +234,7 @@ function Row<T>({
     }
 
     expandedCalledRef.current = false;
-  }, [isExpanded, expandedCalledRef, resetHeight, index, clearSizeCache]);
+  }, [isExpanded, resetHeight, index, clearSizeCache]);
 
   return (
     <div

src/Table.tsx

@@ -56,9 +56,9 @@ const ListComponent = forwardRef(function (
 ) {
   // hooks
   const timeoutRef = useRef(0);
-  const prevRef = useRef(width);
   const cacheRef = useRef<any>({});
   const listRef = useRef<any>(null);
+  const prevWidthRef = useRef(width);
   const treeRef = useRef(new NumberTree());
   const tableRef = useRef<HTMLDivElement>(null);
   const { dispatch, uuid, columns, minColumnWidth, fixedWidth, remainingCols, pixelWidths } =
@@ -80,28 +80,25 @@ const ListComponent = forwardRef(function (
     [itemKey]
   );
 
-  const clearSizeCache = useCallback(
-    (dataIndex: number, forceUpdate = false) => {
-      if (!listRef.current) {
-        return;
-      }
+  const clearSizeCache = useCallback((dataIndex: number, forceUpdate = false) => {
+    if (!listRef.current) {
+      return;
+    }
 
-      window.clearTimeout(timeoutRef.current);
-      if (forceUpdate) {
-        treeRef.current.clearFromIndex(dataIndex);
-        listRef.current.resetAfterIndex(dataIndex + 1);
-        return;
-      }
+    window.clearTimeout(timeoutRef.current);
+    if (forceUpdate) {
+      treeRef.current.clearFromIndex(dataIndex);
+      listRef.current.resetAfterIndex(dataIndex + 1);
+      return;
+    }
 
-      timeoutRef.current = window.setTimeout(() => {
-        const node = tableRef.current?.children[1].children[0] as HTMLElement;
-        const resetIndex = parseInt(node?.dataset.index || "0") + 1;
-        treeRef.current.clearFromIndex(resetIndex);
-        listRef.current.resetAfterIndex(resetIndex);
-      }, 50);
-    },
-    [listRef, tableRef, timeoutRef, treeRef]
-  );
+    timeoutRef.current = window.setTimeout(() => {
+      const node = tableRef.current?.children[1].children[0] as HTMLElement;
+      const resetIndex = parseInt(node?.dataset.index || "0") + 1;
+      treeRef.current.clearFromIndex(resetIndex);
+      listRef.current.resetAfterIndex(resetIndex);
+    }, 50);
+  }, []);
 
   const calculateHeight = useCallback(
     (queryParam: number | HTMLElement, optionalDataIndex: number | null = null) => {
@@ -114,7 +111,7 @@ const ListComponent = forwardRef(function (
       }
 
       const arr = [...row.children].slice(rowHeight ? 1 : 0) as HTMLElement[];
-      const res = (rowHeight || 0) + arr.reduce((pv, c) => pv + c.offsetHeight, 0);
+      const res = arr.reduce((pv, c) => pv + c.offsetHeight, rowHeight || 0) || defaultSize;
 
       // update the calculated height ref
       cacheRef.current[dataIndex] = res;
@@ -139,7 +136,7 @@ const ListComponent = forwardRef(function (
   const shouldUseRowWidth = useCallback(() => {
     const parentElement = tableRef.current?.parentElement || NO_NODE;
     setUseRowWidth(parentElement.scrollWidth <= parentElement.clientWidth);
-  }, [tableRef]);
+  }, []);
 
   // effects
   /* initializers */
@@ -149,17 +146,6 @@ const ListComponent = forwardRef(function (
     setUseRowWidth(widths.scrollWidth <= widths.clientWidth);
   }, []);
 
-  // force clear cache to update header size
-  useEffect(() => {
-    clearSizeCache(-1, true);
-    // figure out how to wait for scrollbar to appear
-    // before recalculating. using 100ms heuristic
-    setTimeout(() => {
-      updatePixelWidths();
-      shouldUseRowWidth();
-    }, 100);
-  }, []);
-
   /* updates */
   // update pixel widths every time the width changes
   useLayoutEffect(() => updatePixelWidths(), [width]);
@@ -170,7 +156,7 @@ const ListComponent = forwardRef(function (
   // manually alter the height of each row if height is incorrect
   // to help with flicker on resize
   useLayoutEffect(() => {
-    if (prevRef.current !== width) {
+    if (prevWidthRef.current !== width) {
       treeRef.current.clearFromIndex(0);
       setTimeout(() => {
         if (!tableRef.current || !listRef.current) {
@@ -215,8 +201,8 @@ const ListComponent = forwardRef(function (
       }, 0);
     }
 
-    prevRef.current = width;
-  }, [width, tableRef, listRef, calculateHeight]);
+    prevWidthRef.current = width;
+  }, [width, calculateHeight]);
 
   // for the footer: set the rows in the context with the data.
   // this is useful for any aggregate calculations.
@@ -261,7 +247,7 @@ const ListComponent = forwardRef(function (
       }}
       itemSize={index => {
         if (!index) {
-          if (!!headerHeight && headerHeight > 0) {
+          if (headerHeight && headerHeight > 0) {
             return headerHeight;
           }
 
@@ -340,13 +326,13 @@ const Table = forwardRef(function <T>(
 
   // warn if a minHeight is set without a maxHeight
   let maxHeight = maxTableHeight;
-  if (!!minTableHeight && minTableHeight > 0 && (!maxTableHeight || maxTableHeight <= 0)) {
+  if (minTableHeight && minTableHeight > 0 && (!maxTableHeight || maxTableHeight <= 0)) {
     maxHeight = minTableHeight + 400;
   }
 
   // handle warning
   useEffect(() => {
-    if (!!minTableHeight && minTableHeight > 0 && (!maxTableHeight || maxTableHeight <= 0)) {
+    if (minTableHeight && minTableHeight > 0 && (!maxTableHeight || maxTableHeight <= 0)) {
       console.warn(
         `maxTableHeight was either not present, or is <= 0, but you provided a minTableHeight of ${minTableHeight}px. As a result, the maxTableHeight will be set to ${
           minTableHeight + 400

src/TableContext.tsx

@@ -156,7 +156,7 @@ const TableContextProvider = ({ children, initialState }: ProviderProps) => {
       _stateOnMount.current = initialState;
       dispatch({ type: "refresh", initialState: refreshed });
     }
-  }, [_stateOnMount, initialState]);
+  }, [initialState]);
 
   return <TableContext.Provider value={{ ...state, dispatch }}>{children}</TableContext.Provider>;
 };

yarn.lock

@@ -4220,6 +4220,13 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-resize-detector@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-9.1.0.tgz#45ea7176e57f1a568abd0e3eafcbfd3532fb284e"
+  integrity sha512-vGFbfkIZp4itJqR4yl+GhjrZHtdlQvou1r10ek0yZUMkizKbPdekKTpPb003IV3b8E5BJFThVG0oocjE3lNsug==
+  dependencies:
+    lodash "^4.17.21"
+
 react-window@^1.8.9:
   version "1.8.9"
   resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.9.tgz#24bc346be73d0468cdf91998aac94e32bc7fa6a8"