@wordpress/components 25.13.0 → 25.15.0

package/src/mobile/image/style.native.scss

@@ -21,10 +21,23 @@
 }
 
 .retryIcon {
-	width: 80px;
-	height: 80px;
-	justify-content: center;
-	align-items: center;
+	background-color: $black;
+	border-radius: 200px;
+	padding: 8px;
+}
+
+.retryIconDark {
+	background-color: $white;
+}
+
+.iconOffline {
+	fill: $white;
+	width: 24px;
+	height: 24px;
+}
+
+.iconOfflineDark {
+	fill: $black;
 }
 
 .customRetryIcon {
@@ -33,9 +46,13 @@
 }
 
 .iconRetry {
-	fill: #fff;
-	width: 100%;
-	height: 100%;
+	fill: $white;
+	width: 24px;
+	height: 24px;
+}
+
+.iconRetryDark {
+	fill: $black;
 }
 
 .iconPlaceholder {
@@ -90,12 +107,17 @@
 }
 
 .uploadFailedText {
-	color: #fff;
+	color: $black;
+	font-weight: bold;
 	font-size: 14;
 	margin-top: 5;
 	text-align: center;
 }
 
+.uploadFailedTextDark {
+	color: $white;
+}
+
 .editContainer {
 	width: 44px;
 	height: 44px;
@@ -116,7 +138,7 @@
 }
 
 .iconCustomise {
-	fill: #fff;
+	fill: $white;
 	position: absolute;
 	top: 7px;
 	left: 7px;
@@ -124,6 +146,10 @@
 
 .retryContainer {
 	flex: 1;
+	background-color: "rgba(255, 255, 255, 0.8)";
+}
+
+.retryContainerDark {
 	background-color: "rgba(0, 0, 0, 0.5)";
 }
 

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

@@ -2,26 +2,71 @@
  * External dependencies
  */
 import { FlatList } from 'react-native';
-import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	forwardRef,
+	useCallback,
+	useImperativeHandle,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import useScroll from './use-scroll';
 import KeyboardAvoidingView from '../keyboard-avoiding-view';
 
 const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
 
-export const KeyboardAwareFlatList = ( { innerRef, onScroll, ...props } ) => {
-	const scrollHandler = useAnimatedScrollHandler( { onScroll } );
+export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
+	const { extraScrollHeight, scrollEnabled, shouldPreventAutomaticScroll } =
+		props;
+
+	const {
+		scrollViewRef,
+		scrollHandler,
+		scrollToSection,
+		scrollToElement,
+		onContentSizeChange,
+		lastScrollTo,
+	} = useScroll( {
+		scrollEnabled,
+		shouldPreventAutomaticScroll,
+		extraScrollHeight,
+		onScroll,
+	} );
+
+	const getFlatListRef = useCallback(
+		( flatListRef ) => {
+			// On Android, we get the ref of the associated scroll
+			// view to the FlatList.
+			scrollViewRef.current = flatListRef?.getNativeScrollRef();
+		},
+		[ scrollViewRef ]
+	);
+
+	useImperativeHandle( ref, () => {
+		return {
+			scrollViewRef: scrollViewRef.current,
+			scrollToSection,
+			scrollToElement,
+			lastScrollTo,
+		};
+	} );
+
 	return (
 		<KeyboardAvoidingView style={ { flex: 1 } }>
 			<AnimatedFlatList
-				ref={ innerRef }
+				ref={ getFlatListRef }
 				onScroll={ scrollHandler }
+				onContentSizeChange={ onContentSizeChange }
 				{ ...props }
 			/>
 		</KeyboardAvoidingView>
 	);
 };
 
-export default KeyboardAwareFlatList;
+export default forwardRef( KeyboardAwareFlatList );

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

@@ -2,139 +2,104 @@
  * External dependencies
  */
 
-import { ScrollView, FlatList, useWindowDimensions } from 'react-native';
-import Animated, {
-	useAnimatedScrollHandler,
-	useSharedValue,
-} from 'react-native-reanimated';
+import { ScrollView, FlatList } from 'react-native';
+import Animated from 'react-native-reanimated';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useEffect, useRef } from '@wordpress/element';
+import {
+	useCallback,
+	useEffect,
+	forwardRef,
+	useImperativeHandle,
+} from '@wordpress/element';
 import { useThrottle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import useScroll from './use-scroll';
 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 DEFAULT_FONT_SIZE = 16;
 const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
 
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
 /**
  * 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.
+ * @param {Object}    props                              Component props.
+ * @param {number}    props.extraScrollHeight            Extra scroll height for the content.
+ * @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.
+ * @param {RefObject} ref
  * @return {Component} KeyboardAwareFlatList component.
  */
-export const KeyboardAwareFlatList = ( {
-	extraScrollHeight,
-	innerRef,
-	onScroll,
-	scrollEnabled,
-	scrollViewStyle,
-	shouldPreventAutomaticScroll,
-	...props
-} ) => {
-	const scrollViewRef = useRef();
-	const scrollViewMeasurements = useRef();
-	const scrollViewYOffset = useSharedValue( -1 );
-
-	const { height: windowHeight, width: windowWidth } = useWindowDimensions();
-	const isLandscape = windowWidth >= windowHeight;
-
-	const [ keyboardOffset ] = useKeyboardOffset(
+export const KeyboardAwareFlatList = (
+	{
+		extraScrollHeight,
+		onScroll,
 		scrollEnabled,
-		shouldPreventAutomaticScroll
-	);
-
-	const [ currentCaretData ] = useTextInputCaretPosition( scrollEnabled );
+		scrollViewStyle,
+		shouldPreventAutomaticScroll,
+		...props
+	},
+	ref
+) => {
+	const {
+		scrollViewRef,
+		scrollHandler,
+		keyboardOffset,
+		scrollToSection,
+		scrollToElement,
+		onContentSizeChange,
+		lastScrollTo,
+	} = useScroll( {
+		scrollEnabled,
+		shouldPreventAutomaticScroll,
+		extraScrollHeight,
+		onScroll,
+		onSizeChange,
+	} );
 
 	const [ getTextInputOffset ] = useTextInputOffset(
 		scrollEnabled,
 		scrollViewRef
 	);
 
-	const [ scrollToTextInputOffset ] = useScrollToTextInput(
-		extraScrollHeight,
-		keyboardOffset,
-		scrollEnabled,
-		scrollViewMeasurements,
-		scrollViewRef,
-		scrollViewYOffset
-	);
-
 	const onScrollToTextInput = useThrottle(
 		useCallback(
 			async ( caret ) => {
+				const { caretHeight = DEFAULT_FONT_SIZE } = caret ?? {};
 				const textInputOffset = await getTextInputOffset( caret );
 				const hasTextInputOffset = textInputOffset !== null;
 
 				if ( hasTextInputOffset ) {
-					scrollToTextInputOffset( caret, textInputOffset );
+					scrollToSection( textInputOffset, caretHeight );
 				}
 			},
-			[ getTextInputOffset, scrollToTextInputOffset ]
+			[ getTextInputOffset, scrollToSection ]
 		),
 		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;
-			scrollViewYOffset.value = contentOffset.y;
-			onScroll( event );
-		},
-	} );
-
-	const measureScrollView = useCallback( () => {
-		if ( scrollViewRef.current ) {
-			const scrollRef = scrollViewRef.current.getNativeScrollRef();
+	const [ currentCaretData ] = useTextInputCaretPosition( scrollEnabled );
 
-			scrollRef.measureInWindow( ( _x, y, width, height ) => {
-				scrollViewMeasurements.current = { y, width, height };
-			} );
-		}
-	}, [] );
+	const onSizeChange = useCallback(
+		() => onScrollToTextInput( currentCaretData ),
+		[ currentCaretData, onScrollToTextInput ]
+	);
 
-	const onContentSizeChange = useCallback( () => {
+	useEffect( () => {
 		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;
-			innerRef( ref );
-		},
-		[ innerRef ]
-	);
+	}, [ currentCaretData, onScrollToTextInput ] );
 
 	// Adds content insets when the keyboard is opened to have
 	// extra padding at the bottom.
@@ -142,6 +107,15 @@ export const KeyboardAwareFlatList = ( {
 
 	const style = [ { flex: 1 }, scrollViewStyle ];
 
+	useImperativeHandle( ref, () => {
+		return {
+			scrollViewRef: scrollViewRef.current,
+			scrollToSection,
+			scrollToElement,
+			lastScrollTo,
+		};
+	} );
+
 	return (
 		<AnimatedScrollView
 			automaticallyAdjustContentInsets={ false }
@@ -149,7 +123,7 @@ export const KeyboardAwareFlatList = ( {
 			keyboardShouldPersistTaps="handled"
 			onContentSizeChange={ onContentSizeChange }
 			onScroll={ scrollHandler }
-			ref={ getRef }
+			ref={ scrollViewRef }
 			scrollEnabled={ scrollEnabled }
 			scrollEventThrottle={ 16 }
 			style={ style }
@@ -159,4 +133,4 @@ export const KeyboardAwareFlatList = ( {
 	);
 };
 
-export default KeyboardAwareFlatList;
+export default forwardRef( KeyboardAwareFlatList );

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

@@ -7,22 +7,23 @@ import { renderHook } from '@testing-library/react-native';
 /**
  * Internal dependencies
  */
-import useScrollToTextInput from '../use-scroll-to-text-input';
+import useScrollToSection from '../use-scroll-to-section';
 
-describe( 'useScrollToTextInput', () => {
-	it( 'scrolls up to the current TextInput offset', () => {
+describe( 'useScrollToSection', () => {
+	it( 'scrolls up to the section', () => {
 		// Arrange
-		const currentCaretData = { caretHeight: 10 };
+		const sectionY = 50;
+		const sectionHeight = 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(
+			useScrollToSection(
 				extraScrollHeight,
 				keyboardOffset,
 				scrollEnabled,
@@ -33,28 +34,29 @@ describe( 'useScrollToTextInput', () => {
 		);
 
 		// Act
-		result.current[ 0 ]( currentCaretData, textInputOffset );
+		result.current[ 0 ]( sectionY, sectionHeight );
 
 		// Assert
 		expect( scrollViewRef.current.scrollTo ).toHaveBeenCalledWith( {
-			y: textInputOffset,
+			y: sectionY,
 			animated: true,
 		} );
 	} );
 
-	it( 'scrolls down to the current TextInput offset', () => {
+	it( 'scrolls down to the section', () => {
 		// Arrange
-		const currentCaretData = { caretHeight: 10 };
+		const sectionY = 750;
+		const sectionHeight = 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(
+			useScrollToSection(
 				extraScrollHeight,
 				keyboardOffset,
 				scrollEnabled,
@@ -65,15 +67,13 @@ describe( 'useScrollToTextInput', () => {
 		);
 
 		// Act
-		result.current[ 0 ]( currentCaretData, textInputOffset );
+		result.current[ 0 ]( sectionY, sectionHeight );
 
 		// Assert
 		const expectedYOffset =
-			textInputOffset -
+			sectionY -
 			( scrollViewMeasurements.current.height -
-				( keyboardOffset +
-					extraScrollHeight +
-					currentCaretData.caretHeight ) );
+				( keyboardOffset + extraScrollHeight + sectionHeight ) );
 		expect( scrollViewRef.current.scrollTo ).toHaveBeenCalledWith( {
 			y: expectedYOffset,
 			animated: true,
@@ -82,17 +82,18 @@ describe( 'useScrollToTextInput', () => {
 
 	it( 'does not scroll when the ScrollView ref is not available', () => {
 		// Arrange
-		const currentCaretData = { caretHeight: 10 };
+		const sectionY = 50;
+		const sectionHeight = 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(
+			useScrollToSection(
 				extraScrollHeight,
 				keyboardOffset,
 				scrollEnabled,
@@ -103,7 +104,7 @@ describe( 'useScrollToTextInput', () => {
 		);
 
 		// Act
-		result.current[ 0 ]( currentCaretData, textInputOffset );
+		result.current[ 0 ]( sectionY, sectionHeight );
 
 		// Assert
 		expect( scrollViewRef.current ).toBeNull();
@@ -111,17 +112,18 @@ describe( 'useScrollToTextInput', () => {
 
 	it( 'does not scroll when the scroll is not enabled', () => {
 		// Arrange
-		const currentCaretData = { caretHeight: 10 };
+		const sectionY = 50;
+		const sectionHeight = 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(
+			useScrollToSection(
 				extraScrollHeight,
 				keyboardOffset,
 				scrollEnabled,
@@ -132,7 +134,7 @@ describe( 'useScrollToTextInput', () => {
 		);
 
 		// Act
-		result.current[ 0 ]( currentCaretData, textInputOffset );
+		result.current[ 0 ]( sectionY, sectionHeight );
 
 		// Assert
 		expect( scrollViewRef.current.scrollTo ).not.toHaveBeenCalled();

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

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+
+import { renderHook } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import useScroll from '../use-scroll';
+
+// Mock Reanimated with default mock
+jest.mock( 'react-native-reanimated', () => ( {
+	...require( 'react-native-reanimated/mock' ),
+	useAnimatedScrollHandler: jest.fn( ( args ) => args ),
+} ) );
+
+describe( 'useScroll', () => {
+	it( 'scrolls using current scroll position', () => {
+		const sectionY = 50;
+		const sectionHeight = 10;
+		const scrollViewMeasurements = { x: 0, y: 0, width: 0, height: 600 };
+		const extraScrollHeight = 50;
+		const scrollEnabled = true;
+		const shouldPreventAutomaticScroll = false;
+
+		const scrollTo = jest.fn();
+		const measureInWindow = jest.fn( ( callback ) =>
+			callback( ...Object.values( scrollViewMeasurements ) )
+		);
+		const scrollRef = { scrollTo, measureInWindow };
+		const onScroll = jest.fn();
+		const onSizeChange = jest.fn();
+
+		const { result } = renderHook( () =>
+			useScroll( {
+				scrollEnabled,
+				shouldPreventAutomaticScroll,
+				onScroll,
+				onSizeChange,
+				extraScrollHeight,
+			} )
+		);
+		const {
+			scrollViewRef,
+			onContentSizeChange,
+			scrollHandler,
+			scrollToSection,
+		} = result.current;
+
+		// Assign ref
+		scrollViewRef.current = scrollRef;
+
+		// Check content size changes
+		onContentSizeChange();
+		expect( measureInWindow ).toHaveBeenCalled();
+		expect( onSizeChange ).toHaveBeenCalled();
+
+		// Set up initial scroll offset
+		scrollHandler.onScroll( { contentOffset: { y: 150 } } );
+
+		// Scroll to section
+		scrollToSection( sectionY, sectionHeight );
+
+		// Assert
+		expect( scrollTo ).toHaveBeenCalledWith( {
+			y: sectionY,
+			animated: true,
+		} );
+	} );
+} );

package/src/mobile/keyboard-aware-flat-list/use-scroll-to-element.native.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/**
+ * Hook to scroll to a specified element by taking into account the Keyboard
+ * and the Header.
+ *
+ * @param {RefObject} scrollViewRef   Scroll view reference.
+ * @param {Function}  scrollToSection Function to scroll.
+ * @return {Function[]} Function to scroll to an element.
+ */
+export default function useScrollToElement( scrollViewRef, scrollToSection ) {
+	/**
+	 * Function to scroll to an element.
+	 *
+	 * @param {RefObject} elementRef Ref of the element.
+	 */
+	const scrollToElement = useCallback(
+		( elementRef ) => {
+			if ( ! scrollViewRef.current || ! elementRef ) {
+				return;
+			}
+
+			elementRef.current.measureLayout(
+				scrollViewRef.current,
+				( _x, y, _width, height ) => {
+					if ( height || y ) {
+						scrollToSection( Math.round( y ), height );
+					}
+				},
+				() => {}
+			);
+		},
+		[ scrollViewRef, scrollToSection ]
+	);
+
+	return [ scrollToElement ];
+}