|
| 1 | +/** |
| 2 | + * Copyright (c) Meta Platforms, Inc. and affiliates. |
| 3 | + * |
| 4 | + * This source code is licensed under the MIT license found in the |
| 5 | + * LICENSE file in the root directory of this source tree. |
| 6 | + * |
| 7 | + * @format |
| 8 | + */ |
| 9 | + |
| 10 | +import type * as React from 'react'; |
| 11 | +import {Insets} from '../../../types/public/Insets'; |
| 12 | +import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet'; |
| 13 | +import {ViewStyle} from '../../StyleSheet/StyleSheetTypes'; |
| 14 | +import { |
| 15 | + GestureResponderEvent, |
| 16 | + MouseEvent, |
| 17 | + NativeSyntheticEvent, |
| 18 | + TargetedEvent, |
| 19 | +} from '../../Types/CoreEventTypes'; |
| 20 | +import {View} from '../View/View'; |
| 21 | +import {AccessibilityProps} from '../View/ViewAccessibility'; |
| 22 | +import {ViewProps} from '../View/ViewPropTypes'; |
| 23 | + |
| 24 | +export interface PressableStateCallbackType { |
| 25 | + readonly pressed: boolean; |
| 26 | +} |
| 27 | + |
| 28 | +export interface PressableAndroidRippleConfig { |
| 29 | + color?: null | ColorValue | undefined; |
| 30 | + borderless?: null | boolean | undefined; |
| 31 | + radius?: null | number | undefined; |
| 32 | + foreground?: null | boolean | undefined; |
| 33 | +} |
| 34 | + |
| 35 | +export interface PressableProps |
| 36 | + extends AccessibilityProps, |
| 37 | + Omit<ViewProps, 'children' | 'style' | 'hitSlop'> { |
| 38 | + /** |
| 39 | + * Called when the hover is activated to provide visual feedback. |
| 40 | + */ |
| 41 | + onHoverIn?: null | ((event: MouseEvent) => void) | undefined; |
| 42 | + |
| 43 | + /** |
| 44 | + * Called when the hover is deactivated to undo visual feedback. |
| 45 | + */ |
| 46 | + onHoverOut?: null | ((event: MouseEvent) => void) | undefined; |
| 47 | + |
| 48 | + /** |
| 49 | + * Called when a single tap gesture is detected. |
| 50 | + */ |
| 51 | + onPress?: null | ((event: GestureResponderEvent) => void) | undefined; |
| 52 | + |
| 53 | + /** |
| 54 | + * Called when a touch is engaged before `onPress`. |
| 55 | + */ |
| 56 | + onPressIn?: null | ((event: GestureResponderEvent) => void) | undefined; |
| 57 | + |
| 58 | + /** |
| 59 | + * Called when a touch is released before `onPress`. |
| 60 | + */ |
| 61 | + onPressOut?: null | ((event: GestureResponderEvent) => void) | undefined; |
| 62 | + |
| 63 | + /** |
| 64 | + * Called when a long-tap gesture is detected. |
| 65 | + */ |
| 66 | + onLongPress?: null | ((event: GestureResponderEvent) => void) | undefined; |
| 67 | + |
| 68 | + /** |
| 69 | + * Called after the element loses focus. |
| 70 | + * @platform macos windows |
| 71 | + */ |
| 72 | + onBlur?: |
| 73 | + | null |
| 74 | + | ((event: NativeSyntheticEvent<TargetedEvent>) => void) |
| 75 | + | undefined; |
| 76 | + |
| 77 | + /** |
| 78 | + * Called after the element is focused. |
| 79 | + * @platform macos windows |
| 80 | + */ |
| 81 | + onFocus?: |
| 82 | + | null |
| 83 | + | ((event: NativeSyntheticEvent<TargetedEvent>) => void) |
| 84 | + | undefined; |
| 85 | + |
| 86 | + /** |
| 87 | + * Either children or a render prop that receives a boolean reflecting whether |
| 88 | + * the component is currently pressed. |
| 89 | + */ |
| 90 | + children?: |
| 91 | + | React.ReactNode |
| 92 | + | ((state: PressableStateCallbackType) => React.ReactNode) |
| 93 | + | undefined; |
| 94 | + |
| 95 | + /** |
| 96 | + * Whether a press gesture can be interrupted by a parent gesture such as a |
| 97 | + * scroll event. Defaults to true. |
| 98 | + */ |
| 99 | + cancelable?: null | boolean | undefined; |
| 100 | + |
| 101 | + /** |
| 102 | + * Duration to wait after hover in before calling `onHoverIn`. |
| 103 | + * @platform macos windows |
| 104 | + */ |
| 105 | + delayHoverIn?: number | null | undefined; |
| 106 | + |
| 107 | + /** |
| 108 | + * Duration to wait after hover out before calling `onHoverOut`. |
| 109 | + * @platform macos windows |
| 110 | + */ |
| 111 | + delayHoverOut?: number | null | undefined; |
| 112 | + |
| 113 | + /** |
| 114 | + * Duration (in milliseconds) from `onPressIn` before `onLongPress` is called. |
| 115 | + */ |
| 116 | + delayLongPress?: null | number | undefined; |
| 117 | + |
| 118 | + /** |
| 119 | + * Whether the press behavior is disabled. |
| 120 | + */ |
| 121 | + disabled?: null | boolean | undefined; |
| 122 | + |
| 123 | + //[ Windows |
| 124 | + /** |
| 125 | + * When the pressable is pressed it will take focus |
| 126 | + * Default value: true |
| 127 | + */ |
| 128 | + focusOnPress?: null | boolean | undefined; |
| 129 | + // Windows] |
| 130 | + |
| 131 | + /** |
| 132 | + * Additional distance outside of this view in which a press is detected. |
| 133 | + */ |
| 134 | + hitSlop?: null | Insets | number | undefined; |
| 135 | + |
| 136 | + /** |
| 137 | + * Additional distance outside of this view in which a touch is considered a |
| 138 | + * press before `onPressOut` is triggered. |
| 139 | + */ |
| 140 | + pressRetentionOffset?: null | Insets | number | undefined; |
| 141 | + |
| 142 | + /** |
| 143 | + * If true, doesn't play system sound on touch. |
| 144 | + */ |
| 145 | + android_disableSound?: null | boolean | undefined; |
| 146 | + |
| 147 | + /** |
| 148 | + * Enables the Android ripple effect and configures its color. |
| 149 | + */ |
| 150 | + android_ripple?: null | PressableAndroidRippleConfig | undefined; |
| 151 | + |
| 152 | + /** |
| 153 | + * Used only for documentation or testing (e.g. snapshot testing). |
| 154 | + */ |
| 155 | + testOnly_pressed?: null | boolean | undefined; |
| 156 | + |
| 157 | + /** |
| 158 | + * Either view styles or a function that receives a boolean reflecting whether |
| 159 | + * the component is currently pressed and returns view styles. |
| 160 | + */ |
| 161 | + style?: |
| 162 | + | StyleProp<ViewStyle> |
| 163 | + | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) |
| 164 | + | undefined; |
| 165 | + |
| 166 | + /** |
| 167 | + * Duration (in milliseconds) to wait after press down before calling onPressIn. |
| 168 | + */ |
| 169 | + unstable_pressDelay?: number | undefined; |
| 170 | +} |
| 171 | + |
| 172 | +// TODO use React.AbstractComponent when available |
| 173 | +export const Pressable: React.ForwardRefExoticComponent< |
| 174 | + PressableProps & React.RefAttributes<View> |
| 175 | +>; |
0 commit comments