Merge pull request #19612 from Skalakid/17013-migrate-OptionRow

17013 - migrate OptionRow to PressableWithFeedback
Expensify · Jun 7, 2023 · a292aa9 · a292aa9
2 parents 2245448 + d73c965
commit a292aa9
Showing 1 changed file with 12 additions and 10 deletions.
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
@@ -2,8 +2,7 @@ import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-// eslint-disable-next-line no-restricted-imports
-import {TouchableOpacity, View, StyleSheet, InteractionManager} from 'react-native';
+import {View, StyleSheet, InteractionManager} from 'react-native';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
 import optionPropTypes from './optionPropTypes';
@@ -20,6 +19,7 @@ import SubscriptAvatar from './SubscriptAvatar';
 import OfflineWithFeedback from './OfflineWithFeedback';
 import CONST from '../CONST';
 import * as ReportUtils from '../libs/ReportUtils';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
 const propTypes = {
     /** Style for hovered state */
@@ -115,7 +115,7 @@ class OptionRow extends Component {
     }
 
     render() {
-        let touchableRef = null;
+        let pressableRef = null;
         const textStyle = this.props.optionIsFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
         const textUnreadStyle = this.props.boldStyle || this.props.option.boldStyle ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
         const displayNameStyle = StyleUtils.combineStyles(styles.optionDisplayName, textUnreadStyle, this.props.style, styles.pre);
@@ -147,14 +147,14 @@ class OptionRow extends Component {
             >
                 <Hoverable>
                     {(hovered) => (
-                        <TouchableOpacity
-                            ref={(el) => (touchableRef = el)}
+                        <PressableWithFeedback
+                            ref={(el) => (pressableRef = el)}
                             onPress={(e) => {
                                 this.setState({isDisabled: true});
                                 if (e) {
                                     e.preventDefault();
                                 }
-                                let result = this.props.onSelectRow(this.props.option, touchableRef);
+                                let result = this.props.onSelectRow(this.props.option, pressableRef);
                                 if (!(result instanceof Promise)) {
                                     result = Promise.resolve();
                                 }
@@ -163,18 +163,20 @@ class OptionRow extends Component {
                                 });
                             }}
                             disabled={this.state.isDisabled}
-                            activeOpacity={0.8}
                             style={[
                                 styles.flexRow,
                                 styles.alignItemsCenter,
                                 styles.justifyContentBetween,
                                 styles.sidebarLink,
                                 this.props.shouldDisableRowInnerPadding ? null : styles.sidebarLinkInner,
                                 this.props.optionIsFocused ? styles.sidebarLinkActive : null,
-                                hovered && !this.props.optionIsFocused ? this.props.hoverStyle : null,
-                                this.props.isDisabled && styles.cursorDisabled,
                                 this.props.shouldHaveOptionSeparator && styles.borderTop,
                             ]}
+                            accessibilityLabel={this.props.option.text}
+                            accessibilityRole="button"
+                            hoverDimmingValue={1}
+                            hoverStyle={this.props.hoverStyle}
+                            focusStyle={this.props.hoverStyle}
                         >
                             <View style={sidebarInnerRowStyle}>
                                 <View style={[styles.flexRow, styles.alignItemsCenter]}>
@@ -249,7 +251,7 @@ class OptionRow extends Component {
                                     </View>
                                 </View>
                             )}
-                        </TouchableOpacity>
+                        </PressableWithFeedback>
                     )}
                 </Hoverable>
             </OfflineWithFeedback>