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

package/data-table/data-table.js

@@ -62,12 +62,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // consider pulling this out to a prop if useful.
 var HEADER_ROW_HEIGHT = 48;
 
-var sum = function sum(ns) {
-  return ns.reduce(function (s, n) {
-    return s + n;
-  }, 0);
-};
-
 function CellPlacement(_ref) {
   var columnIndex = _ref.columnIndex,
       rowIndex = _ref.rowIndex,
@@ -326,7 +320,7 @@ function Header(props) {
   }))));
 }
 
-function Headers() {
+function Headers(props) {
   var _useStyletron5 = (0, _index2.useStyletron)(),
       _useStyletron6 = _slicedToArray(_useStyletron5, 2),
       css = _useStyletron6[0],
@@ -345,7 +339,9 @@ function Headers() {
       position: 'sticky',
       top: 0,
       left: 0,
-      width: "".concat(sum(ctx.widths), "px"),
+      width: "".concat(ctx.widths.reduce(function (sum, w) {
+        return sum + w;
+      }, 0), "px"),
       height: "".concat(HEADER_ROW_HEIGHT, "px"),
       display: 'flex',
       // this feels bad.. the absolutely positioned children elements
@@ -568,27 +564,22 @@ function DataTable(_ref2) {
     }
 
     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
+  }, [rowHeight]);
+  var gridRef = React.useRef(null);
 
-  var _React$useState7 = React.useState(null),
+  var _React$useState7 = React.useState(columns.map(function () {
+    return 0;
+  })),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      gridRef = _React$useState8[0],
-      setGridRef = _React$useState8[1];
+      measuredWidths = _React$useState8[0],
+      setMeasuredWidths = _React$useState8[1];
 
   var _React$useState9 = React.useState(columns.map(function () {
     return 0;
   })),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      measuredWidths = _React$useState10[0],
-      setMeasuredWidths = _React$useState10[1];
-
-  var _React$useState11 = React.useState(columns.map(function () {
-    return 0;
-  })),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      resizeDeltas = _React$useState12[0],
-      setResizeDeltas = _React$useState12[1];
+      resizeDeltas = _React$useState10[0],
+      setResizeDeltas = _React$useState10[1];
 
   React.useEffect(function () {
     setMeasuredWidths(function (prev) {
@@ -603,11 +594,11 @@ function DataTable(_ref2) {
     });
   }, [columns]);
   var resetAfterColumnIndex = React.useCallback(function (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]);
   var handleWidthsChange = React.useCallback(function (nextWidths) {
     setMeasuredWidths(nextWidths);
     resetAfterColumnIndex(0);
@@ -620,20 +611,20 @@ function DataTable(_ref2) {
     resetAfterColumnIndex(columnIndex);
   }, [setResizeDeltas, resetAfterColumnIndex]);
 
-  var _React$useState13 = React.useState(0),
+  var _React$useState11 = React.useState(0),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      scrollLeft = _React$useState12[0],
+      setScrollLeft = _React$useState12[1];
+
+  var _React$useState13 = React.useState(false),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      scrollLeft = _React$useState14[0],
-      setScrollLeft = _React$useState14[1];
+      isScrollingX = _React$useState14[0],
+      setIsScrollingX = _React$useState14[1];
 
   var _React$useState15 = React.useState(false),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      isScrollingX = _React$useState16[0],
-      setIsScrollingX = _React$useState16[1];
-
-  var _React$useState17 = React.useState(false),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      recentlyScrolledX = _React$useState18[0],
-      setRecentlyScrolledX = _React$useState18[1];
+      recentlyScrolledX = _React$useState16[0],
+      setRecentlyScrolledX = _React$useState16[1];
 
   React.useLayoutEffect(function () {
     if (recentlyScrolledX !== isScrollingX) {
@@ -755,18 +746,25 @@ function DataTable(_ref2) {
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
 
-  var _React$useState19 = React.useState(0),
-      _React$useState20 = _slicedToArray(_React$useState19, 2),
-      browserScrollbarWidth = _React$useState20[0],
-      setBrowserScrollbarWidth = _React$useState20[1];
+  var _React$useState17 = React.useState(0),
+      _React$useState18 = _slicedToArray(_React$useState17, 2),
+      browserScrollbarWidth = _React$useState18[0],
+      setBrowserScrollbarWidth = _React$useState18[1];
 
   var normalizedWidths = React.useMemo(function () {
+    var sum = function sum(ns) {
+      return ns.reduce(function (s, n) {
+        return s + n;
+      }, 0);
+    };
+
     var resizedWidths = measuredWidths.map(function (w, i) {
       return Math.floor(w) + Math.floor(resizeDeltas[i]);
     });
 
-    if (gridRef) {
-      var gridProps = gridRef.props;
+    if (gridRef.current) {
+      // $FlowFixMe
+      var gridProps = gridRef.current.props;
       var isContentTallerThanContainer = false;
       var visibleRowHeight = 0;
 
@@ -803,7 +801,7 @@ function DataTable(_ref2) {
     }
 
     return resizedWidths;
-  }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
+  }, [measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
   var isSelectable = batchActions ? !!batchActions.length : false;
   var isSelectedAll = React.useMemo(function () {
     if (!selectedRowIds) {
@@ -847,23 +845,23 @@ function DataTable(_ref2) {
     }
   }, [onSort]);
 
+  var _React$useState19 = React.useState(-1),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      columnHighlightIndex = _React$useState20[0],
+      setColumnHighlightIndex = _React$useState20[1];
+
   var _React$useState21 = React.useState(-1),
       _React$useState22 = _slicedToArray(_React$useState21, 2),
-      columnHighlightIndex = _React$useState22[0],
-      setColumnHighlightIndex = _React$useState22[1];
-
-  var _React$useState23 = React.useState(-1),
-      _React$useState24 = _slicedToArray(_React$useState23, 2),
-      rowHighlightIndex = _React$useState24[0],
-      setRowHighlightIndex = _React$useState24[1];
+      rowHighlightIndex = _React$useState22[0],
+      setRowHighlightIndex = _React$useState22[1];
 
   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
         });
       }
@@ -954,9 +952,8 @@ function DataTable(_ref2) {
       }
     }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
     , {
-      ref: setGridRef,
+      ref: gridRef,
       overscanRowCount: 10,
-      overscanColumnCount: 5,
       innerElementType: InnerTableElement,
       columnCount: columns.length,
       columnWidth: function columnWidth(columnIndex) {

package/data-table/data-table.js.flow

@@ -87,8 +87,6 @@ type CellPlacementPropsT = {
   },
 };
 
-const sum = ns => ns.reduce((s, n) => s + n, 0);
-
 function CellPlacement({columnIndex, rowIndex, data, style}) {
   const [css, theme] = useStyletron();
 
@@ -413,7 +411,7 @@ function Header(props: HeaderProps) {
   );
 }
 
-function Headers() {
+function Headers(props: {||}) {
   const [css, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
   const ctx = React.useContext(HeaderContext);
@@ -425,7 +423,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
@@ -698,10 +696,7 @@ export function DataTable({
     },
     [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<?VariableSizeGrid<any>>(null);
+  const gridRef = React.useRef<typeof VariableSizeGrid | null>(null);
   const [measuredWidths, setMeasuredWidths] = React.useState(
     columns.map(() => 0),
   );
@@ -717,12 +712,12 @@ export function DataTable({
 
   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 => {
@@ -848,11 +843,13 @@ export function DataTable({
 
   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;
@@ -889,7 +886,6 @@ export function DataTable({
     }
     return resizedWidths;
   }, [
-    gridRef,
     measuredWidths,
     resizeDeltas,
     browserScrollbarWidth,
@@ -952,10 +948,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({rowIndex: nextIndex});
+        gridRef.current.scrollToItem({rowIndex: nextIndex});
       }
       if (onRowHighlightChange) {
         onRowHighlightChange(nextIndex, rows[nextIndex - 1]);
@@ -1055,9 +1051,8 @@ export function DataTable({
           >
             <VariableSizeGrid
               // eslint-disable-next-line flowtype/no-weak-types
-              ref={(setGridRef: any)}
+              ref={(gridRef: any)}
               overscanRowCount={10}
-              overscanColumnCount={5}
               innerElementType={InnerTableElement}
               columnCount={columns.length}
               columnWidth={columnIndex => normalizedWidths[columnIndex]}

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

@@ -19,6 +19,14 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -31,61 +39,50 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-// Measures the column header + sampled data
-function MeasureColumn(_ref) {
-  var sampleIndexes = _ref.sampleIndexes,
-      column = _ref.column,
-      columnIndex = _ref.columnIndex,
-      rows = _ref.rows,
-      isSelectable = _ref.isSelectable,
-      onLayout = _ref.onLayout;
+// https://github.com/Swizec/useDimensions
+function useDimensions() {
+  var _React$useState = React.useState({}),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      dimensions = _React$useState2[0],
+      setDimensions = _React$useState2[1];
 
-  var _useStyletron = (0, _index.useStyletron)(),
-      _useStyletron2 = _slicedToArray(_useStyletron, 1),
-      css = _useStyletron2[0];
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      node = _React$useState4[0],
+      setNode = _React$useState4[1];
 
-  var ref = (0, React.useRef)();
+  var ref = React.useCallback(function (node) {
+    setNode(node);
+  }, []);
   React.useEffect(function () {
-    if (ref.current) {
-      onLayout(columnIndex, ref.current.getBoundingClientRect());
+    if (typeof document !== 'undefined') {
+      if (node) {
+        window.requestAnimationFrame(function () {
+          setDimensions(node.getBoundingClientRect());
+        });
+      }
     }
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: css({
-      display: 'flex',
-      flexDirection: 'column',
-      width: 'fit-content'
-    })
-  }, /*#__PURE__*/React.createElement(_headerCell.default, {
-    index: columnIndex,
-    isHovered: true,
-    isMeasured: true,
-    isSelectedAll: false,
-    isSelectedIndeterminate: false,
-    onMouseEnter: function onMouseEnter() {},
-    onMouseLeave: function onMouseLeave() {},
-    onSelectAll: function onSelectAll() {},
-    onSelectNone: function onSelectNone() {},
-    onSort: function onSort(i) {},
-    sortable: column.sortable,
-    sortDirection: null,
-    title: column.title,
-    isSelectable: isSelectable
-  }), sampleIndexes.map(function (rowIndex, i) {
-    var Cell = column.renderCell;
-    return /*#__PURE__*/React.createElement(Cell, {
-      key: "measure-".concat(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) {
+  var onDimensionsChange = props.onDimensionsChange;
+
+  var _useDimensions = useDimensions(),
+      _useDimensions2 = _slicedToArray(_useDimensions, 2),
+      ref = _useDimensions2[0],
+      dimensions = _useDimensions2[1];
+
+  React.useEffect(function () {
+    onDimensionsChange(dimensions);
+  }, [dimensions, onDimensionsChange]);
+  return /*#__PURE__*/React.cloneElement(props.item, {
+    ref: ref
+  });
 }
 
+// sample size could likely be generated based on row count, to have higher confidence
 var MAX_SAMPLE_SIZE = 50;
 
 function generateSampleIndices(inputMin, inputMax, maxSamples) {
@@ -117,46 +114,57 @@ function generateSampleIndices(inputMin, inputMax, maxSamples) {
   return indices;
 }
 
-function MeasureColumnWidths(_ref2) {
-  var columns = _ref2.columns,
-      rows = _ref2.rows,
-      widths = _ref2.widths,
-      isSelectable = _ref2.isSelectable,
-      onWidthsChange = _ref2.onWidthsChange;
+function MeasureColumnWidths(_ref) {
+  var columns = _ref.columns,
+      rows = _ref.rows,
+      widths = _ref.widths,
+      isSelectable = _ref.isSelectable,
+      onWidthsChange = _ref.onWidthsChange;
 
-  var _useStyletron3 = (0, _index.useStyletron)(),
-      _useStyletron4 = _slicedToArray(_useStyletron3, 1),
-      css = _useStyletron4[0];
+  var _useStyletron = (0, _index.useStyletron)(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 1),
+      css = _useStyletron2[0];
 
-  var widthMap = React.useMemo(function () {
-    return new Map();
-  }, []);
+  var measurementCount = React.useRef(0);
+  var dimensionsCache = React.useRef(widths);
   var sampleSize = rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
   var finishedMeasurementCount = (sampleSize + 1) * columns.length;
-  var sampleIndexes = React.useMemo(function () {
-    return generateSampleIndices(0, rows.length - 1, sampleSize);
+  var sampleRowIndicesByColumn = React.useMemo(function () {
+    measurementCount.current = 0;
+    dimensionsCache.current = widths;
+    var indices = generateSampleIndices(0, rows.length - 1, sampleSize);
+    return columns.map(function () {
+      return indices;
+    });
   }, [columns, rows, widths, sampleSize]);
-  var handleDimensionsChange = React.useCallback(function (columnIndex, dimensions) {
-    var nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, widthMap.get(columnIndex) || 0, dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
+  var handleDimensionsChange = React.useCallback(function (columnIndex, rowIndex, dimensions) {
+    if (dimensions.width === undefined) return;
 
-    if (nextWidth !== widthMap.get(columnIndex)) {
-      widthMap.set(columnIndex, nextWidth);
+    if (columns[columnIndex] === undefined || dimensionsCache.current[columnIndex] === undefined) {
+      return;
     }
 
-    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()));
+    measurementCount.current += 1;
+    var nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, dimensionsCache.current[columnIndex], dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
+
+    if (nextWidth !== dimensionsCache.current[columnIndex]) {
+      var nextWidths = _toConsumableArray(dimensionsCache.current);
+
+      nextWidths[columnIndex] = nextWidth;
+      dimensionsCache.current = nextWidths;
+    }
+
+    if (measurementCount.current >= finishedMeasurementCount) {
+      onWidthsChange(dimensionsCache.current);
     }
   }, [columns, finishedMeasurementCount, onWidthsChange]);
   var 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;
   }
 
@@ -167,15 +175,45 @@ function MeasureColumnWidths(_ref2) {
       className: hiddenStyle,
       "aria-hidden": true,
       role: "none"
-    }, columns.map(function (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(function (rowIndices, columnIndex) {
+      var Cell = columns[columnIndex].renderCell;
+      return rowIndices.map(function (rowIndex) {
+        return /*#__PURE__*/React.createElement(ElementMeasurer, {
+          key: "measure-".concat(columnIndex, "-").concat(rowIndex),
+          onDimensionsChange: function onDimensionsChange(dimensions) {
+            return handleDimensionsChange(columnIndex, rowIndex, dimensions);
+          },
+          item: /*#__PURE__*/React.createElement(Cell, {
+            value: columns[columnIndex].mapDataToValue(rows[rowIndex].data),
+            isMeasured: true,
+            onSelect: isSelectable && columnIndex === 0 ? function () {} : undefined,
+            x: columnIndex,
+            y: rowIndex
+          })
+        });
+      });
+    }), columns.map(function (column, columnIndex) {
+      return /*#__PURE__*/React.createElement(ElementMeasurer, {
+        key: "measure-column-".concat(columnIndex),
+        onDimensionsChange: function onDimensionsChange(dimensions) {
+          return handleDimensionsChange(columnIndex, -1, dimensions);
+        },
+        item: /*#__PURE__*/React.createElement(_headerCell.default, {
+          index: columnIndex,
+          isHovered: true,
+          isMeasured: true,
+          isSelectable: isSelectable && columnIndex === 0,
+          isSelectedAll: false,
+          isSelectedIndeterminate: false,
+          onMouseEnter: function onMouseEnter() {},
+          onMouseLeave: function onMouseLeave() {},
+          onSelectAll: function onSelectAll() {},
+          onSelectNone: function onSelectNone() {},
+          onSort: function onSort(i) {},
+          sortable: column.sortable,
+          sortDirection: null,
+          title: column.title
+        })
       });
     }))
   );