@wordpress/components 25.13.0 → 25.15.1-next.79a6196f.0

package/src/mobile/image/index.native.js

@@ -9,7 +9,7 @@ import FastImage from 'react-native-fast-image';
  */
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/components';
-import { image as icon } from '@wordpress/icons';
+import { image, offline } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { useEffect, useState, Platform } from '@wordpress/element';
 
@@ -22,13 +22,12 @@ import SvgIconRetry from './icon-retry';
 import ImageEditingButton from './image-editing-button';
 
 const ICON_TYPE = {
+	OFFLINE: 'offline',
 	PLACEHOLDER: 'placeholder',
 	RETRY: 'retry',
 	UPLOAD: 'upload',
 };
 
-export const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };
-
 const ImageComponent = ( {
 	align,
 	alt,
@@ -39,6 +38,7 @@ const ImageComponent = ( {
 	isSelected,
 	shouldUseFastImage,
 	isUploadFailed,
+	isUploadPaused,
 	isUploadInProgress,
 	mediaPickerOptions,
 	onImageDataLoad,
@@ -101,19 +101,23 @@ const ImageComponent = ( {
 	};
 
 	const getIcon = ( iconType ) => {
+		let icon;
 		let iconStyle;
 		switch ( iconType ) {
 			case ICON_TYPE.RETRY:
-				return (
-					<Icon
-						icon={ retryIcon || SvgIconRetry }
-						{ ...styles.iconRetry }
-					/>
-				);
+				icon = retryIcon || SvgIconRetry;
+				iconStyle = iconRetryStyles;
+				break;
+			case ICON_TYPE.OFFLINE:
+				icon = offline;
+				iconStyle = iconOfflineStyles;
+				break;
 			case ICON_TYPE.PLACEHOLDER:
+				icon = image;
 				iconStyle = iconPlaceholderStyles;
 				break;
 			case ICON_TYPE.UPLOAD:
+				icon = image;
 				iconStyle = iconUploadStyles;
 				break;
 		}
@@ -130,6 +134,31 @@ const ImageComponent = ( {
 		styles.iconUploadDark
 	);
 
+	const iconOfflineStyles = usePreferredColorSchemeStyle(
+		styles.iconOffline,
+		styles.iconOfflineDark
+	);
+
+	const retryIconStyles = usePreferredColorSchemeStyle(
+		styles.retryIcon,
+		styles.retryIconDark
+	);
+
+	const iconRetryStyles = usePreferredColorSchemeStyle(
+		styles.iconRetry,
+		styles.iconRetryDark
+	);
+
+	const retryContainerStyles = usePreferredColorSchemeStyle(
+		styles.retryContainer,
+		styles.retryContainerDark
+	);
+
+	const uploadFailedTextStyles = usePreferredColorSchemeStyle(
+		styles.uploadFailedText,
+		styles.uploadFailedTextDark
+	);
+
 	const placeholderStyles = [
 		usePreferredColorSchemeStyle(
 			styles.imageContainerUpload,
@@ -216,9 +245,11 @@ const ImageComponent = ( {
 			>
 				{ isSelected &&
 					highlightSelected &&
-					! ( isUploadInProgress || isUploadFailed ) && (
-						<View style={ imageSelectedStyles } />
-					) }
+					! (
+						isUploadInProgress ||
+						isUploadFailed ||
+						isUploadPaused
+					) && <View style={ imageSelectedStyles } /> }
 
 				{ ! imageData ? (
 					<View style={ placeholderStyles }>
@@ -239,22 +270,24 @@ const ImageComponent = ( {
 					</View>
 				) }
 
-				{ isUploadFailed && retryMessage && (
+				{ ( isUploadFailed || isUploadPaused ) && retryMessage && (
 					<View
 						style={ [
 							styles.imageContainer,
-							styles.retryContainer,
+							retryContainerStyles,
 						] }
 					>
 						<View
 							style={ [
-								styles.retryIcon,
+								retryIconStyles,
 								retryIcon && styles.customRetryIcon,
 							] }
 						>
-							{ getIcon( ICON_TYPE.RETRY ) }
+							{ isUploadPaused
+								? getIcon( ICON_TYPE.OFFLINE )
+								: getIcon( ICON_TYPE.RETRY ) }
 						</View>
-						<Text style={ styles.uploadFailedText }>
+						<Text style={ uploadFailedTextStyles }>
 							{ retryMessage }
 						</Text>
 					</View>
@@ -265,7 +298,11 @@ const ImageComponent = ( {
 				<ImageEditingButton
 					onSelectMediaUploadOption={ onSelectMediaUploadOption }
 					openMediaOptions={ openMediaOptions }
-					url={ ! isUploadFailed && imageData && url }
+					url={
+						! ( isUploadFailed || isUploadPaused ) &&
+						imageData &&
+						url
+					}
 					pickerOptions={ mediaPickerOptions }
 				/>
 			) }

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();