@wordpress/components 35.0.0 → 35.0.1

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

@@ -1,193 +0,0 @@
-/**
- * External dependencies
- */
-import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
-import Animated, {
-	Easing,
-	useAnimatedStyle,
-	useSharedValue,
-	withTiming,
-} from 'react-native-reanimated';
-
-/**
- * WordPress dependencies
- */
-import {
-	useContext,
-	useMemo,
-	useCallback,
-	Children,
-	useRef,
-	cloneElement,
-} from '@wordpress/element';
-
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import {
-	BottomSheetNavigationContext,
-	BottomSheetNavigationProvider,
-} from './bottom-sheet-navigation-context';
-import { BottomSheetContext } from '../bottom-sheet-context';
-
-import styles from './styles.scss';
-
-const AnimationSpec = {
-	animation: 'timing',
-	config: {
-		duration: 200,
-		easing: Easing.ease,
-	},
-};
-
-const fadeConfig = ( { current } ) => {
-	return {
-		cardStyle: {
-			opacity: current.progress,
-		},
-	};
-};
-
-const options = {
-	transitionSpec: {
-		open: AnimationSpec,
-		close: AnimationSpec,
-	},
-	headerShown: false,
-	gestureEnabled: false,
-	cardStyleInterpolator: fadeConfig,
-	keyboardHandlingEnabled: false,
-};
-
-const HEIGHT_ANIMATION_DURATION = 300;
-const DEFAULT_HEIGHT = 1;
-
-function BottomSheetNavigationContainer( {
-	children,
-	animate,
-	main,
-	theme,
-	style,
-	testID,
-} ) {
-	const Stack = useRef( createStackNavigator() ).current;
-	const navigationContext = useContext( BottomSheetNavigationContext );
-	const { maxHeight: sheetMaxHeight, isMaxHeightSet: isSheetMaxHeightSet } =
-		useContext( BottomSheetContext );
-	const currentHeight = useSharedValue(
-		navigationContext.currentHeight?.value || DEFAULT_HEIGHT
-	);
-
-	const backgroundStyle = usePreferredColorSchemeStyle(
-		styles.background,
-		styles.backgroundDark
-	);
-
-	const defaultTheme = useMemo(
-		() => ( {
-			...DefaultTheme,
-			colors: {
-				...DefaultTheme.colors,
-				background: backgroundStyle.backgroundColor,
-			},
-		} ),
-		[ backgroundStyle.backgroundColor ]
-	);
-	const _theme = theme || defaultTheme;
-
-	const setHeight = useCallback(
-		( height ) => {
-			if (
-				height > DEFAULT_HEIGHT &&
-				Math.round( height ) !== Math.round( currentHeight.value )
-			) {
-				// If max height is set in the bottom sheet, we clamp
-				// the new height using that value.
-				const newHeight = isSheetMaxHeightSet
-					? Math.min( sheetMaxHeight, height )
-					: height;
-				const shouldAnimate =
-					animate && currentHeight.value !== DEFAULT_HEIGHT;
-
-				if ( shouldAnimate ) {
-					currentHeight.value = withTiming( newHeight, {
-						duration: HEIGHT_ANIMATION_DURATION,
-						easing: Easing.out( Easing.cubic ),
-					} );
-				} else {
-					currentHeight.value = newHeight;
-				}
-			}
-		},
-		[ animate, currentHeight, isSheetMaxHeightSet, sheetMaxHeight ]
-	);
-
-	const animatedStyles = useAnimatedStyle( () => ( {
-		height: currentHeight.value,
-	} ) );
-
-	const screens = useMemo( () => {
-		return Children.map( children, ( child ) => {
-			let screen = child;
-			const { name, ...otherProps } = child.props;
-			if ( ! main ) {
-				screen = cloneElement( child, {
-					...child.props,
-					isNested: true,
-				} );
-			}
-			return (
-				<Stack.Screen
-					name={ name }
-					{ ...otherProps }
-					children={ () => screen }
-				/>
-			);
-		} );
-	}, [ children, main ] );
-
-	return useMemo( () => {
-		return (
-			<Animated.View
-				style={ [ style, animatedStyles ] }
-				testID={ testID }
-			>
-				<BottomSheetNavigationProvider
-					value={ { setHeight, currentHeight } }
-				>
-					{ main ? (
-						<NavigationContainer theme={ _theme }>
-							<Stack.Navigator
-								screenOptions={ options }
-								detachInactiveScreens={ false }
-							>
-								{ screens }
-							</Stack.Navigator>
-						</NavigationContainer>
-					) : (
-						<Stack.Navigator
-							screenOptions={ options }
-							detachInactiveScreens={ false }
-						>
-							{ screens }
-						</Stack.Navigator>
-					) }
-				</BottomSheetNavigationProvider>
-			</Animated.View>
-		);
-	}, [
-		_theme,
-		animatedStyles,
-		currentHeight,
-		main,
-		screens,
-		setHeight,
-		style,
-		testID,
-	] );
-}
-
-export default BottomSheetNavigationContainer;

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;