baseui 10.9.2 → 10.11.1

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

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {VariableSizeGrid} from 'react-window';
+import { VariableSizeGrid } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import {
@@ -16,20 +16,14 @@ import {
   SIZE as BUTTON_SIZES,
   KIND as BUTTON_KINDS,
 } from '../button/index.js';
-import {useStyletron} from '../styles/index.js';
-import {Tooltip, PLACEMENT} from '../tooltip/index.js';
+import { useStyletron } from '../styles/index.js';
+import { Tooltip, PLACEMENT } from '../tooltip/index.js';
 
-import {SORT_DIRECTIONS} from './constants.js';
+import { SORT_DIRECTIONS } from './constants.js';
 import HeaderCell from './header-cell.js';
 import MeasureColumnWidths from './measure-column-widths.js';
-import type {
-  ColumnT,
-  DataTablePropsT,
-  RowT,
-  SortDirectionsT,
-  RowActionT,
-} from './types.js';
-import {LocaleContext} from '../locale/index.js';
+import type { ColumnT, DataTablePropsT, RowT, SortDirectionsT, RowActionT } from './types.js';
+import { LocaleContext } from '../locale/index.js';
 
 // consider pulling this out to a prop if useful.
 const HEADER_ROW_HEIGHT = 48;
@@ -46,14 +40,14 @@ type HeaderContextT = {|
   isSelectedAll: boolean,
   isSelectedIndeterminate: boolean,
   measuredWidths: number[],
-  onMouseEnter: number => void,
+  onMouseEnter: (number) => void,
   onMouseLeave: () => void,
   onResize: (columnIndex: number, delta: number) => void,
   onSelectMany: () => void,
   onSelectNone: () => void,
-  onSort: number => void,
+  onSort: (number) => void,
   resizableColumnWidths: boolean,
-  rowActions: RowActionT[] | (RowT => RowActionT[]),
+  rowActions: RowActionT[] | ((RowT) => RowActionT[]),
   rowHeight: number,
   rowHighlightIndex: number,
   rows: RowT[],
@@ -80,14 +74,16 @@ type CellPlacementPropsT = {
     isSelectable: boolean,
     isRowSelected: (string | number) => boolean,
     onRowMouseEnter: (number, RowT) => void,
-    onSelectOne: RowT => void,
+    onSelectOne: (RowT) => void,
     rowHighlightIndex: number,
     rows: RowT[],
     textQuery: string,
   },
 };
 
-function CellPlacement({columnIndex, rowIndex, data, style}) {
+const sum = (ns) => ns.reduce((s, n) => s + n, 0);
+
+function CellPlacement({ columnIndex, rowIndex, data, style }) {
   const [css, theme] = useStyletron();
 
   // ignores the table header row
@@ -97,7 +93,7 @@ function CellPlacement({columnIndex, rowIndex, data, style}) {
 
   let backgroundColor = theme.colors.backgroundPrimary;
   if (
-    (rowIndex % 2 && columnIndex === data.columnHighlightIndex) ||
+    (Boolean(rowIndex % 2) && columnIndex === data.columnHighlightIndex) ||
     rowIndex === data.rowHighlightIndex
   ) {
     backgroundColor = theme.colors.backgroundTertiary;
@@ -106,9 +102,7 @@ function CellPlacement({columnIndex, rowIndex, data, style}) {
   }
 
   const Cell = data.columns[columnIndex].renderCell;
-  const value = data.columns[columnIndex].mapDataToValue(
-    data.rows[rowIndex - 1].data,
-  );
+  const value = data.columns[columnIndex].mapDataToValue(data.rows[rowIndex - 1].data);
 
   return (
     <div
@@ -123,9 +117,7 @@ function CellPlacement({columnIndex, rowIndex, data, style}) {
         boxSizing: 'border-box',
       })}
       style={style}
-      onMouseEnter={() =>
-        data.onRowMouseEnter(rowIndex, data.rows[rowIndex - 1])
-      }
+      onMouseEnter={() => data.onRowMouseEnter(rowIndex, data.rows[rowIndex - 1])}
     >
       <Cell
         value={value}
@@ -159,8 +151,7 @@ function compareCellPlacement(prevProps, nextProps) {
 
   if (
     prevProps.data.isSelectable === nextProps.data.isSelectable &&
-    prevProps.data.columnHighlightIndex ===
-      nextProps.data.columnHighlightIndex &&
+    prevProps.data.columnHighlightIndex === nextProps.data.columnHighlightIndex &&
     prevProps.data.rowHighlightIndex === nextProps.data.rowHighlightIndex &&
     prevProps.data.textQuery === nextProps.data.textQuery &&
     prevProps.data.isRowSelected === nextProps.data.isRowSelected
@@ -174,8 +165,7 @@ function compareCellPlacement(prevProps, nextProps) {
   if (
     prevProps.rowIndex !== prevProps.data.rowHighlightIndex &&
     prevProps.rowIndex !== nextProps.data.rowHighlightIndex &&
-    prevProps.data.columnHighlightIndex ===
-      nextProps.data.columnHighlightIndex &&
+    prevProps.data.columnHighlightIndex === nextProps.data.columnHighlightIndex &&
     prevProps.data.isRowSelected === nextProps.data.isRowSelected
   ) {
     return true;
@@ -196,7 +186,7 @@ function compareCellPlacement(prevProps, nextProps) {
 }
 const CellPlacementMemo = React.memo<CellPlacementPropsT, mixed>(
   CellPlacement,
-  compareCellPlacement,
+  compareCellPlacement
 );
 CellPlacementMemo.displayName = 'CellPlacement';
 
@@ -239,7 +229,7 @@ type HeaderProps = {|
   isSelectable: boolean,
   isSelectedAll: boolean,
   isSelectedIndeterminate: boolean,
-  onMouseEnter: number => void,
+  onMouseEnter: (number) => void,
   onMouseLeave: () => void,
   onResize: (columnIndex: number, delta: number) => void,
   onResizeIndexChange: (columnIndex: number) => void,
@@ -258,7 +248,7 @@ function Header(props: HeaderProps) {
   const [css, theme] = useStyletron();
   const [startResizePos, setStartResizePos] = React.useState(0);
   const [endResizePos, setEndResizePos] = React.useState(0);
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   const headerCellRef = React.useRef<any>(null);
 
   const RULER_OFFSET = 2;
@@ -356,9 +346,7 @@ function Header(props: HeaderProps) {
         onSelectAll={props.onSelectMany}
         onSelectNone={props.onSelectNone}
         onSort={props.onSort}
-        sortDirection={
-          props.sortIndex === props.index ? props.sortDirection : null
-        }
+        sortDirection={props.sortIndex === props.index ? props.sortDirection : null}
         title={props.columnTitle}
       />
       {props.resizableColumnWidths && (
@@ -371,16 +359,14 @@ function Header(props: HeaderProps) {
         >
           <div
             role="presentation"
-            onMouseDown={event => {
+            onMouseDown={(event) => {
               props.onResizeIndexChange(props.index);
               const x = getPositionX(event.target);
               setStartResizePos(x);
               setEndResizePos(x);
             }}
             className={css({
-              backgroundColor: isResizingThisColumn
-                ? theme.colors.contentPrimary
-                : null,
+              backgroundColor: isResizingThisColumn ? theme.colors.contentPrimary : null,
               cursor: 'ew-resize',
               position: 'absolute',
               height: '100%',
@@ -411,7 +397,7 @@ function Header(props: HeaderProps) {
   );
 }
 
-function Headers(props: {||}) {
+function Headers() {
   const [css, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
   const ctx = React.useContext(HeaderContext);
@@ -423,7 +409,7 @@ function Headers(props: {||}) {
         position: 'sticky',
         top: 0,
         left: 0,
-        width: `${ctx.widths.reduce((sum, w) => sum + w, 0)}px`,
+        width: `${sum(ctx.widths)}px`,
         height: `${HEADER_ROW_HEIGHT}px`,
         display: 'flex',
         // this feels bad.. the absolutely positioned children elements
@@ -439,10 +425,7 @@ function Headers(props: {||}) {
             <Tooltip
               key={columnIndex}
               placement={PLACEMENT.bottomLeft}
-              isOpen={
-                ctx.columnHighlightIndex === columnIndex &&
-                Boolean(activeFilter)
-              }
+              isOpen={ctx.columnHighlightIndex === columnIndex && Boolean(activeFilter)}
               content={() => {
                 return (
                   <div>
@@ -474,12 +457,11 @@ function Headers(props: {||}) {
                   backgroundColor: theme.colors.backgroundPrimary,
                   borderTop: 'none',
                   borderLeft: 'none',
-                  borderRight:
-                    columnIndex === ctx.columns.length - 1 ? 'none' : null,
+                  borderRight: columnIndex === ctx.columns.length - 1 ? 'none' : null,
                   boxSizing: 'border-box',
                   display: 'flex',
                 })}
-                style={{width: ctx.widths[columnIndex]}}
+                style={{ width: ctx.widths[columnIndex] }}
               >
                 <Header
                   columnTitle={column.title}
@@ -523,9 +505,7 @@ function LoadingOrEmptyMessage(props) {
         marginLeft: theme.sizing.scale500,
       })}
     >
-      {typeof props.children === 'function'
-        ? props.children()
-        : String(props.children)}
+      {typeof props.children === 'function' ? props.children() : String(props.children)}
     </p>
   );
 }
@@ -533,8 +513,8 @@ function LoadingOrEmptyMessage(props) {
 // replaces the content of the virtualized window with contents. in this case,
 // we are prepending a table header row before the table rows (children to the fn).
 const InnerTableElement = React.forwardRef<
-  {|children: React.Node, style: {[string]: mixed}|},
-  HTMLDivElement,
+  {| children: React.Node, style: { [string]: mixed } |},
+  HTMLDivElement
 >((props, ref) => {
   const [, theme] = useStyletron();
   const ctx = React.useContext(HeaderContext);
@@ -560,13 +540,9 @@ const InnerTableElement = React.forwardRef<
     <div ref={ref} data-baseweb="data-table" style={props.style}>
       <Headers />
 
-      {viewState === LOADING && (
-        <LoadingOrEmptyMessage>{ctx.loadingMessage}</LoadingOrEmptyMessage>
-      )}
+      {viewState === LOADING && <LoadingOrEmptyMessage>{ctx.loadingMessage}</LoadingOrEmptyMessage>}
 
-      {viewState === EMPTY && (
-        <LoadingOrEmptyMessage>{ctx.emptyMessage}</LoadingOrEmptyMessage>
-      )}
+      {viewState === EMPTY && <LoadingOrEmptyMessage>{ctx.emptyMessage}</LoadingOrEmptyMessage>}
 
       {viewState === RENDERING && props.children}
 
@@ -587,14 +563,13 @@ const InnerTableElement = React.forwardRef<
               position: 'absolute',
               right: theme.direction !== 'rtl' ? 0 - ctx.scrollLeft : 'initial',
               left: theme.direction === 'rtl' ? 0 : 'initial',
-              top:
-                (ctx.rowHighlightIndex - 1) * ctx.rowHeight + HEADER_ROW_HEIGHT,
+              top: (ctx.rowHighlightIndex - 1) * ctx.rowHeight + HEADER_ROW_HEIGHT,
             }}
           >
             {(typeof ctx.rowActions === 'function'
               ? ctx.rowActions(highlightedRow)
               : ctx.rowActions
-            ).map(rowAction => {
+            ).map((rowAction) => {
               if (rowAction.renderButton) {
                 const RowActionButton = rowAction.renderButton;
                 return <RowActionButton />;
@@ -605,7 +580,7 @@ const InnerTableElement = React.forwardRef<
                 <Button
                   alt={rowAction.label}
                   key={rowAction.label}
-                  onClick={event =>
+                  onClick={(event) =>
                     rowAction.onClick({
                       event,
                       row: ctx.rows[ctx.rowHighlightIndex - 1],
@@ -688,53 +663,54 @@ export function DataTable({
   const locale = React.useContext(LocaleContext);
 
   const rowHeightAtIndex = React.useCallback(
-    index => {
+    (index) => {
       if (index === 0) {
         return HEADER_ROW_HEIGHT;
       }
       return rowHeight;
     },
-    [rowHeight],
-  );
-  const gridRef = React.useRef<typeof VariableSizeGrid | null>(null);
-  const [measuredWidths, setMeasuredWidths] = React.useState(
-    columns.map(() => 0),
+    [rowHeight]
   );
+
+  // We use state for our ref, to allow hooks to  update when the ref changes.
+  // flowlint-next-line unclear-type:off
+  const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
+  const [measuredWidths, setMeasuredWidths] = React.useState(columns.map(() => 0));
   const [resizeDeltas, setResizeDeltas] = React.useState(columns.map(() => 0));
   React.useEffect(() => {
-    setMeasuredWidths(prev => {
+    setMeasuredWidths((prev) => {
       return columns.map((v, index) => prev[index] || 0);
     });
-    setResizeDeltas(prev => {
+    setResizeDeltas((prev) => {
       return columns.map((v, index) => prev[index] || 0);
     });
   }, [columns]);
 
   const resetAfterColumnIndex = React.useCallback(
-    columnIndex => {
-      if (gridRef.current) {
+    (columnIndex) => {
+      if (gridRef) {
         // $FlowFixMe trigger react-window to layout the elements again
-        gridRef.current.resetAfterColumnIndex(columnIndex, true);
+        gridRef.resetAfterColumnIndex(columnIndex, true);
       }
     },
-    [gridRef.current],
+    [gridRef]
   );
   const handleWidthsChange = React.useCallback(
-    nextWidths => {
+    (nextWidths) => {
       setMeasuredWidths(nextWidths);
       resetAfterColumnIndex(0);
     },
-    [setMeasuredWidths, resetAfterColumnIndex],
+    [setMeasuredWidths, resetAfterColumnIndex]
   );
   const handleColumnResize = React.useCallback(
     (columnIndex, delta) => {
-      setResizeDeltas(prev => {
+      setResizeDeltas((prev) => {
         prev[columnIndex] = Math.max(prev[columnIndex] + delta, 0);
         return [...prev];
       });
       resetAfterColumnIndex(columnIndex);
     },
-    [setResizeDeltas, resetAfterColumnIndex],
+    [setResizeDeltas, resetAfterColumnIndex]
   );
 
   const [scrollLeft, setScrollLeft] = React.useState(0);
@@ -753,27 +729,22 @@ export function DataTable({
     }
   }, [recentlyScrolledX]);
   const handleScroll = React.useCallback(
-    params => {
+    (params) => {
       setScrollLeft(params.scrollLeft);
       if (params.scrollLeft !== scrollLeft) {
         setRecentlyScrolledX(true);
       }
     },
-    [scrollLeft, setScrollLeft, setRecentlyScrolledX],
+    [scrollLeft, setScrollLeft, setRecentlyScrolledX]
   );
 
   const sortedIndices = React.useMemo(() => {
     let toSort = allRows.map((r, i) => [r, i]);
     const index = sortIndex;
 
-    if (
-      index !== null &&
-      index !== undefined &&
-      index !== -1 &&
-      columns[index]
-    ) {
+    if (index !== null && index !== undefined && index !== -1 && columns[index]) {
       const sortFn = columns[index].sortFn;
-      const getValue = row => columns[index].mapDataToValue(row.data);
+      const getValue = (row) => columns[index].mapDataToValue(row.data);
       if (sortDirection === SORT_DIRECTIONS.ASC) {
         toSort.sort((a, b) => sortFn(getValue(a[0]), getValue(b[0])));
       } else if (sortDirection === SORT_DIRECTIONS.DESC) {
@@ -781,20 +752,20 @@ export function DataTable({
       }
     }
 
-    return toSort.map(el => el[1]);
+    return toSort.map((el) => el[1]);
   }, [sortIndex, sortDirection, columns, allRows]);
 
   const filteredIndices = React.useMemo(() => {
     const set = new Set(allRows.map((_, idx) => idx));
-    Array.from(filters || new Set(), f => f).forEach(([title, filter]) => {
-      const columnIndex = columns.findIndex(c => c.title === title);
+    Array.from(filters || new Set(), (f) => f).forEach(([title, filter]) => {
+      const columnIndex = columns.findIndex((c) => c.title === title);
       const column = columns[columnIndex];
       if (!column) {
         return;
       }
 
       const filterFn = column.buildFilter(filter);
-      Array.from(set).forEach(idx => {
+      Array.from(set).forEach((idx) => {
         if (!filterFn(column.mapDataToValue(allRows[idx].data))) {
           set.delete(idx);
         }
@@ -808,15 +779,12 @@ export function DataTable({
           stringishColumnIndices.push(i);
         }
       }
-      Array.from(set).forEach(idx => {
-        const matches = stringishColumnIndices.some(cdx => {
+      Array.from(set).forEach((idx) => {
+        const matches = stringishColumnIndices.some((cdx) => {
           const column = columns[cdx];
           const textQueryFilter = column.textQueryFilter;
           if (textQueryFilter) {
-            return textQueryFilter(
-              textQuery,
-              column.mapDataToValue(allRows[idx].data),
-            );
+            return textQueryFilter(textQuery, column.mapDataToValue(allRows[idx].data));
           }
           return false;
         });
@@ -832,8 +800,8 @@ export function DataTable({
 
   const rows = React.useMemo(() => {
     const result = sortedIndices
-      .filter(idx => filteredIndices.has(idx))
-      .map(idx => allRows[idx]);
+      .filter((idx) => filteredIndices.has(idx))
+      .map((idx) => allRows[idx]);
 
     if (onIncludedRowsChange) {
       onIncludedRowsChange(result);
@@ -843,13 +811,9 @@ 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.current) {
-      // $FlowFixMe
-      const gridProps = gridRef.current.props;
+    const resizedWidths = measuredWidths.map((w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]));
+    if (gridRef) {
+      const gridProps = gridRef.props;
 
       let isContentTallerThanContainer = false;
       let visibleRowHeight = 0;
@@ -861,13 +825,11 @@ export function DataTable({
         }
       }
 
-      const scrollbarWidth = isContentTallerThanContainer
-        ? browserScrollbarWidth
-        : 0;
+      const scrollbarWidth = isContentTallerThanContainer ? browserScrollbarWidth : 0;
 
       const remainder = gridProps.width - sum(resizedWidths) - scrollbarWidth;
       const padding = Math.floor(
-        remainder / columns.filter(c => (c ? c.fillWidth : true)).length,
+        remainder / columns.filter((c) => (c ? c.fillWidth : true)).length
       );
       if (padding > 0) {
         const result = [];
@@ -885,13 +847,7 @@ export function DataTable({
       }
     }
     return resizedWidths;
-  }, [
-    measuredWidths,
-    resizeDeltas,
-    browserScrollbarWidth,
-    rows.length,
-    columns,
-  ]);
+  }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
 
   const isSelectable = batchActions ? !!batchActions.length : false;
   const isSelectedAll = React.useMemo(() => {
@@ -907,13 +863,13 @@ export function DataTable({
     return !!selectedRowIds.size && selectedRowIds.size < rows.length;
   }, [selectedRowIds, rows.length]);
   const isRowSelected = React.useCallback(
-    id => {
+    (id) => {
       if (selectedRowIds) {
         return selectedRowIds.has(id);
       }
       return false;
     },
-    [selectedRowIds],
+    [selectedRowIds]
   );
   const handleSelectMany = React.useCallback(() => {
     if (onSelectMany) {
@@ -926,21 +882,21 @@ export function DataTable({
     }
   }, [onSelectNone]);
   const handleSelectOne = React.useCallback(
-    row => {
+    (row) => {
       if (onSelectOne) {
         onSelectOne(row);
       }
     },
-    [onSelectOne],
+    [onSelectOne]
   );
 
   const handleSort = React.useCallback(
-    columnIndex => {
+    (columnIndex) => {
       if (onSort) {
         onSort(columnIndex);
       }
     },
-    [onSort],
+    [onSort]
   );
 
   const [columnHighlightIndex, setColumnHighlightIndex] = React.useState(-1);
@@ -948,10 +904,10 @@ export function DataTable({
 
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
-    if (gridRef.current) {
+    if (gridRef) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.current.scrollToItem({rowIndex: nextIndex});
+        gridRef.scrollToItem({ rowIndex: nextIndex });
       }
       if (onRowHighlightChange) {
         onRowHighlightChange(nextIndex, rows[nextIndex - 1]);
@@ -960,13 +916,13 @@ export function DataTable({
   }
 
   const handleRowMouseEnter = React.useCallback(
-    nextIndex => {
+    (nextIndex) => {
       setColumnHighlightIndex(-1);
       if (nextIndex !== rowHighlightIndex) {
         handleRowHighlightIndexChange(nextIndex);
       }
     },
-    [rowHighlightIndex],
+    [rowHighlightIndex]
   );
   function handleColumnHeaderMouseEnter(columnIndex) {
     setColumnHighlightIndex(columnIndex);
@@ -1015,9 +971,9 @@ export function DataTable({
         isSelectable={isSelectable}
         onWidthsChange={handleWidthsChange}
       />
-      <MeasureScrollbarWidth onWidthChange={w => setBrowserScrollbarWidth(w)} />
+      <MeasureScrollbarWidth onWidthChange={(w) => setBrowserScrollbarWidth(w)} />
       <AutoSizer>
-        {({height, width}) => (
+        {({ height, width }) => (
           <HeaderContext.Provider
             value={{
               columns: columns,
@@ -1050,12 +1006,13 @@ export function DataTable({
             }}
           >
             <VariableSizeGrid
-              // eslint-disable-next-line flowtype/no-weak-types
-              ref={(gridRef: any)}
+              // flowlint-next-line unclear-type:off
+              ref={(setGridRef: any)}
               overscanRowCount={10}
+              overscanColumnCount={5}
               innerElementType={InnerTableElement}
               columnCount={columns.length}
-              columnWidth={columnIndex => normalizedWidths[columnIndex]}
+              columnWidth={(columnIndex) => normalizedWidths[columnIndex]}
               height={height - 2}
               // plus one to account for additional header row
               rowCount={rows.length + 1}