be-components 3.4.2 → 3.4.3

package/lib/module/Engage/index.js

@@ -1,10 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator, FlatList, ScrollView } from 'react-native';
-import Colors from '../constants/colors';
+import { ActivityIndicator, FlatList, KeyboardAvoidingView, Modal, Platform } from 'react-native';
 import { EngageApi, EngageHelpers } from './api';
 import CompetitionCard from './components/CompetitionCard';
-import { view_styles } from '../constants/styles';
-import { Button, Icons, Text } from '../Components';
+import { Icons, Toggle } from '../Components';
 import SquaresCompetitionCard from './components/SquaresCompetitionCard';
 import BracketCompetitionCard from './components/BracketCompetitionCard';
 import moment from 'moment-mini';
@@ -12,7 +10,11 @@ import SocketManager from '../Socket';
 import SeasonCard from './components/SeasonCard';
 import EngageHeader from './components/EngageHeader';
 import PrivateCodePrompt from './components/PrivateCodePrompt';
+import { Button, Text, View } from '../Components/Themed';
+import { useColors } from '../constants/useColors';
+const engage_sections = ['header', 'toggle', 'private', 'engagements'];
 const EngageModule = ({
+  insets,
   onSelectBracketCompetition,
   onSelectCompetition,
   onSelectSquaresCompetition,
@@ -63,6 +65,7 @@ const EngageModule = ({
     companies,
     players
   } = module_data;
+  const Colors = useColors();
   useEffect(() => {
     EngageApi.setEnvironment();
     getDataFromServer();
@@ -116,7 +119,12 @@ const EngageModule = ({
     const admin = players.find(p => p.player_id == data.item.admin_id);
     const company = companies.find(c => c.company_id == data.item.company_id);
     const event = events.find(e => e.event_id == data.item.event_id);
-    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(SquaresCompetitionCard, {
+    return /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        margin: 10
+      }
+    }, /*#__PURE__*/React.createElement(SquaresCompetitionCard, {
       squares_competition: data.item,
       company: company,
       admin: admin,
@@ -133,7 +141,12 @@ const EngageModule = ({
     if (!competition_result_type) {
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
-    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(BracketCompetitionCard, {
+    return /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        margin: 10
+      }
+    }, /*#__PURE__*/React.createElement(BracketCompetitionCard, {
       bracket_competition: data.item,
       company: company,
       competition_result_type: competition_result_type,
@@ -159,7 +172,12 @@ const EngageModule = ({
     if (!competition_type || !competition_result_type) {
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
-    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(CompetitionCard, {
+    return /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        margin: 10
+      }
+    }, /*#__PURE__*/React.createElement(CompetitionCard, {
       competition: data.item,
       company: company,
       competition_type: competition_type,
@@ -169,29 +187,216 @@ const EngageModule = ({
       onCompetitionSelect: c => onSelectCompetition(c)
     }));
   };
-  if (loading) {
-    return /*#__PURE__*/React.createElement(View, {
-      style: {
-        flex: 1,
-        backgroundColor: Colors.shades.white
-      }
-    }, /*#__PURE__*/React.createElement(ActivityIndicator, {
-      style: {
-        padding: 20,
-        alignSelf: 'center'
-      },
-      size: "large",
-      color: Colors.brand.midnight
-    }));
-  }
-  return /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      backgroundColor: Colors.shades.white
+  const renderSections = data => {
+    switch (data.item) {
+      case 'header':
+        return /*#__PURE__*/React.createElement(EngageHeader, {
+          companies: companies,
+          width: module_size.width,
+          onManage: onManage,
+          onEvent: onEvent,
+          onSelectCompany: onSelectCompany
+        });
+      case 'toggle':
+        return /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            margin: 10
+          }
+        }, /*#__PURE__*/React.createElement(Toggle, {
+          background_color: Colors.views.header,
+          inactive_title_color: Colors.text.h1,
+          options: [{
+            key: 'competitions',
+            label: 'Competitions'
+          }, {
+            key: 'brackets',
+            label: 'Brackets'
+          }, {
+            key: 'squares',
+            label: 'Squares'
+          }],
+          selected_option: active_tab,
+          onSelectOption: option => setActiveTab(option)
+        }));
+      case 'private':
+        return /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            padding: 10,
+            marginBottom: 10,
+            flexDirection: 'row',
+            alignItems: 'center'
+          }
+        }, /*#__PURE__*/React.createElement(Icons.EyeOffIcon, {
+          size: 18,
+          color: Colors.text.h1
+        }), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            marginLeft: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Find Private"), /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "Did you receive a private code? Enter it here.")), /*#__PURE__*/React.createElement(Button, {
+          title: "ENTER PRIVATE CODE",
+          type: "text",
+          onPress: () => setShowCodePrompt(true)
+        }));
+      case 'engagements':
+        return /*#__PURE__*/React.createElement(View, {
+          transparent: true
+        }, active_tab == 'competitions' ? /*#__PURE__*/React.createElement(View, {
+          transparent: true
+        }, competition_seasons.length > 0 ? /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            marginTop: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Public Seasons"), /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "Seasons are multi-competition contests. Payouts are split between each competition and the season long winners.")), onCreateSeason ? /*#__PURE__*/React.createElement(Button, {
+          title: "NEW",
+          type: "success",
+          onPress: () => onCreateSeason()
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(FlatList, {
+          data: competition_seasons.sort((a, b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()),
+          horizontal: true,
+          keyExtractor: item => item.competition_season_id.toString(),
+          renderItem: renderSeasons
+        })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            marginBottom: 15,
+            marginTop: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Public Competitions"), /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "Below are available pick-em and wager based competitions.  All competitions are offered with 0 fees. All ticket sales are paid out to the winners!")), onCreateCompetition ? /*#__PURE__*/React.createElement(Button, {
+          title: "NEW",
+          type: "success",
+          onPress: () => onCreateCompetition()
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(FlatList, {
+          data: competitions.sort((a, b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()),
+          renderItem: renderCompetitions,
+          keyExtractor: item => item.competition_id.toString()
+        }))) : active_tab == 'squares' ? /*#__PURE__*/React.createElement(View, {
+          transparent: true
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            marginBottom: 15,
+            marginTop: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Public Auction Squares"), /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "Below are available squares competitions.  Bid on squares until the auction period ends.  Win $ and prizes when your square hits at the end of each quarter!")), onCreateSquares ? /*#__PURE__*/React.createElement(Button, {
+          title: "NEW",
+          type: "success",
+          onPress: () => onCreateSquares()
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(FlatList, {
+          data: squares_competitions.sort((a, b) => moment(a.begin_datetime).unix() - moment(b.begin_datetime).unix()),
+          renderItem: renderSquaresCompetitions,
+          keyExtractor: item => item.sq_comp_id.toString()
+        })) : active_tab == 'brackets' ? /*#__PURE__*/React.createElement(View, {
+          transparent: true
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            marginBottom: 15,
+            marginTop: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, "Public Bracket Competitions"), /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "Below are available bracket competitions.  All competitions are offered with 0 fees. All ticket sales are paid out to the winners!")), onCreateBracketCompetition ? /*#__PURE__*/React.createElement(Button, {
+          title: "NEW",
+          type: "success",
+          onPress: () => onCreateBracketCompetition()
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(FlatList, {
+          data: bracket_competitions.sort((a, b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()),
+          renderItem: renderBracketCompetitions,
+          keyExtractor: item => item.bracket_competition_id.toString()
+        })) : /*#__PURE__*/React.createElement(React.Fragment, null));
+      default:
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
-  }, /*#__PURE__*/React.createElement(ScrollView, {
+  };
+  return /*#__PURE__*/React.createElement(View, {
     style: {
-      flex: 1
+      flexGrow: 1
     },
     onLayout: ev => {
       const {
@@ -203,248 +408,32 @@ const EngageModule = ({
         height
       });
     }
-  }, /*#__PURE__*/React.createElement(EngageHeader, {
-    companies: companies,
-    width: module_size.width,
-    onManage: onManage,
-    onEvent: onEvent,
-    onSelectCompany: onSelectCompany
-  }), /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.body_row,
-      margin: 10,
-      backgroundColor: Colors.shades.white,
-      borderRadius: 22,
-      borderWidth: 4,
-      borderColor: Colors.shades.shade100
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
-    title: "COMPETITIONS",
-    title_color: active_tab == 'competitions' ? Colors.shades.white : Colors.brand.midnight,
-    title_weight: active_tab == 'competitions' ? 'bold' : 'regular',
-    padding: 15,
-    title_size: 12,
-    style: {
-      flex: 1
-    },
-    borderRadiusOverride: {
-      borderTopLeftRadius: 22,
-      borderBottomLeftRadius: 22,
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    },
-    backgroundColor: active_tab == 'competitions' ? Colors.brand.midnight : Colors.shades.white,
-    onPress: () => setActiveTab('competitions')
-  }), /*#__PURE__*/React.createElement(Button, {
-    title: "SQUARES",
-    title_size: 12,
-    title_color: active_tab == 'squares' ? Colors.shades.white : Colors.brand.midnight,
-    title_weight: active_tab == 'squares' ? 'bold' : 'regular',
-    padding: 15,
-    style: {
-      flex: 1
-    },
-    borderRadius: 0,
-    backgroundColor: active_tab == 'squares' ? Colors.brand.midnight : Colors.shades.white,
-    onPress: () => setActiveTab('squares')
-  }), /*#__PURE__*/React.createElement(Button, {
-    title: "BRACKETS",
-    style: {
-      flex: 1
-    },
-    title_size: 12,
-    title_color: active_tab == 'brackets' ? Colors.shades.white : Colors.brand.midnight,
-    title_weight: active_tab == 'brackets' ? 'bold' : 'regular',
-    padding: 15,
-    borderRadiusOverride: {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0,
-      borderTopRightRadius: 22,
-      borderBottomRightRadius: 22
-    },
-    backgroundColor: active_tab == 'brackets' ? Colors.brand.midnight : Colors.shades.white,
-    onPress: () => setActiveTab('brackets')
-  })), /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_header,
-      backgroundColor: Colors.shades.shade600,
-      borderRadius: 0,
-      marginBottom: 10
-    }
-  }, /*#__PURE__*/React.createElement(Icons.EyeOffIcon, {
-    size: 18,
-    color: Colors.brand.midnight
-  }), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      marginLeft: 10
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header"
-  }, "Find Private"), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body"
-  }, "Did you receive a private code? Enter it here.")), /*#__PURE__*/React.createElement(Button, {
-    title: "ENTER PRIVATE CODE",
-    padding: 15,
-    title_color: Colors.shades.white,
-    backgroundColor: Colors.utility.success,
-    onPress: () => setShowCodePrompt(true)
-  })), active_tab == 'competitions' ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_body,
-      justifyContent: 'flex-start',
-      padding: 0
-    }
-  }, competition_seasons.length > 0 ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginTop: 10
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_header,
-      backgroundColor: Colors.shades.shade100,
-      borderRadius: 0,
-      marginBottom: 10
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header"
-  }, "Public Seasons"), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body"
-  }, "Seasons are multi-competition contests. Payouts are split between each competition and the season long winners.")), onCreateSeason ? /*#__PURE__*/React.createElement(Button, {
-    title: "NEW",
-    title_color: Colors.shades.white,
-    backgroundColor: Colors.utility.success,
-    onPress: () => onCreateSeason()
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(FlatList, {
-    data: competition_seasons.sort((a, b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()),
-    horizontal: true,
-    keyExtractor: item => item.competition_season_id.toString(),
-    renderItem: renderSeasons
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginBottom: 15,
-      marginTop: 10
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_header,
-      backgroundColor: Colors.shades.shade100,
-      borderRadius: 0
-    }
-  }, /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: engage_sections,
+    key: `engage_sections`,
+    keyExtractor: item => item,
+    renderItem: renderSections,
+    refreshing: loading,
+    onRefresh: () => getDataFromServer()
+  }), show_code_prompt ? /*#__PURE__*/React.createElement(Modal, {
+    transparent: true,
+    animationType: "slide",
     style: {
       flex: 1
     }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header"
-  }, "Public Competitions"), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body"
-  }, "Below are available pick-em and wager based competitions.  All competitions are offered with 0 fees. All ticket sales are paid out to the winners!")), onCreateCompetition ? /*#__PURE__*/React.createElement(Button, {
-    title: "NEW",
-    title_color: Colors.shades.white,
-    backgroundColor: Colors.utility.success,
-    onPress: () => onCreateCompetition()
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(FlatList, {
-    data: competitions.sort((a, b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()),
-    renderItem: renderCompetitions,
-    keyExtractor: item => item.competition_id.toString()
-  })) : active_tab == 'squares' ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_body,
-      padding: 0
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginBottom: 15,
-      marginTop: 10
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_header,
-      backgroundColor: Colors.shades.shade100,
-      borderRadius: 0
-    }
-  }, /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
     style: {
       flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header"
-  }, "Public Auction Squares"), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 3
     },
-    theme: "body"
-  }, "Below are available squares competitions.  Bid on squares until the auction period ends.  Win $ and prizes when your square hits at the end of each quarter!")), onCreateSquares ? /*#__PURE__*/React.createElement(Button, {
-    title: "NEW",
-    title_color: Colors.shades.white,
-    backgroundColor: Colors.utility.success,
-    onPress: () => onCreateSquares()
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(FlatList, {
-    data: squares_competitions.sort((a, b) => moment(a.begin_datetime).unix() - moment(b.begin_datetime).unix()),
-    renderItem: renderSquaresCompetitions,
-    keyExtractor: item => item.sq_comp_id.toString()
-  })) : active_tab == 'brackets' ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_body,
-      padding: 0
-    }
+    behavior: Platform.OS == 'ios' ? 'padding' : 'height'
   }, /*#__PURE__*/React.createElement(View, {
+    type: "blur",
     style: {
-      marginBottom: 15,
-      marginTop: 10
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.section_header,
-      backgroundColor: Colors.shades.shade100,
-      borderRadius: 0
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header"
-  }, "Public Bracket Competitions"), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body"
-  }, "Below are available bracket competitions.  All competitions are offered with 0 fees. All ticket sales are paid out to the winners!")), onCreateBracketCompetition ? /*#__PURE__*/React.createElement(Button, {
-    title: "NEW",
-    title_color: Colors.shades.white,
-    backgroundColor: Colors.utility.success,
-    onPress: () => onCreateBracketCompetition()
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(FlatList, {
-    data: bracket_competitions.sort((a, b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()),
-    renderItem: renderBracketCompetitions,
-    keyExtractor: item => item.bracket_competition_id.toString()
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null)), show_code_prompt ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
+      flex: 1,
       justifyContent: 'flex-end',
-      backgroundColor: Colors.shades.black_faded_heavy
+      paddingBottom: insets?.bottom
     }
   }, /*#__PURE__*/React.createElement(PrivateCodePrompt, {
-    width: module_size.width - 20,
     onFoundBracket: b => {
       onSelectBracketCompetition(b);
       setShowCodePrompt(false);
@@ -462,6 +451,20 @@ const EngageModule = ({
       setShowCodePrompt(false);
     },
     onClose: () => setShowCodePrompt(false)
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null), loading ? /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      alignItems: 'center',
+      padding: 20
+    }
+  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: "large",
+    color: Colors.text.h1
   })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(SocketManager, {
     onConnect: () => setSocketState({
       ...socket_state,