New: Project Aphrodite

frontend/src/Components/Menu/SelectedMenuItem.js

@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import MenuItem from './MenuItem';
+import styles from './SelectedMenuItem.css';
+
+class SelectedMenuItem extends Component {
+
+  //
+  // Listeners
+
+  onPress = () => {
+    const {
+      name,
+      onPress
+    } = this.props;
+
+    onPress(name);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      children,
+      selectedIconName,
+      isSelected,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <MenuItem
+        {...otherProps}
+        onPress={this.onPress}
+      >
+        <div className={styles.item}>
+          {children}
+
+          <Icon
+            className={isSelected ? styles.isSelected : styles.isNotSelected}
+            name={selectedIconName}
+          />
+        </div>
+      </MenuItem>
+    );
+  }
+}
+
+SelectedMenuItem.propTypes = {
+  name: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  selectedIconName: PropTypes.object.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+  onPress: PropTypes.func.isRequired
+};
+
+SelectedMenuItem.defaultProps = {
+  selectedIconName: icons.CHECK
+};
+
+export default SelectedMenuItem;