be-components 3.3.5 → 3.3.7

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

@@ -1,18 +1,19 @@
 import React, { useCallback } from 'react';
-import { View, Image, TouchableOpacity, StyleSheet } from 'react-native';
+import { Image } from 'react-native';
 import type { BestAvailableOrderProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, OrderProps, TradeProps } from '../../../types';
 import { MarketButtonHelpers } from '../MarketButton/api';
 import MarketButton from '../../components/MarketButton';
-import { Icons, LinearDiagnal, Text } from '../../../Components';
-import Colors from '../../../constants/colors';
-import { view_styles } from '../../../constants/styles';
+import { Icons, LinearDiagnal } from '../../../Components';
 import { TeamEventMarketHelpers } from '../TeamEventMarket/api';
 import { MarketComponentHelpers } from '../../api';
+import { Button, Text, View } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
 
 type EventMarketProps = {
     event:EventProps,
     width?:number,
     market:MarketProps,
+    float?:boolean,
     hide_market_banner?:boolean,
     latest_trades:TradeProps[],
     hide_liquidity?:boolean,
@@ -27,12 +28,8 @@ type EventMarketProps = {
     onTradeLongPress:(trade:TradeProps) => void
 }
 
-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 EventMarket = ({ event, float, 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) => {
+    const C = useColors();
     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 }) => {
@@ -65,21 +62,20 @@ const EventMarket = ({ width, event, style, direction, hide_liquidity, market, l
             </View>
         )
     },[JSON.stringify(best_available_orders)])
-
     return (
-        <View style={set_style}>
+        <View float={float} style={[{ borderRadius:8 }, style]}>
             {!hide_market_banner ?
              <LinearDiagnal 
                 label={market.stat_label ?? market.type}
                 label_size={14}
-                style={{ borderTopLeftRadius:8, padding:5  }}
-                left_color={Colors.incentive.gold}
+                style={{ borderTopLeftRadius:8, padding:5 }}
+                left_color={C.text.gold}
                 right_color={'#ebd197'}
             />
             :<></>}
-            <View style={{ flexDirection:direction == 'horizontal' ? 'row' : 'column', flex:1 }}>
+            <View transparent style={{ flexDirection:direction == 'horizontal' ? 'row' : 'column', flexGrow:1 }}>
 
-                <View style={{ ...view_styles.section_body, flexDirection:direction == 'horizontal' ? 'row' : 'column', flexGrow:2, padding:0, justifyContent:'center', alignItems:'center' }}>
+                <View type='body' transparent style={{ flexDirection:direction == 'horizontal' ? 'row' : 'column', flexGrow:2, padding:0, justifyContent:'center', alignItems:'center' }}>
                     {direction != 'horizontal' ?
                     <View style={{flexDirection:'row', alignItems:'center'}}>
                         <Image
@@ -87,7 +83,7 @@ const EventMarket = ({ width, event, style, direction, hide_liquidity, market, l
                             style={{ height:50, width:50, marginRight:5 }}
                             resizeMode='cover'
                         />
-                        <Text theme='body'>VS</Text>
+                        <Text theme='description'>VS</Text>
                         <Image
                             source={{ uri: event.home?.image?.url }}
                             style={{ height:50, width:50, marginLeft:5 }}
@@ -95,12 +91,12 @@ const EventMarket = ({ width, event, style, direction, hide_liquidity, market, l
                         />
                     </View>
                     :<></>}
-                    <View style={{ padding:10, paddingBottom:0 }}>
-                        <Text weight='bold' size={14} style={{ maxWidth:100 }} color={Colors.brand.midnight} textAlign='center'>{event.event_title}</Text>
-                        <Text style={{ marginTop:3 }} color={Colors.brand.midnight} weight='regular' textAlign='center' size={12}>{TeamEventMarketHelpers.getTimeDetail(event)}</Text>
+                    <View transparent style={{ padding:10, paddingBottom:0 }}>
+                        <Text weight='bold' theme='h2' style={{ maxWidth:100 }}  textAlign='center'>{event.event_title}</Text>
+                        <Text style={{ marginTop:3 }} theme='light' textAlign='center' size={12}>{TeamEventMarketHelpers.getTimeDetail(event)}</Text>
                     </View>
                 </View>
-                <View nativeID='market_sides' style={{ flexDirection:'row', flexGrow:1, justifyContent:'flex-end', alignItems:'center', padding:10 }}>
+                <View transparent nativeID='market_sides' style={{ flexDirection:'row', flexGrow:1, justifyContent:'flex-end', 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
@@ -112,30 +108,26 @@ const EventMarket = ({ width, event, style, direction, hide_liquidity, market, l
                 </View>
             </View>
             {!hide_liquidity ?
-            <View style={{ backgroundColor:Colors.shades.shade100, padding:10, flexDirection:'row', alignItems:'center', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
-                <TouchableOpacity style={{ flex:1, flexDirection:'row' }} onPress={() => {
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                <Button transparent style={{ flexGrow:1, flexDirection:'row', padding:10 }} onPress={() => {
                     onView({
                         event_id: event.event_id, 
                         event_type: 'team', 
                         market_id: market.market_id
                     });
                 }}>
-                    <View style={{ backgroundColor:Colors.shades.white, height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center', ...view_styles.float }}>
-                        <Icons.LiquidityIcon color={Colors.brand.midnight} size={30}/>
+                    <View float style={{ height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                        <Icons.LiquidityIcon color={C.text.h1} size={30}/>
                     </View>
-                    <View style={{ marginLeft:10 }}>
-                        <Text theme='body_2'>Liquidity</Text>
-                        <Text size={12} color={Colors.brand.electric} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
+                    <View transparent style={{ marginLeft:10 }}>
+                        <Text theme='description'>Liquidity</Text>
+                        <Text size={12} style={{ marginTop:3 }} color={C.text.highlight} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
                     </View>
-                </TouchableOpacity>
+                </Button>
             </View>
             :<></>}
         </View>
     )
 }
 
-const styles = StyleSheet.create({
-    container_style: { ...view_styles.section, flexGrow:1, borderWidth:1, borderColor:Colors.shades.shade600 }
-})
-
 export default EventMarket

package/src/MarketComponents/components/MarketButton/api/index.ts

@@ -1,14 +1,13 @@
 import moment from "moment-mini";
-import Colors from "../../../../constants/colors";
 import type { BestAvailableOrderProps, MarketProps, MarketSideOptionProps, OrderProps, TradeProps } from "../../../../types";
 import { MarketComponentHelpers } from "../../../api";
 
 
 export const MarketButtonHelpers = {
-    getButtonLabel: (market:MarketProps, side_option:MarketSideOptionProps, trade:TradeProps) => {
+    getButtonLabel: (market:MarketProps, side_option:MarketSideOptionProps, trade:TradeProps, C:any) => {
         let v_1 = MarketComponentHelpers.getVar1Label(market, trade.var_1, side_option.side);
         let o_1 = MarketComponentHelpers.getOddsLabel(trade.odds);
-        return { var_1: v_1, odds:o_1, color: trade.draft_liquidity? Colors.highlights.highlight500Faded : Colors.shades.shade100 }
+        return { var_1: v_1, odds:o_1, color: trade.draft_liquidity? C.views.liquidMarket : C.views.illiquidMarket }
     },
     getVisibleTrade: (default_price_view:'best_available'|'last_trade', market:MarketProps, side_option:MarketSideOptionProps, latest_trades:TradeProps[], best_available_orders:BestAvailableOrderProps[], side_id:string, reversed_side_id:string) => {
         const order = best_available_orders.find(o => o.market_id == market.market_id && o.side == side_option.side && o.show);

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

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { TouchableOpacity, View, ActivityIndicator } from "react-native"
-import Text from '../../../Components/Text';
+import { ActivityIndicator } from "react-native"
 import type { BestAvailableOrderProps, MarketProps, MarketSideOptionProps, OrderProps, TradeProps } from '../../../types';
-import Colors from '../../../constants/colors';
 import { MarketButtonHelpers } from './api';
 import OrderGradeBar from '../OrderGradeBar';
 import { Icons } from '../../../Components';
+import { Button, Text, View } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
 
 type MarketButtonProps = {
     market:MarketProps,
@@ -19,6 +19,7 @@ type MarketButtonProps = {
     onLongPress:(trade:TradeProps) => void
 }
 const MarketCard = ({ side_option, locked, show_grades, market, trade, order, side_label, onPress, onLongPress }:MarketButtonProps) => {
+    const C = useColors();
     const [ updated, setUpdated ] = useState<{
         iteration: number,
         iteration_trade?:TradeProps,
@@ -29,7 +30,7 @@ const MarketCard = ({ side_option, locked, show_grades, market, trade, order, si
     });
     const { iteration, loading, iteration_trade } = updated;
 
-    const { var_1, odds, color } = MarketButtonHelpers.getButtonLabel(market, side_option, trade);
+    const { var_1, odds, color } = MarketButtonHelpers.getButtonLabel(market, side_option, trade, C);
     const handlePress = () => {
         return onPress(MarketButtonHelpers.getOrderFromTrade(trade, undefined, order?.order_id))
     }
@@ -45,20 +46,20 @@ const MarketCard = ({ side_option, locked, show_grades, market, trade, order, si
     },[trade])
 
     return (
-        <TouchableOpacity 
-            style={{ flex:1, backgroundColor:color, borderRadius:4}}
+        <Button
+            style={{ flexGrow:1, padding:0, backgroundColor:color, borderRadius:4}}
             onPress={() => handlePress()}
             disabled={loading || locked ? true : false}
             onLongPress={() => onLongPress({ ...trade, market:market })}
             >
-            <View style={{ flex:1, padding:5, justifyContent:'center'  }}>
+            <View transparent style={{ flexGrow:1, padding:5, justifyContent:'center'  }}>
                 {!market.var_1_required && market.show_side_option ?
-                <Text size={12} color={Colors.brand.midnight} weight='regular' textAlign='center'>{side_label?side_label:side_option.label.toUpperCase()}</Text>
+                <Text size={12} theme='description' textAlign='center'>{side_label?side_label:side_option.label.toUpperCase()}</Text>
                 :<></>}
                 {market.var_1_required ?
-                <Text size={12} color={Colors.brand.midnight} weight='regular' textAlign='center'>{var_1}</Text>
+                <Text size={12} theme='description' textAlign='center'>{var_1}</Text>
                 :<></>}
-                <Text style={{ marginTop:2 }} size={12} color={Colors.brand.midnight} weight='semibold' textAlign='center'>{odds}</Text>
+                <Text style={{ marginTop:2 }} theme='description' textAlign='center'>{odds}</Text>
             </View>
             {order ?
                 <OrderGradeBar
@@ -68,16 +69,16 @@ const MarketCard = ({ side_option, locked, show_grades, market, trade, order, si
                 />
             :<></>}
             {loading ?
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
-                <ActivityIndicator size='small' color={Colors.shades.white} />
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                <ActivityIndicator size='small' color={C.text.highlight} />
             </View>
             :<></>}
             {locked ?
-            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center', backgroundColor:Colors.shades.black_faded_super_heavy, borderRadius:4 }}>
-                <Icons.LockClosedIcon size={22} color={Colors.utility.error} />
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center', borderRadius:4 }}>
+                <Icons.LockClosedIcon size={22} color={C.text.error} />
             </View>
             :<></>}
-        </TouchableOpacity>
+        </Button>
     )
 }
 

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

@@ -1,13 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
-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';
-import { Icons, LinearDiagnal, Text } from '../../../Components';
-import Colors from '../../../constants/colors';
+import { Icons, LinearDiagnal } from '../../../Components';
 import { MarketButtonHelpers } from '../MarketButton/api';
 import { MarketComponentHelpers } from '../../api';
 import { AthleteImage } from '../../../Components/Jerseys';
+import { Button, Text, View } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
 
 type MatchMarketProps = {
     league?:LeagueProps,
@@ -15,8 +14,12 @@ type MatchMarketProps = {
     match:MatchProps,
     away_athlete?:AthleteProps,
     home_athlete?:AthleteProps,
+    direction?:'horizontal'|'vertical',
     away_team?:TeamProps,
+    hide_image?:boolean,
+    float?:boolean,
     home_team?:TeamProps,
+    image_size_override?:number,
     hide_stat_banner?:boolean,
     width?:number,
     style?:any,
@@ -33,17 +36,14 @@ type MatchMarketProps = {
     onTradeLongPress:(trade:TradeProps) => void
 }
 
-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 MatchMarket = ({ league, match, float, show_event, hide_image, image_size_override, direction, 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) => {
+    const C = useColors();
     
     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)])
     const match_time_detail = MarketComponentHelpers.getMatchTimeDetail(match);
-    let image_size = 32
-    if(width){ image_size = width * 0.18 }
+    let image_size = image_size_override ?? 32
+    if(!image_size_override && width){ image_size = width * 0.18 }
     
     const renderSides = useCallback((data:{ item:MarketSideOptionProps, index:number, market:MarketProps }) => {
         const ba_order = best_available_orders.find(o => o.market_id == market.market_id && o.side == data.item.side && o.show);
@@ -83,61 +83,64 @@ const MatchMarket = ({ league, match, show_event, style, hide_liquidity, hide_st
     if(match.participant_type == 'athlete' && (!home_athlete || !away_athlete)){ return <></> }
     if(match.participant_type == 'team' && (!home_team || !away_team)){ return <></> }
     return (
-        <View style={set_style}>
+        <View float={float} style={[{ borderRadius:8 }, style]}>
             {!hide_stat_banner ?
              <LinearDiagnal 
                 label={market.stat_label ?? market.type}
                 label_size={14}
                 style={{ borderTopLeftRadius:8, padding:5  }}
-                left_color={Colors.incentive.gold}
+                left_color={C.text.gold}
                 right_color={'#ebd197'}
             />
             :<></>}
             {show_event ?
-            <View style={{ padding:5, backgroundColor:Colors.shades.shade100 }}>
-                <Text size={12} color={Colors.brand.midnight} textAlign='center' weight='semibold'>{match.match_title}</Text>
+            <View transparent style={{ padding:5 }}>
+                <Text size={12} theme='h2' textAlign='center' weight='semibold'>{match.match_title}</Text>
             </View>
             :<></>}
-            <View style={{ ...view_styles.section_body, padding:2, justifyContent:'center', alignItems:'center' }}>
-                {match.participant_type == 'athlete' && away_athlete && home_athlete ?
-                <View style={{ flexDirection:'row', alignItems:'center' }}>
-                    <View style={{ borderRadius:100, borderWidth:match.winner == away_athlete?.athlete_id ? 2 : 0, borderColor:Colors.incentive.gold }}>
-                    <AthleteImage
-                        athlete={away_athlete}
-                        size={image_size}
-                        league={league}
-                        number_size={12}
-                    />
-                    </View>
-                    <Text style={{ marginLeft:2, marginRight:2 }} size={12} weight='bold' color={Colors.brand.midnight}>VS</Text>
-                    <View style={{ borderRadius:100, borderWidth:match.winner == home_athlete?.athlete_id ? 2 : 0, borderColor:Colors.incentive.gold }}>
+            <View style={{ flexDirection:direction == 'horizontal' ? 'row' : 'column', flexGrow:1 }}>
+                <View style={{ flexDirection:direction == 'horizontal' ? 'row' : 'column' , flexGrow:1, padding:2, justifyContent:'center', alignItems:'center' }}>
+                    {!hide_image && match.participant_type == 'athlete' && away_athlete && home_athlete ?
+                    
+                    <View style={{ flexDirection:'row', alignItems:'center' }}>
+                        <View style={{ borderRadius:100, borderWidth:match.winner == away_athlete?.athlete_id ? 2 : 0, borderColor:C.text.gold }}>
                         <AthleteImage
-                            athlete={home_athlete}
+                            athlete={away_athlete}
                             size={image_size}
                             league={league}
                             number_size={12}
                         />
+                        </View>
+                        <Text style={{ marginLeft:2, marginRight:2 }} theme='h2'>VS</Text>
+                        <View style={{ borderRadius:100, borderWidth:match.winner == home_athlete?.athlete_id ? 2 : 0, borderColor:C.text.gold }}>
+                            <AthleteImage
+                                athlete={home_athlete}
+                                size={image_size} 
+                                league={league}
+                                number_size={12}
+                            />
+                        </View>
+                    </View>
+                    :<></>}
+                    <View style={{ padding:10, paddingBottom:0 }}>
+                        <Text weight='bold' size={14} style={{  maxWidth:100 }} theme='h2' textAlign='center'>{match.match_title}</Text>
+                        <Text style={{ marginTop:3 }} theme='light' textAlign='center' size={12}>{match_time_detail}</Text>
                     </View>
                 </View>
-                :<></>}
-                <View style={{ padding:10, paddingBottom:0 }}>
-                    <Text weight='bold' size={14} color={Colors.brand.midnight} textAlign='center'>{match.match_title}</Text>
-                    <Text style={{ marginTop:3 }} color={Colors.brand.midnight} weight='regular' textAlign='center' size={12}>{match_time_detail}</Text>
+                <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>
             </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 }}>
-                <TouchableOpacity style={{ flex:1, flexDirection:'row' }} onPress={() => {
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                <Button transparent style={{ flexGrow:1, flexDirection:'row', padding:10 }} onPress={() => {
                     onView({
                         event_id: match.match_id, 
                         event_type: 'match', 
@@ -146,24 +149,18 @@ const MatchMarket = ({ league, match, show_event, style, hide_liquidity, hide_st
                         side_id: ''
                     });
                 }}>
-                    <View style={{ backgroundColor:Colors.shades.white, height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center', ...view_styles.float }}>
-                        <Icons.LiquidityIcon color={Colors.brand.midnight} size={30}/>
+                    <View float style={{ height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                        <Icons.LiquidityIcon color={C.text.h1} size={30}/>
                     </View>
-                    <View style={{ marginLeft:10 }}>
-                        <Text theme='body_2'>Liquidity</Text>
-                        <Text size={12} color={Colors.brand.electric} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
+                    <View transparent style={{ marginLeft:10 }}>
+                        <Text theme='description'>Liquidity</Text>
+                        <Text size={12} style={{ marginTop:3 }} color={C.text.highlight} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
                     </View>
-                </TouchableOpacity>
+                </Button>
             </View>
             :<></>}
         </View>
     )
 }
 
-
-const styles = StyleSheet.create({
-    container_style: { ...view_styles.section, flexGrow:1, borderWidth:1, borderColor:Colors.shades.shade600 }
-})
-
-
 export default MatchMarket