Focusable Pressables should take focus when they are clicked on
#15327
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "Pressables should take focus on press", | ||
| "packageName": "react-native-windows", | ||
| "email": "30809111+acoates-ms@users.noreply.github.com", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @format | ||
| */ | ||
|
|
||
| import type * as React from 'react'; | ||
| import {Insets} from '../../../types/public/Insets'; | ||
| import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet'; | ||
| import {ViewStyle} from '../../StyleSheet/StyleSheetTypes'; | ||
| import { | ||
| GestureResponderEvent, | ||
| MouseEvent, | ||
| NativeSyntheticEvent, | ||
| TargetedEvent, | ||
| } from '../../Types/CoreEventTypes'; | ||
| import {View} from '../View/View'; | ||
| import {AccessibilityProps} from '../View/ViewAccessibility'; | ||
| import {ViewProps} from '../View/ViewPropTypes'; | ||
|
|
||
| export interface PressableStateCallbackType { | ||
| readonly pressed: boolean; | ||
| } | ||
|
|
||
| export interface PressableAndroidRippleConfig { | ||
| color?: null | ColorValue | undefined; | ||
| borderless?: null | boolean | undefined; | ||
| radius?: null | number | undefined; | ||
| foreground?: null | boolean | undefined; | ||
| } | ||
|
|
||
| export interface PressableProps | ||
| extends AccessibilityProps, | ||
| Omit<ViewProps, 'children' | 'style' | 'hitSlop'> { | ||
| /** | ||
| * Called when the hover is activated to provide visual feedback. | ||
| */ | ||
| onHoverIn?: null | ((event: MouseEvent) => void) | undefined; | ||
|
|
||
| /** | ||
| * Called when the hover is deactivated to undo visual feedback. | ||
| */ | ||
| onHoverOut?: null | ((event: MouseEvent) => void) | undefined; | ||
|
|
||
| /** | ||
| * Called when a single tap gesture is detected. | ||
| */ | ||
| onPress?: null | ((event: GestureResponderEvent) => void) | undefined; | ||
|
|
||
| /** | ||
| * Called when a touch is engaged before `onPress`. | ||
| */ | ||
| onPressIn?: null | ((event: GestureResponderEvent) => void) | undefined; | ||
|
|
||
| /** | ||
| * Called when a touch is released before `onPress`. | ||
| */ | ||
| onPressOut?: null | ((event: GestureResponderEvent) => void) | undefined; | ||
|
|
||
| /** | ||
| * Called when a long-tap gesture is detected. | ||
| */ | ||
| onLongPress?: null | ((event: GestureResponderEvent) => void) | undefined; | ||
|
|
||
| /** | ||
| * Called after the element loses focus. | ||
| * @platform macos windows | ||
| */ | ||
| onBlur?: | ||
| | null | ||
| | ((event: NativeSyntheticEvent<TargetedEvent>) => void) | ||
| | undefined; | ||
|
|
||
| /** | ||
| * Called after the element is focused. | ||
| * @platform macos windows | ||
| */ | ||
| onFocus?: | ||
| | null | ||
| | ((event: NativeSyntheticEvent<TargetedEvent>) => void) | ||
| | undefined; | ||
|
|
||
| /** | ||
| * Either children or a render prop that receives a boolean reflecting whether | ||
| * the component is currently pressed. | ||
| */ | ||
| children?: | ||
| | React.ReactNode | ||
| | ((state: PressableStateCallbackType) => React.ReactNode) | ||
| | undefined; | ||
|
|
||
| /** | ||
| * Whether a press gesture can be interrupted by a parent gesture such as a | ||
| * scroll event. Defaults to true. | ||
| */ | ||
| cancelable?: null | boolean | undefined; | ||
|
|
||
| /** | ||
| * Duration to wait after hover in before calling `onHoverIn`. | ||
| * @platform macos windows | ||
| */ | ||
| delayHoverIn?: number | null | undefined; | ||
|
|
||
| /** | ||
| * Duration to wait after hover out before calling `onHoverOut`. | ||
| * @platform macos windows | ||
| */ | ||
| delayHoverOut?: number | null | undefined; | ||
|
|
||
| /** | ||
| * Duration (in milliseconds) from `onPressIn` before `onLongPress` is called. | ||
| */ | ||
| delayLongPress?: null | number | undefined; | ||
|
|
||
| /** | ||
| * Whether the press behavior is disabled. | ||
| */ | ||
| disabled?: null | boolean | undefined; | ||
|
|
||
| //[ Windows | ||
| /** | ||
| * When the pressable is pressed it will take focus | ||
| * Default value: true | ||
| */ | ||
| focusOnPress?: null | boolean | undefined; | ||
| // Windows] | ||
|
|
||
| /** | ||
| * Additional distance outside of this view in which a press is detected. | ||
| */ | ||
| hitSlop?: null | Insets | number | undefined; | ||
|
|
||
| /** | ||
| * Additional distance outside of this view in which a touch is considered a | ||
| * press before `onPressOut` is triggered. | ||
| */ | ||
| pressRetentionOffset?: null | Insets | number | undefined; | ||
|
|
||
| /** | ||
| * If true, doesn't play system sound on touch. | ||
| */ | ||
| android_disableSound?: null | boolean | undefined; | ||
|
|
||
| /** | ||
| * Enables the Android ripple effect and configures its color. | ||
| */ | ||
| android_ripple?: null | PressableAndroidRippleConfig | undefined; | ||
|
|
||
| /** | ||
| * Used only for documentation or testing (e.g. snapshot testing). | ||
| */ | ||
| testOnly_pressed?: null | boolean | undefined; | ||
|
|
||
| /** | ||
| * Either view styles or a function that receives a boolean reflecting whether | ||
| * the component is currently pressed and returns view styles. | ||
| */ | ||
| style?: | ||
| | StyleProp<ViewStyle> | ||
| | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | ||
| | undefined; | ||
|
|
||
| /** | ||
| * Duration (in milliseconds) to wait after press down before calling onPressIn. | ||
| */ | ||
| unstable_pressDelay?: number | undefined; | ||
| } | ||
|
|
||
| // TODO use React.AbstractComponent when available | ||
| export const Pressable: React.ForwardRefExoticComponent< | ||
| PressableProps & React.RefAttributes<View> | ||
| >; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if the default is true should this prop become
disableFocusOnPress?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I prefer to avoid negative props. - But I see an argument for avoiding default true props too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
would also prefer not having bool in the name, I don't like that we have
enableFocusRinginstead something likefocusRingVisible. I also think it wouldn't be true by default except on windows..