Untitled
unknown
plain_text
a year ago
3.8 kB
4
Indexable
Never
import React, { useCallback } from 'react'; import { useNavigation, useRoute } from '@react-navigation/native'; import { isEmpty } from 'lodash'; import { WatchlistDefaultList } from '../../../components/business/Watchlist/WatchlistDefaultList'; import { BasicHeader } from '../../../components/ui/BasicHeader'; import { GetMatriksIndicators } from '../../../api/matriks'; import { Matriks } from '../../../components/Matriks'; import { MarketTopMoverList } from '../../../components/ui/Market'; import { TAB_INDEXES } from '../../../components/ui/Market/trendTabs'; import i18n from '../../../translations'; import { Platform } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; import { Text, TouchableOpacity, View } from 'react-native-ui-lib'; import colors from 'react-native-ui-lib/src/style/colors'; import { Icon } from '../../../components/ui'; const HEADER_VIEW_HEIGHT = Platform.select({ ios: 205, android: 180 }); const ITEM_HEIGHT = 84; const getItemLayout = (data: any, index: number) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * (index + 1) + HEADER_VIEW_HEIGHT, index, }); export function SelectPredefinedWatchList() { const navigation = useNavigation(); const { data: indicators } = GetMatriksIndicators(); const { params: { selectedData }, } = useRoute(); let VIEWABLE_ITEMS: any[] = []; const SeperatorView = useCallback(() => <View marginV-10 />, []); const onViewableItemsChanged = ({ viewableItems }: any) => { const renew = async () => { Matriks.unsubscribe(); if (!isEmpty(viewableItems)) { VIEWABLE_ITEMS = viewableItems; Matriks.subscribeSymbol(viewableItems, () => {}, indicators || []); } }; renew(); }; const renderItem = ({ item }: any) => { return ( <TouchableOpacity spread row paddingV-3 onPress={() => { navigation.navigate('selectPredefinedList', { selectedItem: item }); }}> <Text heading6 color={colors.primaryText}> {i18n.language === 'en' ? item.desc : item.descTr} </Text> <Icon name="arrowRight" width={6} height={10} fill={colors.secondaryText} /> </TouchableOpacity> ); }; console.log(selectedData); return ( <> {selectedData?.key === 'FUTURE' || selectedData?.key === 'OPTION' || selectedData?.key === 'WARRANT' ? ( <> <BasicHeader title={i18n.language === 'en' ? selectedData?.desc : selectedData?.descTr} backFunction={navigation.goBack} paddingH={0} predefinedIcons={true}> <MarketTopMoverList tabs={TAB_INDEXES[selectedData.key]} /> </BasicHeader> </> ) : selectedData?.children ? ( <> <BasicHeader title={i18n.language === 'en' ? selectedData?.desc : selectedData?.descTr} backFunction={navigation.goBack}> <FlatList data={selectedData?.children} ItemSeparatorComponent={SeperatorView} showsVerticalScrollIndicator={false} renderItem={renderItem} /> </BasicHeader> </> ) : ( <BasicHeader title={i18n.language === 'en' ? selectedData?.desc : selectedData?.descTr} backFunction={navigation.goBack} paddingH={0} predefinedIcons={true}> <WatchlistDefaultList noCalculateLayout getItemLayout={getItemLayout} onViewableItemsChanged={onViewableItemsChanged} data={selectedData?.value} viewAll notShowSecond showVolume={0} itemLimit={10} screenName={'marketSymbolDetail'} /> </BasicHeader> )} </> ); }