mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
chore: [TS] Remove tvParallaxProperties prop & add missing focusable, rejectResponderTermination props (#43912)
Summary:
I do TV developing using a RN, and found one missing prop in TS:
```tsx
<TouchableOpacity focusable={false} />
// ^^^ Error: Property focusable does not exist on type Readonly<TouchableOpacityProps>
```
Then I decides to compare Flow & TS types definitions and found more:
1. `tvParallaxProperties` - [was removed](https://github.com/search?q=repo%3Afacebook%2Freact-native%20tvParallaxProperties&type=code) and never used in the runtime (but [`rn-tvos`](https://github.com/react-native-tvos/react-native-tvos/blob/92f73d1d7966dd41e3d8d9101a4e298e9462887b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js#L299) has own ver. of `TouchableOpacity` & handle its types)
2. `focusable` is missing
3. `rejectResponderTermination` is missing
## Changelog:
[GENERAL] [REMOVED] - [TS] Remove `tvParallaxProperties` prop from `TouchableOpacity` & add missing `focusable`, `rejectResponderTermination` props
Pull Request resolved: https://github.com/facebook/react-native/pull/43912
Test Plan: TypeScript tests were updated
Reviewed By: NickGerleman
Differential Revision: D55805520
Pulled By: javache
fbshipit-source-id: 5eb8c65857beb86361e74b9369a1739b1ae18190
This commit is contained in:
@@ -11,7 +11,6 @@ import type * as React from 'react';
|
||||
import {Constructor} from '../../../types/private/Utilities';
|
||||
import {TimerMixin} from '../../../types/private/TimerMixin';
|
||||
import {NativeMethods} from '../../../types/public/ReactNativeTypes';
|
||||
import {TVParallaxProperties} from '../View/ViewPropTypes';
|
||||
import {TouchableMixin} from './Touchable';
|
||||
import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
|
||||
|
||||
@@ -70,22 +69,6 @@ export interface TouchableOpacityProps
|
||||
* Defaults to 0.2
|
||||
*/
|
||||
activeOpacity?: number | undefined;
|
||||
|
||||
/**
|
||||
* *(Apple TV only)* Object with properties to control Apple TV parallax effects.
|
||||
*
|
||||
* enabled: If true, parallax effects are enabled. Defaults to true.
|
||||
* shiftDistanceX: Defaults to 2.0.
|
||||
* shiftDistanceY: Defaults to 2.0.
|
||||
* tiltAngle: Defaults to 0.05.
|
||||
* magnification: Defaults to 1.0.
|
||||
* pressMagnification: Defaults to 1.0.
|
||||
* pressDuration: Defaults to 0.3.
|
||||
* pressDelay: Defaults to 0.0.
|
||||
*
|
||||
* @platform android
|
||||
*/
|
||||
tvParallaxProperties?: TVParallaxProperties | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
+8
@@ -42,6 +42,8 @@ export interface TouchableWithoutFeedbackProps
|
||||
AccessibilityProps {
|
||||
children?: React.ReactNode | undefined;
|
||||
|
||||
rejectResponderTermination?: boolean | undefined;
|
||||
|
||||
/**
|
||||
* Delay in ms, from onPressIn, before onLongPress is called.
|
||||
*/
|
||||
@@ -62,6 +64,12 @@ export interface TouchableWithoutFeedbackProps
|
||||
*/
|
||||
disabled?: boolean | undefined;
|
||||
|
||||
/**
|
||||
* Whether this View should be focusable with a non-touch input device,
|
||||
* eg. receive focus with a hardware keyboard / TV remote.
|
||||
*/
|
||||
focusable?: boolean | undefined;
|
||||
|
||||
/**
|
||||
* This defines how far your touch can start away from the button.
|
||||
* This is added to pressRetentionOffset when moving off of the button.
|
||||
|
||||
@@ -16,48 +16,6 @@ import {LayoutChangeEvent, PointerEvents} from '../../Types/CoreEventTypes';
|
||||
import {Touchable} from '../Touchable/Touchable';
|
||||
import {AccessibilityProps} from './ViewAccessibility';
|
||||
|
||||
export type TVParallaxProperties = {
|
||||
/**
|
||||
* If true, parallax effects are enabled. Defaults to true.
|
||||
*/
|
||||
enabled?: boolean | undefined;
|
||||
|
||||
/**
|
||||
* Defaults to 2.0.
|
||||
*/
|
||||
shiftDistanceX?: number | undefined;
|
||||
|
||||
/**
|
||||
* Defaults to 2.0.
|
||||
*/
|
||||
shiftDistanceY?: number | undefined;
|
||||
|
||||
/**
|
||||
* Defaults to 0.05.
|
||||
*/
|
||||
tiltAngle?: number | undefined;
|
||||
|
||||
/**
|
||||
* Defaults to 1.0
|
||||
*/
|
||||
magnification?: number | undefined;
|
||||
|
||||
/**
|
||||
* Defaults to 1.0
|
||||
*/
|
||||
pressMagnification?: number | undefined;
|
||||
|
||||
/**
|
||||
* Defaults to 0.3
|
||||
*/
|
||||
pressDuration?: number | undefined;
|
||||
|
||||
/**
|
||||
* Defaults to 0.3
|
||||
*/
|
||||
pressDelay?: number | undefined;
|
||||
};
|
||||
|
||||
export interface TVViewPropsIOS {
|
||||
/**
|
||||
* *(Apple TV only)* When set to true, this view will be focusable
|
||||
@@ -74,13 +32,6 @@ export interface TVViewPropsIOS {
|
||||
*/
|
||||
hasTVPreferredFocus?: boolean | undefined;
|
||||
|
||||
/**
|
||||
* *(Apple TV only)* Object with properties to control Apple TV parallax effects.
|
||||
*
|
||||
* @platform ios
|
||||
*/
|
||||
tvParallaxProperties?: TVParallaxProperties | undefined;
|
||||
|
||||
/**
|
||||
* *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 2.0.
|
||||
*
|
||||
|
||||
@@ -484,6 +484,31 @@ function TouchableTest() {
|
||||
}
|
||||
}
|
||||
|
||||
export class TouchableOpacityTest extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<TouchableOpacity focusable={false} />
|
||||
<TouchableOpacity rejectResponderTermination={true} />
|
||||
<TouchableOpacity
|
||||
role="button"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabelledBy="my-label-text"
|
||||
aria-labelledby="my-label-text"
|
||||
/>
|
||||
<TouchableOpacity
|
||||
// @ts-expect-error - expected boolean value
|
||||
focusable={1}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
// @ts-expect-error - expected boolean value
|
||||
rejectResponderTermination={'not-bool'}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// TouchableNativeFeedbackTest
|
||||
export class TouchableNativeFeedbackTest extends React.Component {
|
||||
onPressButton = (e: GestureResponderEvent) => {
|
||||
@@ -500,6 +525,16 @@ export class TouchableNativeFeedbackTest extends React.Component {
|
||||
<Text style={{margin: 30}}>Button</Text>
|
||||
</View>
|
||||
</TouchableNativeFeedback>
|
||||
<TouchableWithoutFeedback focusable={false}>
|
||||
<View style={{width: 150, height: 100, backgroundColor: 'red'}}>
|
||||
<Text style={{margin: 30}}>Button</Text>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
<TouchableWithoutFeedback rejectResponderTermination={true}>
|
||||
<View style={{width: 150, height: 100, backgroundColor: 'red'}}>
|
||||
<Text style={{margin: 30}}>Button</Text>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
<TouchableNativeFeedback
|
||||
background={TouchableNativeFeedback.Ripple('red', true)}>
|
||||
<View style={{width: 150, height: 100, backgroundColor: 'red'}}>
|
||||
|
||||
Reference in New Issue
Block a user