Update styling & add onClose to StatsTable to make it modal

components/common/StatsTable.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import { FlatList, StyleSheet, View } from 'react-native'
+import { Dimensions, FlatList, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 
 import AppText from './app-text'
+import CloseIcon from './close-icon'
 
 import cycleModule from '../../lib/cycle'
-import { Spacing, Typography, Colors } from '../../styles'
+import { Sizes, Spacing, Typography, Colors } from '../../styles'
 import { humanizeDate } from '../helpers/format-date'
 
 const Item = ({ data }) => {
@@ -35,26 +36,35 @@ Item.propTypes = {
   data: PropTypes.object.isRequired,
 }
 
-const StatsTable = () => {
+const StatsTable = ({ onClose }) => {
   const renderItem = ({ item }) => <Item data={item} />
   const data = cycleModule().getStats()
 
   if (!data || data.length === 0) return false
 
   return (
-    <FlatList
-      data={data}
-      renderItem={renderItem}
-      keyExtractor={(item) => item.date}
-      ItemSeparatorComponent={ItemDivider}
-      ListHeaderComponent={FlatListHeader}
-      ListHeaderComponentStyle={styles.headerDivider}
-      stickyHeaderIndices={[0]}
-      contentContainerStyle={styles.container}
-    />
+    <View style={styles.modalContainer}>
+      <View style={styles.headerContainer}>
+        <CloseIcon onClose={onClose} />
+      </View>
+      <FlatList
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.date}
+        ItemSeparatorComponent={ItemDivider}
+        ListHeaderComponent={FlatListHeader}
+        ListHeaderComponentStyle={styles.headerDivider}
+        stickyHeaderIndices={[0]}
+        contentContainerStyle={styles.container}
+      />
+    </View>
   )
 }
 
+StatsTable.propTypes = {
+  onClose: PropTypes.func,
+}
+
 const ItemDivider = () => <View style={styles.divider} />
 
 const FlatListHeader = () => (
@@ -72,6 +82,17 @@ const FlatListHeader = () => (
 )
 
 const styles = StyleSheet.create({
+  accentCell: {
+    flex: 3,
+    justifyContent: 'center',
+  },
+  cell: {
+    flex: 2,
+    justifyContent: 'center',
+  },
+  container: {
+    paddingHorizontal: Spacing.base,
+  },
   divider: {
     height: 1,
     width: '100%',
@@ -81,27 +102,31 @@ const styles = StyleSheet.create({
     ...Typography.accentOrange,
     paddingVertical: Spacing.small,
   },
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingTop: Spacing.base,
+    paddingRight: Spacing.base,
+  },
   headerDivider: {
     borderBottomColor: Colors.purple,
     borderBottomWidth: 2,
   },
+  modalContainer: {
+    alignSelf: 'center',
+    backgroundColor: Colors.turquoiseLight,
+    marginTop: Sizes.huge * 2,
+    maxHeight: Dimensions.get('window').height * 0.7,
+    minHeight: '40%',
+    position: 'absolute',
+    width: '100%',
+  },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingVertical: Spacing.tiny,
     backgroundColor: Colors.turquoiseLight,
   },
-  cell: {
-    flex: 2,
-    justifyContent: 'center',
-  },
-  accentCell: {
-    flex: 3,
-    justifyContent: 'center',
-  },
-  container: {
-    paddingHorizontal: Spacing.base,
-  },
 })
 
 export default StatsTable