be-components 3.2.9 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "3.2.9",
+  "version": "3.3.0",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/Competition/components/CompetitionPlay.tsx

@@ -12,7 +12,6 @@ import { view_styles } from "../../constants/styles";
 import {LinearGradient} from "expo-linear-gradient";
 import { Icons, Text } from "../../Components";
 import LinearDiagnal from "../../Components/LinearDiagnal";
-import SpringView from "../../Components/Spring";
 
 type CompetitionPlayProps = {
     player_id?:string,
@@ -294,18 +293,13 @@ const CompetitionPlay = ( { authenticated_competition_player, pick_loading, comp
                                         
                                     </View>
                                     {authenticated_competition_player ?
-                                    <SpringView 
-                                        slide="horizontal"
-                                        from={200}
-                                        to={0}
-                                        style={{ flex:1, flexDirection:'row', borderTopLeftRadius:22, borderBottomLeftRadius:22, padding:10, alignItems:'center', backgroundColor:Colors.utility.success, ...view_styles.float }}
-                                        >
+                                    <View>
                                             { competition_type?.type == 'wager' ?
                                             <Text style={{ flex:1 }} size={14} color={Colors.shades.white} weight='semibold' textAlign="right">{authenticated_competition_player.wager_based_balance.toFixed(2)} Remaining</Text>
-                                            :
+                                               :
                                             <Text style={{ flex:1 }} size={14} color={Colors.shades.white} weight='semibold' textAlign="right">{parseFloat(competition.max_pick_count as string) - player_picks.length} Picks Remaining</Text>
                                             }
-                                    </SpringView>
+                                    </View>
                                     :<></>}
                             </View>
                         </View>

package/src/Competition/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { CompetitionApi, CompetitionHelpers, CompetitionMatchApi, CompetitionPlayerApi, PlayerPicksApi } from './api';
 import { View, ScrollView, Image, TouchableOpacity, ActivityIndicator, Modal } from 'react-native';
 import { view_styles } from '../constants/styles';
-import { Button, Icons, Spring, Text } from '../Components';
+import { Button, ConfirmationModal, Icons, Text } from '../Components';
 import Colors from '../constants/colors';
 import type { AthleteProps, BEEventProps, CodeRequestProps, CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionPayoutTypeProps, CompetitionPlayerProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, EventProps, LeagueProps, MarketProps, MatchProps, MyPlayerProps, PlayerBalanceProps, PlayerPickProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps, TeamProps, TournamentProps } from '../types';
 import CompetitionInfoCard from './components/CompetitionInfoCard';
@@ -12,12 +12,12 @@ import CompetitionPlay from './components/CompetitionPlay';
 import EnterCompetitionPrompt from './components/EnterCompetitionPrompt';
 import moment from 'moment-mini';
 import LeaderPicks from './components/LeaderPicks';
-import NavOutPrompt from './components/NavOutPrompt';
 import SeasonCard from './components/SeasonCard';
 
 type CompetitionModuleProps = {
     player_id?:string,
     competition_id:string,
+    confirm_padding?:number,
     onClose:() => void,
     onEvent?:(event:BEEventProps) => void,
     onManageCompetition:(competition_id:string) => void,
@@ -26,7 +26,7 @@ type CompetitionModuleProps = {
     onViewCompetitionSeason:(cs:CompetitionSeasonProps) => void
 }
 
-const CompetitionModule = ({ competition_id, player_id, onManageCompetition, onRequestAuthentication, onShareCompetition, onClose, onViewCompetitionSeason }:CompetitionModuleProps) => {
+const CompetitionModule = ({ competition_id, player_id, confirm_padding, onManageCompetition, onRequestAuthentication, onShareCompetition, onClose, onViewCompetitionSeason }:CompetitionModuleProps) => {
     const [ viewing_leader, setViewingLeader ] = useState<PublicPlayerProps|undefined>();
     const [ show_full_leaderboard, setShowFullLeaderboard ] = useState(false);
     const [ module_size, setModuleSize ] = useState({ width:0, height:0 });
@@ -455,11 +455,7 @@ const CompetitionModule = ({ competition_id, player_id, onManageCompetition, onR
             :<></>}
             {show_full_leaderboard ?
             <View style={{ position:'absolute', bottom:0, left:0, right:0, top:0 }}>
-                <Spring
-                    slide='vertical'
-                    to={0}
-                    from={500}
-                >
+                
                     <CompetitionLeaderboard 
                         competition={competition}
                         competition_type={competition_type}
@@ -471,38 +467,22 @@ const CompetitionModule = ({ competition_id, player_id, onManageCompetition, onR
                         onSeeFull={() => setShowFullLeaderboard(!show_full_leaderboard)}
                         viewer_id={player_id}
                     />    
-                </Spring>
-            </View>
+xxw            </View>
             :<></>}
-            {nav_out.visible ?
-            <View style={{ position:'absolute', justifyContent:'center', alignItems:'center', bottom:0, left:0, right:0, top:0, backgroundColor:Colors.shades.black_faded }}>
-                <Spring
-                    slide='vertical'
-                    to={0}
-                    from={500}
-                >
-                    <NavOutPrompt
-                        title={nav_out.title}
-                        body={nav_out.body}
-                        image_url={nav_out.image_url}
-                        hide_accept={true}
-                        code_details={{}}
-                        max_width={module_size.width * 0.75}
-                        cancel_title={nav_out.cancel_title}
-                        onCancel={() => setNavOut({ ...nav_out, visible:false })}
-                        onAccept={() => setNavOut({ ...nav_out, visible:false })}
-                    />
-                </Spring>
+            <View style={{ position:'absolute' }}>
+                <ConfirmationModal
+                    visible={nav_out.visible}
+                    title={nav_out.title}
+                    padding_bottom={confirm_padding}
+                    confirm_title={'Edit My Picks'}
+                    description={nav_out.body}
+                    image={competition.image?.url}
+                    onConfirm={() => setNavOut({ ...nav_out, visible:false })}
+                />
             </View>
-            :<></>}
             {draft_player_pick?.draft_pick ?
             <View 
                 style={{ position:'absolute', top:0, right:0, left:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end', alignItems:'center' }}>
-            <Spring
-                slide='vertical'
-                to={0}
-                from={200}
-            >
                 <WagerPickForm
                     event_start={draft_player_pick.event_start ?? ''}
                     event_title={draft_player_pick.event_title ?? ''}
@@ -513,7 +493,6 @@ const CompetitionModule = ({ competition_id, player_id, onManageCompetition, onR
                     onCancel={() => setDraftPlayerPick({})}
                     onSubmit={(pp) => handleWagerSubmit(pp)}
                 />
-                </Spring>
             </View>
             :<></>}
             <Modal
@@ -540,11 +519,7 @@ const CompetitionModule = ({ competition_id, player_id, onManageCompetition, onR
             {viewing_leader ?
             <View 
                 style={{ position:'absolute', top:0, right:0, left:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'flex-end', alignItems:'center' }}>
-            <Spring
-                slide='vertical'
-                to={0}
-                from={200}
-            >
+
                 <LeaderPicks
                     competition={competition}
                     leader={viewing_leader}
@@ -561,7 +536,6 @@ const CompetitionModule = ({ competition_id, player_id, onManageCompetition, onR
                     width={module_size.width}
                     onClose={() => setViewingLeader(undefined)}
                 />
-                </Spring>
             </View>
             :<></>}
             {competition.status == 'inactive' ?

package/src/Components/ConfirmationModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, View } from "react-native"
+import { Image, Modal, View } from "react-native"
 import { view_styles } from '../constants/styles';
 import Text from './Text';
 import Button from './Button';
@@ -10,11 +10,15 @@ type ConfirmationModalProps = {
     title?:string,
     description?:string,
     confirm_title?:string,
+    padding_bottom?:number,
     cancel_title?:string,
-    onCancel: () => void,
+    image?:string,
+    onCancel?: () => void,
     onConfirm: () => void
 }
-const ConfirmationModal = ({ visible, title, description, confirm_title, cancel_title, onCancel, onConfirm }:ConfirmationModalProps) => {
+const ConfirmationModal = ({ visible, title, padding_bottom, image, description, confirm_title, cancel_title, onCancel, onConfirm }:ConfirmationModalProps) => {
+
+    
 
     return (
         <Modal 
@@ -22,15 +26,23 @@ const ConfirmationModal = ({ visible, title, description, confirm_title, cancel_
             animationType='slide'
             transparent
             style={{ flex:1 }}>
-            <View style={{ flex:1, justifyContent:'flex-end', backgroundColor:Colors.shades.black_faded }}>
+            <View style={{ flex:1, justifyContent:'flex-end', backgroundColor:Colors.shades.black_faded, paddingBottom:padding_bottom }}>
                 <View style={{ ...view_styles.section }}>
                     <View style={{ ...view_styles.section_header, padding:20 }}>
                         <Text theme='header'>{title ?? 'Are you sure?'}</Text>
                     </View>
                     <View style={{ ...view_styles.section_body, minHeight:100 }}>
+                        {image?
+                        <Image
+                            source={{ uri: image }}
+                            style={{ width:200, height:200 , marginBottom: 10, alignSelf:'center'}}
+                            resizeMode='cover'
+                        />
+                        :<></>}
                         <Text size={14} color={Colors.brand.midnight} textAlign='center' weight='semibold'>{description}</Text>
                     </View>
                     <View style={{ ...view_styles.section_footer }}>
+                        {onCancel?
                         <Button
                             title={cancel_title ?? 'CANCEL'}
                             style={{ flex:1 }}
@@ -39,6 +51,7 @@ const ConfirmationModal = ({ visible, title, description, confirm_title, cancel_
                             backgroundColor={Colors.utility.error}
                             onPress={() => onCancel()}
                         />
+                        :<></>}
                         <Button
                             title={confirm_title ?? 'CONFIRM'}
                             style={{ flex:2, marginLeft:5 }}