zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-06 03:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix updates to opacity in TouchableOpacity

Browse Source
This commit is contained in:
Nicolas Gallagher
2020-05-07 12:28:44 -07:00
parent cd9be22947
commit fc78cb06fd
1 changed files with 15 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web/src/exports/TouchableOpacity/index.js
Vendored
+15 -24
View File
@@ -28,12 +28,6 @@ type Props = $ReadOnly<{|
style?: ?ViewStyle style?: ?ViewStyle
|}>; |}>;
function getStyleOpacityWithDefault(style): number {
const flatStyle = StyleSheet.flatten(style);
const opacityValue = flatStyle != null ? flatStyle.opacity : null;
return typeof opacityValue === 'number' ? opacityValue : 1;
}
/** /**
* A wrapper for making views respond properly to touches. * A wrapper for making views respond properly to touches.
* On press down, the opacity of the wrapped view is decreased, dimming it. * On press down, the opacity of the wrapped view is decreased, dimming it.
@@ -64,30 +58,29 @@ function TouchableOpacity(props: Props, forwardedRef): React.Node {
} }
}); });
const styleOpacity = getStyleOpacityWithDefault(style);
const [duration, setDuration] = useState('0s'); const [duration, setDuration] = useState('0s');
const [opacity, setOpacity] = useState(styleOpacity); const [opacityOverride, setOpacityOverride] = useState(null);
const setOpacityTo = useCallback( const setOpacityTo = useCallback(
(value: number, duration: number) => { (value: ?number, duration: number) => {
setOpacity(value); setOpacityOverride(value);
setDuration(duration ? `${duration / 1000}s` : '0s'); setDuration(duration ? `${duration / 1000}s` : '0s');
}, },
[setOpacity, setDuration] [setOpacityOverride, setDuration]
); );
const opacityActive = useCallback( const setOpacityActive = useCallback(
(duration: number) => { (duration: number) => {
setOpacityTo(activeOpacity ?? 0.2, duration); setOpacityTo(activeOpacity ?? 0.2, duration);
}, },
[activeOpacity, setOpacityTo] [activeOpacity, setOpacityTo]
); );
const opacityInactive = useCallback( const setOpacityInactive = useCallback(
(duration: number) => { (duration: number) => {
setOpacityTo(styleOpacity, duration); setOpacityTo(null, duration);
}, },
[setOpacityTo, styleOpacity] [setOpacityTo]
); );
const pressConfig = useMemo( const pressConfig = useMemo(
@@ -100,13 +93,13 @@ function TouchableOpacity(props: Props, forwardedRef): React.Node {
onLongPress, onLongPress,
onPress, onPress,
onPressStart(event) { onPressStart(event) {
opacityActive(event.dispatchConfig.registrationName === 'onResponderGrant' ? 0 : 150); setOpacityActive(event.dispatchConfig.registrationName === 'onResponderGrant' ? 0 : 150);
if (onPressIn != null) { if (onPressIn != null) {
onPressIn(event); onPressIn(event);
} }
}, },
onPressEnd(event) { onPressEnd(event) {
opacityInactive(250); setOpacityInactive(250);
if (onPressOut != null) { if (onPressOut != null) {
onPressOut(event); onPressOut(event);
} }
@@ -121,9 +114,9 @@ function TouchableOpacity(props: Props, forwardedRef): React.Node {
onPress, onPress,
onPressIn, onPressIn,
onPressOut, onPressOut,
opacityActive, rejectResponderTermination,
opacityInactive, setOpacityActive,
rejectResponderTermination setOpacityInactive
] ]
); );
@@ -144,10 +137,8 @@ function TouchableOpacity(props: Props, forwardedRef): React.Node {
styles.root, styles.root,
!disabled && styles.actionable, !disabled && styles.actionable,
style, style,
{ opacityOverride != null && { opacity: opacityOverride },
opacity, { transitionDuration: duration }
transitionDuration: duration
}
]} ]}
/> />
); );