baseui 0.0.0-alpha-2158d09 → 0.0.0-alpha-bcb33da

package/data-table/measure-column-widths.js.flow

@@ -12,69 +12,46 @@ import {useStyletron} from '../styles/index.js';
 
 import HeaderCell from './header-cell.js';
 import type {ColumnT, RowT} from './types.js';
-import {useRef} from 'react';
 
-// Measures the column header + sampled data
-function MeasureColumn({
-  sampleIndexes,
-  column,
-  columnIndex,
-  rows,
-  isSelectable,
-  onLayout,
-}) {
-  const [css] = useStyletron();
+// https://github.com/Swizec/useDimensions
+function useDimensions() {
+  const [dimensions, setDimensions] = React.useState({});
+  const [node, setNode] = React.useState(null);
 
-  const ref = useRef();
+  const ref = React.useCallback(node => {
+    setNode(node);
+  }, []);
 
   React.useEffect(() => {
-    if (ref.current) {
-      onLayout(columnIndex, ref.current.getBoundingClientRect());
+    if (__BROWSER__) {
+      if (node) {
+        window.requestAnimationFrame(() => {
+          setDimensions(node.getBoundingClientRect());
+        });
+      }
     }
-  }, []);
+  }, [node]);
 
-  return (
-    <div
-      ref={ref}
-      className={css({
-        display: 'flex',
-        flexDirection: 'column',
-        width: 'fit-content',
-      })}
-    >
-      <HeaderCell
-        index={columnIndex}
-        isHovered
-        isMeasured
-        isSelectedAll={false}
-        isSelectedIndeterminate={false}
-        onMouseEnter={() => {}}
-        onMouseLeave={() => {}}
-        onSelectAll={() => {}}
-        onSelectNone={() => {}}
-        onSort={i => {}}
-        sortable={column.sortable}
-        sortDirection={null}
-        title={column.title}
-        isSelectable={isSelectable}
-      />
-      {sampleIndexes.map((rowIndex, i) => {
-        const Cell = column.renderCell;
-        return (
-          <Cell
-            key={`measure-${i}`}
-            value={column.mapDataToValue(rows[rowIndex].data)}
-            isSelectable={isSelectable}
-            isMeasured
-            sortable={column.sortable}
-            x={0}
-            y={rowIndex}
-          />
-        );
-      })}
-    </div>
-  );
+  return [ref, dimensions];
 }
+
+type ElementMeasurerPropsT = {
+  onDimensionsChange: (dimensions: {width: number}) => void,
+  // eslint-disable-next-line flowtype/no-weak-types
+  item: React.Element<any>,
+};
+
+function ElementMeasurer(props: ElementMeasurerPropsT) {
+  const {onDimensionsChange} = props;
+  const [ref, dimensions] = useDimensions();
+
+  React.useEffect(() => {
+    onDimensionsChange(dimensions);
+  }, [dimensions, onDimensionsChange]);
+
+  return React.cloneElement(props.item, {ref});
+}
+
 type MeasureColumnWidthsPropsT = {
   columns: ColumnT<>[],
   // if selectable, measure the first column with checkbox included
@@ -84,6 +61,7 @@ type MeasureColumnWidthsPropsT = {
   widths: number[],
 };
 
+// sample size could likely be generated based on row count, to have higher confidence
 const MAX_SAMPLE_SIZE = 50;
 
 function generateSampleIndices(inputMin, inputMax, maxSamples) {
@@ -118,41 +96,51 @@ export default function MeasureColumnWidths({
 }: MeasureColumnWidthsPropsT) {
   const [css] = useStyletron();
 
-  const widthMap = React.useMemo(() => {
-    return new Map();
-  }, []);
+  const measurementCount = React.useRef(0);
+  const dimensionsCache = React.useRef(widths);
 
   const sampleSize =
     rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
   const finishedMeasurementCount = (sampleSize + 1) * columns.length;
 
-  const sampleIndexes = React.useMemo<number[]>(() => {
-    return generateSampleIndices(0, rows.length - 1, sampleSize);
+  const sampleRowIndicesByColumn = React.useMemo<number[][]>(() => {
+    measurementCount.current = 0;
+    dimensionsCache.current = widths;
+
+    const indices = generateSampleIndices(0, rows.length - 1, sampleSize);
+    return columns.map(() => indices);
   }, [columns, rows, widths, sampleSize]);
 
   const handleDimensionsChange = React.useCallback(
-    (columnIndex, dimensions) => {
+    (columnIndex, rowIndex, dimensions) => {
+      if (dimensions.width === undefined) return;
+
+      if (
+        columns[columnIndex] === undefined ||
+        dimensionsCache.current[columnIndex] === undefined
+      ) {
+        return;
+      }
+
+      measurementCount.current += 1;
+
       const nextWidth = Math.min(
         Math.max(
           columns[columnIndex].minWidth || 0,
-          widthMap.get(columnIndex) || 0,
+          dimensionsCache.current[columnIndex],
           dimensions.width + 1,
         ),
         columns[columnIndex].maxWidth || Infinity,
       );
 
-      if (nextWidth !== widthMap.get(columnIndex)) {
-        widthMap.set(columnIndex, nextWidth);
+      if (nextWidth !== dimensionsCache.current[columnIndex]) {
+        const nextWidths = [...dimensionsCache.current];
+        nextWidths[columnIndex] = nextWidth;
+        dimensionsCache.current = nextWidths;
       }
-      if (
-        // Refresh at 100% of done
-        widthMap.size === columns.length ||
-        // ...50%
-        widthMap.size === Math.floor(columns.length / 2) ||
-        // ...25%
-        widthMap.size === Math.floor(columns.length / 4)
-      ) {
-        onWidthsChange(Array.from(widthMap.values()));
+
+      if (measurementCount.current >= finishedMeasurementCount) {
+        onWidthsChange(dimensionsCache.current);
       }
     },
     [columns, finishedMeasurementCount, onWidthsChange],
@@ -164,27 +152,61 @@ export default function MeasureColumnWidths({
     height: 0,
   });
 
-  // Remove the measurement nodes after we are done updating our column width
-  if (widthMap.size === columns.length) {
+  if (measurementCount.current >= finishedMeasurementCount) {
     return null;
   }
 
   return (
     // eslint-disable-next-line jsx-a11y/role-supports-aria-props
     <div className={hiddenStyle} aria-hidden role="none">
-      {columns.map((column, i) => {
-        return (
-          <MeasureColumn
-            key={column.title + i}
-            column={column}
-            rows={rows}
-            isSelectable={isSelectable}
-            onLayout={handleDimensionsChange}
-            columnIndex={i}
-            sampleIndexes={sampleIndexes}
+      {sampleRowIndicesByColumn.map((rowIndices, columnIndex) => {
+        const Cell = columns[columnIndex].renderCell;
+        return rowIndices.map(rowIndex => (
+          <ElementMeasurer
+            key={`measure-${columnIndex}-${rowIndex}`}
+            onDimensionsChange={dimensions =>
+              handleDimensionsChange(columnIndex, rowIndex, dimensions)
+            }
+            item={
+              <Cell
+                value={columns[columnIndex].mapDataToValue(rows[rowIndex].data)}
+                isMeasured
+                onSelect={
+                  isSelectable && columnIndex === 0 ? () => {} : undefined
+                }
+                x={columnIndex}
+                y={rowIndex}
+              />
+            }
           />
-        );
+        ));
       })}
+      {columns.map((column, columnIndex) => (
+        <ElementMeasurer
+          key={`measure-column-${columnIndex}`}
+          onDimensionsChange={dimensions =>
+            handleDimensionsChange(columnIndex, -1, dimensions)
+          }
+          item={
+            <HeaderCell
+              index={columnIndex}
+              isHovered
+              isMeasured
+              isSelectable={isSelectable && columnIndex === 0}
+              isSelectedAll={false}
+              isSelectedIndeterminate={false}
+              onMouseEnter={() => {}}
+              onMouseLeave={() => {}}
+              onSelectAll={() => {}}
+              onSelectNone={() => {}}
+              onSort={i => {}}
+              sortable={column.sortable}
+              sortDirection={null}
+              title={column.title}
+            />
+          }
+        />
+      ))}
     </div>
   );
 }

package/es/data-table/data-table.js

@@ -17,8 +17,6 @@ import { LocaleContext } from '../locale/index.js'; // consider pulling this out
 
 const HEADER_ROW_HEIGHT = 48;
 
-const sum = ns => ns.reduce((s, n) => s + n, 0);
-
 function CellPlacement({
   columnIndex,
   rowIndex,
@@ -257,7 +255,7 @@ function Header(props) {
   }))));
 }
 
-function Headers() {
+function Headers(props) {
   const [css, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
   const ctx = React.useContext(HeaderContext);
@@ -267,7 +265,7 @@ function Headers() {
       position: 'sticky',
       top: 0,
       left: 0,
-      width: `${sum(ctx.widths)}px`,
+      width: `${ctx.widths.reduce((sum, w) => sum + w, 0)}px`,
       height: `${HEADER_ROW_HEIGHT}px`,
       display: 'flex',
       // this feels bad.. the absolutely positioned children elements
@@ -469,10 +467,8 @@ export function DataTable({
     }
 
     return rowHeight;
-  }, [rowHeight]); // We use state for our ref, to allow hooks to  update when the ref changes.
-  // eslint-disable-next-line flowtype/no-weak-types
-
-  const [gridRef, setGridRef] = React.useState(null);
+  }, [rowHeight]);
+  const gridRef = React.useRef(null);
   const [measuredWidths, setMeasuredWidths] = React.useState(columns.map(() => 0));
   const [resizeDeltas, setResizeDeltas] = React.useState(columns.map(() => 0));
   React.useEffect(() => {
@@ -484,11 +480,11 @@ export function DataTable({
     });
   }, [columns]);
   const resetAfterColumnIndex = React.useCallback(columnIndex => {
-    if (gridRef) {
+    if (gridRef.current) {
       // $FlowFixMe trigger react-window to layout the elements again
-      gridRef.resetAfterColumnIndex(columnIndex, true);
+      gridRef.current.resetAfterColumnIndex(columnIndex, true);
     }
-  }, [gridRef]);
+  }, [gridRef.current]);
   const handleWidthsChange = React.useCallback(nextWidths => {
     setMeasuredWidths(nextWidths);
     resetAfterColumnIndex(0);
@@ -598,10 +594,13 @@ export function DataTable({
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
   const [browserScrollbarWidth, setBrowserScrollbarWidth] = React.useState(0);
   const normalizedWidths = React.useMemo(() => {
+    const sum = ns => ns.reduce((s, n) => s + n, 0);
+
     const resizedWidths = measuredWidths.map((w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]));
 
-    if (gridRef) {
-      const gridProps = gridRef.props;
+    if (gridRef.current) {
+      // $FlowFixMe
+      const gridProps = gridRef.current.props;
       let isContentTallerThanContainer = false;
       let visibleRowHeight = 0;
 
@@ -636,7 +635,7 @@ export function DataTable({
     }
 
     return resizedWidths;
-  }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
+  }, [measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
   const isSelectable = batchActions ? !!batchActions.length : false;
   const isSelectedAll = React.useMemo(() => {
     if (!selectedRowIds) {
@@ -685,10 +684,10 @@ export function DataTable({
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
 
-    if (gridRef) {
+    if (gridRef.current) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.scrollToItem({
+        gridRef.current.scrollToItem({
           rowIndex: nextIndex
         });
       }
@@ -777,9 +776,8 @@ export function DataTable({
     }
   }, /*#__PURE__*/React.createElement(VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
   , {
-    ref: setGridRef,
+    ref: gridRef,
     overscanRowCount: 10,
-    overscanColumnCount: 5,
     innerElementType: InnerTableElement,
     columnCount: columns.length,
     columnWidth: columnIndex => normalizedWidths[columnIndex],

package/es/data-table/measure-column-widths.js

@@ -7,59 +7,40 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { useStyletron } from '../styles/index.js';
 import HeaderCell from './header-cell.js';
-import { useRef } from 'react'; // Measures the column header + sampled data
 
-function MeasureColumn({
-  sampleIndexes,
-  column,
-  columnIndex,
-  rows,
-  isSelectable,
-  onLayout
-}) {
-  const [css] = useStyletron();
-  const ref = useRef();
+// https://github.com/Swizec/useDimensions
+function useDimensions() {
+  const [dimensions, setDimensions] = React.useState({});
+  const [node, setNode] = React.useState(null);
+  const ref = React.useCallback(node => {
+    setNode(node);
+  }, []);
   React.useEffect(() => {
-    if (ref.current) {
-      onLayout(columnIndex, ref.current.getBoundingClientRect());
+    if (typeof document !== 'undefined') {
+      if (node) {
+        window.requestAnimationFrame(() => {
+          setDimensions(node.getBoundingClientRect());
+        });
+      }
     }
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: css({
-      display: 'flex',
-      flexDirection: 'column',
-      width: 'fit-content'
-    })
-  }, /*#__PURE__*/React.createElement(HeaderCell, {
-    index: columnIndex,
-    isHovered: true,
-    isMeasured: true,
-    isSelectedAll: false,
-    isSelectedIndeterminate: false,
-    onMouseEnter: () => {},
-    onMouseLeave: () => {},
-    onSelectAll: () => {},
-    onSelectNone: () => {},
-    onSort: i => {},
-    sortable: column.sortable,
-    sortDirection: null,
-    title: column.title,
-    isSelectable: isSelectable
-  }), sampleIndexes.map((rowIndex, i) => {
-    const Cell = column.renderCell;
-    return /*#__PURE__*/React.createElement(Cell, {
-      key: `measure-${i}`,
-      value: column.mapDataToValue(rows[rowIndex].data),
-      isSelectable: isSelectable,
-      isMeasured: true,
-      sortable: column.sortable,
-      x: 0,
-      y: rowIndex
-    });
-  }));
+  }, [node]);
+  return [ref, dimensions];
 }
 
+function ElementMeasurer(props) {
+  const {
+    onDimensionsChange
+  } = props;
+  const [ref, dimensions] = useDimensions();
+  React.useEffect(() => {
+    onDimensionsChange(dimensions);
+  }, [dimensions, onDimensionsChange]);
+  return /*#__PURE__*/React.cloneElement(props.item, {
+    ref
+  });
+}
+
+// sample size could likely be generated based on row count, to have higher confidence
 const MAX_SAMPLE_SIZE = 50;
 
 function generateSampleIndices(inputMin, inputMax, maxSamples) {
@@ -96,35 +77,43 @@ export default function MeasureColumnWidths({
   onWidthsChange
 }) {
   const [css] = useStyletron();
-  const widthMap = React.useMemo(() => {
-    return new Map();
-  }, []);
+  const measurementCount = React.useRef(0);
+  const dimensionsCache = React.useRef(widths);
   const sampleSize = rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
   const finishedMeasurementCount = (sampleSize + 1) * columns.length;
-  const sampleIndexes = React.useMemo(() => {
-    return generateSampleIndices(0, rows.length - 1, sampleSize);
+  const sampleRowIndicesByColumn = React.useMemo(() => {
+    measurementCount.current = 0;
+    dimensionsCache.current = widths;
+    const indices = generateSampleIndices(0, rows.length - 1, sampleSize);
+    return columns.map(() => indices);
   }, [columns, rows, widths, sampleSize]);
-  const handleDimensionsChange = React.useCallback((columnIndex, dimensions) => {
-    const nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, widthMap.get(columnIndex) || 0, dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
+  const handleDimensionsChange = React.useCallback((columnIndex, rowIndex, dimensions) => {
+    if (dimensions.width === undefined) return;
+
+    if (columns[columnIndex] === undefined || dimensionsCache.current[columnIndex] === undefined) {
+      return;
+    }
+
+    measurementCount.current += 1;
+    const nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, dimensionsCache.current[columnIndex], dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
 
-    if (nextWidth !== widthMap.get(columnIndex)) {
-      widthMap.set(columnIndex, nextWidth);
+    if (nextWidth !== dimensionsCache.current[columnIndex]) {
+      const nextWidths = [...dimensionsCache.current];
+      nextWidths[columnIndex] = nextWidth;
+      dimensionsCache.current = nextWidths;
     }
 
-    if ( // Refresh at 100% of done
-    widthMap.size === columns.length || // ...50%
-    widthMap.size === Math.floor(columns.length / 2) || // ...25%
-    widthMap.size === Math.floor(columns.length / 4)) {
-      onWidthsChange(Array.from(widthMap.values()));
+    if (measurementCount.current >= finishedMeasurementCount) {
+      onWidthsChange(dimensionsCache.current);
     }
   }, [columns, finishedMeasurementCount, onWidthsChange]);
   const hiddenStyle = css({
     position: 'absolute',
     overflow: 'hidden',
     height: 0
-  }); // Remove the measurement nodes after we are done updating our column width
+  });
 
-  if (widthMap.size === columns.length) {
+  if (measurementCount.current >= finishedMeasurementCount) {
     return null;
   }
 
@@ -135,16 +124,38 @@ export default function MeasureColumnWidths({
       className: hiddenStyle,
       "aria-hidden": true,
       role: "none"
-    }, columns.map((column, i) => {
-      return /*#__PURE__*/React.createElement(MeasureColumn, {
-        key: column.title + i,
-        column: column,
-        rows: rows,
-        isSelectable: isSelectable,
-        onLayout: handleDimensionsChange,
-        columnIndex: i,
-        sampleIndexes: sampleIndexes
-      });
-    }))
+    }, sampleRowIndicesByColumn.map((rowIndices, columnIndex) => {
+      const Cell = columns[columnIndex].renderCell;
+      return rowIndices.map(rowIndex => /*#__PURE__*/React.createElement(ElementMeasurer, {
+        key: `measure-${columnIndex}-${rowIndex}`,
+        onDimensionsChange: dimensions => handleDimensionsChange(columnIndex, rowIndex, dimensions),
+        item: /*#__PURE__*/React.createElement(Cell, {
+          value: columns[columnIndex].mapDataToValue(rows[rowIndex].data),
+          isMeasured: true,
+          onSelect: isSelectable && columnIndex === 0 ? () => {} : undefined,
+          x: columnIndex,
+          y: rowIndex
+        })
+      }));
+    }), columns.map((column, columnIndex) => /*#__PURE__*/React.createElement(ElementMeasurer, {
+      key: `measure-column-${columnIndex}`,
+      onDimensionsChange: dimensions => handleDimensionsChange(columnIndex, -1, dimensions),
+      item: /*#__PURE__*/React.createElement(HeaderCell, {
+        index: columnIndex,
+        isHovered: true,
+        isMeasured: true,
+        isSelectable: isSelectable && columnIndex === 0,
+        isSelectedAll: false,
+        isSelectedIndeterminate: false,
+        onMouseEnter: () => {},
+        onMouseLeave: () => {},
+        onSelectAll: () => {},
+        onSelectNone: () => {},
+        onSort: i => {},
+        sortable: column.sortable,
+        sortDirection: null,
+        title: column.title
+      })
+    })))
   );
 }