zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-25 15:42:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

[add] Pressable support for hover state

Browse Source 
This patch ports the 'useHover' hook to React Native for Web, providing hover
state that is scoped to a pressable and does not bubble to ancestor pressables.
This behavior aligns with the behavior of the focus and press states.

Fix #1708
This commit is contained in:
Nicolas Gallagher
2020-09-10 14:06:34 -07:00
parent 5b7a6bc30a
commit 38fd574984
21 changed files with 2295 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docs/src/components/Pressable/examples/FeedbackEvents.js
+35 -14
View File
@@ -37,13 +37,23 @@ export default function FeedbackEvents() {
onPress={handlePress('press')}
onPressIn={handlePress('pressIn')}
onPressOut={handlePress('pressOut')}
style={({ pressed, focused }) => ({
padding: 10,
margin: 10,
borderWidth: 1,
borderColor: focused ? 'blue' : null,
backgroundColor: pressed ? 'lightblue' : 'white'
})}
style={({ hovered, pressed, focused }) => {
let backgroundColor = 'white';
if (hovered) {
backgroundColor = 'lightgray';
}
if (pressed) {
backgroundColor = 'lightblue';
}
return {
padding: 10,
margin: 10,
borderWidth: 1,
borderColor: focused ? 'red' : null,
backgroundColor,
outlineWidth: 0
};
}}
>
<Pressable
accessibilityRole="none"
@@ -51,13 +61,24 @@ export default function FeedbackEvents() {
onPress={handlePress('press - inner')}
onPressIn={handlePress('pressIn - inner')}
onPressOut={handlePress('pressOut - inner')}
style={({ pressed, focused }) => ({
padding: 10,
margin: 10,
borderWidth: 1,
borderColor: focused ? 'blue' : null,
backgroundColor: pressed ? 'lightblue' : 'white'
})}
style={({ hovered, pressed, focused }) => {
console.log(focused);
let backgroundColor = 'white';
if (hovered) {
backgroundColor = 'lightgray';
}
if (pressed) {
backgroundColor = 'lightblue';
}
return {
padding: 10,
margin: 10,
borderWidth: 1,
borderColor: focused ? 'red' : null,
backgroundColor,
outlineWidth: 0
};
}}
>
<Text>Nested pressables</Text>
</Pressable>