From 1838ebe7d7b5797e84e97cb29e1b9aeedc758447 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Thu, 15 Jun 2023 15:24:45 +0200 Subject: [PATCH 1/6] fixed issue with items staying higlighted --- src/components/OptionRow.js | 1 - src/components/Pressable/PressableWithFeedback.js | 10 ++++------ 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index 28ee50ccf8a1..0b74124af6e3 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -182,7 +182,6 @@ class OptionRow extends Component { accessibilityRole="button" hoverDimmingValue={1} hoverStyle={this.props.hoverStyle} - focusStyle={this.props.hoverStyle} > diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index 94f10a380bb9..211df1db0a36 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -66,17 +66,15 @@ const PressableWithFeedback = forwardRef((props, ref) => { }); }); }} + hoverStyle={props.hoverStyle} + pressStyle={props.pressStyle} + focusStyle={props.focusStyle} > {(state) => ( {_.isFunction(props.children) ? props.children(state) : props.children} From 52e449039159819291bd4a4ba905f83c43629953 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Fri, 16 Jun 2023 11:31:12 +0200 Subject: [PATCH 2/6] fixed bugs with styling after PressableWithFeedback structure change --- src/components/OpacityView.js | 8 +-- .../Pressable/PressableWithFeedback.js | 67 ++++++++++--------- 2 files changed, 36 insertions(+), 39 deletions(-) diff --git a/src/components/OpacityView.js b/src/components/OpacityView.js index c36c9257b4b0..5ae19afa4601 100644 --- a/src/components/OpacityView.js +++ b/src/components/OpacityView.js @@ -1,8 +1,6 @@ import React from 'react'; -import {View} from 'react-native'; import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import PropTypes from 'prop-types'; -import * as StyleUtils from '../styles/StyleUtils'; import variables from '../styles/variables'; const propTypes = { @@ -49,11 +47,7 @@ function OpacityView(props) { } }, [props.shouldDim, props.dimmingValue, opacity]); - return ( - - {props.children} - - ); + return {props.children}; } OpacityView.displayName = 'OpacityView'; diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index 211df1db0a36..100845c62643 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -6,7 +6,6 @@ import GenericPressable from './GenericPressable'; import GenericPressablePropTypes from './GenericPressable/PropTypes'; import OpacityView from '../OpacityView'; import variables from '../../styles/variables'; -import * as StyleUtils from '../../styles/StyleUtils'; const omittedProps = ['style', 'pressStyle', 'hoverStyle', 'focusStyle', 'wrapperStyle']; @@ -41,45 +40,49 @@ const PressableWithFeedbackDefaultProps = { const PressableWithFeedback = forwardRef((props, ref) => { const propsWithoutStyling = _.omit(props, omittedProps); const [disabled, setDisabled] = useState(props.disabled); + const [isPressed, setIsPressed] = useState(false); + const [isHovered, setIsHovered] = useState(false); useEffect(() => { setDisabled(props.disabled); }, [props.disabled]); return ( - { - setDisabled(true); - const onPress = props.onPress(e); - InteractionManager.runAfterInteractions(() => { - if (!(onPress instanceof Promise)) { - setDisabled(props.disabled); - return; - } - onPress.finally(() => { - setDisabled(props.disabled); - }); - }); - }} - hoverStyle={props.hoverStyle} - pressStyle={props.pressStyle} - focusStyle={props.focusStyle} > - {(state) => ( - - {_.isFunction(props.children) ? props.children(state) : props.children} - - )} - + setIsHovered(true)} + onHoverOut={() => setIsHovered(false)} + onPressIn={() => setIsPressed(true)} + onPressOut={() => setIsPressed(false)} + onPress={(e) => { + setDisabled(true); + const onPress = props.onPress(e); + InteractionManager.runAfterInteractions(() => { + if (!(onPress instanceof Promise)) { + setDisabled(props.disabled); + return; + } + onPress.finally(() => { + setDisabled(props.disabled); + }); + }); + }} + hoverStyle={props.hoverStyle} + pressStyle={props.pressStyle} + focusStyle={props.focusStyle} + > + {(state) => (_.isFunction(props.children) ? props.children(state) : props.children)} + + ); }); From 21c615531f1866b45a64e1143ad1a24dd3aaac42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Fri, 16 Jun 2023 11:49:29 +0200 Subject: [PATCH 3/6] fixed passing onHoverIn, onHoverOut etc functions to Pressable --- .../Pressable/PressableWithFeedback.js | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index 100845c62643..642df2a9251c 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -59,10 +59,22 @@ const PressableWithFeedback = forwardRef((props, ref) => { // eslint-disable-next-line react/jsx-props-no-spreading {...propsWithoutStyling} disabled={disabled} - onHoverIn={() => setIsHovered(true)} - onHoverOut={() => setIsHovered(false)} - onPressIn={() => setIsPressed(true)} - onPressOut={() => setIsPressed(false)} + onHoverIn={() => { + setIsHovered(true); + if (props.onHoverIn) props.onHoverIn(); + }} + onHoverOut={() => { + setIsHovered(false); + if (props.onHoverOut) props.onHoverOut(); + }} + onPressIn={() => { + setIsPressed(true); + if (props.onPressIn) props.onPressIn(); + }} + onPressOut={() => { + setIsPressed(false); + if (props.onPressOut) props.onPressOut(); + }} onPress={(e) => { setDisabled(true); const onPress = props.onPress(e); From af6a561a24b7e52f879f404cee0886b009a26ae9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Fri, 16 Jun 2023 16:17:12 +0200 Subject: [PATCH 4/6] removed ommiting pressable styles --- src/components/Pressable/PressableWithFeedback.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index 642df2a9251c..fd64aeca9c1f 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -7,7 +7,7 @@ import GenericPressablePropTypes from './GenericPressable/PropTypes'; import OpacityView from '../OpacityView'; import variables from '../../styles/variables'; -const omittedProps = ['style', 'pressStyle', 'hoverStyle', 'focusStyle', 'wrapperStyle']; +const omittedProps = ['wrapperStyle']; const PressableWithFeedbackPropTypes = { ..._.omit(GenericPressablePropTypes.pressablePropTypes, omittedProps), @@ -38,7 +38,7 @@ const PressableWithFeedbackDefaultProps = { }; const PressableWithFeedback = forwardRef((props, ref) => { - const propsWithoutStyling = _.omit(props, omittedProps); + const propsWithoutWrapperStyles = _.omit(props, omittedProps); const [disabled, setDisabled] = useState(props.disabled); const [isPressed, setIsPressed] = useState(false); const [isHovered, setIsHovered] = useState(false); @@ -55,9 +55,6 @@ const PressableWithFeedback = forwardRef((props, ref) => { > { setIsHovered(true); @@ -88,9 +85,8 @@ const PressableWithFeedback = forwardRef((props, ref) => { }); }); }} - hoverStyle={props.hoverStyle} - pressStyle={props.pressStyle} - focusStyle={props.focusStyle} + // eslint-disable-next-line react/jsx-props-no-spreading + {...propsWithoutWrapperStyles} > {(state) => (_.isFunction(props.children) ? props.children(state) : props.children)} From ac866f52323c342de2605cf137d5941d40f211bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Mon, 19 Jun 2023 10:52:48 +0200 Subject: [PATCH 5/6] fixed bug with dimming --- src/components/Pressable/PressableWithFeedback.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index fd64aeca9c1f..0e7d2f632b2b 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -7,7 +7,7 @@ import GenericPressablePropTypes from './GenericPressable/PropTypes'; import OpacityView from '../OpacityView'; import variables from '../../styles/variables'; -const omittedProps = ['wrapperStyle']; +const omittedProps = ['wrapperStyle', 'onHoverIn', 'onHoverOut', 'onPressIn', 'onPressOut']; const PressableWithFeedbackPropTypes = { ..._.omit(GenericPressablePropTypes.pressablePropTypes, omittedProps), @@ -38,7 +38,7 @@ const PressableWithFeedbackDefaultProps = { }; const PressableWithFeedback = forwardRef((props, ref) => { - const propsWithoutWrapperStyles = _.omit(props, omittedProps); + const rest = _.omit(props, omittedProps); const [disabled, setDisabled] = useState(props.disabled); const [isPressed, setIsPressed] = useState(false); const [isHovered, setIsHovered] = useState(false); @@ -86,7 +86,7 @@ const PressableWithFeedback = forwardRef((props, ref) => { }); }} // eslint-disable-next-line react/jsx-props-no-spreading - {...propsWithoutWrapperStyles} + {...rest} > {(state) => (_.isFunction(props.children) ? props.children(state) : props.children)} From 2c379caf409fced009019e0c29aa8f6edef78b83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Mon, 19 Jun 2023 18:10:18 +0200 Subject: [PATCH 6/6] added parseStyleAsArray to styles --- src/components/OpacityView.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/OpacityView.js b/src/components/OpacityView.js index 5ae19afa4601..2d09da744267 100644 --- a/src/components/OpacityView.js +++ b/src/components/OpacityView.js @@ -2,6 +2,7 @@ import React from 'react'; import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import PropTypes from 'prop-types'; import variables from '../styles/variables'; +import * as StyleUtils from '../styles/StyleUtils'; const propTypes = { /** @@ -47,7 +48,7 @@ function OpacityView(props) { } }, [props.shouldDim, props.dimmingValue, opacity]); - return {props.children}; + return {props.children}; } OpacityView.displayName = 'OpacityView';