diff --git a/apps/trading/client-pages/portfolio/portfolio.tsx b/apps/trading/client-pages/portfolio/portfolio.tsx index 6bdd2a8b9..3af18b843 100644 --- a/apps/trading/client-pages/portfolio/portfolio.tsx +++ b/apps/trading/client-pages/portfolio/portfolio.tsx @@ -91,7 +91,7 @@ export const Portfolio = () => { - + diff --git a/apps/trading/components/accounts-container/accounts-container.tsx b/apps/trading/components/accounts-container/accounts-container.tsx index c97641f6c..779741249 100644 --- a/apps/trading/components/accounts-container/accounts-container.tsx +++ b/apps/trading/components/accounts-container/accounts-container.tsx @@ -13,12 +13,10 @@ export const AccountsContainer = ({ pinnedAsset, hideButtons, noBottomPlaceholder, - id, }: { pinnedAsset?: PinnedAsset; hideButtons?: boolean; noBottomPlaceholder?: boolean; - id?: string; }) => { const { pubKey, isReadOnly } = useVegaWallet(); const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore(); @@ -44,7 +42,6 @@ export const AccountsContainer = ({ return (
{ const gridRef = useRef(null); const variables = useMemo(() => ({ partyId }), [partyId]); @@ -54,7 +52,6 @@ export const AccountManager = ({ return (
( ({ onClickAsset, onClickWithdraw, onClickDeposit, ...props }, ref) => { + const containerRef = useRef(null); + const { onGridReady, onColumnResized } = useColumnSizes({ + id: 'accounts', + container: containerRef, + }); const [openBreakdown, setOpenBreakdown] = useState(false); const [row, setRow] = useState(); const pinnedAssetId = props.pinnedAsset?.id; @@ -144,7 +150,7 @@ export const AccountTable = forwardRef( ); return ( - <> +
( rowData={props.rowData?.filter( (data) => data.asset.id !== pinnedAssetId )} + onGridReady={onGridReady} + onColumnResized={onColumnResized} defaultColDef={{ resizable: true, tooltipComponent: TooltipCellComponent, @@ -387,7 +395,7 @@ export const AccountTable = forwardRef( />
- +
); } ); diff --git a/libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx b/libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx index 4ee2921ca..64cfeddc2 100644 --- a/libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx +++ b/libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useRef } from 'react'; import type { ReactNode } from 'react'; import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react'; -import type { ColumnResizedEvent } from 'ag-grid-community'; +import type { ColumnResizedEvent, GridReadyEvent } from 'ag-grid-community'; import { AgGridReact } from 'ag-grid-react'; import { useThemeSwitcher } from '@vegaprotocol/react-helpers'; import { useColumnSizes } from './use-column-sizes'; @@ -19,35 +19,19 @@ export const AgGridThemed = ({ id?: string; children?: ReactNode[]; }) => { - const containerRef = useRef(null); - const [setValues, reshapeChildren, reshapeProps] = useColumnSizes({ - id, - container: containerRef, - }); const { theme } = useThemeSwitcher(); const defaultProps = { rowHeight: 22, headerHeight: 22, enableCellTextSelection: true, - onColumnResized: useCallback( - (event: ColumnResizedEvent) => { - if (event.source === 'uiColumnDragged' && event.columns) { - setValues(event.columns); - } - }, - [setValues] - ), }; - children = reshapeChildren(children); - props = reshapeProps(props, children); - const wrapperClasses = classNames('vega-ag-grid', { 'ag-theme-balham': theme === 'light', 'ag-theme-balham-dark': theme === 'dark', }); return ( -
+
{children} diff --git a/libs/datagrid/src/lib/ag-grid/use-column-sizes.ts b/libs/datagrid/src/lib/ag-grid/use-column-sizes.ts index bcf02237f..3a7be0a97 100644 --- a/libs/datagrid/src/lib/ag-grid/use-column-sizes.ts +++ b/libs/datagrid/src/lib/ag-grid/use-column-sizes.ts @@ -1,7 +1,12 @@ import type { MutableRefObject, ReactElement } from 'react'; import { useCallback, useState } from 'react'; import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react'; -import type { Column, ColDef } from 'ag-grid-community'; +import type { + Column, + ColDef, + ColumnResizedEvent, + GridReadyEvent, +} from 'ag-grid-community'; import debounce from 'lodash/debounce'; import { create } from 'zustand'; import { persist } from 'zustand/middleware'; @@ -35,17 +40,7 @@ interface UseColumnSizesProps { id?: string; container?: MutableRefObject; } -export const useColumnSizes = ({ - id = '', - container, -}: UseColumnSizesProps): [ - (columns: Column[]) => void, - (children?: ReactElement[]) => ReactElement[] | undefined, - ( - props: AgGridReactProps | AgReactUiProps, - children?: ReactElement[] - ) => AgGridReactProps | AgReactUiProps -] => { +export const useColumnSizes = ({ id = '', container }: UseColumnSizesProps) => { const sizes = useColumnSizesStore((store) => store.sizes[id] || {}); const valueSetter = useColumnSizesStore((store) => store.valueSetter); const getWidthOfAll = useCallback( @@ -54,85 +49,73 @@ export const useColumnSizes = ({ 0, [container] ); - const recalculateSizes = useCallback( - (sizes: Record) => { - const width = getWidthOfAll(); - if (width && sizes['width'] && width !== sizes['width']) { - const oldWidth = sizes['width']; - const ratio = width / oldWidth; - return { - ...Object.entries(sizes).reduce((agg, [key, value]) => { - agg[key] = value * ratio; - return agg; - }, {} as Record), - width, - } as Record; - } - return sizes; - }, - [getWidthOfAll] - ); - const [calculatedSizes, setCalculatedSizes] = useState( - recalculateSizes(sizes) - ); - const onResize = useCallback(() => { - const width = getWidthOfAll(); - if (width && sizes['width'] && width !== sizes['width']) { - setCalculatedSizes(recalculateSizes(sizes)); - } - }, [getWidthOfAll, recalculateSizes, sizes]); - useResizeObserver(container?.current as Element, onResize); + // const recalculateSizes = useCallback( + // (sizes: Record) => { + // const width = getWidthOfAll(); + // if (width && sizes['width'] && width !== sizes['width']) { + // const oldWidth = sizes['width']; + // const ratio = width / oldWidth; + // return { + // ...Object.entries(sizes).reduce((agg, [key, value]) => { + // agg[key] = value * ratio; + // return agg; + // }, {} as Record), + // width, + // } as Record; + // } + // return sizes; + // }, + // [getWidthOfAll] + // ); + // const [calculatedSizes, setCalculatedSizes] = useState( + // recalculateSizes(sizes) + // ); + // const onResize = useCallback(() => { + // const width = getWidthOfAll(); + // if (width && sizes['width'] && width !== sizes['width']) { + // setCalculatedSizes(recalculateSizes(sizes)); + // } + // }, [getWidthOfAll, recalculateSizes, sizes]); + // useResizeObserver(container?.current as Element, onResize); - // eslint-disable-next-line react-hooks/exhaustive-deps - const handleOnChange = useCallback( - debounce((columns: Column[]) => { - if (id && columns.length) { - const sizesObj = columns.reduce((aggr, column) => { - aggr[column.getColId()] = column.getActualWidth(); - return aggr; - }, {} as Record); - sizesObj['width'] = getWidthOfAll(); - valueSetter(id, sizesObj); + const onColumnResized = useCallback( + (event: ColumnResizedEvent) => { + if ( + event.finished && + event.source === 'uiColumnDragged' && + event.columns + ) { + const colState = event.columnApi.getColumnState(); + const store: { [colId: string]: number } = {}; + colState.forEach((c) => { + if (c.width) { + store[c.colId] = c.width; + } + }); + valueSetter(id, store); } - }, COLUMNS_SET_DEBOUNCE_TIME), + }, [valueSetter, id] ); - const reshapeAgGridChildren = useCallback( - (children?: ReactElement[]) => - id && children?.length && Object.keys(calculatedSizes).length - ? children.map((child: ReactElement) => ({ - ...child, - props: { - ...(child?.props ?? {}), - width: - (child?.props.colId && calculatedSizes[child?.props.colId]) || - (child?.props.field && calculatedSizes[child?.props.field]) || - undefined, - }, - })) - : children, - [calculatedSizes, id] + + const onGridReady = useCallback( + (event: GridReadyEvent) => { + console.log(event); + if (!Object.keys(sizes).length) { + event.columnApi.sizeColumnsToFit(getWidthOfAll()); + } else { + const initialSizes = Object.entries(sizes).map(([key, newWidth]) => ({ + key, + newWidth, + })); + event.columnApi.setColumnWidths(initialSizes); + } + }, + [sizes, getWidthOfAll] ); - const reshapeAgGridProps = useCallback( - (props: AgGridReactProps | AgReactUiProps, children?: ReactElement[]) => - id && props?.columnDefs && Object.keys(calculatedSizes).length - ? ({ - ...props, - columnDefs: props.columnDefs.map((columnDef: ColDef) => ({ - ...columnDef, - width: - (columnDef.colId && calculatedSizes[columnDef.colId]) || - (columnDef.field && calculatedSizes[columnDef.field]) || - undefined, - })), - } as AgGridReactProps | AgReactUiProps) - : children?.length - ? props - : ({ - ...props, - defaultColDef: { ...(props.defaultColDef || null), flex: 1 }, - } as AgGridReactProps | AgReactUiProps), - [calculatedSizes, id] - ); - return [handleOnChange, reshapeAgGridChildren, reshapeAgGridProps]; + + return { + onColumnResized, + onGridReady, + }; };