diff --git a/libs/accounts/src/lib/accounts-manager.spec.tsx b/libs/accounts/src/lib/accounts-manager.spec.tsx index 5dbc64b77..d4c0c1e42 100644 --- a/libs/accounts/src/lib/accounts-manager.spec.tsx +++ b/libs/accounts/src/lib/accounts-manager.spec.tsx @@ -86,10 +86,6 @@ describe('AccountManager', () => { await waitFor(() => { expect(container).toBeInTheDocument(); }); - expect( - getAllByRole(container as HTMLDivElement, 'row').filter( - (elem) => elem.getAttribute('row-id') !== 'rowGroupFooter_ROOT_NODE_ID' - ) - ).toHaveLength(2); + expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2); }); }); diff --git a/libs/accounts/src/lib/accounts-manager.tsx b/libs/accounts/src/lib/accounts-manager.tsx index 753732c0e..227f04ac7 100644 --- a/libs/accounts/src/lib/accounts-manager.tsx +++ b/libs/accounts/src/lib/accounts-manager.tsx @@ -1,4 +1,4 @@ -import { useRef, useMemo, memo } from 'react'; +import { useRef, useMemo, memo, useCallback } from 'react'; import { t } from '@vegaprotocol/i18n'; import { useDataProvider } from '@vegaprotocol/react-helpers'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; @@ -35,7 +35,17 @@ export const AccountManager = ({ dataProvider: aggregatedAccountsDataProvider, variables, }); - const bottomPlaceholderProps = useBottomPlaceholder({ gridRef }); + const setId = useCallback( + (data: AccountFields) => ({ + ...data, + asset: { ...data.asset, id: `${data.asset.id}-1` }, + }), + [] + ); + const bottomPlaceholderProps = useBottomPlaceholder({ + gridRef, + setId, + }); return (
diff --git a/libs/utils/src/lib/use-bottom-placeholder.tsx b/libs/utils/src/lib/use-bottom-placeholder.tsx index 7c6cccd18..224177a69 100644 --- a/libs/utils/src/lib/use-bottom-placeholder.tsx +++ b/libs/utils/src/lib/use-bottom-placeholder.tsx @@ -1,39 +1,58 @@ import type { RefObject } from 'react'; import { useCallback, useMemo } from 'react'; import type { AgGridReact } from 'ag-grid-react'; -import type { ColDef } from 'ag-grid-community'; +import type { IsFullWidthRowParams } from 'ag-grid-community'; -const NO_HOVER_CSS_RULE = { 'no-hover': '!data' }; +const NO_HOVER_CSS_RULE = { 'no-hover': 'data.isLastPlaceholder' }; -interface Props { +interface Props { gridRef: RefObject; + setId?: (data: T) => T; } -export const useBottomPlaceholder = ({ gridRef }: Props) => { +// eslint-disable-next-line @typescript-eslint/ban-types +export const useBottomPlaceholder = ({ + gridRef, + setId, +}: Props) => { const onBodyScrollEnd = useCallback(() => { const rowCont = gridRef.current?.api.getModel().getRowCount() ?? 0; const lastRowIndex = gridRef.current?.api.getLastDisplayedRow() ?? 0; if (lastRowIndex && rowCont - 1 === lastRowIndex) { const lastRow = gridRef.current?.api.getDisplayedRowAtIndex(lastRowIndex); - lastRow?.setRowHeight(50); - gridRef.current?.api.onRowHeightChanged(); + if (lastRow?.data && !lastRow?.data.isLastPlaceholder) { + const newData = setId + ? setId({ ...lastRow.data, isLastPlaceholder: true }) + : { + ...lastRow.data, + isLastPlaceholder: true, + id: `${lastRow.data?.id || '-'}-${1}`, + }; + const add = [newData]; + gridRef.current?.api.applyTransaction({ + add, + addIndex: lastRowIndex + 1, + }); + const newLastRow = gridRef.current?.api.getDisplayedRowAtIndex( + lastRowIndex + 1 + ); + newLastRow?.setRowHeight(50); + gridRef.current?.api.onRowHeightChanged(); + } } }, []); - const autoGroupColumnDef = useMemo(() => { - return { - height: 50, - cellRendererParams: { - footerValueGetter: () => null, - }, - }; - }, []); + const isFullWidthRow = useCallback( + (params: IsFullWidthRowParams) => params.rowNode.data?.isLastPlaceholder, + [] + ); + const fullWidthCellRenderer = () => null; return useMemo( () => ({ onBodyScrollEnd, - autoGroupColumnDef, - groupIncludeTotalFooter: true, rowClassRules: NO_HOVER_CSS_RULE, + isFullWidthRow, + fullWidthCellRenderer, }), [] ); diff --git a/libs/withdraws/src/lib/withdrawals-table.tsx b/libs/withdraws/src/lib/withdrawals-table.tsx index 9a7af642c..af0075472 100644 --- a/libs/withdraws/src/lib/withdrawals-table.tsx +++ b/libs/withdraws/src/lib/withdrawals-table.tsx @@ -32,10 +32,6 @@ export const WithdrawalsTable = ( (store) => store.create ); - const onGridReady = useCallback(() => { - gridRef.current?.api.sizeColumnsToFit(); - }, []); - const bottomPlaceholderProps = useBottomPlaceholder({ gridRef }); return (