Merge pull request #6791 from Expensify/marcaaron-selectCircle

Add SelectCircle replace usage in OptionsRow and makes MenuItem selectable

src/components/MenuItem.js

@@ -13,6 +13,7 @@ import Avatar from './Avatar';
 import Badge from './Badge';
 import CONST from '../CONST';
 import menuItemPropTypes from './menuItemPropTypes';
+import SelectCircle from './SelectCircle';
 
 const propTypes = {
     ...menuItemPropTypes,
@@ -21,6 +22,7 @@ const propTypes = {
 const defaultProps = {
     badgeText: undefined,
     shouldShowRightIcon: false,
+    shouldShowSelectedState: false,
     wrapperStyle: [],
     success: false,
     icon: undefined,
@@ -32,6 +34,7 @@ const defaultProps = {
     iconFill: undefined,
     focused: false,
     disabled: false,
+    isSelected: false,
     subtitle: undefined,
     iconType: 'icon',
     onPress: () => {},
@@ -124,6 +127,7 @@ const MenuItem = props => (
                             />
                         </View>
                     )}
+                    {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />}
                 </View>
             </>
         )}

src/components/SelectCircle.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import themeColors from '../styles/themes/default';
+
+const propTypes = {
+    /** Should we show the checkmark inside the circle */
+    isChecked: PropTypes.bool,
+};
+
+const defaultProps = {
+    isChecked: false,
+};
+
+const SelectCircle = props => (
+    <View style={[styles.selectCircle, styles.alignSelfCenter]}>
+        {props.isChecked && (
+            <Icon src={Expensicons.Checkmark} fill={themeColors.iconSuccessFill} />
+        )}
+    </View>
+);
+
+SelectCircle.propTypes = propTypes;
+SelectCircle.defaultProps = defaultProps;
+SelectCircle.displayName = 'SelectCircle';
+
+export default SelectCircle;

src/components/menuItemPropTypes.js

@@ -28,6 +28,12 @@ const propTypes = {
     /** Boolean whether to display the right icon */
     shouldShowRightIcon: PropTypes.bool,
 
+    /** Should we make this selectable with a checkbox */
+    shouldShowSelectedState: PropTypes.bool,
+
+    /** Whether this item is selected */
+    isSelected: PropTypes.bool,
+
     /** A boolean flag that gives the icon a green fill if true */
     success: PropTypes.bool,
 

src/pages/home/sidebar/OptionRow.js

@@ -14,13 +14,13 @@ import {optionPropTypes} from './optionPropTypes';
 import Icon from '../../../components/Icon';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import MultipleAvatars from '../../../components/MultipleAvatars';
-import themeColors from '../../../styles/themes/default';
 import Hoverable from '../../../components/Hoverable';
 import DisplayNames from '../../../components/DisplayNames';
 import IOUBadge from '../../../components/IOUBadge';
 import colors from '../../../styles/colors';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import ExpensifyText from '../../../components/ExpensifyText';
+import SelectCircle from '../../../components/SelectCircle';
 
 const propTypes = {
     /** Background Color of the Option Row */
@@ -203,13 +203,7 @@ const OptionRow = (props) => {
                                     </ExpensifyText>
                                 </View>
                             ) : null}
-                            {props.showSelectedState && (
-                                <View style={[styles.selectCircle]}>
-                                    {props.isSelected && (
-                                        <Icon src={Expensicons.Checkmark} fill={themeColors.iconSuccessFill} />
-                                    )}
-                                </View>
-                            )}
+                            {props.showSelectedState && <SelectCircle isChecked={props.isSelected} />}
                         </View>
                     </View>
                     {!props.hideAdditionalOptionStates && (

src/stories/MenuItem.stories.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import MenuItem from '../components/MenuItem';
+import Chase from '../../assets/images/bankicons/chase.svg';
+import variables from '../styles/variables';
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+const story = {
+    title: 'Components/MenuItem',
+    component: MenuItem,
+};
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template = args => <MenuItem {...args} />;
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Default = Template.bind({});
+Default.args = {
+    title: 'Alberta Bobbeth Charleson',
+    description: 'Account ending in 1111',
+    shouldShowSelectedState: true,
+    isSelected: true,
+    icon: Chase,
+    iconHeight: variables.iconSizeExtraLarge,
+    iconWidth: variables.iconSizeExtraLarge,
+};
+
+export default story;
+export {
+    Default,
+};