be-components 2.7.0 → 2.7.2

package/src/MarketComponents/components/TournamentMarket/index.tsx

@@ -3,7 +3,7 @@ import { View, FlatList, TouchableOpacity, ActivityIndicator, Image } from 'reac
 import { view_styles } from '../../../constants/styles';
 import Colors from '../../../constants/colors';
 import type { AthleteProps, BestAvailableOrderProps, EventOrderStatProps, LeagueProps, MarketProps, MatchProps, OrderProps, TeamProps, TournamentProps, TradeProps } from '../../../types';
-import { Button, Icons, Text } from '../../../Components';
+import { Button, Icons, Text, TextInput } from '../../../Components';
 import { MarketComponentApi, MarketComponentHelpers } from '../../api';
 import AthleteTournamentMarket from '../AthleteTournamentMarket';
 import TeamTournamentMarket from '../TeamTournamentMarket';
@@ -18,16 +18,19 @@ type TournamentMarketProps = {
     league?:LeagueProps,
     markets:MarketProps[],
     hide_liquidity?:boolean,
+    width?:number,
     hide_match_liquidity?:boolean,
     show_grades?:boolean,
     hide_participant_liquidity?:boolean,
     activate_loading?:boolean,
+    wrap_markets?:boolean,
     latest_trades:TradeProps[],
     best_available_orders:BestAvailableOrderProps[],
     match_available_orders:BestAvailableOrderProps[],
     event_order_stats:EventOrderStatProps[],
     match_order_stats:EventOrderStatProps[],
     match_latest_trades:TradeProps[],
+    market_selector_location?:string,
     onShare?:(t:TournamentProps) => void,
     onView:(data:{ event_id:string, event_type:string, market_id:string, side_type?:string, side_id?:string }) => void,
     onTradeLongPress:(trade:TradeProps) => void,
@@ -36,8 +39,8 @@ type TournamentMarketProps = {
     onOrder:(order:OrderProps) => void
 }
 
-
-const TournamentMarket = ({ tournament, hide_match_liquidity, show_grades, hide_participant_liquidity, league, markets, latest_trades, hide_liquidity, best_available_orders, event_order_stats, match_available_orders, match_latest_trades, match_order_stats, activate_loading, onView, onTradeLongPress, onViewAdditionalMarkets, onOrder, onActivate, onShare }:TournamentMarketProps) => {
+const TournamentMarket = ({ tournament, wrap_markets, width, market_selector_location, hide_match_liquidity, show_grades, hide_participant_liquidity, league, markets, latest_trades, hide_liquidity, best_available_orders, event_order_stats, match_available_orders, match_latest_trades, match_order_stats, activate_loading, onView, onTradeLongPress, onViewAdditionalMarkets, onOrder, onActivate, onShare }:TournamentMarketProps) => {
+    const [ search_value, setSearchValue ] = useState<string | undefined>(undefined);
     const [ tournament_data, setTournamentData ] = useState<{
         loaded:boolean,
         loading:boolean,
@@ -63,10 +66,10 @@ const TournamentMarket = ({ tournament, hide_match_liquidity, show_grades, hide_
     const supported_markets = markets.filter(m => tournament.supported_markets.find(sm => sm.market_id == m.market_id));
     const { show_athletes, show_teams, show_matches } = TournamentMarketHelpers.visibleMarketTypes(tournament, active_market);
     const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats.concat(match_order_stats.filter(m => matches.find(nm => nm.match_id == m.event_id))));
-    const sorted_athletes = TournamentMarketHelpers.sortAthletes(event_order_stats, latest_trades, athletes, active_market);
-    const sorted_teams = TournamentMarketHelpers.sortTeams(event_order_stats, latest_trades, teams, active_market);
-    const sorted_matches = TournamentMarketHelpers.sortMatches(match_order_stats, matches, active_market);
-
+    const sorted_athletes = TournamentMarketHelpers.sortAthletes(event_order_stats, latest_trades, athletes, active_market, search_value);
+    const sorted_teams = TournamentMarketHelpers.sortTeams(event_order_stats, latest_trades, teams, active_market, search_value);
+    const sorted_matches = TournamentMarketHelpers.sortMatches(match_order_stats, matches, active_market, search_value, athletes, teams);
+    const market_width = TournamentMarketHelpers.getMarketWrapWidth(40, width, wrap_markets)
     useEffect(() => {
         if(!is_in_viewport || loaded || loading){ return }
         MarketComponentApi.setEnvironment();
@@ -127,51 +130,57 @@ const TournamentMarket = ({ tournament, hide_match_liquidity, show_grades, hide_
             m_trades = match_trades.filter(t => t.event_id == data.item.match_id && t.event_type == 'match');
         }
         let m_order_stats = match_order_stats.filter(os => os.event_id == data.item.match_id && os.event_type == 'match');
+
         return (
-            <MatchMarket
-                match={data.item}
-                league={league}
-                away_athlete={away_athlete}
-                home_athlete={home_athlete}
-                away_team={away_team}
-                show_grades={show_grades}
-                home_team={home_team}
-                hide_liquidity={hide_match_liquidity ? true : false}
-                market={active_market}
-                latest_trades={m_trades}
-                best_available_orders={m_available_orders}
-                event_order_stats={m_order_stats}
-                onOrder={onOrder}
-                onTradeLongPress={onTradeLongPress}
-                onView={onView}
-                default_price_view='best_available'
+            <View>
+                <MatchMarket
+                    match={data.item}
+                    league={league}
+                    away_athlete={away_athlete}
+                    home_athlete={home_athlete}
+                    away_team={away_team}
+                    show_grades={show_grades}
+                    width={wrap_markets ? market_width : undefined}
+                    home_team={home_team}
+                    hide_liquidity={hide_match_liquidity ? true : false}
+                    market={active_market}
+                    latest_trades={m_trades}
+                    best_available_orders={m_available_orders}
+                    event_order_stats={m_order_stats}
+                    onOrder={onOrder}
+                    onTradeLongPress={onTradeLongPress}
+                    onView={onView}
+                    default_price_view='best_available'
 
-            />
+                />
+            </View>
         )
     }
 
     const renderTeams = (data:{ item:TeamProps, index:number }) => {
-        console.log('rendering team!!!!')
         if(!active_market){ return <></> }
         let team_available_orders = best_available_orders.filter(ba => ba.side_type == 'team' && ba.side_id == data.item.team_id);
         let team_trades = latest_trades.filter(t => t.side_type == 'team' && t.side_id == data.item.team_id);
         let team_order_stats = event_order_stats.filter(os => os.side_type == 'team' && os.side_id == data.item.team_id);
         return (
-            <TeamTournamentMarket
-                team={data.item}
-                event_type='tournament'
-                onTradeLongPress={onTradeLongPress}
-                onView={onView}
-                show_grades={show_grades}
-                hide_liquidity={hide_participant_liquidity ? true : false}
-                tournament={tournament}
-                event_order_stats={team_order_stats}
-                best_available_orders={team_available_orders}
-                latest_trades={team_trades}
-                default_price_view='best_available'
-                market={active_market}
-                onOrder={onOrder}
-            />
+            <View>
+                <TeamTournamentMarket
+                    team={data.item}
+                    event_type='tournament'
+                    onTradeLongPress={onTradeLongPress}
+                    onView={onView}
+                    width={wrap_markets ? market_width : undefined}
+                    show_grades={show_grades}
+                    hide_liquidity={hide_participant_liquidity ? true : false}
+                    tournament={tournament}
+                    event_order_stats={team_order_stats}
+                    best_available_orders={team_available_orders}
+                    latest_trades={team_trades}
+                    default_price_view='best_available'
+                    market={active_market}
+                    onOrder={onOrder}
+                />
+            </View>
         )
     }
 
@@ -181,21 +190,24 @@ const TournamentMarket = ({ tournament, hide_match_liquidity, show_grades, hide_
         let team_trades = latest_trades.filter(t => t.side_type == 'athlete' && t.side_id == data.item.athlete_id);
         let team_order_stats = event_order_stats.filter(os => os.side_type == 'athlete' && os.side_id == data.item.athlete_id);
         return (
-            <AthleteTournamentMarket
-                athlete={data.item}
-                event_type='tournament'
-                onTradeLongPress={onTradeLongPress}
-                onView={onView}
-                show_grades={show_grades}
-                hide_liquidity={hide_participant_liquidity ? true : false}
-                tournament={tournament}
-                event_order_stats={team_order_stats}
-                best_available_orders={team_available_orders}
-                latest_trades={team_trades}
-                default_price_view='best_available'
-                market={active_market}
-                onOrder={onOrder}
-            />
+            <View>
+                <AthleteTournamentMarket
+                    athlete={data.item}
+                    event_type='tournament'
+                    onTradeLongPress={onTradeLongPress}
+                    onView={onView}
+                    show_grades={show_grades}
+                    hide_liquidity={hide_participant_liquidity ? true : false}
+                    tournament={tournament}
+                    width={wrap_markets ? market_width : undefined}
+                    event_order_stats={team_order_stats}
+                    best_available_orders={team_available_orders}
+                    latest_trades={team_trades}
+                    default_price_view='best_available'
+                    market={active_market}
+                    onOrder={onOrder}
+                />
+            </View>
         )
     }
 
@@ -237,33 +249,98 @@ const TournamentMarket = ({ tournament, hide_match_liquidity, show_grades, hide_
             </View>
             :
             <View>
+            {market_selector_location == 'top_right' ?
+            <View style={{ ...view_styles.body_row, paddingLeft:10, paddingRight:10, zIndex:1, backgroundColor:Colors.shades.shade100 }}>
+                <View style={{ flexDirection:'row', alignItems:'center', flex:1, marginRight:10, paddingLeft:10, backgroundColor:Colors.shades.white, borderRadius:22 }}>
+                    <Icons.SearchIcon color={Colors.brand.electric} size={18} />
+                    <TextInput
+                        style={{ flex:1, marginLeft:10, borderRadius:0, borderTopRightRadius:22, borderBottomRightRadius:22 }}
+                        placeholder='Search athletes, teams, matches ...'
+                        placeholderTextColor={Colors.accents.accent200}
+                        onChangeText={(text) => setSearchValue(text)}
+                    />
+                </View>
+                <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.white, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:4, padding:10, ...view_styles.float }} onPress={() => setShowMarkets(!show_markets)}>
+                    <Text style={{ marginRight:10 }} size={14} color={Colors.brand.midnight}>{active_market?.type == 'Stat' ? active_market.stat_label : active_market?.type}</Text>
+                    <Icons.ChevronIcon color={Colors.brand.midnight} size={14} />
+                </TouchableOpacity>
+                {show_markets ?
+                <View style={{ ...view_styles.section, position:'absolute', top:5, right:5, minWidth:175 }}>
+                    <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+                        <View style={{ flex:1 }}>
+                            <Text theme='header_2'>Select Market</Text>
+                        </View>
+                        <Button
+                            title='X'
+                            title_weight='regular'
+                            borderRadius={100}
+                            backgroundColor={Colors.shades.white}
+                            padding={5}
+                            onPress={() => setShowMarkets(false)}
+                        />
+                    </View>
+                    <View style={{ ...view_styles.section_body, padding:10 }}>
+                        <FlatList
+                            data={supported_markets}
+                            renderItem={renderMarkets}
+                            keyExtractor={(item) => item.market_id.toString()}
+                        />
+                    </View>
+                </View>
+                :<></>}
+            </View>
+            :<></>}
             {show_teams && teams.length > 0 ?
             <View style={{ ...view_styles.section_body, padding:5 }}>
+                {wrap_markets ?
+                <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+                    {sorted_teams.map((t,i) => {
+                        return renderTeams({ item:t, index:i })
+                    })}
+                </View>
+                :
                 <FlatList
                     data={sorted_teams}
                     renderItem={renderTeams}
                     horizontal
                     keyExtractor={(item) => item.team_id.toString()}
                 />
+                }
             </View>
             :<></>}
             {show_athletes && athletes.length > 0 ?
             <View style={{ ...view_styles.section_body, padding:5 }}>
+                {wrap_markets ?
+                <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+                    {sorted_athletes.map((a,i) => {
+                        return renderAthletes({ item:a, index:i })
+                    })}
+                </View>
+                :
                 <FlatList
                     data={sorted_athletes}
                     renderItem={renderAthletes}
                     horizontal
                     keyExtractor={(item) => item.athlete_id.toString()}
                 />
+                }
             </View>
             :show_matches && matches.length > 0 ?
             <View style={{ ...view_styles.section_body, padding:5 }}>
+                {wrap_markets ?
+                <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+                    {sorted_matches.map((m,i) => {
+                        return renderMatches({ item:m, index:i })
+                    })}
+                </View>
+                :
                 <FlatList
                     data={sorted_matches}
                     renderItem={renderMatches}
                     keyExtractor={(item) => item.match_id.toString()}
                     horizontal
                 />
+                }
             </View>
             :<></>}
             </View>
@@ -284,6 +361,8 @@ const TournamentMarket = ({ tournament, hide_match_liquidity, show_grades, hide_
                     </View>
                 </TouchableOpacity>
                 :<View style={{flex:1}} />}
+                {!market_selector_location ?
+                <View>
                 <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.white, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:4, padding:10, ...view_styles.float }} onPress={() => setShowMarkets(!show_markets)}>
                     <Text style={{ marginRight:10 }} size={14} color={Colors.brand.midnight}>{active_market?.type == 'Stat' ? active_market.stat_label : active_market?.type}</Text>
                     <Icons.ChevronIcon color={Colors.brand.midnight} size={14} />
@@ -312,6 +391,8 @@ const TournamentMarket = ({ tournament, hide_match_liquidity, show_grades, hide_
                     </View>
                 </View>
                 :<></>}
+                </View>
+                :<></>}
             </View>
         </View>
     )