Untitled
plain_text
2 months ago
5.7 kB
3
Indexable
Never
import React, { useEffect, useRef, useState, memo } from 'react'; import { Text, View } from 'react-native-ui-lib'; import { Matriks } from '../Matriks'; import { StyleSheet } from 'react-native'; import { FlatList } from 'react-native'; import { useColors } from '../../hooks'; import { useMatriksContext } from '../../context/MatriksStore'; import { useTranslation } from 'react-i18next'; const header = (t: any) => ( <View paddingH-16 style={styles.headerStyles} row> <View flex-1 centerV> <Text secondaryText body2> {t('order')} </Text> </View> <View flex-1 centerV> <Text secondaryText body2 style={styles.textAlignRight}> {t('Qty')} </Text> </View> <View flex-1 centerV paddingR-8 style={styles.buyButton}> <Text secondaryText body2 style={styles.textAlignRight}> {t('BUY')} </Text> </View> <View flex-1 centerV paddingL-8> <Text secondaryText body2> {t('SELL')} </Text> </View> <View flex-1 centerV> <Text secondaryText body2> {t('Qty')} </Text> </View> <View flex-1 centerV> <Text secondaryText body2 style={styles.textAlignRight}> {t('orders')} </Text> </View> </View> ); const DepthStats = ({ symbolCode, size = 10 }) => { const { colors } = useColors(); const dataListRef = useRef([]); const [data, setData] = useState([]); const { t } = useTranslation(); const [depthData, setDepthData] = useMatriksContext(); useEffect(() => { if (depthData && depthData?.type === 'depth') { const update = { ...depthData }; dataListRef.current.splice(0, 0, update); if (dataListRef.current.length > size) { dataListRef.current.pop(); } setData(dataListRef.current); } }, [depthData]); useEffect(() => { if (symbolCode) { Matriks.subscribeDepth(symbolCode, resp => { if (resp?.depthList) { resp?.depthList.map(item => setDepthData({ ...item, type: 'depth' })); } else { setDepthData({ ...resp, type: 'depth' }); } }); return () => { Matriks.unsubscribeDepth(); }; } }, [symbolCode]); const x = 50; const y = 50; const buySum = data.reduce((acc: any, item: any) => acc + item.bidQuantity, 0); const sellSum = data.reduce((acc: any, item: any) => acc + item.askQuantity, 0); const renderItem = ({ item, index }: any) => { return ( <View paddingH-16 style={styles(colors).rowStyles} backgroundColor={index % 2 === 0 && colors.marketTableBg} row> <View flex-1 centerV> <Text body-2 primaryText> {item?.askOrderCount} </Text> </View> <View flex-1 centerV> <Text body-2 primaryText style={styles(colors).textAlignRight}> {item?.askQuantity} </Text> </View> <View row center> <View style={styles(colors).greenColorView} width={x * item.bidQuantity}> <View> <Text style={styles(colors).greenColor} key={index} body2> {item?.bidPrice} </Text> </View> </View> <View style={styles(colors).redColorView} width={y * item.askQuantity}> <Text style={styles(colors).redColor} key={index} body2> {item?.askPrice} </Text> </View> </View> <View flex-1 centerV> <Text body-2 primaryText> {item?.bidQuantity} </Text> </View> <View flex-1 centerV> <Text body-2 primaryText style={styles(colors).textAlignRight}> {item?.bidOrderCount} </Text> </View> </View> ); }; return ( <> {data && data.length > 0 && ( <View marginB-20 style={styles(colors).container}> <View paddingH-16> <Text heading6>{t('DEPTH')}</Text> </View> <FlatList onScroll={e => e.preventDefault()} ListHeaderComponent={() => header(t)} showsVerticalScrollIndicator={false} data={data} renderItem={renderItem} nestedScrollEnabled={true} scrollEnabled={false} keyExtractor={(item, index) => `item-${index}`} /> <View center style={styles(colors).topBorder} marginT-10> <View marginT-10 marginB-10 row> <Text body2 style={{ color: colors.greenPrice }} flex-1 center> {buySum} </Text> <Text body2 style={{ color: colors.redPrice }} flex-1 center> {sellSum} </Text> </View> </View> </View> )} </> ); }; export default memo(DepthStats); const styles = (colors: any) => StyleSheet.create({ redColor: { color: colors.redPrice, width: 80, }, greenColor: { color: colors.greenPrice, justifyContent: 'center', textAlign: 'right', width: 80, }, redColorView: { backgroundColor: colors.darkRedBg, backgroundOpacity: 0.6, height: 24, justifyContent: 'center', }, greenColorView: { backgroundColor: colors.darkGreenBg, backgroundOpacity: 0.6, justifyContent: 'center', height: 24, }, topBorder: { borderTopWidth: 1, borderColor: colors.white20, }, container: { flex: 1 }, headerStyles: { height: 40 }, rowStyles: { height: 40 }, buyButton: { borderRightWidth: 1, borderRightColor: 'rgba(255, 255, 255, 0.20)' }, textAlignRight: { textAlign: 'right' }, });