Merge pull request #8016 from Expensify/marcaaron-optionRowStory

[No QA] Code cleanup / Add story for OptionRow

.storybook/preview.js

@@ -23,7 +23,15 @@ const decorators = [
     ),
 ];
 
+const parameters = {
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+        },
+    },
+};
+
 export {
-    // eslint-disable-next-line import/prefer-default-export
     decorators,
+    parameters,
 };

src/components/IOUConfirmationList.js

@@ -364,7 +364,7 @@ class IOUConfirmationList extends Component {
                         canSelectMultipleOptions={this.props.hasMultipleParticipants}
                         selectedOptions={this.getSelectedOptions()}
                         onSelectRow={toggleOption}
-                        disableRowInteractivity={!this.props.isGroupSplit}
+                        isDisabled={!this.props.isGroupSplit}
                         optionHoveredStyle={hoverStyle}
                     />
                 </ScrollView>

src/pages/home/sidebar/OptionRow.js → src/components/OptionRow.js

@@ -8,21 +8,21 @@ import {
     StyleSheet,
 } from 'react-native';
 import Str from 'expensify-common/lib/str';
-import styles from '../../../styles/styles';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import {optionPropTypes} from './optionPropTypes';
-import Icon from '../../../components/Icon';
-import * as Expensicons from '../../../components/Icon/Expensicons';
-import MultipleAvatars from '../../../components/MultipleAvatars';
-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 Text from '../../../components/Text';
-import SelectCircle from '../../../components/SelectCircle';
-import SubscriptAvatar from '../../../components/SubscriptAvatar';
-import CONST from '../../../CONST';
+import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
+import optionPropTypes from './optionPropTypes';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import MultipleAvatars from './MultipleAvatars';
+import Hoverable from './Hoverable';
+import DisplayNames from './DisplayNames';
+import IOUBadge from './IOUBadge';
+import colors from '../styles/colors';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import Text from './Text';
+import SelectCircle from './SelectCircle';
+import SubscriptAvatar from './SubscriptAvatar';
+import CONST from '../CONST';
 
 const propTypes = {
     /** Background Color of the Option Row */
@@ -62,9 +62,6 @@ const propTypes = {
     /** Whether this option should be disabled */
     isDisabled: PropTypes.bool,
 
-    /** Whether to disable the interactivity of this row */
-    disableRowInteractivity: PropTypes.bool,
-
     ...withLocalizePropTypes,
 };
 
@@ -77,10 +74,9 @@ const defaultProps = {
     forceTextUnreadStyle: false,
     showTitleTooltip: false,
     mode: 'default',
-    onSelectRow: null,
+    onSelectRow: () => {},
     isDisabled: false,
     optionIsFocused: false,
-    disableRowInteractivity: false,
 };
 
 const OptionRow = (props) => {
@@ -143,7 +139,7 @@ const OptionRow = (props) => {
                         e.preventDefault();
                         props.onSelectRow(props.option, touchableRef);
                     }}
-                    disabled={props.disableRowInteractivity}
+                    disabled={props.isDisabled}
                     activeOpacity={0.8}
                     style={[
                         styles.flexRow,
@@ -295,5 +291,21 @@ export default withLocalize(memo(OptionRow, (prevProps, nextProps) => {
         return false;
     }
 
+    if (prevProps.showSelectedState !== nextProps.showSelectedState) {
+        return false;
+    }
+
+    if (prevProps.isDisabled !== nextProps.isDisabled) {
+        return false;
+    }
+
+    if (prevProps.showTitleTooltip !== nextProps.showTitleTooltip) {
+        return false;
+    }
+
+    if (prevProps.backgroundColor !== nextProps.backgroundColor) {
+        return false;
+    }
+
     return true;
 }));

src/components/OptionsList/BaseOptionsList.js

@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Log from '../../libs/Log';
 import styles from '../../styles/styles';
-import OptionRow from '../../pages/home/sidebar/OptionRow';
+import OptionRow from '../OptionRow';
 import SectionList from '../SectionList';
 import Text from '../Text';
 import {propTypes as optionsListPropTypes, defaultProps as optionsListDefaultProps} from './optionsListPropTypes';
@@ -111,7 +111,7 @@ class BaseOptionsList extends Component {
                 showSelectedState={this.props.canSelectMultipleOptions}
                 hideAdditionalOptionStates={this.props.hideAdditionalOptionStates}
                 forceTextUnreadStyle={this.props.forceTextUnreadStyle}
-                disableRowInteractivity={this.props.disableRowInteractivity}
+                isDisabled={this.props.isDisabled}
             />
         );
     }

src/components/OptionsList/optionsListPropTypes.js

@@ -74,7 +74,7 @@ const propTypes = {
     optionMode: PropTypes.oneOf(_.values(CONST.OPTION_MODE)),
 
     /** Whether to disable the interactivity of the list's option row(s) */
-    disableRowInteractivity: PropTypes.bool,
+    isDisabled: PropTypes.bool,
 
     /** Callback to execute when the SectionList lays out */
     onLayout: PropTypes.func,
@@ -98,7 +98,7 @@ const defaultProps = {
     innerRef: null,
     showTitleTooltip: false,
     optionMode: undefined,
-    disableRowInteractivity: false,
+    isDisabled: false,
     onLayout: undefined,
 };
 

src/components/optionPropTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import participantPropTypes from './participantPropTypes';
 
 export default PropTypes.shape({
     // Text to display
@@ -33,4 +34,19 @@ export default PropTypes.shape({
 
     // Whether the report corresponds to a chat room
     isChatRoom: PropTypes.bool,
+
+    // Whether the option has an outstanding IOU
+    hasOutstandingIOU: PropTypes.bool,
+
+    // List of participants of the report
+    participantsList: PropTypes.arrayOf(participantPropTypes),
+
+    // Descriptive text to be displayed besides selection element
+    descriptiveText: PropTypes.string,
+
+    // The type of option we have e.g. user or report
+    type: PropTypes.string,
+
+    // Text to show for tooltip
+    tooltipText: PropTypes.string,
 });

src/components/participantPropTypes.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.shape({
+    // Primary login of participant
+    login: PropTypes.string,
+
+    // Display Name of participant
+    displayName: PropTypes.string,
+
+    // Avatar url of participant
+    avatar: PropTypes.string,
+
+    /** First Name of the participant */
+    firstName: PropTypes.string,
+});

src/pages/ReportDetailsPage.js

@@ -16,7 +16,7 @@ import styles from '../styles/styles';
 import DisplayNames from '../components/DisplayNames';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
 import * as ReportUtils from '../libs/reportUtils';
-import {participantPropTypes} from './home/sidebar/optionPropTypes';
+import participantPropTypes from '../components/participantPropTypes';
 import * as Expensicons from '../components/Icon/Expensicons';
 import ROUTES from '../ROUTES';
 import MenuItem from '../components/MenuItem';

src/pages/home/HeaderView.js

@@ -19,7 +19,7 @@ import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import DisplayNames from '../../components/DisplayNames';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
-import {participantPropTypes} from './sidebar/optionPropTypes';
+import participantPropTypes from '../../components/participantPropTypes';
 import VideoChatButtonAndMenu from '../../components/VideoChatButtonAndMenu';
 import IOUBadge from '../../components/IOUBadge';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';

src/pages/home/report/ParticipantLocalTime.js

@@ -6,7 +6,7 @@ import lodashGet from 'lodash/get';
 import Str from 'expensify-common/lib/str';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import {participantPropTypes} from '../sidebar/optionPropTypes';
+import participantPropTypes from '../../../components/participantPropTypes';
 import Text from '../../../components/Text';
 import Timers from '../../../libs/Timers';
 import CONST from '../../../CONST';

src/pages/home/report/ReportActionCompose.js

@@ -35,7 +35,7 @@ import reportActionPropTypes from './reportActionPropTypes';
 import * as ReportUtils from '../../../libs/reportUtils';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
 import Text from '../../../components/Text';
-import {participantPropTypes} from '../sidebar/optionPropTypes';
+import participantPropTypes from '../../../components/participantPropTypes';
 import ParticipantLocalTime from './ParticipantLocalTime';
 import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider';
 import DateUtils from '../../../libs/DateUtils';

src/pages/home/report/ReportActionsView.js

@@ -36,7 +36,7 @@ import Performance from '../../../libs/Performance';
 import * as ReportUtils from '../../../libs/reportUtils';
 import ONYXKEYS from '../../../ONYXKEYS';
 import {withPersonalDetails} from '../../../components/OnyxProvider';
-import {participantPropTypes} from '../sidebar/optionPropTypes';
+import participantPropTypes from '../../../components/participantPropTypes';
 import EmojiPicker from '../../../components/EmojiPicker';
 import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction';
 

src/pages/home/sidebar/SidebarLinks.js

@@ -20,7 +20,7 @@ import * as OptionsListUtils from '../../../libs/OptionsListUtils';
 import KeyboardSpacer from '../../../components/KeyboardSpacer';
 import Tooltip from '../../../components/Tooltip';
 import CONST from '../../../CONST';
-import {participantPropTypes} from './optionPropTypes';
+import participantPropTypes from '../../../components/participantPropTypes';
 import themeColors from '../../../styles/themes/default';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as App from '../../../libs/actions/App';

src/pages/iou/IOUCurrencySelection.js

@@ -8,7 +8,7 @@ import * as PersonalDetails from '../../libs/actions/PersonalDetails';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import Text from '../../components/Text';
-import OptionRow from '../home/sidebar/OptionRow';
+import OptionRow from '../../components/OptionRow';
 import TextInput from '../../components/TextInput';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';

src/pages/workspace/WorkspaceMembersPage.js

@@ -24,7 +24,7 @@ import ConfirmModal from '../../components/ConfirmModal';
 import personalDetailsPropType from '../personalDetailsPropType';
 import Permissions from '../../libs/Permissions';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
-import OptionRow from '../home/sidebar/OptionRow';
+import OptionRow from '../../components/OptionRow';
 import CheckboxWithTooltip from '../../components/CheckboxWithTooltip';
 import Hoverable from '../../components/Hoverable';
 import withFullPolicy, {fullPolicyPropTypes, fullPolicyDefaultProps} from './withFullPolicy';
@@ -215,7 +215,7 @@ class WorkspaceMembersPage extends React.Component {
                     <View style={styles.flex1}>
                         <OptionRow
                             forceTextUnreadStyle
-                            disableRowInteractivity
+                            isDisabled
                             option={{
                                 text: Str.removeSMSDomain(item.displayName),
                                 alternateText: Str.removeSMSDomain(item.login),

src/stories/OptionRow.stories.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import OptionRow from '../components/OptionRow';
+import * as Expensicons from '../components/Icon/Expensicons';
+
+/**
+ * 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
+ */
+export default {
+    title: 'Components/OptionRow',
+    component: OptionRow,
+    argTypes: {
+        mode: {
+            options: ['default', 'compact'],
+            control: {type: 'radio'},
+        },
+    },
+    args: {
+        mode: 'default',
+        optionIsFocused: false,
+        showSelectedState: false,
+        isSelected: false,
+        hideAdditionalOptionStates: false,
+        forceTextUnreadStyle: false,
+        showTitleTooltip: false,
+        isDisabled: false,
+        backgroundColor: 'white',
+        option: {
+            isUnread: false,
+            text: 'Test Option',
+            alternateText: 'Alternate text',
+            icons: [Expensicons.ActiveRoomAvatar],
+            login: 'test@expensify.com',
+            reportID: null,
+            hasDraftComment: false,
+            isPinned: false,
+            isChatRoom: false,
+            participantsList: [],
+            descriptiveText: '',
+            tooltipText: 'Tooltip text',
+        },
+    },
+};
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template = args => <OptionRow {...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({});
+
+export {
+    Default,
+};