feat: add basic visual feedback on Button interactions (#708)

* feat: add basic visual feedback on Button interaction

* Use a more efficient approach to providing visual feedback

* Fix some lint issues left over from another PR

---------

Co-authored-by: Simek <gosimek@gmail.com>
This commit is contained in:
Paul Frazee 2023-05-17 11:10:51 -05:00 committed by GitHub
parent 41f3a05515
commit 562faa76cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 6 deletions

View file

@ -128,6 +128,7 @@ export function Button({
},
},
)
const onPressWrapped = React.useCallback(
(event: Event) => {
event.stopPropagation()
@ -136,9 +137,23 @@ export function Button({
},
[onPress],
)
const getStyle = React.useCallback(
state => {
const arr = [typeOuterStyle, styles.outer, style]
if (state.pressed) {
arr.push({opacity: 0.6})
} else if (state.hovered) {
arr.push({opacity: 0.8})
}
return arr
},
[typeOuterStyle, style],
)
return (
<Pressable
style={[typeOuterStyle, styles.outer, style]}
style={getStyle}
onPress={onPressWrapped}
testID={testID}
accessibilityRole="button"