@wordpress/components 23.7.0 → 23.8.0

package/src/mobile/keyboard-aware-flat-list/index.ios.js

@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import { FlatList } from 'react-native';
-import fastDeepEqual from 'fast-deep-equal/es6';
+
+import { ScrollView, FlatList, useWindowDimensions } from 'react-native';
 import Animated, {
 	useAnimatedScrollHandler,
 	useSharedValue,
@@ -12,36 +11,123 @@ import Animated, {
 /**
  * WordPress dependencies
  */
-import { memo, useCallback, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { useThrottle } from '@wordpress/compose';
 
-const List = memo( FlatList, fastDeepEqual );
-const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(
-	KeyboardAwareScrollView
-);
+/**
+ * Internal dependencies
+ */
+import useTextInputOffset from './use-text-input-offset';
+import useKeyboardOffset from './use-keyboard-offset';
+import useScrollToTextInput from './use-scroll-to-text-input';
+import useTextInputCaretPosition from './use-text-input-caret-position';
 
+const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
+
+/**
+ * React component that provides a FlatList that is aware of the keyboard state and can scroll
+ * to the currently focused TextInput.
+ *
+ * @param {Object}   props                              Component props.
+ * @param {number}   props.extraScrollHeight            Extra scroll height for the content.
+ * @param {Function} props.innerRef                     Function to pass the ScrollView ref to the parent component.
+ * @param {Function} props.onScroll                     Function to be called when the list is scrolled.
+ * @param {boolean}  props.scrollEnabled                Whether the list can be scrolled.
+ * @param {Object}   props.scrollViewStyle              Additional style for the ScrollView component.
+ * @param {boolean}  props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
+ * @param {Object}   props...                           Other props to pass to the FlatList component.
+ * @return {WPComponent} KeyboardAwareFlatList component.
+ */
 export const KeyboardAwareFlatList = ( {
 	extraScrollHeight,
-	shouldPreventAutomaticScroll,
 	innerRef,
-	autoScroll,
-	scrollViewStyle,
-	inputAccessoryViewHeight,
 	onScroll,
-	...listProps
+	scrollEnabled,
+	scrollViewStyle,
+	shouldPreventAutomaticScroll,
+	...props
 } ) => {
 	const scrollViewRef = useRef();
-	const keyboardWillShowIndicator = useRef();
+	const scrollViewMeasurements = useRef();
+	const scrollViewYOffset = useSharedValue( -1 );
+
+	const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+	const isLandscape = windowWidth >= windowHeight;
+
+	const [ keyboardOffset ] = useKeyboardOffset(
+		scrollEnabled,
+		shouldPreventAutomaticScroll
+	);
+
+	const [ currentCaretData ] = useTextInputCaretPosition( scrollEnabled );
+
+	const [ getTextInputOffset ] = useTextInputOffset(
+		scrollEnabled,
+		scrollViewRef
+	);
+
+	const [ scrollToTextInputOffset ] = useScrollToTextInput(
+		extraScrollHeight,
+		keyboardOffset,
+		scrollEnabled,
+		scrollViewMeasurements,
+		scrollViewRef,
+		scrollViewYOffset
+	);
 
-	const latestContentOffsetY = useSharedValue( -1 );
+	const onScrollToTextInput = useThrottle(
+		useCallback(
+			async ( caret ) => {
+				const textInputOffset = await getTextInputOffset( caret );
+				const hasTextInputOffset = textInputOffset !== null;
+
+				if ( hasTextInputOffset ) {
+					scrollToTextInputOffset( caret, textInputOffset );
+				}
+			},
+			[ getTextInputOffset, scrollToTextInputOffset ]
+		),
+		200,
+		{ leading: false }
+	);
+
+	useEffect( () => {
+		onScrollToTextInput( currentCaretData );
+	}, [ currentCaretData, onScrollToTextInput ] );
+
+	// When the orientation changes, the ScrollView measurements
+	// need to be re-calculated.
+	useEffect( () => {
+		scrollViewMeasurements.current = null;
+	}, [ isLandscape ] );
 
 	const scrollHandler = useAnimatedScrollHandler( {
 		onScroll: ( event ) => {
 			const { contentOffset } = event;
-			latestContentOffsetY.value = contentOffset.y;
+			scrollViewYOffset.value = contentOffset.y;
 			onScroll( event );
 		},
 	} );
 
+	const measureScrollView = useCallback( () => {
+		if ( scrollViewRef.current ) {
+			const scrollRef = scrollViewRef.current.getNativeScrollRef();
+
+			scrollRef.measureInWindow( ( _x, y, width, height ) => {
+				scrollViewMeasurements.current = { y, width, height };
+			} );
+		}
+	}, [] );
+
+	const onContentSizeChange = useCallback( () => {
+		onScrollToTextInput( currentCaretData );
+
+		// Sets the first values when the content size changes.
+		if ( ! scrollViewMeasurements.current ) {
+			measureScrollView();
+		}
+	}, [ measureScrollView, onScrollToTextInput, currentCaretData ] );
+
 	const getRef = useCallback(
 		( ref ) => {
 			scrollViewRef.current = ref;
@@ -49,63 +135,28 @@ export const KeyboardAwareFlatList = ( {
 		},
 		[ innerRef ]
 	);
-	const onKeyboardWillHide = useCallback( () => {
-		keyboardWillShowIndicator.current = false;
-	}, [] );
-	const onKeyboardDidHide = useCallback( () => {
-		setTimeout( () => {
-			if (
-				! keyboardWillShowIndicator.current &&
-				latestContentOffsetY.value !== -1 &&
-				! shouldPreventAutomaticScroll()
-			) {
-				// Reset the content position if keyboard is still closed.
-				scrollViewRef.current?.scrollToPosition(
-					0,
-					latestContentOffsetY.value,
-					true
-				);
-			}
-		}, 50 );
-	}, [ latestContentOffsetY, shouldPreventAutomaticScroll ] );
-	const onKeyboardWillShow = useCallback( () => {
-		keyboardWillShowIndicator.current = true;
-	}, [] );
+
+	// Adds content insets when the keyboard is opened to have
+	// extra padding at the bottom.
+	const contentInset = { bottom: keyboardOffset };
+
+	const style = [ { flex: 1 }, scrollViewStyle ];
 
 	return (
-		<AnimatedKeyboardAwareScrollView
-			style={ [ { flex: 1 }, scrollViewStyle ] }
-			keyboardDismissMode="none"
-			enableResetScrollToCoords={ false }
+		<AnimatedScrollView
+			automaticallyAdjustContentInsets={ false }
+			contentInset={ contentInset }
 			keyboardShouldPersistTaps="handled"
-			extraScrollHeight={ extraScrollHeight }
-			extraHeight={ 0 }
-			inputAccessoryViewHeight={ inputAccessoryViewHeight }
-			enableAutomaticScroll={
-				autoScroll === undefined ? false : autoScroll
-			}
-			ref={ getRef }
-			onKeyboardWillHide={ onKeyboardWillHide }
-			onKeyboardDidHide={ onKeyboardDidHide }
-			onKeyboardWillShow={ onKeyboardWillShow }
-			scrollEnabled={ listProps.scrollEnabled }
+			onContentSizeChange={ onContentSizeChange }
 			onScroll={ scrollHandler }
+			ref={ getRef }
+			scrollEnabled={ scrollEnabled }
+			scrollEventThrottle={ 16 }
+			style={ style }
 		>
-			<List { ...listProps } />
-		</AnimatedKeyboardAwareScrollView>
+			<FlatList { ...props } />
+		</AnimatedScrollView>
 	);
 };
 
-KeyboardAwareFlatList.handleCaretVerticalPositionChange = (
-	scrollView,
-	targetId,
-	caretY,
-	previousCaretY
-) => {
-	if ( previousCaretY ) {
-		// If this is not the first tap.
-		scrollView.refreshScrollForField( targetId );
-	}
-};
-
 export default KeyboardAwareFlatList;

package/src/mobile/keyboard-aware-flat-list/test/use-keyboard-offset.native.js

@@ -0,0 +1,203 @@
+/**
+ * External dependencies
+ */
+import { act, renderHook } from '@testing-library/react-native';
+import { Keyboard } from 'react-native';
+import RCTDeviceEventEmitter from 'react-native/Libraries/EventEmitter/RCTDeviceEventEmitter';
+
+/**
+ * Internal dependencies
+ */
+import useKeyboardOffset from '../use-keyboard-offset';
+
+jest.useFakeTimers();
+
+describe( 'useKeyboardOffset', () => {
+	beforeEach( () => {
+		Keyboard.removeAllListeners( 'keyboardDidShow' );
+		Keyboard.removeAllListeners( 'keyboardDidHide' );
+		Keyboard.removeAllListeners( 'keyboardWillShow' );
+	} );
+
+	it( 'returns the initial state', () => {
+		// Arrange
+		const { result } = renderHook( () => useKeyboardOffset( true ) );
+		const [ keyboardOffset ] = result.current;
+
+		// Assert
+		expect( keyboardOffset ).toBe( 0 );
+	} );
+
+	it( 'updates keyboard visibility and offset when the keyboard is shown', () => {
+		// Arrange
+		const { result } = renderHook( () => useKeyboardOffset( true ) );
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		// Assert
+		const [ keyboardOffset ] = result.current;
+		expect( keyboardOffset ).toBe( 250 );
+	} );
+
+	it( 'updates keyboard visibility and offset when the keyboard is hidden', () => {
+		// Arrange
+		const shouldPreventAutomaticScroll = jest.fn().mockReturnValue( false );
+		const { result } = renderHook( () =>
+			useKeyboardOffset( true, shouldPreventAutomaticScroll )
+		);
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
+		} );
+
+		// Assert
+		const [ keyboardOffset ] = result.current;
+		expect( keyboardOffset ).toBe( 0 );
+	} );
+
+	it( 'removes all keyboard listeners when scrollEnabled changes to false', () => {
+		// Arrange
+		const { result, rerender } = renderHook(
+			( { scrollEnabled } ) => useKeyboardOffset( scrollEnabled ),
+			{
+				initialProps: { scrollEnabled: true },
+			}
+		);
+		const [ keyboardOffset ] = result.current;
+
+		// Act
+		rerender( { scrollEnabled: false } );
+
+		// Assert
+		expect( keyboardOffset ).toBe( 0 );
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidHide' ) ).toBe(
+			0
+		);
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidShow' ) ).toBe(
+			0
+		);
+	} );
+
+	it( 'adds all keyboard listeners when scrollEnabled changes to true', () => {
+		// Arrange
+		const { result, rerender } = renderHook(
+			( { scrollEnabled } ) => useKeyboardOffset( scrollEnabled ),
+			{
+				initialProps: { scrollEnabled: false },
+			}
+		);
+		// Act
+		act( () => {
+			rerender( { scrollEnabled: true } );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		const [ keyboardOffset ] = result.current;
+
+		// Assert
+		expect( keyboardOffset ).toBe( 250 );
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidShow' ) ).toBe(
+			1
+		);
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidHide' ) ).toBe(
+			1
+		);
+	} );
+
+	it( 'does not set keyboard offset to 0 when keyboard is hidden and shouldPreventAutomaticScroll is true', () => {
+		// Arrange
+		const shouldPreventAutomaticScroll = jest.fn().mockReturnValue( true );
+		const { result } = renderHook( () =>
+			useKeyboardOffset( true, shouldPreventAutomaticScroll )
+		);
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 250 );
+	} );
+
+	it( 'handles updates to shouldPreventAutomaticScroll', () => {
+		// Arrange
+		const preventScrollTrue = jest.fn( () => true );
+		const preventScrollFalse = jest.fn( () => false );
+
+		// Act
+		const { result, rerender } = renderHook(
+			( { shouldPreventAutomaticScroll } ) =>
+				useKeyboardOffset( true, shouldPreventAutomaticScroll ),
+			{
+				initialProps: {
+					shouldPreventAutomaticScroll: preventScrollFalse,
+				},
+			}
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 0 );
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 150 },
+			} );
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 150 );
+
+		// Act
+		act( () => {
+			rerender( { shouldPreventAutomaticScroll: preventScrollTrue } );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 150 );
+
+		// Act
+		act( () => {
+			rerender( { shouldPreventAutomaticScroll: preventScrollFalse } );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 250 );
+	} );
+} );

package/src/mobile/keyboard-aware-flat-list/test/use-scroll-to-text-input.native.js

@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+
+import { renderHook } from '@testing-library/react-native';
+
+/**
+ * Internal dependencies
+ */
+import useScrollToTextInput from '../use-scroll-to-text-input';
+
+describe( 'useScrollToTextInput', () => {
+	it( 'scrolls up to the current TextInput offset', () => {
+		// Arrange
+		const currentCaretData = { caretHeight: 10 };
+		const extraScrollHeight = 50;
+		const keyboardOffset = 100;
+		const scrollEnabled = true;
+		const scrollViewRef = { current: { scrollTo: jest.fn() } };
+		const scrollViewMeasurements = { current: { height: 600 } };
+		const scrollViewYOffset = { value: 150 };
+		const textInputOffset = 50;
+
+		const { result } = renderHook( () =>
+			useScrollToTextInput(
+				extraScrollHeight,
+				keyboardOffset,
+				scrollEnabled,
+				scrollViewMeasurements,
+				scrollViewRef,
+				scrollViewYOffset
+			)
+		);
+
+		// Act
+		result.current[ 0 ]( currentCaretData, textInputOffset );
+
+		// Assert
+		expect( scrollViewRef.current.scrollTo ).toHaveBeenCalledWith( {
+			y: textInputOffset,
+			animated: true,
+		} );
+	} );
+
+	it( 'scrolls down to the current TextInput offset', () => {
+		// Arrange
+		const currentCaretData = { caretHeight: 10 };
+		const extraScrollHeight = 50;
+		const keyboardOffset = 100;
+		const scrollEnabled = true;
+		const scrollViewRef = { current: { scrollTo: jest.fn() } };
+		const scrollViewMeasurements = { current: { height: 600 } };
+		const scrollViewYOffset = { value: 250 };
+		const textInputOffset = 750;
+
+		const { result } = renderHook( () =>
+			useScrollToTextInput(
+				extraScrollHeight,
+				keyboardOffset,
+				scrollEnabled,
+				scrollViewMeasurements,
+				scrollViewRef,
+				scrollViewYOffset
+			)
+		);
+
+		// Act
+		result.current[ 0 ]( currentCaretData, textInputOffset );
+
+		// Assert
+		const expectedYOffset =
+			textInputOffset -
+			( scrollViewMeasurements.current.height -
+				( keyboardOffset +
+					extraScrollHeight +
+					currentCaretData.caretHeight ) );
+		expect( scrollViewRef.current.scrollTo ).toHaveBeenCalledWith( {
+			y: expectedYOffset,
+			animated: true,
+		} );
+	} );
+
+	it( 'does not scroll when the ScrollView ref is not available', () => {
+		// Arrange
+		const currentCaretData = { caretHeight: 10 };
+		const extraScrollHeight = 50;
+		const keyboardOffset = 100;
+		const scrollEnabled = true;
+		const scrollViewRef = { current: null };
+		const scrollViewMeasurements = { current: { height: 600 } };
+		const scrollViewYOffset = { value: 0 };
+		const textInputOffset = 50;
+
+		const { result } = renderHook( () =>
+			useScrollToTextInput(
+				extraScrollHeight,
+				keyboardOffset,
+				scrollEnabled,
+				scrollViewMeasurements,
+				scrollViewRef,
+				scrollViewYOffset
+			)
+		);
+
+		// Act
+		result.current[ 0 ]( currentCaretData, textInputOffset );
+
+		// Assert
+		expect( scrollViewRef.current ).toBeNull();
+	} );
+
+	it( 'does not scroll when the scroll is not enabled', () => {
+		// Arrange
+		const currentCaretData = { caretHeight: 10 };
+		const extraScrollHeight = 50;
+		const keyboardOffset = 100;
+		const scrollEnabled = false;
+		const scrollViewRef = { current: { scrollTo: jest.fn() } };
+		const scrollViewMeasurements = { current: { height: 600 } };
+		const scrollViewYOffset = { value: 0 };
+		const textInputOffset = 50;
+
+		const { result } = renderHook( () =>
+			useScrollToTextInput(
+				extraScrollHeight,
+				keyboardOffset,
+				scrollEnabled,
+				scrollViewMeasurements,
+				scrollViewRef,
+				scrollViewYOffset
+			)
+		);
+
+		// Act
+		result.current[ 0 ]( currentCaretData, textInputOffset );
+
+		// Assert
+		expect( scrollViewRef.current.scrollTo ).not.toHaveBeenCalled();
+	} );
+} );

package/src/mobile/keyboard-aware-flat-list/test/use-text-input-caret-position.native.js

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react-native';
+
+/**
+ * WordPress dependencies
+ */
+import RCTAztecView from '@wordpress/react-native-aztec';
+
+/**
+ * Internal dependencies
+ */
+import useTextInputCaretPosition from '../use-text-input-caret-position';
+
+describe( 'useTextInputCaretPosition', () => {
+	let addCaretChangeListenerSpy;
+	let removeCaretChangeListenerSpy;
+
+	beforeAll( () => {
+		addCaretChangeListenerSpy = jest.spyOn(
+			RCTAztecView.InputState,
+			'addCaretChangeListener'
+		);
+		removeCaretChangeListenerSpy = jest.spyOn(
+			RCTAztecView.InputState,
+			'removeCaretChangeListener'
+		);
+	} );
+
+	beforeEach( () => {
+		addCaretChangeListenerSpy.mockClear();
+		removeCaretChangeListenerSpy.mockClear();
+	} );
+
+	it( 'should add and remove caret change listener correctly', () => {
+		// Arrange
+		const scrollEnabled = true;
+
+		// Act
+		const { unmount } = renderHook( () =>
+			useTextInputCaretPosition( scrollEnabled )
+		);
+		unmount();
+
+		// Assert
+		expect( addCaretChangeListenerSpy ).toHaveBeenCalledTimes( 1 );
+		expect( removeCaretChangeListenerSpy ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should add caret change listener when scroll is enabled', () => {
+		// Arrange
+		const scrollEnabled = true;
+
+		// Act
+		renderHook( () => useTextInputCaretPosition( scrollEnabled ) );
+
+		// Assert
+		expect( addCaretChangeListenerSpy ).toHaveBeenCalledTimes( 1 );
+		expect( removeCaretChangeListenerSpy ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should remove caret change listener when scroll is enabled and then changed to disabled', () => {
+		// Arrange
+		const { rerender } = renderHook(
+			( props ) => useTextInputCaretPosition( props.scrollEnabled ),
+			{
+				initialProps: { scrollEnabled: true },
+			}
+		);
+
+		// Assert
+		expect( addCaretChangeListenerSpy ).toHaveBeenCalled();
+
+		// Act
+		rerender( { scrollEnabled: false } );
+
+		// Assert
+		expect( removeCaretChangeListenerSpy ).toHaveBeenCalled();
+		expect( addCaretChangeListenerSpy ).toHaveBeenCalledTimes( 1 );
+	} );
+} );