be-components 6.1.0 → 6.1.1

package/src/BetMatch/index.tsx

@@ -3,23 +3,33 @@ import { Text, View } from "../Components/Themed";
 import { MyOrdersHelpers } from '../MarketComponents/components/MyOrderList/api';
 import type { AthleteProps, EventProps, LeagueProps, MarketProps, MatchProps, OrderProps, PlayerFilterProps, PublicPlayerProps, TeamProps, TournamentProps } from '../types';
 import { BetMatchApi } from './api';
-import { ActivityIndicator, FlatList } from 'react-native';
+import { ActivityIndicator, FlatList, Modal, StyleSheet, TouchableWithoutFeedback } from 'react-native';
 import BetMatchCardSmall from './components/BetMatchCardSmall';
 import { SocialOrderHelpers } from '../SocialComponents/api';
 import moment from 'moment-mini';
 import { useColors } from '../constants/useColors';
 import BetMatchCard from './components/BetMatchCard';
+import Pagination from '../Components/Pagination';
 
 type BetMatchProps = {
     player_filter_id:string,
     style?:any,
-    player_id:string
+    mode:'desktop'|'mobile',
+    player_id:string,
+    insets?:{ top:number, bottom:number, right?:number, left?:number }
+    show_grades?:boolean,
+    show_external_prices?:boolean,
+    onViewPremium?:() => void,
+    onViewPlayer:(player:PublicPlayerProps) => void,
+    onSelectGrade:(order:OrderProps) => void,
+    onOrder:(order:OrderProps) => void
 }
 const sections = ['filter','orders', 'bet']
-const BetMatch = ({ player_filter_id }:BetMatchProps) => {
+const BetMatch = ({ player_filter_id, mode, insets, onViewPlayer, onSelectGrade, onOrder, onViewPremium }:BetMatchProps) => {
     const Colors = useColors();
+    
     const [ module_size, setModuleSize ] = useState({ width:0, height:0 });
-    const [ viewing_order_id, setViewingOrderId ] = useState<string|undefined>(undefined);
+    const [ viewing_order_index, setViewingOrderIndex ] = useState<number>(-1);
     const [ static_data, setStaticData ] = useState<{
         static_loading:boolean,
         leagues:LeagueProps[],
@@ -31,12 +41,13 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
     const [ filter_data, setFilterData ] = useState<{
         loading:boolean,
         player_filter?:PlayerFilterProps,
+        action_loading:boolean,
         orders:OrderProps[],
     }>({
-        loading:false, orders:[]
+        loading:false, orders:[], action_loading:false
     });
-    const { loading, player_filter, orders } = filter_data;
-    const viewing_order = orders.find(o => o.order_id == viewing_order_id);
+    const { loading, player_filter, orders, action_loading } = filter_data;
+    const viewing_order = orders[viewing_order_index];
     const [ contest_data, setContestData ] = useState<{
         contest_loading:boolean,
         players:PublicPlayerProps[],
@@ -48,7 +59,7 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
     }>({
         contest_loading: false, players: [], events: [], tournaments: [], matches: [], teams:[], athletes: []
     });
-    const { players, events, tournaments, matches, teams, athletes } = contest_data;
+    const { contest_loading, players, events, tournaments, matches, teams, athletes } = contest_data;
     
     useEffect(() => {
         BetMatchApi.setEnvironment()
@@ -93,6 +104,7 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
         const tms = await BetMatchApi.getTeamsByIds(team_ids);
         setContestData({
             ...contest_data,
+            contest_loading: false,
             players: plyers,
             events: evs,
             tournaments: tourns,
@@ -102,6 +114,25 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
         })
     }
 
+    const handleReject = async(order:OrderProps) => {
+        setFilterData({ ...filter_data, action_loading: true });
+        await BetMatchApi.saveBetMatchResponse({
+            order_id: order.order_id,
+            response:'decline',
+            be_type: 'market',
+            bet_match_response_id:'',
+            player_id: '',
+            create_datetime:'', last_update_datetime:''
+        })
+        setTimeout(() => {
+            setFilterData({
+                ...filter_data,
+                orders: orders.filter(o => o.order_id != order.order_id)
+            })
+        }, 250);
+    }
+
+
     const renderOrders = (data:{ item:OrderProps, index:number }) => {
         const player = players.find(p => p.player_id == data.item.player_id);
         if(!player){ return <></> }
@@ -115,8 +146,9 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
                     contest_title={title}
                     time_detail={time}
                     league={league}
+
                     order={data.item}
-                    onOrder={(order) => setViewingOrderId(order.order_id)}
+                    onOrder={() => setViewingOrderIndex(data.index)}
                 />
             </View>
         )
@@ -126,7 +158,6 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
         switch(data.item){
             case 'filter':
                 if(!player_filter){ return <></> }
-                if(viewing_order){ return <></> }
                 return (
                     <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                         <View transparent style={{ flex:1, marginRight:10 }}>
@@ -140,53 +171,89 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
                     </View>
                 )
             case 'orders':
-                if(viewing_order){ return <></> }
                 return (
-                    <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
-                        {orders.map((item, index) => {
-                            return renderOrders({ item, index })
-                        })}
-                    </View>
-                )
-            case 'bet':
-                if(!viewing_order){ return <></> }
-                const player = players.find(p => p.player_id == viewing_order.player_id);
-                if(!player){ return <></> }
-                const { team, athlete, league, title, time } = SocialOrderHelpers.getContestDetails(viewing_order, events, tournaments, matches, athletes, teams, leagues)
-                return (
-                    <View style={{ flex:1, padding:20 }}>
-                        <BetMatchCard
-                            player={player}
-                            height={module_size.height - 60}
-                            order={viewing_order}
-                            team={team}
-                            athlete={athlete}
-                            league={league}
-                            time_detail={time}
-                            contest_title={title}
-                            onOrder={(order) => console.log(order)}
-                        />
+                    <View>
+                        {loading || contest_loading ?
+                        <View transparent style={{ justifyContent:'center', alignItems:'center', padding:50 }}>
+                            <ActivityIndicator size='large' color={Colors.text.h1} />
+                            <Text theme='h1' color={Colors.text.h1} style={{ marginTop:10 }}>Running Your Filter...</Text>
+                        </View>
+                        :<></>}
+                         <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                            {orders.map((item, index) => {
+                                return renderOrders({ item, index })
+                            })}
+                        </View>
                     </View>
                 )
+
             default: return <></>
         }
     }
+
+    const viewing_player = players.find(p => p.player_id == viewing_order?.player_id);
+    const { team, athlete, league, title, time } = SocialOrderHelpers.getContestDetails(viewing_order, events, tournaments, matches, athletes, teams, leagues)
     return (
         <View style={{ flex:1 }} onLayout={(ev) => {
             const { width, height } = ev.nativeEvent.layout;
             setModuleSize({ width, height })
         }}>
-            {loading ?
-            <ActivityIndicator size='large' color={Colors.text.h1} />
-            :<></>}
             <FlatList
                 data={sections}
                 key={'filter_sections'}
                 keyExtractor={item => item}
                 renderItem={renderSections}
             />
+            <Modal
+                style={styles.modalContainer}
+                animationType={mode=='desktop' ? 'fade' : 'slide'}
+                transparent
+                visible={viewing_order ? true : false}
+            >
+                <TouchableWithoutFeedback style={{ flex:1 }} onPress={() => setViewingOrderIndex(-1)}>
+                    <View type="blur" style={mode=='desktop' ? styles.desktopContainer : { ...styles.viewContainer }}>
+                        <TouchableWithoutFeedback>
+                            <View transparent style={mode=='desktop' ?{ width:500,maxHeight:750, borderRadius:22 }:{ flex:1, maxHeight:module_size.height }}>
+                                {viewing_order ?
+                                <View transparent style={{ padding:20 }}>
+                                    <BetMatchCard
+                                        player={viewing_player}
+                                        order={viewing_order}
+                                        team={team}
+                                        athlete={athlete}
+                                        league={league}
+                                        action_loading={action_loading}
+                                        time_detail={time}
+                                        contest_title={title}
+                                        onViewPlayer={onViewPlayer}
+                                        onViewPremium={onViewPremium}
+                                        onSelectGrade={onSelectGrade}
+                                        onOrder={(order) => onOrder(order)}
+                                        onReject={(order) => handleReject(order)}
+                                    />
+                                </View>
+                                :<></>}
+                                <View style={{ padding:5, paddingBottom: (insets?.bottom ?? 0) + 5 }}>
+                                    <Pagination
+                                        pages={orders.length}
+                                        onNext={() => setViewingOrderIndex(viewing_order_index + 1)}
+                                        onPrevious={() => setViewingOrderIndex(viewing_order_index - 1)}
+                                        offset={viewing_order_index}
+                                    />
+                                </View>
+                            </View>
+                        </TouchableWithoutFeedback>
+                    </View>
+                </TouchableWithoutFeedback>
+            </Modal>
         </View>
     )
 }
 
+const styles = StyleSheet.create({
+    modalContainer: { flex:1 },
+    viewContainer: { flex:1, justifyContent:'flex-end' },
+    desktopContainer:{ flex:1, justifyContent:'center', alignItems:'center' }
+})
+
 export default BetMatch

package/src/Components/AutoScrollFlatList.tsx

@@ -7,6 +7,7 @@ import {
   type NativeScrollEvent,
   type NativeSyntheticEvent,
   Platform,
+  Dimensions,
 } from 'react-native';
 
 type AutoScrollingFlatListProps<T> = {
@@ -38,7 +39,7 @@ const AutoScrollingFlatList = <T,>({
   const scrollStartTime = useRef<number | null>(null);
 
   const [ready, setReady] = useState(false);
-  const [isPaused, setIsPaused] = useState(false); // replaces isHovered
+  const [isPaused, setIsPaused] = useState(false);
   const [containerSize, setContainerSize] = useState(0);
 
   const handleLayout = (e: LayoutChangeEvent) => {
@@ -53,40 +54,34 @@ const AutoScrollingFlatList = <T,>({
       ? e.nativeEvent.layout.width
       : e.nativeEvent.layout.height;
 
+    if(size == 0){ return }
     itemSizes.current[index] = size;
-
-    const allMeasured =
-      itemSizes.current.length === data.length &&
-      itemSizes.current.every((v) => typeof v === 'number');
-
+    const allMeasured = itemSizes.current.length === data.length && itemSizes.current.every((v): v is number => typeof v === 'number');
     if (allMeasured && !ready) {
       totalSize.current = itemSizes.current
         .filter((v): v is number => typeof v === 'number')
         .reduce((acc, val) => acc + val, 0);
       setReady(true);
     }
+      
   };
 
   const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
     const currentOffset = horizontal
       ? e.nativeEvent.contentOffset.x
       : e.nativeEvent.contentOffset.y;
-
     offset.current = currentOffset;
   };
 
   useEffect(() => {
-    const isWeb = Platform.OS === 'web';
-
-    if (!ready || (isWeb && isPaused) || speed <= 0 || containerSize === 0) return;
-
+    if (!ready || isPaused || speed <= 0 || containerSize === 0) return;
+    if(totalSize.current == 0){ return }
     const frameInterval = 16;
     const pixelsPerFrame = (speed * frameInterval) / 1000;
     scrollStartTime.current = Date.now();
 
     scrollTimer.current = setInterval(() => {
       offset.current += pixelsPerFrame;
-
       const maxOffset = totalSize.current - containerSize;
       const now = Date.now();
       const reachedEnd = offset.current >= maxOffset;
@@ -114,6 +109,13 @@ const AutoScrollingFlatList = <T,>({
     };
   }, [ready, speed, isPaused, containerSize, onCompleteScroll, minDuration]);
 
+  // Kick off scroll once ready
+  useEffect(() => {
+    if (ready && !isPaused && speed > 0 && containerSize > 0) {
+      listRef.current?.scrollToOffset({ offset: offset.current, animated: false });
+    }
+  }, [ready, isPaused, speed, containerSize]);
+
   // Reset state/refs on resetKey change
   useEffect(() => {
     if (scrollTimer.current) clearInterval(scrollTimer.current);
@@ -125,6 +127,20 @@ const AutoScrollingFlatList = <T,>({
     setIsPaused(false);
   }, [resetKey]);
 
+  // Ensure auto-scroll works after first mobile touch
+  useEffect(() => {
+    if (Platform.OS !== 'web') return;
+
+    const unlock = () => {
+      setIsPaused(false);
+    };
+
+    document.addEventListener('touchstart', unlock, { once: true });
+    return () => {
+      document.removeEventListener('touchstart', unlock);
+    };
+  }, []);
+
   const wrappedRenderItem = ({ item, index }: { item: T; index: number }) => (
     <View onLayout={(e) => updateItemLayout(index, e)} style={{ flexShrink: 0 }}>
       {renderItem({ item, index })}
@@ -136,19 +152,36 @@ const AutoScrollingFlatList = <T,>({
       ? {
           onMouseEnter: () => setIsPaused(true),
           onMouseLeave: () => setIsPaused(false),
-          onTouchStart: () => setIsPaused(true),   // pause on mobile tap
+          onTouchStart: () => {
+            if (scrollStartTime.current !== null) {
+              setIsPaused(true);
+            }
+          },
           onTouchEnd: () => setIsPaused(false),
         }
       : {
-          onTouchStart: () => setIsPaused(true),
+          onTouchStart: () => {
+            if (scrollStartTime.current !== null) {
+              setIsPaused(true);
+            }
+          },
           onTouchEnd: () => setIsPaused(false),
         };
 
+  const windowSize = Dimensions.get('window');
+
   return (
     <View
       {...(wrapperProps as any)}
       onLayout={handleLayout}
-      style={[{ overflow: 'hidden' }, style]}
+      style={[
+        {
+          overflow: 'hidden', flex:1,
+          height: horizontal ? '100%' : windowSize.height,
+          width: horizontal ? windowSize.width : '100%',
+        },
+        style,
+      ]}
     >
       <FlatList
         ref={listRef}
@@ -157,6 +190,8 @@ const AutoScrollingFlatList = <T,>({
         keyExtractor={(_, i) => i.toString()}
         horizontal={horizontal}
         scrollEnabled={true}
+        initialNumToRender={data.length}
+        //removeClippedSubviews={true}
         onScroll={handleScroll}
         scrollEventThrottle={16}
         showsHorizontalScrollIndicator={false}

package/src/Components/Icons.tsx

@@ -1550,6 +1550,11 @@ const LocationIcon = ({ color, size }:IconProps) => {
     )
 }
 
+//Premium!!
+
+
+
+
 export default {
     SearchIcon,
     LiquidityIcon,