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:
D N
2024-04-05 15:28:26 -07:00
committed by Facebook GitHub Bot
parent 81b27c9204
commit 0a0cd6517f
4 changed files with 43 additions and 66 deletions
@@ -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;
}
/**
@@ -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'}}>