be-components 3.3.6 → 3.3.7

package/lib/module/MarketComponents/components/TournamentMarket/index.js

@@ -1,8 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, FlatList, TouchableOpacity, ActivityIndicator, Image, ScrollView } from 'react-native';
-import { view_styles } from '../../../constants/styles';
+import { FlatList, ActivityIndicator, Image } from 'react-native';
 import Colors from '../../../constants/colors';
-import { Button, Icons, LinearDiagnal, Text, TextInput } from '../../../Components';
+import { Icons, LinearDiagnal } from '../../../Components';
 import { MarketComponentApi, MarketComponentHelpers } from '../../api';
 import AthleteTournamentMarket from '../AthleteTournamentMarket';
 import TeamTournamentMarket from '../TeamTournamentMarket';
@@ -10,10 +9,14 @@ import MatchMarket from '../MatchMarket';
 import moment from 'moment-mini';
 import { TournamentMarketHelpers } from './api';
 import { useIsInViewport } from '../../../Components/ViewportObserver';
+import { Button, Text, TextInput, View } from '../../../Components/Themed';
+import { useColors } from '../../../constants/useColors';
 const TournamentMarket = ({
   tournament,
+  float,
   wrap_markets,
   width,
+  style,
   market_selector_location,
   hide_match_liquidity,
   show_grades,
@@ -35,6 +38,7 @@ const TournamentMarket = ({
   onActivate,
   onShare
 }) => {
+  const C = useColors();
   const [search_value, setSearchValue] = useState(undefined);
   const [tournament_data, setTournamentData] = useState({
     loading: false,
@@ -56,6 +60,7 @@ const TournamentMarket = ({
     match_trades
   } = tournament_data;
   const [show_markets, setShowMarkets] = useState(false);
+  console.log(loaded, loading);
   const ref = useRef(null);
   const is_in_viewport = useIsInViewport(ref);
   let supported_markets = markets.filter(m => tournament.supported_markets.find(sm => sm.market_id == m.market_id));
@@ -83,7 +88,7 @@ const TournamentMarket = ({
   }
   const market_width = TournamentMarketHelpers.getMarketWrapWidth(50, width, wrap_markets);
   useEffect(() => {
-    if (!is_in_viewport || loaded || loading) {
+    if (loaded || loading) {
       return;
     }
     MarketComponentApi.setEnvironment();
@@ -136,12 +141,13 @@ const TournamentMarket = ({
     });
   };
   const renderMarkets = data => {
-    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    return /*#__PURE__*/React.createElement(Button, {
       style: {
-        ...view_styles.body_row,
+        flexDirection: 'row',
+        alignItems: 'center',
         padding: 10,
         borderBottomWidth: 1,
-        borderColor: Colors.shades.shade600
+        borderColor: C.borders.light
       },
       onPress: () => {
         setTournamentData({
@@ -152,8 +158,7 @@ const TournamentMarket = ({
       }
     }, /*#__PURE__*/React.createElement(Text, {
       size: 12,
-      color: Colors.brand.midnight,
-      weight: "semibold"
+      theme: "h2"
     }, data.item.type == 'Stat' ? data.item.stat_label : data.item.type));
   };
   const renderMatches = data => {
@@ -171,10 +176,17 @@ const TournamentMarket = ({
     }
     let m_order_stats = match_order_stats.filter(os => os.event_id == data.item.match_id && os.event_type == 'match');
     return /*#__PURE__*/React.createElement(View, {
-      key: `${tournament.tournament_id}_${data.item.match_id}`
+      key: `${tournament.tournament_id}_${data.item.match_id}`,
+      style: {
+        margin: 4
+      }
     }, /*#__PURE__*/React.createElement(MatchMarket, {
       match: data.item,
       league: league,
+      float: true,
+      style: {
+        flexGrow: 1
+      },
       away_athlete: away_athlete,
       home_athlete: home_athlete,
       away_team: away_team,
@@ -200,7 +212,10 @@ const TournamentMarket = ({
     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 /*#__PURE__*/React.createElement(View, {
-      key: `${tournament.tournament_id}_${data.item.team_id.toString()}`
+      key: `${tournament.tournament_id}_${data.item.team_id.toString()}`,
+      style: {
+        margin: 4
+      }
     }, /*#__PURE__*/React.createElement(TeamTournamentMarket, {
       team: data.item,
       event_type: "tournament",
@@ -208,6 +223,7 @@ const TournamentMarket = ({
       onView: onView,
       width: wrap_markets ? market_width : undefined,
       show_grades: show_grades,
+      float: true,
       hide_liquidity: hide_participant_liquidity ? true : false,
       tournament: tournament,
       event_order_stats: team_order_stats,
@@ -226,12 +242,19 @@ const TournamentMarket = ({
     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 /*#__PURE__*/React.createElement(View, {
-      key: `${tournament.tournament_id}_${data.item.athlete_id.toString()}`
+      key: `${tournament.tournament_id}_${data.item.athlete_id.toString()}`,
+      style: {
+        margin: 4
+      }
     }, /*#__PURE__*/React.createElement(AthleteTournamentMarket, {
       athlete: data.item,
       event_type: "tournament",
       onTradeLongPress: onTradeLongPress,
       onView: onView,
+      float: true,
+      style: {
+        flexGrow: 1
+      },
       show_grades: show_grades,
       hide_liquidity: hide_participant_liquidity ? true : false,
       tournament: tournament,
@@ -245,15 +268,21 @@ const TournamentMarket = ({
     }));
   };
   return /*#__PURE__*/React.createElement(View, {
-    ref: ref,
-    style: {
-      ...view_styles.section,
-      borderWidth: 1,
-      borderColor: Colors.shades.shade600
-    }
+    float: float,
+    style: [{
+      borderRadius: 8
+    }, style]
   }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    transparent: true,
+    nativeID: "event_header_data",
     style: {
-      ...view_styles.section_header
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      padding: 10,
+      borderBottomWidth: 1,
+      borderBottomColor: C.borders.light
     }
   }, league ? /*#__PURE__*/React.createElement(Image, {
     source: {
@@ -266,16 +295,17 @@ const TournamentMarket = ({
     },
     resizeMode: "cover"
   }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flex: 1
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header_2"
+    theme: "h2"
   }, tournament.tournament_name), /*#__PURE__*/React.createElement(Text, {
     style: {
       marginTop: 3
     },
-    theme: "body"
+    theme: "description"
   }, moment(tournament.scheduled_datetime).format('MMM DD YYYY'))), onActivate && tournament.status != 'closed' ? /*#__PURE__*/React.createElement(Button, {
     title: 'Refresh',
     style: {
@@ -287,63 +317,66 @@ const TournamentMarket = ({
     title_color: Colors.shades.white,
     backgroundColor: Colors.utility.success,
     onPress: () => onActivate(tournament.tournament_id, 'tournament')
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null), onShare ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null), onShare ? /*#__PURE__*/React.createElement(Button, {
     style: {
       marginLeft: 10
     },
     onPress: () => onShare(tournament)
   }, /*#__PURE__*/React.createElement(Icons.ShareIcon, {
     size: 14,
-    color: Colors.brand.electric
+    color: C.text.action
   })) : /*#__PURE__*/React.createElement(React.Fragment, null)), loading || !loaded ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       padding: 20
     }
   }, /*#__PURE__*/React.createElement(ActivityIndicator, {
     size: 'large',
-    color: Colors.brand.midnight
-  })) : /*#__PURE__*/React.createElement(View, null, market_selector_location == 'top_right' ? /*#__PURE__*/React.createElement(View, {
+    color: C.text.h1
+  })) : /*#__PURE__*/React.createElement(View, {
+    type: "body",
+    transparent: true,
     style: {
-      ...view_styles.body_row,
-      paddingLeft: 10,
-      paddingRight: 10,
-      zIndex: 1,
-      backgroundColor: Colors.shades.shade100
+      flexGrow: 1
     }
-  }, /*#__PURE__*/React.createElement(View, {
+  }, market_selector_location == 'top_right' ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flexDirection: 'row',
       alignItems: 'center',
+      padding: 10,
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "input",
+    style: {
       flex: 1,
-      marginRight: 10,
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      padding: 5,
       paddingLeft: 10,
-      backgroundColor: Colors.shades.white,
-      borderRadius: 22
+      paddingRight: 10
     }
   }, /*#__PURE__*/React.createElement(Icons.SearchIcon, {
-    color: Colors.brand.electric,
+    color: C.text.action,
     size: 18
-  }), /*#__PURE__*/React.createElement(TextInput, {
+  })), /*#__PURE__*/React.createElement(TextInput, {
     style: {
-      flex: 1,
-      marginLeft: 10,
-      borderRadius: 0,
-      borderTopRightRadius: 22,
-      borderBottomRightRadius: 22
+      flex: 1
     },
+    transparent: true,
     placeholder: "Search athletes, teams, matches ...",
-    placeholderTextColor: Colors.accents.accent200,
     onChangeText: text => setSearchValue(text)
-  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
+  })), /*#__PURE__*/React.createElement(Button, {
+    float: true,
     style: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: Colors.shades.white,
-      borderWidth: 1,
-      borderColor: Colors.shades.shade600,
-      borderRadius: 4,
-      padding: 10,
-      ...view_styles.float
+      marginLeft: 5
     },
     onPress: () => setShowMarkets(!show_markets)
   }, /*#__PURE__*/React.createElement(Text, {
@@ -351,39 +384,49 @@ const TournamentMarket = ({
       marginRight: 10
     },
     size: 14,
-    color: Colors.brand.midnight
+    color: C.text.h1
   }, active_market?.type == 'Stat' ? active_market.stat_label : active_market?.type), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
-    color: Colors.brand.midnight,
+    color: C.text.h1,
     size: 14
   })), show_markets ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    float: true,
     style: {
-      ...view_styles.section,
       position: 'absolute',
       top: 5,
       right: 5,
       minWidth: 175
     }
   }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
     style: {
-      ...view_styles.section_header,
-      backgroundColor: Colors.shades.shade100
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 5,
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
     }
   }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flex: 1
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header_2"
+    theme: "h2"
   }, "Select Market")), /*#__PURE__*/React.createElement(Button, {
     title: "X",
-    title_weight: "regular",
-    borderRadius: 100,
-    backgroundColor: Colors.shades.white,
-    padding: 5,
+    title_color: C.text.action,
+    style: {
+      borderRadius: 100,
+      padding: 5,
+      paddingLeft: 10,
+      paddingRight: 10
+    },
+    type: "close",
     onPress: () => setShowMarkets(false)
   })), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
-      ...view_styles.section_body,
       padding: 10
     }
   }, /*#__PURE__*/React.createElement(FlatList, {
@@ -402,12 +445,11 @@ const TournamentMarket = ({
   }, /*#__PURE__*/React.createElement(LinearDiagnal, {
     label_size: 14,
     label: active_type == 'futures' ? 'FUTURES' : 'MATCHES',
-    left_color: Colors.utility.warning,
-    right_color: Colors.utility.error
+    left_color: C.text.warning,
+    right_color: C.text.error
   })), active_type == 'matches' && show_futures || active_type == 'futures' && show_matches ? /*#__PURE__*/React.createElement(Button, {
     title: `SEE ${active_type == 'futures' ? 'MATCHES' : 'FUTURES'}`,
-    padding: 15,
-    title_color: Colors.brand.electric,
+    type: "close",
     onPress: () => {
       let new_active_market = active_market;
       if (active_type == 'futures') {
@@ -422,7 +464,13 @@ const TournamentMarket = ({
         active_market: new_active_market
       });
     }
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null)), active_type == 'futures' && show_teams && teams.length > 0 ? /*#__PURE__*/React.createElement(View, null, wrap_markets ? /*#__PURE__*/React.createElement(ScrollView, null, /*#__PURE__*/React.createElement(View, {
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null)), active_type == 'futures' && show_teams && teams.length > 0 ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      padding: 10
+    }
+  }, wrap_markets ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flexDirection: 'row',
       flexWrap: 'wrap',
@@ -433,12 +481,18 @@ const TournamentMarket = ({
       item: t,
       index: i
     });
-  }))) : /*#__PURE__*/React.createElement(FlatList, {
+  })) : /*#__PURE__*/React.createElement(FlatList, {
     data: sorted_teams,
     renderItem: renderTeams,
     horizontal: true,
     keyExtractor: item => item.team_id.toString()
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null), active_type == 'futures' && show_athletes && athletes.length > 0 ? /*#__PURE__*/React.createElement(View, null, wrap_markets ? /*#__PURE__*/React.createElement(View, {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null), active_type == 'futures' && show_athletes && athletes.length > 0 ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      padding: 10
+    }
+  }, wrap_markets ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flexDirection: 'row',
       flexWrap: 'wrap',
@@ -454,7 +508,13 @@ const TournamentMarket = ({
     renderItem: renderAthletes,
     horizontal: true,
     keyExtractor: item => item.athlete_id.toString()
-  })) : active_type == 'matches' && show_matches && matches.length > 0 ? /*#__PURE__*/React.createElement(View, null, wrap_markets ? /*#__PURE__*/React.createElement(View, {
+  })) : active_type == 'matches' && show_matches && matches.length > 0 ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      padding: 10
+    }
+  }, wrap_markets ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flexDirection: 'row',
       flexWrap: 'wrap',
@@ -471,20 +531,20 @@ const TournamentMarket = ({
     keyExtractor: item => item.match_id.toString(),
     horizontal: true
   })) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(View, {
+    type: "footer",
     style: {
-      backgroundColor: Colors.shades.shade100,
-      padding: 10,
       flexDirection: 'row',
       alignItems: 'center',
-      flexWrap: 'wrap',
+      padding: 10,
       borderBottomLeftRadius: 8,
       borderBottomRightRadius: 8
     }
-  }, !hide_liquidity ? /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }, !hide_liquidity ? /*#__PURE__*/React.createElement(Button, {
+    transparent: true,
     style: {
-      flex: 1,
+      flexGrow: 1,
       flexDirection: 'row',
-      minWidth: 115
+      padding: 10
     },
     onPress: () => {
       if (!active_market) {
@@ -493,42 +553,44 @@ const TournamentMarket = ({
       onViewAdditionalMarkets(tournament.tournament_id, 'tournament');
     }
   }, /*#__PURE__*/React.createElement(View, {
+    float: true,
     style: {
-      backgroundColor: Colors.shades.white,
       height: 30,
       width: 30,
       borderRadius: 100,
       justifyContent: 'center',
-      alignItems: 'center',
-      ...view_styles.float
+      alignItems: 'center'
     }
   }, /*#__PURE__*/React.createElement(Icons.LiquidityIcon, {
-    color: Colors.brand.midnight,
+    color: C.text.h1,
     size: 30
   })), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
-      marginLeft: 5
+      marginLeft: 10
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    theme: "body_2"
-  }, "Tournament Liquidity"), /*#__PURE__*/React.createElement(Text, {
+    theme: "description"
+  }, "Liquidity"), /*#__PURE__*/React.createElement(Text, {
     size: 12,
-    color: Colors.brand.electric,
+    style: {
+      marginTop: 3
+    },
+    color: C.text.highlight,
     weight: "semibold"
   }, "$", liquidity.toFixed(), " ", open_order_count, " Orders"))) : /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flex: 1
     }
-  }), !market_selector_location ? /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }), !market_selector_location ? /*#__PURE__*/React.createElement(View, {
+    transparent: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    float: true,
     style: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: Colors.shades.white,
-      borderWidth: 1,
-      borderColor: Colors.shades.shade600,
-      borderRadius: 4,
-      padding: 10,
-      ...view_styles.float
+      marginLeft: 5
     },
     onPress: () => setShowMarkets(!show_markets)
   }, /*#__PURE__*/React.createElement(Text, {
@@ -536,39 +598,49 @@ const TournamentMarket = ({
       marginRight: 10
     },
     size: 14,
-    color: Colors.brand.midnight
+    color: C.text.h1
   }, active_market?.type == 'Stat' ? active_market.stat_label : active_market?.type), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
-    color: Colors.brand.midnight,
+    color: C.text.h1,
     size: 14
   })), show_markets ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    float: true,
     style: {
-      ...view_styles.section,
       position: 'absolute',
       bottom: 5,
       right: 5,
       minWidth: 175
     }
   }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
     style: {
-      ...view_styles.section_header,
-      backgroundColor: Colors.shades.shade100
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 5,
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
     }
   }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
       flex: 1
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header_2"
+    theme: "h2"
   }, "Select Market")), /*#__PURE__*/React.createElement(Button, {
     title: "X",
-    title_weight: "regular",
-    borderRadius: 100,
-    backgroundColor: Colors.shades.white,
-    padding: 5,
+    title_color: C.text.action,
+    style: {
+      borderRadius: 100,
+      padding: 5,
+      paddingLeft: 10,
+      paddingRight: 10
+    },
+    type: "close",
     onPress: () => setShowMarkets(false)
   })), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
-      ...view_styles.section_body,
       padding: 10
     }
   }, /*#__PURE__*/React.createElement(FlatList, {