From ff2af31226604810777b63d99a2a8fb2b71572ec Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Wed, 15 Dec 2021 14:29:43 -1000 Subject: [PATCH 1/4] Add SelectCircle --- src/pages/home/sidebar/OptionRow.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js index 26cc11c936fac..32e7b2357e503 100644 --- a/src/pages/home/sidebar/OptionRow.js +++ b/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) => { ) : null} - {props.showSelectedState && ( - - {props.isSelected && ( - - )} - - )} + {props.showSelectedState && } {!props.hideAdditionalOptionStates && ( From a76ef0768150ea6fcc171266dcd72eae971e3666 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Wed, 15 Dec 2021 14:31:23 -1000 Subject: [PATCH 2/4] add SelectCircle --- src/components/SelectCircle.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/components/SelectCircle.js diff --git a/src/components/SelectCircle.js b/src/components/SelectCircle.js new file mode 100644 index 0000000000000..32577269849fc --- /dev/null +++ b/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 => ( + + {props.isChecked && ( + + )} + +); + +SelectCircle.propTypes = propTypes; +SelectCircle.defaultProps = defaultProps; +SelectCircle.displayName = 'SelectCircle'; + +export default SelectCircle; From 37191d4f41d2e0e272988f4537fb7d1647f27ca8 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Wed, 15 Dec 2021 14:34:39 -1000 Subject: [PATCH 3/4] remove alignSelfCenter --- src/components/SelectCircle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectCircle.js b/src/components/SelectCircle.js index 32577269849fc..4b89201c8942a 100644 --- a/src/components/SelectCircle.js +++ b/src/components/SelectCircle.js @@ -16,7 +16,7 @@ const defaultProps = { }; const SelectCircle = props => ( - + {props.isChecked && ( )} From f40e7e4015f107c48d18bbeeee0a491c47916357 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Wed, 15 Dec 2021 14:59:51 -1000 Subject: [PATCH 4/4] add stories --- src/components/MenuItem.js | 4 ++++ src/components/SelectCircle.js | 2 +- src/components/menuItemPropTypes.js | 6 +++++ src/stories/MenuItem.stories.js | 35 +++++++++++++++++++++++++++++ 4 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 src/stories/MenuItem.stories.js diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 63d30771cbe5c..02bacca49f9a4 100644 --- a/src/components/MenuItem.js +++ b/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 => ( /> )} + {props.shouldShowSelectedState && } )} diff --git a/src/components/SelectCircle.js b/src/components/SelectCircle.js index 4b89201c8942a..32577269849fc 100644 --- a/src/components/SelectCircle.js +++ b/src/components/SelectCircle.js @@ -16,7 +16,7 @@ const defaultProps = { }; const SelectCircle = props => ( - + {props.isChecked && ( )} diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js index 8a00a360d9107..0ad5a43498af4 100644 --- a/src/components/menuItemPropTypes.js +++ b/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, diff --git a/src/stories/MenuItem.stories.js b/src/stories/MenuItem.stories.js new file mode 100644 index 0000000000000..c32790316805f --- /dev/null +++ b/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 => ; + +// 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, +};