be-components 3.3.1 → 3.3.2

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

@@ -16,6 +16,7 @@ type TeamTournamentMarketProps = {
     hide_stat_banner?:boolean,
     width?:number,
     market:MarketProps,
+    direction?:'horizontal'|'vertical',
     show_event?:boolean,
     hide_liquidity?:boolean,
     latest_trades:TradeProps[],
@@ -28,7 +29,7 @@ type TeamTournamentMarketProps = {
     onTradeLongPress:(trade:TradeProps) => void
 }
 
-const TeamTournamentMarket = ({ tournament, show_event, hide_liquidity, hide_stat_banner, width, team, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:TeamTournamentMarketProps) => {
+const TeamTournamentMarket = ({ tournament, direction, show_event, hide_liquidity, hide_stat_banner, width, team, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:TeamTournamentMarketProps) => {
     const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats);
     const is_locked = useMemo(() => MarketComponentHelpers.isTournamentMarketLocked(tournament, market.market_id),[JSON.stringify(tournament.supported_markets)])
 
@@ -77,24 +78,26 @@ const TeamTournamentMarket = ({ tournament, show_event, hide_liquidity, hide_sta
                 <Text size={12} color={Colors.brand.midnight} textAlign='center' weight='semibold'>{tournament.tournament_name}</Text>
             </View>
             :<></>}
-            <View style={{ ...view_styles.section_body, flexGrow:1, padding:0, justifyContent:'center', alignItems:'center' }}>
-                <TeamImage
-                    team={team}
-                    size={24}
-                />
-                <View style={{ padding:10, paddingBottom:0 }}>
-                    <Text weight='bold' size={14} color={Colors.brand.midnight} textAlign='center'>{team.market_name} {team.name}</Text>
-                    <Text style={{ marginTop:3 }} color={Colors.brand.midnight} weight='regular' textAlign='center' size={12}>{team.division}</Text>
+            <View style={{ flexDirection:direction == 'horizontal' ? 'row' : 'column' }}>
+                <View style={{ ...view_styles.section_body, flexDirection:direction == 'horizontal' ? 'row' : 'column', flexGrow:2, padding:0, justifyContent:'center', alignItems:'center' }}>
+                    <TeamImage
+                        team={team}
+                        size={24}
+                    />
+                    <View style={{ padding:10, paddingBottom:0 }}>
+                        <Text weight='bold' size={14} color={Colors.brand.midnight} textAlign='center'>{team.market_name} {team.name}</Text>
+                        <Text style={{ marginTop:3 }} color={Colors.brand.midnight} weight='regular' textAlign='center' size={12}>{team.division}</Text>
+                    </View>
+                </View>
+                <View nativeID='market_sides' style={{ flexDirection:'row',flexGrow:1.5, justifyContent:'center', alignItems:'center', padding:10 }}>
+                    {market.side_options.sort((a,b) => {
+                        let a_t = a.side == market.trade_side ? 1 : 0
+                        let b_t = b.side == market.trade_side ? 1 : 0
+                        return a_t - b_t
+                    }).map((so, index) => {
+                        return renderSides({ item:so, index, market })
+                    })}
                 </View>
-            </View>
-            <View nativeID='market_sides' style={{ flexDirection:'row', justifyContent:'center', alignItems:'center', padding:10 }}>
-                {market.side_options.sort((a,b) => {
-                    let a_t = a.side == market.trade_side ? 1 : 0
-                    let b_t = b.side == market.trade_side ? 1 : 0
-                    return a_t - b_t
-                }).map((so, index) => {
-                    return renderSides({ item:so, index, market })
-                })}
             </View>
             {!hide_liquidity ?
             <View style={{ backgroundColor:Colors.shades.shade100, padding:10, flexDirection:'row', alignItems:'center', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>