Initial commit/

1 files changed, 77 insertions, 0 deletions

diff --git a/frontend/app/screens/menu/categoryMenu.js b/frontend/app/screens/menu/categoryMenu.js
new file mode 100644
index 0000000..6ed6400
--- /dev/null
+++ b/frontend/app/screens/menu/categoryMenu.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  TouchableHighlight,
+  View,
+  FlatList,
+  StyleSheet,
+} from 'react-native';
+import {
+  RkStyleSheet,
+  RkTheme,
+  RkText,
+} from 'react-native-ui-kitten';
+import NavigationType from '../../config/navigation/propTypes';
+
+export class CategoryMenu extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      title: PropTypes.string.isRequired,
+    })).isRequired,
+  };
+
+  onItemPressed = (item) => {
+    const url = item.action || item.id;
+    this.props.navigation.navigate(url);
+  };
+
+  extractItemKey = (item) => item.id;
+
+  renderItem = ({ item }) => (
+    <TouchableHighlight
+      style={styles.item}
+      underlayColor={RkTheme.current.colors.button.underlay}
+      activeOpacity={1}
+      onPress={() => this.onItemPressed(item)}>
+      <View>
+        <RkText>{item.title}</RkText>
+      </View>
+    </TouchableHighlight>
+  );
+
+  renderPlaceholder = () => (
+    <View style={styles.emptyContainer}>
+      <RkText rkType='light subtitle'>Coming Soon...</RkText>
+    </View>
+  );
+
+  renderList = () => (
+    <FlatList
+      style={styles.list}
+      data={this.props.items}
+      keyExtractor={this.extractItemKey}
+      renderItem={this.renderItem}
+    />
+  );
+
+  render = () => (this.props.items.length === 0 ? this.renderPlaceholder() : this.renderList());
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  item: {
+    paddingVertical: 32.5,
+    paddingHorizontal: 16.5,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.colors.border.base,
+  },
+  list: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  emptyContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.screen.base,
+  },
+}));