Introduces Stats page redesign

components/common/table.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from './app-text'
+
+import { Spacing, Typography } from '../../styles/redesign'
+
+const Table = ({ tableContent }) => {
+  return (
+    tableContent.map((rowContent, i) => <Row key={i} rowContent={rowContent} />)
+  )
+}
+
+Table.propTypes = {
+  tableContent: PropTypes.array.isRequired
+}
+
+const Row = ({ rowContent }) => {
+  return(
+    <View style={styles.row}>
+      <Cell content={rowContent[0]} isLeft />
+      <Cell content={rowContent[1]} />
+    </View>
+  )
+}
+
+Row.propTypes = {
+  rowContent: PropTypes.array.isRequired
+}
+
+const Cell = ({ content, isLeft }) => {
+  const styleContainer = isLeft ? styles.cellLeft : styles.cellRight
+  const styleText = isLeft ? styles.accentPurpleBig : styles.accentOrange
+  const numberOfLines = isLeft ? 1 : 2
+  const ellipsizeMode = isLeft ? 'clip' : 'tail'
+
+  return(
+    <View style={styleContainer}>
+      <AppText
+        numberOfLines={numberOfLines}
+        ellipsizeMode={ellipsizeMode}
+        style={styleText}
+      >
+        {content}
+      </AppText>
+    </View>
+  )
+}
+
+Cell.propTypes = {
+  content: PropTypes.node.isRequired,
+  isLeft: PropTypes.bool
+}
+
+const styles = StyleSheet.create({
+  accentOrange: {
+    ...Typography.accentOrange
+  },
+  accentPurpleBig: {
+    ...Typography.accentPurpleBig,
+    marginRight: Spacing.base
+  },
+  cellLeft: {
+    alignItems: 'flex-end',
+    flex: 5,
+    justifyContent: 'center'
+  },
+  cellRight: {
+    flex: 6,
+    justifyContent: 'center'
+  },
+  row: {
+    flexDirection: 'row',
+    marginBottom: Spacing.tiny
+  }
+})
+
+export default Table