diff --git a/packages/web/src/javascripts/Components/Table/CommonTypes.ts b/packages/web/src/javascripts/Components/Table/CommonTypes.ts index 37122d9e4..55d083630 100644 --- a/packages/web/src/javascripts/Components/Table/CommonTypes.ts +++ b/packages/web/src/javascripts/Components/Table/CommonTypes.ts @@ -43,6 +43,7 @@ export type Table = { handleRowDoubleClick: (id: string) => MouseEventHandler handleRowContextMenu: (id: string) => MouseEventHandler canSelectRows: boolean + canSelectMultipleRows: boolean selectedRows: string[] selectionActions: ReactNode | undefined showSelectionActions: boolean diff --git a/packages/web/src/javascripts/Components/Table/Table.tsx b/packages/web/src/javascripts/Components/Table/Table.tsx index 5aef074e7..b9f54b480 100644 --- a/packages/web/src/javascripts/Components/Table/Table.tsx +++ b/packages/web/src/javascripts/Components/Table/Table.tsx @@ -1,5 +1,5 @@ import { classNames } from '@standardnotes/snjs' -import { useState } from 'react' +import { useCallback, useState } from 'react' import Icon from '../Icon/Icon' import { Table, TableRow } from './CommonTypes' @@ -26,6 +26,7 @@ function TableRow({
{ setIsHovered(true) @@ -75,7 +76,27 @@ function TableRow({ ) } +const MinTableRowHeight = 41 +const MinRowsToDisplay = 20 +const PageSize = Math.ceil(document.documentElement.clientHeight / MinTableRowHeight) || MinRowsToDisplay +const PageScrollThreshold = 200 + function Table({ table }: { table: Table }) { + const [rowsToDisplay, setRowsToDisplay] = useState(PageSize) + const paginate = useCallback(() => { + setRowsToDisplay((cellsToDisplay) => cellsToDisplay + PageSize) + }, []) + const onScroll = useCallback( + (event: React.UIEvent) => { + const offset = PageScrollThreshold + const element = event.target as HTMLElement + if (element.scrollTop + element.offsetHeight >= element.scrollHeight - offset) { + paginate() + } + }, + [paginate], + ) + const { headers, rows, @@ -87,11 +108,12 @@ function Table({ table }: { table: Table }) { selectedRows, selectionActions, canSelectRows, + canSelectMultipleRows, showSelectionActions, } = table return ( -
+
{showSelectionActions && selectedRows.length >= 2 && (
{selectedRows.length} selected @@ -103,6 +125,7 @@ function Table({ table }: { table: Table }) { role="grid" aria-colcount={colCount} aria-rowcount={rowCount} + aria-multiselectable={canSelectMultipleRows} >
{headers @@ -139,7 +162,7 @@ function Table({ table }: { table: Table }) { })}
- {rows.map((row, index) => ( + {rows.slice(0, rowsToDisplay).map((row, index) => ( ({ handleRowContextMenu, selectedRows, canSelectRows: enableRowSelection || false, + canSelectMultipleRows: enableMultipleRowSelection || false, selectionActions: selectionActions ? selectionActions(selectedRows) : undefined, showSelectionActions: showSelectionActions || false, }), [ colCount, + enableMultipleRowSelection, enableRowSelection, handleRowClick, handleRowContextMenu,