From 338484d22b8458284137fc2efa82011a25cceadc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Thu, 25 May 2023 17:31:42 +0200 Subject: [PATCH 1/6] migrate OptionRow to PressableWithFeedback --- src/components/OptionRow.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index 280345bb8b83..209134cd365c 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -2,7 +2,7 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; -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'; @@ -19,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 */ @@ -146,7 +147,7 @@ class OptionRow extends Component { > {(hovered) => ( - (touchableRef = el)} onPress={(e) => { this.setState({isDisabled: true}); @@ -174,6 +175,8 @@ class OptionRow extends Component { this.props.isDisabled && styles.cursorDisabled, this.props.shouldHaveOptionSeparator && styles.borderTop, ]} + accessibilityLabel={this.props.option.text} + accessibilityRole="button" > @@ -246,7 +249,7 @@ class OptionRow extends Component { )} - + )} From 45904c50a8fbfe4361a20e07f78c6d8a328838e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Fri, 26 May 2023 10:16:22 +0200 Subject: [PATCH 2/6] fixed dimming --- src/components/OptionRow.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index 209134cd365c..61f4278374c6 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -163,7 +163,6 @@ class OptionRow extends Component { }); }} disabled={this.state.isDisabled} - activeOpacity={0.8} style={[ styles.flexRow, styles.alignItemsCenter, @@ -177,6 +176,9 @@ class OptionRow extends Component { ]} accessibilityLabel={this.props.option.text} accessibilityRole="button" + // disable hover dim for switch + hoverDimmingValue={1} + pressDimmingValue={0.8} > From 55e9f715d30bf7322b860efc1a2bc2471e850582 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Mon, 29 May 2023 11:55:18 +0200 Subject: [PATCH 3/6] removed comment --- src/components/OptionRow.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index 61f4278374c6..cfc6c8b50fc3 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -176,7 +176,6 @@ class OptionRow extends Component { ]} accessibilityLabel={this.props.option.text} accessibilityRole="button" - // disable hover dim for switch hoverDimmingValue={1} pressDimmingValue={0.8} > From bc874000bf89c5d65ef741374f2d178729e1cff8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Wed, 31 May 2023 09:57:14 +0200 Subject: [PATCH 4/6] review changes --- src/components/OptionRow.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index cfc6c8b50fc3..7142a25285dc 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -20,6 +20,7 @@ import OfflineWithFeedback from './OfflineWithFeedback'; import CONST from '../CONST'; import * as ReportUtils from '../libs/ReportUtils'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; +import variables from '../styles/variables'; const propTypes = { /** Style for hovered state */ @@ -170,14 +171,13 @@ class OptionRow extends Component { 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} - pressDimmingValue={0.8} + hoverStyle={this.props.hoverStyle} + pressDimmingValue={variables.pressDimValue} > From 0d2d2c12f2c3631173bde2c348addb95de5a3e0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Wed, 31 May 2023 11:00:37 +0200 Subject: [PATCH 5/6] removed unnecessary changes --- src/components/OptionRow.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index 7142a25285dc..0aa08c7c43bd 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -20,7 +20,6 @@ import OfflineWithFeedback from './OfflineWithFeedback'; import CONST from '../CONST'; import * as ReportUtils from '../libs/ReportUtils'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; -import variables from '../styles/variables'; const propTypes = { /** Style for hovered state */ @@ -177,7 +176,6 @@ class OptionRow extends Component { accessibilityRole="button" hoverDimmingValue={1} hoverStyle={this.props.hoverStyle} - pressDimmingValue={variables.pressDimValue} > From 36c0e4b5fc45a3b3d918f538f603c84ec6bf570b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Wed, 31 May 2023 12:48:14 +0200 Subject: [PATCH 6/6] fixed styling on focus --- src/components/OptionRow.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index 0aa08c7c43bd..7aab983bff23 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -176,6 +176,7 @@ class OptionRow extends Component { accessibilityRole="button" hoverDimmingValue={1} hoverStyle={this.props.hoverStyle} + focusStyle={this.props.hoverStyle} >