fix(trading): avoid items remounting in MarketSelector List (#4162)
This commit is contained in:
parent
005455c870
commit
fc047feeee
@ -8,7 +8,7 @@ import {
|
|||||||
VegaIconNames,
|
VegaIconNames,
|
||||||
} from '@vegaprotocol/ui-toolkit';
|
} from '@vegaprotocol/ui-toolkit';
|
||||||
import type { CSSProperties } from 'react';
|
import type { CSSProperties } from 'react';
|
||||||
import { useState } from 'react';
|
import { useCallback, useState, useMemo } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { FixedSizeList } from 'react-window';
|
import { FixedSizeList } from 'react-window';
|
||||||
import AutoSizer from 'react-virtualized-auto-sizer';
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
||||||
@ -184,7 +184,6 @@ const MarketList = ({
|
|||||||
if (error) {
|
if (error) {
|
||||||
return <div>{error.message}</div>;
|
return <div>{error.message}</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AutoSizer>
|
<AutoSizer>
|
||||||
{({ width, height }) => (
|
{({ width, height }) => (
|
||||||
@ -204,6 +203,29 @@ const MarketList = ({
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
interface ListItemData {
|
||||||
|
data: MarketMaybeWithDataAndCandles[];
|
||||||
|
onSelect?: (marketId: string) => void;
|
||||||
|
currentMarketId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ListItem = ({
|
||||||
|
index,
|
||||||
|
style,
|
||||||
|
data,
|
||||||
|
}: {
|
||||||
|
index: number;
|
||||||
|
style: CSSProperties;
|
||||||
|
data: ListItemData;
|
||||||
|
}) => (
|
||||||
|
<MarketSelectorItem
|
||||||
|
market={data.data[index]}
|
||||||
|
currentMarketId={data.currentMarketId}
|
||||||
|
style={style}
|
||||||
|
onSelect={data.onSelect}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
const List = ({
|
const List = ({
|
||||||
data,
|
data,
|
||||||
loading,
|
loading,
|
||||||
@ -212,28 +234,20 @@ const List = ({
|
|||||||
onSelect,
|
onSelect,
|
||||||
noItems,
|
noItems,
|
||||||
currentMarketId,
|
currentMarketId,
|
||||||
}: {
|
}: ListItemData & {
|
||||||
data: MarketMaybeWithDataAndCandles[];
|
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
width: number;
|
width: number;
|
||||||
height: number;
|
height: number;
|
||||||
noItems: string;
|
noItems: string;
|
||||||
onSelect?: (marketId: string) => void;
|
|
||||||
currentMarketId?: string;
|
|
||||||
}) => {
|
}) => {
|
||||||
const row = ({ index, style }: { index: number; style: CSSProperties }) => {
|
const itemKey = useCallback(
|
||||||
const market = data[index];
|
(index: number, data: ListItemData) => data.data[index].id,
|
||||||
|
[]
|
||||||
return (
|
);
|
||||||
<MarketSelectorItem
|
const itemData = useMemo(
|
||||||
market={market}
|
() => ({ data, onSelect, currentMarketId }),
|
||||||
currentMarketId={currentMarketId}
|
[data, onSelect, currentMarketId]
|
||||||
style={style}
|
);
|
||||||
onSelect={onSelect}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!data || loading) {
|
if (!data || loading) {
|
||||||
return (
|
return (
|
||||||
<div style={{ width, height }}>
|
<div style={{ width, height }}>
|
||||||
@ -259,11 +273,13 @@ const List = ({
|
|||||||
<FixedSizeList
|
<FixedSizeList
|
||||||
className="virtualized-list"
|
className="virtualized-list"
|
||||||
itemCount={data.length}
|
itemCount={data.length}
|
||||||
|
itemData={itemData}
|
||||||
itemSize={130}
|
itemSize={130}
|
||||||
|
itemKey={itemKey}
|
||||||
width={width}
|
width={width}
|
||||||
height={height}
|
height={height}
|
||||||
>
|
>
|
||||||
{row}
|
{ListItem}
|
||||||
</FixedSizeList>
|
</FixedSizeList>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user