@wordpress/components 35.0.0 → 35.1.1-next.v.202606191442.0

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

@@ -1,146 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	useIsFocused,
-	useNavigation,
-	useFocusEffect,
-} from '@react-navigation/native';
-import {
-	ScrollView,
-	TouchableHighlight,
-	useWindowDimensions,
-	View,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-
-import { useRef, useCallback, useContext, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { BottomSheetNavigationContext } from './bottom-sheet-navigation-context';
-import { BottomSheetContext } from '../bottom-sheet-context';
-import styles from './styles.scss';
-
-const BottomSheetNavigationScreen = ( {
-	children,
-	fullScreen,
-	isScrollable,
-	isNested,
-	name,
-} ) => {
-	const navigation = useNavigation();
-	const maxHeight = useRef( 0 );
-	const isFocused = useIsFocused();
-	const {
-		onHandleHardwareButtonPress,
-		shouldEnableBottomSheetMaxHeight,
-		setIsFullScreen,
-		listProps,
-		safeAreaBottomInset,
-	} = useContext( BottomSheetContext );
-	const { height: windowHeight } = useWindowDimensions();
-
-	const { setHeight } = useContext( BottomSheetNavigationContext );
-
-	useFocusEffect(
-		useCallback( () => {
-			onHandleHardwareButtonPress( () => {
-				if ( navigation.canGoBack() ) {
-					shouldEnableBottomSheetMaxHeight( true );
-					navigation.goBack();
-					return true;
-				}
-				onHandleHardwareButtonPress( null );
-				return false;
-			} );
-			/**
-			 * TODO: onHandleHardwareButtonPress stores a single value, which means
-			 * future invocations from sibling screens can replace the callback for
-			 * the currently active screen. Currently, the empty dependency array
-			 * passed to useCallback here is what prevents erroneous callback
-			 * replacements, but leveraging memoization to achieve this is brittle and
-			 * explicitly discouraged in the React documentation.
-			 * https://react.dev/reference/react/useMemo
-			 *
-			 * Ideally, we refactor onHandleHardwareButtonPress to manage multiple
-			 * callbacks triggered based upon which screen is currently active.
-			 *
-			 * Related: https://github.com/WordPress/gutenberg/pull/36328#discussion_r768897546
-			 *
-			 * Also see https://github.com/WordPress/gutenberg/pull/41166.
-			 */
-		}, [] )
-	);
-
-	useFocusEffect(
-		useCallback( () => {
-			if ( fullScreen ) {
-				setHeight( windowHeight );
-				setIsFullScreen( true );
-			} else if ( maxHeight.current !== 0 ) {
-				setIsFullScreen( false );
-				setHeight( maxHeight.current );
-			}
-			return () => {};
-		}, [ fullScreen, setHeight, setIsFullScreen, windowHeight ] )
-	);
-
-	const onLayout = ( { nativeEvent } ) => {
-		if ( fullScreen ) {
-			return;
-		}
-		const { height } = nativeEvent.layout;
-		if ( maxHeight.current !== height && isFocused ) {
-			maxHeight.current = height;
-			setHeight( height );
-		}
-	};
-
-	return useMemo( () => {
-		return isScrollable || isNested ? (
-			<View
-				onLayout={ onLayout }
-				testID={ `navigation-screen-${ name }` }
-			>
-				{ children }
-			</View>
-		) : (
-			<ScrollView { ...listProps }>
-				<TouchableHighlight accessible={ false }>
-					<View
-						onLayout={ onLayout }
-						testID={ `navigation-screen-${ name }` }
-					>
-						{ children }
-						{ ! isNested && (
-							<View
-								style={ {
-									height:
-										safeAreaBottomInset ||
-										styles.scrollableContent.paddingBottom,
-								} }
-							/>
-						) }
-					</View>
-				</TouchableHighlight>
-			</ScrollView>
-		);
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [
-		children,
-		isFocused,
-		safeAreaBottomInset,
-		listProps,
-		name,
-		isScrollable,
-		isNested,
-		onLayout,
-	] );
-};
-
-export default BottomSheetNavigationScreen;

package/src/mobile/bottom-sheet/bottom-sheet-navigation/styles.native.scss

@@ -1,11 +0,0 @@
-.background {
-	background-color: $modal-background;
-}
-
-.backgroundDark {
-	background-color: $modal-background-dark;
-}
-
-.scrollableContent {
-	padding-bottom: $grid-unit-20;
-}

package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js

@@ -1,197 +0,0 @@
-/**
- * External dependencies
- */
-import { Text } from 'react-native';
-import { act, render, fireEvent, withReanimatedTimer } from 'test/helpers';
-import { useNavigation } from '@react-navigation/native';
-
-/**
- * Internal dependencies
- */
-import NavigationContainer from '../navigation-container';
-import NavigationScreen from '../navigation-screen';
-
-const WINDOW_HEIGHT = 1000;
-
-const TestScreen = ( { fullScreen, name, navigateTo } ) => {
-	const navigation = useNavigation();
-	return (
-		<NavigationScreen fullScreen={ fullScreen } name={ name }>
-			<Text onPress={ () => navigation.navigate( navigateTo ) }>
-				{ name }
-			</Text>
-		</NavigationScreen>
-	);
-};
-
-const fireLayoutEvent = ( element, layout ) =>
-	fireEvent( element, 'layout', {
-		nativeEvent: { layout },
-	} );
-
-beforeAll( () => {
-	jest.spyOn(
-		require( 'react-native' ),
-		'useWindowDimensions'
-	).mockReturnValue( { width: 900, height: WINDOW_HEIGHT } );
-} );
-
-it( 'animates height transitioning from non-full-screen to non-full-screen', async () =>
-	withReanimatedTimer( async () => {
-		const screen = render(
-			<NavigationContainer testID="navigation-container" main animate>
-				<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
-				<TestScreen name="test-screen-2" navigateTo="test-screen-1" />
-			</NavigationContainer>
-		);
-
-		const navigationContainer = await screen.findByTestId(
-			'navigation-container'
-		);
-
-		expect( navigationContainer ).toHaveAnimatedStyle( { height: 1 } );
-
-		// First height value should be set without animation, but we need
-		// to wait for a frame to let animated styles be updated.
-		const screen1Layout = { height: 100 };
-		fireLayoutEvent(
-			screen.getByTestId( 'navigation-screen-test-screen-1' ),
-			screen1Layout
-		);
-		act( () => jest.advanceTimersByTime( 1 ) );
-		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
-
-		// Navigate to screen 2
-		fireEvent.press( screen.getByText( /test-screen-1/ ) );
-		const screen2Layout = { height: 200 };
-		fireLayoutEvent(
-			screen.getByTestId( 'navigation-screen-test-screen-2' ),
-			screen2Layout
-		);
-		// The animation takes 300 ms, so we wait that time plus 1 ms
-		// to the completion.
-		act( () => jest.advanceTimersByTime( 301 ) );
-		expect( navigationContainer ).toHaveAnimatedStyle( screen2Layout );
-	} ) );
-
-it( 'animates height transitioning from non-full-screen to full-screen', async () =>
-	withReanimatedTimer( async () => {
-		const screen = render(
-			<NavigationContainer testID="navigation-container" main animate>
-				<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
-				<TestScreen
-					name="test-screen-2"
-					navigateTo="test-screen-1"
-					fullScreen
-				/>
-			</NavigationContainer>
-		);
-
-		const navigationContainer = await screen.findByTestId(
-			'navigation-container'
-		);
-
-		expect( navigationContainer ).toHaveAnimatedStyle( { height: 1 } );
-
-		// First height value should be set without animation, but we need
-		// to wait for a frame to let animated styles be updated.
-		const screen1Layout = { height: 100 };
-		fireLayoutEvent(
-			screen.getByTestId( 'navigation-screen-test-screen-1' ),
-			screen1Layout
-		);
-		act( () => jest.advanceTimersByTime( 1 ) );
-		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
-
-		// Navigate to screen 2
-		fireEvent.press( screen.getByText( /test-screen-1/ ) );
-		// The animation takes 300 ms, so we wait that time plus 1 ms
-		// to the completion.
-		act( () => jest.advanceTimersByTime( 301 ) );
-		expect( navigationContainer ).toHaveAnimatedStyle( {
-			height: WINDOW_HEIGHT,
-		} );
-	} ) );
-
-it( 'animates height transitioning from full-screen to non-full-screen', async () =>
-	withReanimatedTimer( async () => {
-		const screen = render(
-			<NavigationContainer testID="navigation-container" main animate>
-				<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
-				<TestScreen
-					name="test-screen-2"
-					navigateTo="test-screen-1"
-					fullScreen
-				/>
-			</NavigationContainer>
-		);
-
-		const navigationContainer = await screen.findByTestId(
-			'navigation-container'
-		);
-
-		expect( navigationContainer ).toHaveAnimatedStyle( { height: 1 } );
-
-		// First height value should be set without animation, but we need
-		// to wait for a frame to let animated styles be updated.
-		const screen1Layout = { height: 100 };
-		fireLayoutEvent(
-			screen.getByTestId( 'navigation-screen-test-screen-1' ),
-			screen1Layout
-		);
-		act( () => jest.advanceTimersByTime( 1 ) );
-		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
-
-		// Navigate to screen 2
-		fireEvent.press( screen.getByText( /test-screen-1/ ) );
-		// The animation takes 300 ms, so we wait that time plus 1 ms
-		// to the completion.
-		act( () => jest.advanceTimersByTime( 301 ) );
-		expect( navigationContainer ).toHaveAnimatedStyle( {
-			height: WINDOW_HEIGHT,
-		} );
-
-		// Navigate to screen 1
-		fireEvent.press( await screen.findByText( /test-screen-2/ ) );
-		// The animation takes 300 ms, so we wait that time plus 1 ms
-		// to the completion.
-		act( () => jest.advanceTimersByTime( 301 ) );
-		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
-	} ) );
-
-it( 'does not animate height transitioning from full-screen to full-screen', async () =>
-	withReanimatedTimer( async () => {
-		const screen = render(
-			<NavigationContainer testID="navigation-container" main animate>
-				<TestScreen
-					name="test-screen-1"
-					navigateTo="test-screen-2"
-					fullScreen
-				/>
-				<TestScreen
-					name="test-screen-2"
-					navigateTo="test-screen-1"
-					fullScreen
-				/>
-			</NavigationContainer>
-		);
-
-		const navigationContainer = await screen.findByTestId(
-			'navigation-container'
-		);
-
-		// First height value should be set without animation, but we need
-		// to wait for a frame to let animated styles be updated.
-		act( () => jest.advanceTimersByTime( 1 ) );
-		expect( navigationContainer ).toHaveAnimatedStyle( {
-			height: WINDOW_HEIGHT,
-		} );
-
-		// Navigate to screen 2
-		fireEvent.press( screen.getByText( /test-screen-1/ ) );
-		// We wait some milliseconds to check if height has changed.
-		act( () => jest.advanceTimersByTime( 10 ) );
-		expect( navigationContainer ).toHaveAnimatedStyle( {
-			height: WINDOW_HEIGHT,
-		} );
-	} ) );

package/src/mobile/bottom-sheet/button.native.js

@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-import { TouchableOpacity, View, Text } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-
-const BottomSheetButton = ( { onPress, disabled, text, color } ) => (
-	<TouchableOpacity accessible onPress={ onPress } disabled={ disabled }>
-		<View style={ { flexDirection: 'row', justifyContent: 'center' } }>
-			<Text style={ { ...styles.buttonText, color } }>{ text }</Text>
-		</View>
-	</TouchableOpacity>
-);
-
-export default BottomSheetButton;