From 876079a56fff65de662bcd6581e57d6c79b658a6 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 27 Mar 2023 13:54:46 -0700 Subject: [PATCH] [fix] Patch internal sources of deprecation warnings --- .../src/pages/docs/concepts/localization.md | 2 +- .../pages/localization/index.js | 2 +- .../pages/pan-responder/index.js | 2 +- .../__snapshots__/index-test.js.snap | 24 +++++++++---------- .../src/exports/ActivityIndicator/index.js | 4 ++-- .../src/exports/AppRegistry/AppContainer.js | 16 ++++--------- .../exports/CheckBox/__tests__/index-test.js | 6 ++--- .../src/exports/CheckBox/index.js | 8 +++---- .../__snapshots__/index-test.js.snap | 2 +- .../src/exports/Image/__tests__/index-test.js | 7 ++---- .../src/exports/Image/index.js | 6 ++--- .../src/exports/Modal/ModalAnimation.js | 12 +++++----- .../__snapshots__/index-test.js.snap | 2 ++ .../src/exports/Pressable/index.js | 21 +++++++++++----- .../src/exports/ProgressBar/index.js | 12 +++++----- .../ScrollView/__tests__/index-test.js | 6 ++--- .../react-native/VirtualizedList/index.js | 4 ++-- 17 files changed, 67 insertions(+), 69 deletions(-) diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/localization.md b/packages/react-native-web-docs/src/pages/docs/concepts/localization.md index 67e6b5fa..547024d0 100644 --- a/packages/react-native-web-docs/src/pages/docs/concepts/localization.md +++ b/packages/react-native-web-docs/src/pages/docs/concepts/localization.md @@ -50,7 +50,7 @@ The `useLocaleContext` API can be used for fine-grained control of layout, e.g., const { direction, locale } = useLocaleContext(); const isRTL = direction === 'rtl'; -const style = { transform: [{ scaleX: isRTL ? -1 : 1 }] }; +const style = { scaleX: isRTL ? -1 : 1 }; diff --git a/packages/react-native-web-examples/pages/localization/index.js b/packages/react-native-web-examples/pages/localization/index.js index 7aea3e36..5c279066 100644 --- a/packages/react-native-web-examples/pages/localization/index.js +++ b/packages/react-native-web-examples/pages/localization/index.js @@ -452,7 +452,7 @@ class LayoutRTLExample extends React.Component { source={iconSource} style={[ styles.image, - { transform: [{ scaleX: this.state.isRTL ? -1 : 1 }] } + { transform: `scaleX(${this.state.isRTL ? -1 : 1})` } ]} /> RTL flip diff --git a/packages/react-native-web-examples/pages/pan-responder/index.js b/packages/react-native-web-examples/pages/pan-responder/index.js index 1c490d8f..21ffbec8 100644 --- a/packages/react-native-web-examples/pages/pan-responder/index.js +++ b/packages/react-native-web-examples/pages/pan-responder/index.js @@ -121,7 +121,7 @@ class LocationXY extends React.Component { }; render() { - const transform = { transform: [{ translateX: this.state.translateX }] }; + const transform = { transform: `translateX${this.state.translateX}` }; return ( diff --git a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap index 51d701c6..77a741b9 100644 --- a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap @@ -9,7 +9,7 @@ exports[`components/ActivityIndicator prop "accessibilityLabel" value is set 1`] role="progressbar" >
= React.forwardRef( const { children, WrapperComponent } = props; let innerView = ( - + ); if (WrapperComponent) { @@ -40,11 +35,7 @@ const AppContainer: React.AbstractComponent = React.forwardRef( return ( - + {innerView} @@ -58,6 +49,7 @@ export default AppContainer; const styles = StyleSheet.create({ appContainer: { - flex: 1 + flex: 1, + pointerEvents: 'box-none' } }); diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js index a1ee252c..14ea32f9 100644 --- a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js @@ -18,7 +18,7 @@ describe('CheckBox', () => { describe('prop "accessibilityLabel"', () => { test('value is set', () => { const { container } = render( - + ); expect(container.firstChild).toMatchSnapshot(); }); @@ -26,7 +26,7 @@ describe('CheckBox', () => { describe('prop "accessibilityReadOnly"', () => { test('value is set', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); }); @@ -61,7 +61,7 @@ describe('CheckBox', () => { describe('prop "nativeID"', () => { test('value is set', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/packages/react-native-web/src/exports/CheckBox/index.js b/packages/react-native-web/src/exports/CheckBox/index.js index 26b1c214..1db62480 100644 --- a/packages/react-native-web/src/exports/CheckBox/index.js +++ b/packages/react-native-web/src/exports/CheckBox/index.js @@ -30,7 +30,7 @@ const CheckBox: React.AbstractComponent< React.ElementRef > = React.forwardRef((props, forwardedRef) => { const { - accessibilityReadOnly, + 'aria-readonly': ariaReadOnly, color, disabled, onChange, @@ -64,7 +64,7 @@ const CheckBox: React.AbstractComponent< checked: value, disabled: disabled, onChange: handleChange, - readOnly: accessibilityReadOnly, + readOnly: ariaReadOnly || other.accessibilityReadOnly, ref: forwardedRef, style: [styles.nativeControl, styles.cursorInherit], type: 'checkbox' @@ -73,8 +73,8 @@ const CheckBox: React.AbstractComponent< return ( {fakeControl} diff --git a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap index 1a5b7d07..55e2d30a 100644 --- a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/Image prop "accessibilityLabel" 1`] = ` +exports[`components/Image prop "aria-label" 1`] = `
{ window.Image = originalImage; }); - test('prop "accessibilityLabel"', () => { + test('prop "aria-label"', () => { const defaultSource = { uri: 'https://google.com/favicon.ico' }; const { container } = render( - + ); expect(container.firstChild).toMatchSnapshot(); }); diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js index f9381c96..bd69e5e8 100644 --- a/packages/react-native-web/src/exports/Image/index.js +++ b/packages/react-native-web/src/exports/Image/index.js @@ -182,7 +182,7 @@ const Image: React.AbstractComponent< React.ElementRef > = React.forwardRef((props, ref) => { const { - accessibilityLabel, + 'aria-label': ariaLabel, blurRadius, defaultSource, draggable, @@ -240,7 +240,7 @@ const Image: React.AbstractComponent< // Accessibility image allows users to trigger the browser's image context menu const hiddenImage = displayImageUri ? createElement('img', { - alt: accessibilityLabel || '', + alt: ariaLabel || '', style: styles.accessibilityImage$raw, draggable: draggable || false, ref: hiddenImageRef, @@ -327,7 +327,7 @@ const Image: React.AbstractComponent< return ( `; @@ -161,6 +162,7 @@ exports[`components/Pressable prop "href" 1`] = ` `; diff --git a/packages/react-native-web/src/exports/Pressable/index.js b/packages/react-native-web/src/exports/Pressable/index.js index 5562e148..0d284214 100644 --- a/packages/react-native-web/src/exports/Pressable/index.js +++ b/packages/react-native-web/src/exports/Pressable/index.js @@ -75,7 +75,6 @@ function Pressable(props: Props, forwardedRef): React.Node { delayPressIn, delayPressOut, disabled, - focusable, onBlur, onContextMenu, onFocus, @@ -88,6 +87,7 @@ function Pressable(props: Props, forwardedRef): React.Node { onPressIn, onPressOut, style, + tabIndex, testOnly_hovered, testOnly_pressed, ...rest @@ -190,22 +190,28 @@ function Pressable(props: Props, forwardedRef): React.Node { [onKeyDown, onKeyDownPress] ); + let _tabIndex; + if (tabIndex !== undefined) { + _tabIndex = tabIndex; + } else { + _tabIndex = disabled ? -1 : 0; + } + return ( {typeof children === 'function' ? children(interactionState) : children} @@ -218,9 +224,12 @@ function useForceableState(forced: boolean): [boolean, (boolean) => void] { } const styles = StyleSheet.create({ - root: { + active: { cursor: 'pointer', touchAction: 'manipulation' + }, + disabled: { + pointerEvents: 'none' } }); diff --git a/packages/react-native-web/src/exports/ProgressBar/index.js b/packages/react-native-web/src/exports/ProgressBar/index.js index 394438f1..d5bca56a 100644 --- a/packages/react-native-web/src/exports/ProgressBar/index.js +++ b/packages/react-native-web/src/exports/ProgressBar/index.js @@ -41,11 +41,11 @@ const ProgressBar: React.AbstractComponent< return ( { let rerender; act(() => { ({ rerender } = render( - + )); }); expect(ref).toHaveBeenCalledTimes(1); act(() => { - rerender( - - ); + rerender(); }); expect(ref).toHaveBeenCalledTimes(1); }); diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js index 6511a1f5..25b07d36 100644 --- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js +++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js @@ -2149,10 +2149,10 @@ function describeNestedLists(childList: { const styles = StyleSheet.create({ verticallyInverted: { - transform: [{scaleY: -1}], + transform: 'scaleY(-1)', }, horizontallyInverted: { - transform: [{scaleX: -1}], + transform: 'scaleX(-1)', }, row: { flexDirection: 'row',