Skip to content

Commit 7708b81

Browse files
LFDanLuLFDanLu
committed
update table to call useLoadMore internally
1 parent 765b757 commit 7708b81

File tree

9 files changed

+34
-67
lines changed

9 files changed

+34
-67
lines changed

‎packages/@react-spectrum/s2/src/TableView.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ import SortDownArrow from '../s2wf-icons/S2_Icon_SortDown_20_N.svg';
6464
import SortUpArrow from '../s2wf-icons/S2_Icon_SortUp_20_N.svg';
6565
import {useActionBarContainer} from './ActionBar';
6666
import {useDOMRef} from '@react-spectrum/utils';
67-
import {useLoadMore} from '@react-aria/utils';
6867
import {useLocalizedStringFormatter} from '@react-aria/i18n';
6968
import {useScale} from './utils';
7069
import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -110,7 +109,7 @@ interface S2TableProps {
110109
}
111110

112111
// TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody
113-
export interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TableProps {
112+
export interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | 'isLoading' | 'onLoadMore'>, UnsafeStyles, S2TableProps {
114113
/** Spectrum-defined styles, returned by the `style()` macro. */
115114
styles?: StylesPropWithHeight
116115
}
@@ -268,7 +267,6 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re
268267
overflowMode = 'truncate',
269268
styles,
270269
loadingState,
271-
onLoadMore,
272270
onResize: propsOnResize,
273271
onResizeStart: propsOnResizeStart,
274272
onResizeEnd: propsOnResizeEnd,
@@ -301,11 +299,6 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re
301299

302300
let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
303301
let scrollRef = useRef<HTMLElement | null>(null);
304-
let memoedLoadMoreProps = useMemo(() => ({
305-
isLoading: isLoading,
306-
onLoadMore
307-
}), [isLoading, onLoadMore]);
308-
useLoadMore(memoedLoadMoreProps, scrollRef);
309302
let isCheckboxSelection = props.selectionMode === 'multiple' || props.selectionMode === 'single';
310303

311304
let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
@@ -353,7 +346,8 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re
353346
{...otherProps}
354347
selectedKeys={selectedKeys}
355348
defaultSelectedKeys={undefined}
356-
onSelectionChange={onSelectionChange} />
349+
onSelectionChange={onSelectionChange}
350+
isLoading={isLoading} />
357351
</InternalTableContext.Provider>
358352
</Virtualizer>
359353
{actionBar}

‎packages/react-aria-components/src/Select.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {Collection, Node, SelectState, useSelectState} from 'react-stately';
1616
import {CollectionBuilder} from '@react-aria/collections';
1717
import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
1818
import {FieldErrorContext} from './FieldError';
19-
import {filterDOMProps, useLoadMore, useResizeObserver} from '@react-aria/utils';
19+
import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
2020
import {FormContext} from './Form';
2121
import {forwardRefType} from '@react-types/shared';
2222
// @ts-ignore

‎packages/react-aria-components/src/Table.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, Mu
1010
import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
1111
import {DragAndDropHooks} from './useDragAndDrop';
1212
import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useLocale, useLocalizedStringFormatter, useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria';
13-
import {filterDOMProps, isScrollable, mergeRefs, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';
13+
import {filterDOMProps, isScrollable, mergeRefs, useLayoutEffect, useLoadMore, useObjectRef, useResizeObserver} from '@react-aria/utils';
1414
import {GridNode} from '@react-types/grid';
1515
// @ts-ignore
1616
import intlMessages from '../intl/*.json';
@@ -324,7 +324,9 @@ export interface TableProps extends Omit<SharedTableProps<any>, 'children'>, Sty
324324
/** Handler that is called when a user performs an action on the row. */
325325
onRowAction?: (key: Key) => void,
326326
/** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the Table. */
327-
dragAndDropHooks?: DragAndDropHooks
327+
dragAndDropHooks?: DragAndDropHooks,
328+
isLoading?: boolean,
329+
onLoadMore?: () => void
328330
}
329331

330332
/**
@@ -377,7 +379,7 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
377379
});
378380

379381
let {isVirtualized, layoutDelegate, dropTargetDelegate: ctxDropTargetDelegate, CollectionRoot} = useContext(CollectionRendererContext);
380-
let {dragAndDropHooks} = props;
382+
let {dragAndDropHooks, isLoading, onLoadMore} = props;
381383
let {gridProps} = useTable({
382384
...props,
383385
layoutDelegate,
@@ -472,6 +474,13 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
472474

473475
let ElementType = useElementType('table');
474476

477+
let memoedLoadMoreProps = useMemo(() => ({
478+
isLoading,
479+
onLoadMore,
480+
collection
481+
}), [isLoading, onLoadMore, collection]);
482+
useLoadMore(memoedLoadMoreProps, tableContainerContext?.scrollRef ?? ref);
483+
475484
return (
476485
<Provider
477486
values={[

‎packages/react-aria-components/stories/ComboBox.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import {Button, Collection, ComboBox, Input, Label, ListBox, ListLayout, Popover
1414
import {MyListBoxItem} from './utils';
1515
import React from 'react';
1616
import styles from '../example/index.css';
17+
import {UNSTABLE_ListBoxLoadingIndicator} from '../src/ListBox';
1718
import {useAsyncList} from 'react-stately';
18-
import { UNSTABLE_ListBoxLoadingIndicator } from '../src/ListBox';
1919

2020
export default {
2121
title: 'React Aria Components'

‎packages/react-aria-components/stories/GridList.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import {Button, Checkbox, CheckboxProps, Collection, DropIndicator, GridLayout,
1414
import {classNames} from '@react-spectrum/utils';
1515
import React from 'react';
1616
import styles from '../example/index.css';
17+
import {UNSTABLE_GridListLoadingIndicator} from '../src/GridList';
1718
import {useAsyncList, useListData} from 'react-stately';
18-
import { UNSTABLE_GridListLoadingIndicator } from '../src/GridList';
1919

2020
export default {
2121
title: 'React Aria Components'

‎packages/react-aria-components/stories/ListBox.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import {MyListBoxItem} from './utils';
1616
import React from 'react';
1717
import {Size} from '@react-stately/virtualizer';
1818
import styles from '../example/index.css';
19+
import {UNSTABLE_ListBoxLoadingIndicator} from '../src/ListBox';
1920
import {useAsyncList, useListData} from 'react-stately';
20-
import { UNSTABLE_ListBoxLoadingIndicator } from '../src/ListBox';
2121

2222
export default {
2323
title: 'React Aria Components'

‎packages/react-aria-components/stories/Select.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import {Button, Collection, Label, ListBox, ListLayout, OverlayArrow, Popover, S
1414
import {MyListBoxItem} from './utils';
1515
import React from 'react';
1616
import styles from '../example/index.css';
17+
import {UNSTABLE_ListBoxLoadingIndicator} from '../src/ListBox';
1718
import {useAsyncList} from 'react-stately';
18-
import { UNSTABLE_ListBoxLoadingIndicator } from '../src/ListBox';
1919

2020
export default {
2121
title: 'React Aria Components'

‎packages/react-aria-components/stories/Table.stories.tsx

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,10 @@ import {action} from '@storybook/addon-actions';
1414
import {Button, Cell, Checkbox, CheckboxProps, Collection, Column, ColumnProps, ColumnResizer, Dialog, DialogTrigger, DropIndicator, Heading, Menu, MenuTrigger, Modal, ModalOverlay, Popover, ResizableTableContainer, Row, Table, TableBody, TableHeader, TableLayout, useDragAndDrop, Virtualizer} from 'react-aria-components';
1515
import {isTextDropItem} from 'react-aria';
1616
import {MyMenuItem} from './utils';
17-
import React, {useMemo, useRef} from 'react';
17+
import React from 'react';
1818
import styles from '../example/index.css';
1919
import {UNSTABLE_TableLoadingIndicator} from '../src/Table';
2020
import {useAsyncList, useListData} from 'react-stately';
21-
import {useLoadMore} from '@react-aria/utils';
2221

2322
export default {
2423
title: 'React Aria Components',
@@ -669,17 +668,9 @@ const OnLoadMoreTable = () => {
669668
});
670669

671670
let isLoading = list.loadingState === 'loading' || list.loadingState === 'loadingMore';
672-
let scrollRef = useRef<HTMLDivElement>(null);
673-
let memoedLoadMoreProps = useMemo(() => ({
674-
isLoading: isLoading,
675-
onLoadMore: list.loadMore,
676-
items: list.items
677-
}), [isLoading, list.loadMore, list.items]);
678-
useLoadMore(memoedLoadMoreProps, scrollRef);
679-
680671
return (
681-
<ResizableTableContainer ref={scrollRef} style={{height: 150, width: 400, overflow: 'auto'}}>
682-
<Table aria-label="Load more table">
672+
<ResizableTableContainer style={{height: 150, width: 400, overflow: 'auto'}}>
673+
<Table aria-label="Load more table" isLoading={isLoading} onLoadMore={list.loadMore}>
683674
<TableHeader>
684675
<Column id="name" isRowHeader style={{position: 'sticky', top: 0, backgroundColor: 'lightgray'}}>Name</Column>
685676
<Column id="height" style={{position: 'sticky', top: 0, backgroundColor: 'lightgray'}}>Height</Column>
@@ -870,22 +861,14 @@ const OnLoadMoreTableVirtualized = () => {
870861
});
871862

872863
let isLoading = list.loadingState === 'loading' || list.loadingState === 'loadingMore';
873-
let scrollRef = useRef<HTMLTableElement>(null);
874-
let memoedLoadMoreProps = useMemo(() => ({
875-
isLoading: isLoading,
876-
onLoadMore: list.loadMore,
877-
items: list.items
878-
}), [isLoading, list.loadMore, list.items]);
879-
useLoadMore(memoedLoadMoreProps, scrollRef);
880-
881864
return (
882865
<Virtualizer
883866
layout={TableLayout}
884867
layoutOptions={{
885868
rowHeight: 25,
886869
headingHeight: 25
887870
}}>
888-
<Table aria-label="Load more table virtualized" ref={scrollRef} style={{height: 150, width: 400, overflow: 'auto'}}>
871+
<Table aria-label="Load more table virtualized" style={{height: 150, width: 400, overflow: 'auto'}} isLoading={isLoading} onLoadMore={list.loadMore}>
889872
<TableHeader style={{background: 'var(--spectrum-gray-100)', width: '100%', height: '100%'}}>
890873
<Column id="name" isRowHeader>Name</Column>
891874
<Column id="height">Height</Column>
@@ -934,23 +917,15 @@ const OnLoadMoreTableVirtualizedResizeWrapper = () => {
934917
});
935918

936919
let isLoading = list.loadingState === 'loading' || list.loadingState === 'loadingMore';
937-
let scrollRef = useRef<HTMLDivElement>(null);
938-
let memoedLoadMoreProps = useMemo(() => ({
939-
isLoading: isLoading,
940-
onLoadMore: list.loadMore,
941-
items: list.items
942-
}), [isLoading, list.loadMore, list.items]);
943-
useLoadMore(memoedLoadMoreProps, scrollRef);
944-
945920
return (
946-
<ResizableTableContainer ref={scrollRef} style={{height: 150, width: 400, overflow: 'auto'}}>
921+
<ResizableTableContainer style={{height: 150, width: 400, overflow: 'auto'}}>
947922
<Virtualizer
948923
layout={TableLayout}
949924
layoutOptions={{
950925
rowHeight: 25,
951926
headingHeight: 25
952927
}}>
953-
<Table aria-label="Load more table virtualized">
928+
<Table aria-label="Load more table virtualized" isLoading={isLoading} onLoadMore={list.loadMore}>
954929
<TableHeader style={{background: 'var(--spectrum-gray-100)', width: '100%', height: '100%'}}>
955930
<Column id="name" isRowHeader>Name</Column>
956931
<Column id="height">Height</Column>

‎packages/react-aria-components/test/Table.test.js

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,10 @@ import {act, fireEvent, installPointerEvent, mockClickDefault, pointerMap, rende
1414
import {Button, Cell, Checkbox, Collection, Column, ColumnResizer, Dialog, DialogTrigger, DropIndicator, Label, Modal, ResizableTableContainer, Row, Table, TableBody, TableHeader, TableLayout, Tag, TagGroup, TagList, useDragAndDrop, useTableOptions, Virtualizer} from '../';
1515
import {composeStories} from '@storybook/react';
1616
import {DataTransfer, DragEvent} from '@react-aria/dnd/test/mocks';
17-
import React, {useMemo, useRef, useState} from 'react';
17+
import React, {useMemo, useState} from 'react';
1818
import {resizingTests} from '@react-aria/table/test/tableResizingTests';
1919
import {setInteractionModality} from '@react-aria/interactions';
2020
import * as stories from '../stories/Table.stories';
21-
import {useLoadMore} from '@react-aria/utils';
2221
import {User} from '@react-aria/test-utils';
2322
import userEvent from '@testing-library/user-event';
2423

@@ -929,7 +928,7 @@ describe('Table', () => {
929928
}
930929
}
931930
});
932-
931+
933932
describe('colSpan', () => {
934933
it('should render table with colSpans', () => {
935934
let {getAllByRole} = render(<TableCellColSpan />);
@@ -1729,18 +1728,10 @@ describe('Table', () => {
17291728
items.push({id: i, foo: 'Foo ' + i, bar: 'Bar ' + i});
17301729
}
17311730

1732-
function LoadMoreTable({onLoadMore, isLoading, scrollOffset, items}) {
1733-
let scrollRef = useRef(null);
1734-
let memoedLoadMoreProps = useMemo(() => ({
1735-
isLoading,
1736-
onLoadMore,
1737-
scrollOffset
1738-
}), [isLoading, onLoadMore, scrollOffset]);
1739-
useLoadMore(memoedLoadMoreProps, scrollRef);
1740-
1731+
function LoadMoreTable({onLoadMore, isLoading, items}) {
17411732
return (
1742-
<ResizableTableContainer data-testid="scrollRegion" ref={scrollRef}>
1743-
<Table aria-label="Load more table" onLoadMore={onLoadMore} isLoading={isLoading} scrollRef={scrollRef} scrollOffset={scrollOffset}>
1733+
<ResizableTableContainer data-testid="scrollRegion">
1734+
<Table aria-label="Load more table" onLoadMore={onLoadMore} isLoading={isLoading}>
17441735
<TableHeader>
17451736
<Column isRowHeader>Foo</Column>
17461737
<Column>Bar</Column>
@@ -1861,7 +1852,8 @@ describe('Table', () => {
18611852
expect(onLoadMore).toHaveBeenCalledTimes(1);
18621853
});
18631854

1864-
it('allows the user to customize the scrollOffset required to trigger onLoadMore', function () {
1855+
// TODO: decide if we want to allow customization for this (I assume we will)
1856+
it.skip('allows the user to customize the scrollOffset required to trigger onLoadMore', function () {
18651857
jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 100);
18661858
jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 25);
18671859

@@ -1883,12 +1875,9 @@ describe('Table', () => {
18831875
items.push({id: i, foo: 'Foo ' + i, bar: 'Bar ' + i});
18841876
}
18851877
function VirtualizedTableLoad() {
1886-
let scrollRef = useRef(null);
1887-
useLoadMore({onLoadMore}, scrollRef);
1888-
18891878
return (
18901879
<Virtualizer layout={TableLayout} layoutOptions={{rowHeight: 25}}>
1891-
<Table aria-label="Load more table" ref={scrollRef} onLoadMore={onLoadMore}>
1880+
<Table aria-label="Load more table" onLoadMore={onLoadMore}>
18921881
<TableHeader>
18931882
<Column isRowHeader>Foo</Column>
18941883
<Column>Bar</Column>

0 commit comments

Comments
 (0)