83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import styled, { AnyStyledComponent } from 'styled-components';
|
|
|
|
import { TradeLayouts } from '@/constants/layout';
|
|
import { STRING_KEYS } from '@/constants/localization';
|
|
|
|
import { useStringGetter } from '@/hooks';
|
|
|
|
import { Tabs } from '@/components/Tabs';
|
|
|
|
import { Orderbook, orderbookMixins, OrderbookScrollBehavior } from '@/views/tables/Orderbook';
|
|
import { LiveTrades } from '@/views/tables/LiveTrades';
|
|
|
|
import { getCurrentMarketId } from '@/state/perpetualsSelectors';
|
|
|
|
enum Tab {
|
|
Orderbook = 'Orderbook',
|
|
Trades = 'Trades',
|
|
}
|
|
|
|
const HISTOGRAM_SIDES_BY_LAYOUT = {
|
|
[TradeLayouts.Default]: 'left',
|
|
[TradeLayouts.Alternative]: 'right',
|
|
[TradeLayouts.Reverse]: 'right',
|
|
} as const;
|
|
|
|
export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) => {
|
|
const stringGetter = useStringGetter();
|
|
|
|
const [value, setValue] = useState(Tab.Orderbook);
|
|
const [scrollBehavior, setScrollBehavior] = useState<OrderbookScrollBehavior>('snapToCenter');
|
|
|
|
const marketId = useSelector(getCurrentMarketId);
|
|
|
|
useEffect(() => {
|
|
setScrollBehavior('snapToCenter');
|
|
}, [marketId]);
|
|
|
|
return (
|
|
<Styled.Tabs
|
|
fullWidthTabs
|
|
value={value}
|
|
onValueChange={(value: Tab) => {
|
|
setScrollBehavior('snapToCenter');
|
|
setValue(value);
|
|
}}
|
|
items={[
|
|
{
|
|
content: <Orderbook histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
|
|
label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SHORT }),
|
|
value: Tab.Orderbook,
|
|
},
|
|
{
|
|
content: <LiveTrades histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
|
|
label: stringGetter({ key: STRING_KEYS.TRADES }),
|
|
value: Tab.Trades,
|
|
},
|
|
]}
|
|
onWheel={() => setScrollBehavior('free')}
|
|
withTransitions={false}
|
|
isShowingOrderbook={value === Tab.Orderbook}
|
|
scrollBehavior={scrollBehavior}
|
|
// style={{
|
|
// scrollSnapType: {
|
|
// 'snapToCenter': 'y mandatory',
|
|
// 'free': 'none',
|
|
// 'snapToCenterUnlessHovered': 'none',
|
|
// }[scrollBehavior],
|
|
// }}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const Styled: Record<string, AnyStyledComponent> = {};
|
|
|
|
Styled.Tabs = styled(Tabs)<{
|
|
isShowingOrderbook: boolean;
|
|
scrollBehavior: OrderbookScrollBehavior;
|
|
}>`
|
|
${orderbookMixins.scrollArea}
|
|
`;
|