be-components 3.3.3 → 3.3.5

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import type { AthleteProps, BestAvailableOrderProps, EventOrderStatProps, MarketProps, MarketSideOptionProps, OrderProps, TournamentProps, TradeProps } from "../../../types"
 import { view_styles } from '../../../constants/styles';
 import MarketButton from '../../components/MarketButton';
@@ -17,6 +17,7 @@ type AthleteTournamentMarketProps = {
     width?:number,
     market:MarketProps,
     hide_image?:boolean,
+    style?:any,
     show_event?:boolean,
     direction?:'horizontal'|'vertical',
     hide_liquidity?:boolean,
@@ -30,7 +31,12 @@ type AthleteTournamentMarketProps = {
     onTradeLongPress:(trade:TradeProps) => void
 }
 
-const AthleteTournamentMarket = ({ tournament, hide_image, direction, show_event, hide_liquidity, hide_stat_banner, width, athlete, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:AthleteTournamentMarketProps) => {
+const AthleteTournamentMarket = ({ tournament, style, hide_image, direction, show_event, hide_liquidity, hide_stat_banner, width, athlete, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:AthleteTournamentMarketProps) => {
+    let set_style = { ...styles.container_style, width }
+    if(style){
+        set_style = style
+    }
+    
     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)])
 
@@ -63,7 +69,7 @@ const AthleteTournamentMarket = ({ tournament, hide_image, direction, show_event
     },[JSON.stringify(best_available_orders)])
 
     return (
-        <View style={{ ...view_styles.section, flexGrow:1, borderWidth:1, borderColor:Colors.shades.shade600, width }}>
+        <View style={set_style}>
             {!hide_stat_banner ?
              <LinearDiagnal 
                 label={market.stat_label ?? market.type}
@@ -78,7 +84,7 @@ const AthleteTournamentMarket = ({ tournament, hide_image, direction, show_event
                 <Text size={12} color={Colors.brand.midnight} textAlign='center' weight='semibold'>{tournament.tournament_name}</Text>
             </View>
             :<></>}
-            <View style={{ flexDirection:direction == 'horizontal' ? 'row' : 'column' }}>
+            <View style={{ flexDirection:direction == 'horizontal' ? 'row' : 'column', flex:1 }}>
 
             <View style={{ ...view_styles.section_body, flexDirection:direction == 'horizontal' ? 'row' : 'column', flexGrow:2, padding:0, justifyContent:'center', alignItems:'center' }}>
                 {!hide_image ?
@@ -128,4 +134,8 @@ const AthleteTournamentMarket = ({ tournament, hide_image, direction, show_event
     )
 }
 
+const styles = StyleSheet.create({
+    container_style: { ...view_styles.section, flexGrow:1, borderWidth:1, borderColor:Colors.shades.shade600 }
+})
+
 export default AthleteTournamentMarket

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

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { View, Image, TouchableOpacity } from 'react-native';
+import { View, Image, TouchableOpacity, StyleSheet } from 'react-native';
 import type { BestAvailableOrderProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, OrderProps, TradeProps } from '../../../types';
 import { MarketButtonHelpers } from '../MarketButton/api';
 import MarketButton from '../../components/MarketButton';
@@ -16,6 +16,7 @@ type EventMarketProps = {
     hide_market_banner?:boolean,
     latest_trades:TradeProps[],
     hide_liquidity?:boolean,
+    style?:any,
     direction?:'horizontal'|'vertical',
     best_available_orders:BestAvailableOrderProps[],
     event_order_stats:EventOrderStatProps[],
@@ -26,7 +27,12 @@ type EventMarketProps = {
     onTradeLongPress:(trade:TradeProps) => void
 }
 
-const EventMarket = ({ width, event, direction, hide_liquidity, market, latest_trades, best_available_orders, hide_market_banner, event_order_stats, show_grades, default_price_view, onOrder, onView, onTradeLongPress }:EventMarketProps) => {
+const EventMarket = ({ width, event, style, direction, hide_liquidity, market, latest_trades, best_available_orders, hide_market_banner, event_order_stats, show_grades, default_price_view, onOrder, onView, onTradeLongPress }:EventMarketProps) => {
+    let set_style = { ...styles.container_style, width, maxWidth:direction == 'horizontal'?undefined:175 }
+    if(style){
+        set_style = style
+    }
+    
     const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats);
     const is_locked = MarketComponentHelpers.isEventMarketLocked(event, market.market_id);
     const renderSides = useCallback((data:{ item:MarketSideOptionProps, index:number, market:MarketProps }) => {
@@ -61,7 +67,7 @@ const EventMarket = ({ width, event, direction, hide_liquidity, market, latest_t
     },[JSON.stringify(best_available_orders)])
 
     return (
-        <View style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600, width, maxWidth:direction == 'horizontal'?undefined:175 }}>
+        <View style={set_style}>
             {!hide_market_banner ?
              <LinearDiagnal 
                 label={market.stat_label ?? market.type}
@@ -71,7 +77,7 @@ const EventMarket = ({ width, event, direction, hide_liquidity, market, latest_t
                 right_color={'#ebd197'}
             />
             :<></>}
-            <View style={{ flexDirection:direction == 'horizontal' ? 'row' : 'column' }}>
+            <View style={{ flexDirection:direction == 'horizontal' ? 'row' : 'column', flex:1 }}>
 
                 <View style={{ ...view_styles.section_body, flexDirection:direction == 'horizontal' ? 'row' : 'column', flexGrow:2, padding:0, justifyContent:'center', alignItems:'center' }}>
                     {direction != 'horizontal' ?
@@ -128,4 +134,8 @@ const EventMarket = ({ width, event, direction, hide_liquidity, market, latest_t
     )
 }
 
+const styles = StyleSheet.create({
+    container_style: { ...view_styles.section, flexGrow:1, borderWidth:1, borderColor:Colors.shades.shade600 }
+})
+
 export default EventMarket

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import type { AthleteProps, BestAvailableOrderProps, EventOrderStatProps, LeagueProps, MarketProps, MarketSideOptionProps, MatchProps, OrderProps, TeamProps, TournamentProps, TradeProps } from "../../../types"
 import { view_styles } from '../../../constants/styles';
 import MarketButton from '../../components/MarketButton';
@@ -19,6 +19,7 @@ type MatchMarketProps = {
     home_team?:TeamProps,
     hide_stat_banner?:boolean,
     width?:number,
+    style?:any,
     market:MarketProps,
     show_event?:boolean,
     hide_liquidity?:boolean,
@@ -32,7 +33,11 @@ type MatchMarketProps = {
     onTradeLongPress:(trade:TradeProps) => void
 }
 
-const MatchMarket = ({ league, match, show_event, hide_liquidity, hide_stat_banner, width, away_athlete, home_athlete, away_team, home_team, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:MatchMarketProps) => {
+const MatchMarket = ({ league, match, show_event, style, hide_liquidity, hide_stat_banner, width, away_athlete, home_athlete, away_team, home_team, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:MatchMarketProps) => {
+    let set_style = { ...styles.container_style, width }
+    if(style){
+        set_style = style
+    }
     
     const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats)
     const is_locked = useMemo(() => MarketComponentHelpers.isMatchMarketLocked(match, market.market_id),[JSON.stringify(match.supported_markets)])
@@ -78,7 +83,7 @@ const MatchMarket = ({ league, match, show_event, hide_liquidity, hide_stat_bann
     if(match.participant_type == 'athlete' && (!home_athlete || !away_athlete)){ return <></> }
     if(match.participant_type == 'team' && (!home_team || !away_team)){ return <></> }
     return (
-        <View style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600, width }}>
+        <View style={set_style}>
             {!hide_stat_banner ?
              <LinearDiagnal 
                 label={market.stat_label ?? market.type}
@@ -155,4 +160,10 @@ const MatchMarket = ({ league, match, show_event, hide_liquidity, hide_stat_bann
     )
 }
 
+
+const styles = StyleSheet.create({
+    container_style: { ...view_styles.section, flexGrow:1, borderWidth:1, borderColor:Colors.shades.shade600 }
+})
+
+
 export default MatchMarket

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { View, Image, FlatList, TouchableOpacity, ActivityIndicator, ScrollView } from 'react-native';
+import { View, Image, FlatList, TouchableOpacity, ActivityIndicator, ScrollView, StyleSheet } from 'react-native';
 import type { AthleteProps, BEEventProps, BestAvailableOrderProps, CompanyProps, CompetitionProps, EventOrderStatProps, EventProps, LeagueProps, MarketProps, MarketSideOptionProps, OrderProps, PodcastProps, SquaresCompetitionProps, TradeProps } from '../../../types';
 import { view_styles } from '../../../constants/styles';
 import { Button, Icons, LinearDiagnal, Text } from '../../../Components';
@@ -28,6 +28,7 @@ type TeamEventMarketProps = {
     show_podcasts?:boolean,
     squares_competitions?:SquaresCompetitionProps[],
     latest_trades:TradeProps[],
+    style?:any,
     best_available_orders:BestAvailableOrderProps[],
     event_order_stats:EventOrderStatProps[],
     default_price_view: 'last_trade'|'best_available',
@@ -46,7 +47,12 @@ type TeamEventMarketProps = {
     onActivate?:(event_id:string, event_type:string) => void
     activate_loading?:boolean
 }
-const TeamEventMarket = ({ event, league, init_expanded, hot_markets_direction, show_id, hide_liquidity, show_podcasts, activate_loading, competitions, squares_competitions, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onTeamSelect, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets, onTradeLongPress, onActivate, onEvent, onShare, onPodcastSelect }:TeamEventMarketProps) => {
+const TeamEventMarket = ({ event, league, style, init_expanded, hot_markets_direction, show_id, hide_liquidity, show_podcasts, activate_loading, competitions, squares_competitions, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onTeamSelect, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets, onTradeLongPress, onActivate, onEvent, onShare, onPodcastSelect }:TeamEventMarketProps) => {
+    let set_style = { ...styles.container_style }
+    if(style){
+        set_style = style
+    }
+    const [ market_width, setMarketWidth ] = useState(180);
     const [ expanded_data, setExpandedData ] = useState<{
         expanded:boolean,
         loaded:boolean,
@@ -128,7 +134,12 @@ const TeamEventMarket = ({ event, league, init_expanded, hot_markets_direction,
     
     const primary_markets = useMemo(() => {
         return TeamEventMarketHelpers.getPrimaryMarkets(event, markets)
-    }, [JSON.stringify(markets)])
+    }, [JSON.stringify(markets)]);
+
+    let primary_width = 180
+    if(primary_markets.length > 0){
+        primary_width = (market_width - (primary_markets.length * 8)) / (primary_markets.length)
+    }
     
     const handleSelectCompetition = () => {
         if(!competitions || competitions.length == 0){ return }
@@ -190,7 +201,7 @@ const TeamEventMarket = ({ event, league, init_expanded, hot_markets_direction,
         }
         if(!trade){ return <></> }
         return (
-            <View key={`${event.event_id}_${data.item.side}`} style={{ margin:2, width:50, height:50 }}>
+            <View key={`${event.event_id}_${data.item.side}`} style={{ margin:2, width:primary_width, height:50 }}>
                 <MarketButton
                     side_option={data.item}
                     market={data.market}
@@ -207,15 +218,15 @@ const TeamEventMarket = ({ event, league, init_expanded, hot_markets_direction,
                 />
             </View>
         )
-    },[JSON.stringify(best_available_orders), JSON.stringify(latest_trades)])
+    },[JSON.stringify(best_available_orders), JSON.stringify(latest_trades), primary_width])
 
     const renderMarketHeaders = useCallback((data:{ item:MarketProps, index:number }) => {
         return (
-            <View style={{ width:50, marginLeft:2, marginRight:2 }}>
+            <View style={{ width:primary_width, marginLeft:2, marginRight:2 }}>
                 <Text size={12} color={Colors.brand.midnight} textAlign='center'>{data.item.type.toUpperCase()}</Text>
             </View>
         )
-    },[primary_markets.length])
+    },[primary_markets.length, primary_width])
 
     const renderPodcasts = useCallback((data:{ item:PodcastProps, index:number }) => {
         return (
@@ -292,6 +303,7 @@ const TeamEventMarket = ({ event, league, init_expanded, hot_markets_direction,
             <View>
                 <FlatList
                     key={`${event.event_id}_side_options`}
+                    scrollEnabled={false}
                     data={data.item.side_options.sort((a,b) => {
                         let a_t = a.side == data.item.trade_side ? 1 : 0
                         let b_t = b.side == data.item.trade_side ? 1 : 0
@@ -302,7 +314,7 @@ const TeamEventMarket = ({ event, league, init_expanded, hot_markets_direction,
                 />
             </View>
         )
-    },[JSON.stringify(best_available_orders), JSON.stringify(latest_trades)])
+    },[JSON.stringify(best_available_orders), JSON.stringify(latest_trades), primary_width])
 
     if(!event.away || !event.home){ return <></> }
 
@@ -310,7 +322,7 @@ const TeamEventMarket = ({ event, league, init_expanded, hot_markets_direction,
     const { non_primary_markets, available } = useMemo(() => TeamEventMarketHelpers.sortNonPrimaryMarkets(TeamEventMarketHelpers.getNonPrimaryMarkets(event, markets), event_order_stats, latest_trades),[])
 
     return (
-        <View ref={ref} style={{ ...view_styles.section, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+        <View ref={ref} style={set_style}>
             {sponsor ?
             <LinearGradient style={{ marginTop:-1, marginLeft:-1, marginRight:-1, padding:10, flexDirection:'row', alignItems:'center', borderTopRightRadius:8, borderTopLeftRadius:8 }} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={[sponsor.brand_primary ?? Colors.brand.midnight, sponsor.brand_secondary ?? Colors.brand.cyan]}>
                 <View style={{ height:30, width:30, borderRadius:4, backgroundColor:Colors.shades.white }}>
@@ -451,13 +463,17 @@ const TeamEventMarket = ({ event, league, init_expanded, hot_markets_direction,
                     </TouchableOpacity>
                 </View>
                 {event_status == 'active' ?
-                <View nativeID='primary_market_details' style={{ padding:5 }}>
+                <View nativeID='primary_market_details' style={{ padding:5, flex:1 }} onLayout={(ev) => {
+                    const { width } = ev.nativeEvent.layout
+                    setMarketWidth(width);
+                }}>
                     <View style={{ marginTop:5, marginBottom:5 }}>
                         <FlatList
                             key={`${event.event_id}_market_headers`}
                             data={primary_markets}
                             keyExtractor={(item) => item.market_id.toString()}
                             horizontal
+                            scrollEnabled={false}
                             renderItem={renderMarketHeaders}
                         />
                     </View>
@@ -465,6 +481,7 @@ const TeamEventMarket = ({ event, league, init_expanded, hot_markets_direction,
                         key={`${event.event_id}_primary_markets`}
                         data={primary_markets.sort((a,b) => parseInt(a.market_id) - parseInt(b.market_id))}
                         horizontal
+                        scrollEnabled={false}
                         renderItem={renderPrimaryMarkets}
                         keyExtractor={(item) => item.market_id.toString()}
                     />
@@ -627,6 +644,12 @@ const TeamEventMarket = ({ event, league, init_expanded, hot_markets_direction,
     )
 }
 
+
+const styles = StyleSheet.create({
+    container_style: { ...view_styles.section,  borderWidth:1, borderColor:Colors.shades.shade600 }
+})
+
+
 export default React.memo(TeamEventMarket, (left, right) => {
     if(JSON.stringify(left) != JSON.stringify(right)){ return false }
     return true

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import type { BestAvailableOrderProps, EventOrderStatProps, MarketProps, MarketSideOptionProps, OrderProps, TeamProps, TournamentProps, TradeProps } from "../../../types"
 import { view_styles } from '../../../constants/styles';
 import MarketButton from '../../components/MarketButton';
@@ -19,6 +19,7 @@ type TeamTournamentMarketProps = {
     direction?:'horizontal'|'vertical',
     show_event?:boolean,
     hide_liquidity?:boolean,
+    style?:any,
     latest_trades:TradeProps[],
     best_available_orders:BestAvailableOrderProps[],
     event_order_stats:EventOrderStatProps[],
@@ -29,7 +30,12 @@ type TeamTournamentMarketProps = {
     onTradeLongPress:(trade:TradeProps) => void
 }
 
-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 TeamTournamentMarket = ({ tournament, direction, show_event, hide_liquidity, hide_stat_banner, style, width, team, market, event_order_stats, default_price_view, latest_trades, show_grades, best_available_orders, onOrder, onView, onTradeLongPress }:TeamTournamentMarketProps) => {
+    let set_style = { ...styles.container_style, width }
+    if(style){
+        set_style = style
+    }
+
     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)])
 
@@ -63,7 +69,7 @@ const TeamTournamentMarket = ({ tournament, direction, show_event, hide_liquidit
     },[JSON.stringify(best_available_orders)])
 
     return (
-        <View style={{ ...view_styles.section, flexGrow:1, borderWidth:1, borderColor:Colors.shades.shade600, width }}>
+        <View style={set_style}>
             {!hide_stat_banner ?
              <LinearDiagnal 
                 label={market.stat_label ?? market.type}
@@ -124,4 +130,8 @@ const TeamTournamentMarket = ({ tournament, direction, show_event, hide_liquidit
     )
 }
 
+const styles = StyleSheet.create({
+    container_style: { ...view_styles.section, flexGrow:1, borderWidth:1, borderColor:Colors.shades.shade600 }
+})
+
 export default TeamTournamentMarket