@wordpress/components 25.13.0 → 25.15.0

package/build-module/mobile/image/index.native.js

@@ -10,7 +10,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,14 +22,11 @@ import styles from './style.scss';
 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,
@@ -40,6 +37,7 @@ const ImageComponent = ({
   isSelected,
   shouldUseFastImage,
   isUploadFailed,
+  isUploadPaused,
   isUploadInProgress,
   mediaPickerOptions,
   onImageDataLoad,
@@ -95,17 +93,23 @@ const ImageComponent = ({
     }
   };
   const getIcon = iconType => {
+    let icon;
     let iconStyle;
     switch (iconType) {
       case ICON_TYPE.RETRY:
-        return createElement(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;
     }
@@ -116,6 +120,11 @@ const ImageComponent = ({
   };
   const iconPlaceholderStyles = usePreferredColorSchemeStyle(styles.iconPlaceholder, styles.iconPlaceholderDark);
   const iconUploadStyles = usePreferredColorSchemeStyle(styles.iconUpload, 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, styles.imageContainerUploadDark), focalPoint && styles.imageContainerUploadWithFocalpoint, imageHeight && {
     height: imageHeight
   }];
@@ -155,7 +164,7 @@ const ImageComponent = ({
     accessibilityRole: 'imagebutton',
     key: url,
     style: imageContainerStyles
-  }, isSelected && highlightSelected && !(isUploadInProgress || isUploadFailed) && createElement(View, {
+  }, isSelected && highlightSelected && !(isUploadInProgress || isUploadFailed || isUploadPaused) && createElement(View, {
     style: imageSelectedStyles
   }), !imageData ? createElement(View, {
     style: placeholderStyles
@@ -172,16 +181,16 @@ const ImageComponent = ({
       resizeMethod: 'scale'
     }),
     resizeMode: imageResizeMode
-  })), isUploadFailed && retryMessage && createElement(View, {
-    style: [styles.imageContainer, styles.retryContainer]
+  })), (isUploadFailed || isUploadPaused) && retryMessage && createElement(View, {
+    style: [styles.imageContainer, retryContainerStyles]
   }, createElement(View, {
-    style: [styles.retryIcon, retryIcon && styles.customRetryIcon]
-  }, getIcon(ICON_TYPE.RETRY)), createElement(Text, {
-    style: styles.uploadFailedText
+    style: [retryIconStyles, retryIcon && styles.customRetryIcon]
+  }, isUploadPaused ? getIcon(ICON_TYPE.OFFLINE) : getIcon(ICON_TYPE.RETRY)), createElement(Text, {
+    style: uploadFailedTextStyles
   }, retryMessage))), editButton && isSelected && !isUploadInProgress && createElement(ImageEditingButton, {
     onSelectMediaUploadOption: onSelectMediaUploadOption,
     openMediaOptions: openMediaOptions,
-    url: !isUploadFailed && imageData && url,
+    url: !(isUploadFailed || isUploadPaused) && imageData && url,
     pickerOptions: mediaPickerOptions
   }));
 };

package/build-module/mobile/image/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Image","RNImage","Text","View","FastImage","__","Icon","image","icon","usePreferredColorSchemeStyle","useEffect","useState","Platform","getImageWithFocalPointStyles","styles","SvgIconRetry","ImageEditingButton","ICON_TYPE","PLACEHOLDER","RETRY","UPLOAD","IMAGE_DEFAULT_FOCAL_POINT","x","y","ImageComponent","align","alt","editButton","focalPoint","height","imageHeight","highlightSelected","isSelected","shouldUseFastImage","isUploadFailed","isUploadInProgress","mediaPickerOptions","onImageDataLoad","onSelectMediaUploadOption","openMediaOptions","resizeMode","retryMessage","retryIcon","url","shapeStyle","style","width","imageWidth","imageData","setImageData","containerSize","setContainerSize","isAndroid","imageResizeMode","isCurrent","getSize","imgWidth","imgHeight","metaData","aspectRatio","onContainerLayout","event","nativeEvent","layout","getIcon","iconType","iconStyle","createElement","iconRetry","iconPlaceholderStyles","iconUploadStyles","iconPlaceholder","iconPlaceholderDark","iconUpload","iconUploadDark","placeholderStyles","imageContainerUpload","imageContainerUploadDark","imageContainerUploadWithFocalpoint","customWidth","wide","imageContainerStyles","imageContent","focalPointContainer","imageStyles","opacity","undefined","imageSelectedStyles","imageBorder","imageBorderDark","container","alignItems","onLayout","accessible","disabled","accessibilityLabel","accessibilityHint","accessibilityRole","key","imageUploadingIconContainer","focalPointContent","source","uri","resizeMethod","imageContainer","retryContainer","customRetryIcon","uploadFailedText","pickerOptions"],"sources":["@wordpress/components/src/mobile/image/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Image as RNImage, Text, View } from 'react-native';\nimport FastImage from 'react-native-fast-image';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Icon } from '@wordpress/components';\nimport { image as icon } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { useEffect, useState, Platform } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getImageWithFocalPointStyles } from './utils';\nimport styles from './style.scss';\nimport SvgIconRetry from './icon-retry';\nimport ImageEditingButton from './image-editing-button';\n\nconst ICON_TYPE = {\n\tPLACEHOLDER: 'placeholder',\n\tRETRY: 'retry',\n\tUPLOAD: 'upload',\n};\n\nexport const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };\n\nconst ImageComponent = ( {\n\talign,\n\talt,\n\teditButton = true,\n\tfocalPoint,\n\theight: imageHeight,\n\thighlightSelected = true,\n\tisSelected,\n\tshouldUseFastImage,\n\tisUploadFailed,\n\tisUploadInProgress,\n\tmediaPickerOptions,\n\tonImageDataLoad,\n\tonSelectMediaUploadOption,\n\topenMediaOptions,\n\tresizeMode,\n\tretryMessage,\n\tretryIcon,\n\turl,\n\tshapeStyle,\n\tstyle,\n\twidth: imageWidth,\n} ) => {\n\tconst [ imageData, setImageData ] = useState( null );\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\n\t// Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149\n\tconst Image =\n\t\t! shouldUseFastImage || Platform.isAndroid ? RNImage : FastImage;\n\tconst imageResizeMode =\n\t\t! shouldUseFastImage || Platform.isAndroid\n\t\t\t? resizeMode\n\t\t\t: FastImage.resizeMode[ resizeMode ];\n\n\tuseEffect( () => {\n\t\tlet isCurrent = true;\n\t\tif ( url ) {\n\t\t\tRNImage.getSize( url, ( imgWidth, imgHeight ) => {\n\t\t\t\tif ( ! isCurrent ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst metaData = {\n\t\t\t\t\taspectRatio: imgWidth / imgHeight,\n\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\theight: imgHeight,\n\t\t\t\t};\n\t\t\t\tsetImageData( metaData );\n\t\t\t\tif ( onImageDataLoad ) {\n\t\t\t\t\tonImageDataLoad( metaData );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t\treturn () => ( isCurrent = false );\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ url ] );\n\n\tconst onContainerLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\n\tconst getIcon = ( iconType ) => {\n\t\tlet iconStyle;\n\t\tswitch ( iconType ) {\n\t\t\tcase ICON_TYPE.RETRY:\n\t\t\t\treturn (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ retryIcon || SvgIconRetry }\n\t\t\t\t\t\t{ ...styles.iconRetry }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase ICON_TYPE.PLACEHOLDER:\n\t\t\t\ticonStyle = iconPlaceholderStyles;\n\t\t\t\tbreak;\n\t\t\tcase ICON_TYPE.UPLOAD:\n\t\t\t\ticonStyle = iconUploadStyles;\n\t\t\t\tbreak;\n\t\t}\n\t\treturn <Icon icon={ icon } { ...iconStyle } />;\n\t};\n\n\tconst iconPlaceholderStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconPlaceholder,\n\t\tstyles.iconPlaceholderDark\n\t);\n\n\tconst iconUploadStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconUpload,\n\t\tstyles.iconUploadDark\n\t);\n\n\tconst placeholderStyles = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles.imageContainerUpload,\n\t\t\tstyles.imageContainerUploadDark\n\t\t),\n\t\tfocalPoint && styles.imageContainerUploadWithFocalpoint,\n\t\timageHeight && { height: imageHeight },\n\t];\n\n\tconst customWidth =\n\t\timageData?.width < containerSize?.width\n\t\t\t? imageData?.width\n\t\t\t: styles.wide?.width;\n\n\tconst imageContainerStyles = [\n\t\tstyles.imageContent,\n\t\t{\n\t\t\twidth:\n\t\t\t\timageWidth === styles.wide?.width ||\n\t\t\t\t( imageData &&\n\t\t\t\t\timageWidth > 0 &&\n\t\t\t\t\timageWidth < containerSize?.width )\n\t\t\t\t\t? imageWidth\n\t\t\t\t\t: customWidth,\n\t\t},\n\t\tresizeMode && { width: styles.wide?.width },\n\t\tfocalPoint && styles.focalPointContainer,\n\t];\n\n\tconst imageStyles = [\n\t\t{\n\t\t\topacity: isUploadInProgress ? 0.3 : 1,\n\t\t\theight: containerSize?.height,\n\t\t},\n\t\t! resizeMode && {\n\t\t\taspectRatio: imageData?.aspectRatio,\n\t\t},\n\t\tfocalPoint && styles.focalPoint,\n\t\tfocalPoint &&\n\t\t\tgetImageWithFocalPointStyles(\n\t\t\t\tfocalPoint,\n\t\t\t\tcontainerSize,\n\t\t\t\timageData\n\t\t\t),\n\t\t! focalPoint &&\n\t\t\timageData &&\n\t\t\tcontainerSize && {\n\t\t\t\theight:\n\t\t\t\t\timageData?.width > containerSize?.width && ! imageWidth\n\t\t\t\t\t\t? containerSize?.width / imageData?.aspectRatio\n\t\t\t\t\t\t: undefined,\n\t\t\t},\n\t\timageHeight && { height: imageHeight },\n\t\tshapeStyle,\n\t];\n\tconst imageSelectedStyles = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles.imageBorder,\n\t\t\tstyles.imageBorderDark\n\t\t),\n\t\t{ height: containerSize?.height },\n\t];\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ [\n\t\t\t\tstyles.container,\n\t\t\t\t// Only set alignItems if an image exists because alignItems causes the placeholder\n\t\t\t\t// to disappear when an aligned image can't be downloaded\n\t\t\t\t// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592\n\t\t\t\timageData && align && { alignItems: align },\n\t\t\t\tstyle,\n\t\t\t] }\n\t\t\tonLayout={ onContainerLayout }\n\t\t>\n\t\t\t<View\n\t\t\t\taccessible\n\t\t\t\tdisabled={ ! isSelected }\n\t\t\t\taccessibilityLabel={ alt }\n\t\t\t\taccessibilityHint={ __( 'Double tap and hold to edit' ) }\n\t\t\t\taccessibilityRole={ 'imagebutton' }\n\t\t\t\tkey={ url }\n\t\t\t\tstyle={ imageContainerStyles }\n\t\t\t>\n\t\t\t\t{ isSelected &&\n\t\t\t\t\thighlightSelected &&\n\t\t\t\t\t! ( isUploadInProgress || isUploadFailed ) && (\n\t\t\t\t\t\t<View style={ imageSelectedStyles } />\n\t\t\t\t\t) }\n\n\t\t\t\t{ ! imageData ? (\n\t\t\t\t\t<View style={ placeholderStyles }>\n\t\t\t\t\t\t<View style={ styles.imageUploadingIconContainer }>\n\t\t\t\t\t\t\t{ getIcon( ICON_TYPE.UPLOAD ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\t\t\t\t) : (\n\t\t\t\t\t<View style={ focalPoint && styles.focalPointContent }>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tstyle={ imageStyles }\n\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t{ ...( ! focalPoint && {\n\t\t\t\t\t\t\t\tresizeMethod: 'scale',\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\tresizeMode={ imageResizeMode }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\n\t\t\t\t{ isUploadFailed && retryMessage && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\tstyles.imageContainer,\n\t\t\t\t\t\t\tstyles.retryContainer,\n\t\t\t\t\t\t] }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.retryIcon,\n\t\t\t\t\t\t\t\tretryIcon && styles.customRetryIcon,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ getIcon( ICON_TYPE.RETRY ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t\t<Text style={ styles.uploadFailedText }>\n\t\t\t\t\t\t\t{ retryMessage }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</View>\n\n\t\t\t{ editButton && isSelected && ! isUploadInProgress && (\n\t\t\t\t<ImageEditingButton\n\t\t\t\t\tonSelectMediaUploadOption={ onSelectMediaUploadOption }\n\t\t\t\t\topenMediaOptions={ openMediaOptions }\n\t\t\t\t\turl={ ! isUploadFailed && imageData && url }\n\t\t\t\t\tpickerOptions={ mediaPickerOptions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</View>\n\t);\n};\n\nexport default ImageComponent;\n"],"mappings":"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"}
+{"version":3,"names":["Image","RNImage","Text","View","FastImage","__","Icon","image","offline","usePreferredColorSchemeStyle","useEffect","useState","Platform","getImageWithFocalPointStyles","styles","SvgIconRetry","ImageEditingButton","ICON_TYPE","OFFLINE","PLACEHOLDER","RETRY","UPLOAD","ImageComponent","align","alt","editButton","focalPoint","height","imageHeight","highlightSelected","isSelected","shouldUseFastImage","isUploadFailed","isUploadPaused","isUploadInProgress","mediaPickerOptions","onImageDataLoad","onSelectMediaUploadOption","openMediaOptions","resizeMode","retryMessage","retryIcon","url","shapeStyle","style","width","imageWidth","imageData","setImageData","containerSize","setContainerSize","isAndroid","imageResizeMode","isCurrent","getSize","imgWidth","imgHeight","metaData","aspectRatio","onContainerLayout","event","nativeEvent","layout","getIcon","iconType","icon","iconStyle","iconRetryStyles","iconOfflineStyles","iconPlaceholderStyles","iconUploadStyles","createElement","iconPlaceholder","iconPlaceholderDark","iconUpload","iconUploadDark","iconOffline","iconOfflineDark","retryIconStyles","retryIconDark","iconRetry","iconRetryDark","retryContainerStyles","retryContainer","retryContainerDark","uploadFailedTextStyles","uploadFailedText","uploadFailedTextDark","placeholderStyles","imageContainerUpload","imageContainerUploadDark","imageContainerUploadWithFocalpoint","customWidth","wide","imageContainerStyles","imageContent","focalPointContainer","imageStyles","opacity","undefined","imageSelectedStyles","imageBorder","imageBorderDark","container","alignItems","onLayout","accessible","disabled","accessibilityLabel","accessibilityHint","accessibilityRole","key","imageUploadingIconContainer","focalPointContent","source","uri","resizeMethod","imageContainer","customRetryIcon","pickerOptions"],"sources":["@wordpress/components/src/mobile/image/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Image as RNImage, Text, View } from 'react-native';\nimport FastImage from 'react-native-fast-image';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Icon } from '@wordpress/components';\nimport { image, offline } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { useEffect, useState, Platform } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getImageWithFocalPointStyles } from './utils';\nimport styles from './style.scss';\nimport SvgIconRetry from './icon-retry';\nimport ImageEditingButton from './image-editing-button';\n\nconst ICON_TYPE = {\n\tOFFLINE: 'offline',\n\tPLACEHOLDER: 'placeholder',\n\tRETRY: 'retry',\n\tUPLOAD: 'upload',\n};\n\nconst ImageComponent = ( {\n\talign,\n\talt,\n\teditButton = true,\n\tfocalPoint,\n\theight: imageHeight,\n\thighlightSelected = true,\n\tisSelected,\n\tshouldUseFastImage,\n\tisUploadFailed,\n\tisUploadPaused,\n\tisUploadInProgress,\n\tmediaPickerOptions,\n\tonImageDataLoad,\n\tonSelectMediaUploadOption,\n\topenMediaOptions,\n\tresizeMode,\n\tretryMessage,\n\tretryIcon,\n\turl,\n\tshapeStyle,\n\tstyle,\n\twidth: imageWidth,\n} ) => {\n\tconst [ imageData, setImageData ] = useState( null );\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\n\t// Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149\n\tconst Image =\n\t\t! shouldUseFastImage || Platform.isAndroid ? RNImage : FastImage;\n\tconst imageResizeMode =\n\t\t! shouldUseFastImage || Platform.isAndroid\n\t\t\t? resizeMode\n\t\t\t: FastImage.resizeMode[ resizeMode ];\n\n\tuseEffect( () => {\n\t\tlet isCurrent = true;\n\t\tif ( url ) {\n\t\t\tRNImage.getSize( url, ( imgWidth, imgHeight ) => {\n\t\t\t\tif ( ! isCurrent ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst metaData = {\n\t\t\t\t\taspectRatio: imgWidth / imgHeight,\n\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\theight: imgHeight,\n\t\t\t\t};\n\t\t\t\tsetImageData( metaData );\n\t\t\t\tif ( onImageDataLoad ) {\n\t\t\t\t\tonImageDataLoad( metaData );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t\treturn () => ( isCurrent = false );\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ url ] );\n\n\tconst onContainerLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\n\tconst getIcon = ( iconType ) => {\n\t\tlet icon;\n\t\tlet iconStyle;\n\t\tswitch ( iconType ) {\n\t\t\tcase ICON_TYPE.RETRY:\n\t\t\t\ticon = retryIcon || SvgIconRetry;\n\t\t\t\ticonStyle = iconRetryStyles;\n\t\t\t\tbreak;\n\t\t\tcase ICON_TYPE.OFFLINE:\n\t\t\t\ticon = offline;\n\t\t\t\ticonStyle = iconOfflineStyles;\n\t\t\t\tbreak;\n\t\t\tcase ICON_TYPE.PLACEHOLDER:\n\t\t\t\ticon = image;\n\t\t\t\ticonStyle = iconPlaceholderStyles;\n\t\t\t\tbreak;\n\t\t\tcase ICON_TYPE.UPLOAD:\n\t\t\t\ticon = image;\n\t\t\t\ticonStyle = iconUploadStyles;\n\t\t\t\tbreak;\n\t\t}\n\t\treturn <Icon icon={ icon } { ...iconStyle } />;\n\t};\n\n\tconst iconPlaceholderStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconPlaceholder,\n\t\tstyles.iconPlaceholderDark\n\t);\n\n\tconst iconUploadStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconUpload,\n\t\tstyles.iconUploadDark\n\t);\n\n\tconst iconOfflineStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconOffline,\n\t\tstyles.iconOfflineDark\n\t);\n\n\tconst retryIconStyles = usePreferredColorSchemeStyle(\n\t\tstyles.retryIcon,\n\t\tstyles.retryIconDark\n\t);\n\n\tconst iconRetryStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconRetry,\n\t\tstyles.iconRetryDark\n\t);\n\n\tconst retryContainerStyles = usePreferredColorSchemeStyle(\n\t\tstyles.retryContainer,\n\t\tstyles.retryContainerDark\n\t);\n\n\tconst uploadFailedTextStyles = usePreferredColorSchemeStyle(\n\t\tstyles.uploadFailedText,\n\t\tstyles.uploadFailedTextDark\n\t);\n\n\tconst placeholderStyles = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles.imageContainerUpload,\n\t\t\tstyles.imageContainerUploadDark\n\t\t),\n\t\tfocalPoint && styles.imageContainerUploadWithFocalpoint,\n\t\timageHeight && { height: imageHeight },\n\t];\n\n\tconst customWidth =\n\t\timageData?.width < containerSize?.width\n\t\t\t? imageData?.width\n\t\t\t: styles.wide?.width;\n\n\tconst imageContainerStyles = [\n\t\tstyles.imageContent,\n\t\t{\n\t\t\twidth:\n\t\t\t\timageWidth === styles.wide?.width ||\n\t\t\t\t( imageData &&\n\t\t\t\t\timageWidth > 0 &&\n\t\t\t\t\timageWidth < containerSize?.width )\n\t\t\t\t\t? imageWidth\n\t\t\t\t\t: customWidth,\n\t\t},\n\t\tresizeMode && { width: styles.wide?.width },\n\t\tfocalPoint && styles.focalPointContainer,\n\t];\n\n\tconst imageStyles = [\n\t\t{\n\t\t\topacity: isUploadInProgress ? 0.3 : 1,\n\t\t\theight: containerSize?.height,\n\t\t},\n\t\t! resizeMode && {\n\t\t\taspectRatio: imageData?.aspectRatio,\n\t\t},\n\t\tfocalPoint && styles.focalPoint,\n\t\tfocalPoint &&\n\t\t\tgetImageWithFocalPointStyles(\n\t\t\t\tfocalPoint,\n\t\t\t\tcontainerSize,\n\t\t\t\timageData\n\t\t\t),\n\t\t! focalPoint &&\n\t\t\timageData &&\n\t\t\tcontainerSize && {\n\t\t\t\theight:\n\t\t\t\t\timageData?.width > containerSize?.width && ! imageWidth\n\t\t\t\t\t\t? containerSize?.width / imageData?.aspectRatio\n\t\t\t\t\t\t: undefined,\n\t\t\t},\n\t\timageHeight && { height: imageHeight },\n\t\tshapeStyle,\n\t];\n\tconst imageSelectedStyles = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles.imageBorder,\n\t\t\tstyles.imageBorderDark\n\t\t),\n\t\t{ height: containerSize?.height },\n\t];\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ [\n\t\t\t\tstyles.container,\n\t\t\t\t// Only set alignItems if an image exists because alignItems causes the placeholder\n\t\t\t\t// to disappear when an aligned image can't be downloaded\n\t\t\t\t// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592\n\t\t\t\timageData && align && { alignItems: align },\n\t\t\t\tstyle,\n\t\t\t] }\n\t\t\tonLayout={ onContainerLayout }\n\t\t>\n\t\t\t<View\n\t\t\t\taccessible\n\t\t\t\tdisabled={ ! isSelected }\n\t\t\t\taccessibilityLabel={ alt }\n\t\t\t\taccessibilityHint={ __( 'Double tap and hold to edit' ) }\n\t\t\t\taccessibilityRole={ 'imagebutton' }\n\t\t\t\tkey={ url }\n\t\t\t\tstyle={ imageContainerStyles }\n\t\t\t>\n\t\t\t\t{ isSelected &&\n\t\t\t\t\thighlightSelected &&\n\t\t\t\t\t! (\n\t\t\t\t\t\tisUploadInProgress ||\n\t\t\t\t\t\tisUploadFailed ||\n\t\t\t\t\t\tisUploadPaused\n\t\t\t\t\t) && <View style={ imageSelectedStyles } /> }\n\n\t\t\t\t{ ! imageData ? (\n\t\t\t\t\t<View style={ placeholderStyles }>\n\t\t\t\t\t\t<View style={ styles.imageUploadingIconContainer }>\n\t\t\t\t\t\t\t{ getIcon( ICON_TYPE.UPLOAD ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\t\t\t\t) : (\n\t\t\t\t\t<View style={ focalPoint && styles.focalPointContent }>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tstyle={ imageStyles }\n\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t{ ...( ! focalPoint && {\n\t\t\t\t\t\t\t\tresizeMethod: 'scale',\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\tresizeMode={ imageResizeMode }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\n\t\t\t\t{ ( isUploadFailed || isUploadPaused ) && retryMessage && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\tstyles.imageContainer,\n\t\t\t\t\t\t\tretryContainerStyles,\n\t\t\t\t\t\t] }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tretryIconStyles,\n\t\t\t\t\t\t\t\tretryIcon && styles.customRetryIcon,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ isUploadPaused\n\t\t\t\t\t\t\t\t? getIcon( ICON_TYPE.OFFLINE )\n\t\t\t\t\t\t\t\t: getIcon( ICON_TYPE.RETRY ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t\t<Text style={ uploadFailedTextStyles }>\n\t\t\t\t\t\t\t{ retryMessage }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</View>\n\n\t\t\t{ editButton && isSelected && ! isUploadInProgress && (\n\t\t\t\t<ImageEditingButton\n\t\t\t\t\tonSelectMediaUploadOption={ onSelectMediaUploadOption }\n\t\t\t\t\topenMediaOptions={ openMediaOptions }\n\t\t\t\t\turl={\n\t\t\t\t\t\t! ( isUploadFailed || isUploadPaused ) &&\n\t\t\t\t\t\timageData &&\n\t\t\t\t\t\turl\n\t\t\t\t\t}\n\t\t\t\t\tpickerOptions={ mediaPickerOptions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</View>\n\t);\n};\n\nexport default ImageComponent;\n"],"mappings":"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"}

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

@@ -3,30 +3,64 @@ import { createElement } from "react";
  * 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({
+}, 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 createElement(KeyboardAvoidingView, {
     style: {
       flex: 1
     }
   }, createElement(AnimatedFlatList, {
-    ref: innerRef,
+    ref: getFlatListRef,
     onScroll: scrollHandler,
+    onContentSizeChange: onContentSizeChange,
     ...props
   }));
 };
-export default KeyboardAwareFlatList;
+export default forwardRef(KeyboardAwareFlatList);
 //# sourceMappingURL=index.android.js.map

package/build-module/mobile/keyboard-aware-flat-list/index.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["FlatList","Animated","useAnimatedScrollHandler","KeyboardAvoidingView","AnimatedFlatList","createAnimatedComponent","KeyboardAwareFlatList","innerRef","onScroll","props","scrollHandler","createElement","style","flex","ref"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/index.android.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { FlatList } from 'react-native';\nimport Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';\n\n/**\n * Internal dependencies\n */\nimport KeyboardAvoidingView from '../keyboard-avoiding-view';\n\nconst AnimatedFlatList = Animated.createAnimatedComponent( FlatList );\n\nexport const KeyboardAwareFlatList = ( { innerRef, onScroll, ...props } ) => {\n\tconst scrollHandler = useAnimatedScrollHandler( { onScroll } );\n\treturn (\n\t\t<KeyboardAvoidingView style={ { flex: 1 } }>\n\t\t\t<AnimatedFlatList\n\t\t\t\tref={ innerRef }\n\t\t\t\tonScroll={ scrollHandler }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</KeyboardAvoidingView>\n\t);\n};\n\nexport default KeyboardAwareFlatList;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,cAAc;AACvC,OAAOC,QAAQ,IAAIC,wBAAwB,QAAQ,yBAAyB;;AAE5E;AACA;AACA;AACA,OAAOC,oBAAoB,MAAM,2BAA2B;AAE5D,MAAMC,gBAAgB,GAAGH,QAAQ,CAACI,uBAAuB,CAAEL,QAAS,CAAC;AAErE,OAAO,MAAMM,qBAAqB,GAAGA,CAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,KAAM;EAC5E,MAAMC,aAAa,GAAGR,wBAAwB,CAAE;IAAEM;EAAS,CAAE,CAAC;EAC9D,OACCG,aAAA,CAACR,oBAAoB;IAACS,KAAK,EAAG;MAAEC,IAAI,EAAE;IAAE;EAAG,GAC1CF,aAAA,CAACP,gBAAgB;IAChBU,GAAG,EAAGP,QAAU;IAChBC,QAAQ,EAAGE,aAAe;IAAA,GACrBD;EAAK,CACV,CACoB,CAAC;AAEzB,CAAC;AAED,eAAeH,qBAAqB"}
+{"version":3,"names":["FlatList","Animated","forwardRef","useCallback","useImperativeHandle","useScroll","KeyboardAvoidingView","AnimatedFlatList","createAnimatedComponent","KeyboardAwareFlatList","onScroll","props","ref","extraScrollHeight","scrollEnabled","shouldPreventAutomaticScroll","scrollViewRef","scrollHandler","scrollToSection","scrollToElement","onContentSizeChange","lastScrollTo","getFlatListRef","flatListRef","current","getNativeScrollRef","createElement","style","flex"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/index.android.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { FlatList } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tforwardRef,\n\tuseCallback,\n\tuseImperativeHandle,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useScroll from './use-scroll';\nimport KeyboardAvoidingView from '../keyboard-avoiding-view';\n\nconst AnimatedFlatList = Animated.createAnimatedComponent( FlatList );\n\nexport const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {\n\tconst { extraScrollHeight, scrollEnabled, shouldPreventAutomaticScroll } =\n\t\tprops;\n\n\tconst {\n\t\tscrollViewRef,\n\t\tscrollHandler,\n\t\tscrollToSection,\n\t\tscrollToElement,\n\t\tonContentSizeChange,\n\t\tlastScrollTo,\n\t} = useScroll( {\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll,\n\t\textraScrollHeight,\n\t\tonScroll,\n\t} );\n\n\tconst getFlatListRef = useCallback(\n\t\t( flatListRef ) => {\n\t\t\t// On Android, we get the ref of the associated scroll\n\t\t\t// view to the FlatList.\n\t\t\tscrollViewRef.current = flatListRef?.getNativeScrollRef();\n\t\t},\n\t\t[ scrollViewRef ]\n\t);\n\n\tuseImperativeHandle( ref, () => {\n\t\treturn {\n\t\t\tscrollViewRef: scrollViewRef.current,\n\t\t\tscrollToSection,\n\t\t\tscrollToElement,\n\t\t\tlastScrollTo,\n\t\t};\n\t} );\n\n\treturn (\n\t\t<KeyboardAvoidingView style={ { flex: 1 } }>\n\t\t\t<AnimatedFlatList\n\t\t\t\tref={ getFlatListRef }\n\t\t\t\tonScroll={ scrollHandler }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</KeyboardAvoidingView>\n\t);\n};\n\nexport default forwardRef( KeyboardAwareFlatList );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,cAAc;AACvC,OAAOC,QAAQ,MAAM,yBAAyB;;AAE9C;AACA;AACA;AACA,SACCC,UAAU,EACVC,WAAW,EACXC,mBAAmB,QACb,oBAAoB;;AAE3B;AACA;AACA;AACA,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,oBAAoB,MAAM,2BAA2B;AAE5D,MAAMC,gBAAgB,GAAGN,QAAQ,CAACO,uBAAuB,CAAER,QAAS,CAAC;AAErE,OAAO,MAAMS,qBAAqB,GAAGA,CAAE;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAM;EACvE,MAAM;IAAEC,iBAAiB;IAAEC,aAAa;IAAEC;EAA6B,CAAC,GACvEJ,KAAK;EAEN,MAAM;IACLK,aAAa;IACbC,aAAa;IACbC,eAAe;IACfC,eAAe;IACfC,mBAAmB;IACnBC;EACD,CAAC,GAAGhB,SAAS,CAAE;IACdS,aAAa;IACbC,4BAA4B;IAC5BF,iBAAiB;IACjBH;EACD,CAAE,CAAC;EAEH,MAAMY,cAAc,GAAGnB,WAAW,CAC/BoB,WAAW,IAAM;IAClB;IACA;IACAP,aAAa,CAACQ,OAAO,GAAGD,WAAW,EAAEE,kBAAkB,CAAC,CAAC;EAC1D,CAAC,EACD,CAAET,aAAa,CAChB,CAAC;EAEDZ,mBAAmB,CAAEQ,GAAG,EAAE,MAAM;IAC/B,OAAO;MACNI,aAAa,EAAEA,aAAa,CAACQ,OAAO;MACpCN,eAAe;MACfC,eAAe;MACfE;IACD,CAAC;EACF,CAAE,CAAC;EAEH,OACCK,aAAA,CAACpB,oBAAoB;IAACqB,KAAK,EAAG;MAAEC,IAAI,EAAE;IAAE;EAAG,GAC1CF,aAAA,CAACnB,gBAAgB;IAChBK,GAAG,EAAGU,cAAgB;IACtBZ,QAAQ,EAAGO,aAAe;IAC1BG,mBAAmB,EAAGA,mBAAqB;IAAA,GACtCT;EAAK,CACV,CACoB,CAAC;AAEzB,CAAC;AAED,eAAeT,UAAU,CAAEO,qBAAsB,CAAC"}

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

@@ -3,111 +3,81 @@ import { createElement } from "react";
  * 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);
+}, ref) => {
   const {
-    height: windowHeight,
-    width: windowWidth
-  } = useWindowDimensions();
-  const isLandscape = windowWidth >= windowHeight;
-  const [keyboardOffset] = useKeyboardOffset(scrollEnabled, shouldPreventAutomaticScroll);
-  const [currentCaretData] = useTextInputCaretPosition(scrollEnabled);
+    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 !== null && caret !== void 0 ? caret : {};
     const textInputOffset = await getTextInputOffset(caret);
     const hasTextInputOffset = textInputOffset !== null;
     if (hasTextInputOffset) {
-      scrollToTextInputOffset(caret, textInputOffset);
+      scrollToSection(textInputOffset, caretHeight);
     }
-  }, [getTextInputOffset, scrollToTextInputOffset]), 200, {
+  }, [getTextInputOffset, scrollToSection]), 200, {
     leading: false
   });
+  const [currentCaretData] = useTextInputCaretPosition(scrollEnabled);
+  const onSizeChange = useCallback(() => onScrollToTextInput(currentCaretData), [currentCaretData, onScrollToTextInput]);
   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();
-      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;
-    innerRef(ref);
-  }, [innerRef]);
-
   // Adds content insets when the keyboard is opened to have
   // extra padding at the bottom.
   const contentInset = {
@@ -116,13 +86,21 @@ export const KeyboardAwareFlatList = ({
   const style = [{
     flex: 1
   }, scrollViewStyle];
+  useImperativeHandle(ref, () => {
+    return {
+      scrollViewRef: scrollViewRef.current,
+      scrollToSection,
+      scrollToElement,
+      lastScrollTo
+    };
+  });
   return createElement(AnimatedScrollView, {
     automaticallyAdjustContentInsets: false,
     contentInset: contentInset,
     keyboardShouldPersistTaps: "handled",
     onContentSizeChange: onContentSizeChange,
     onScroll: scrollHandler,
-    ref: getRef,
+    ref: scrollViewRef,
     scrollEnabled: scrollEnabled,
     scrollEventThrottle: 16,
     style: style
@@ -131,5 +109,5 @@ export const KeyboardAwareFlatList = ({
     scrollEnabled: false
   }));
 };
-export default KeyboardAwareFlatList;
+export default forwardRef(KeyboardAwareFlatList);
 //# sourceMappingURL=index.ios.js.map

package/build-module/mobile/keyboard-aware-flat-list/index.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["ScrollView","FlatList","useWindowDimensions","Animated","useAnimatedScrollHandler","useSharedValue","useCallback","useEffect","useRef","useThrottle","useTextInputOffset","useKeyboardOffset","useScrollToTextInput","useTextInputCaretPosition","AnimatedScrollView","createAnimatedComponent","KeyboardAwareFlatList","extraScrollHeight","innerRef","onScroll","scrollEnabled","scrollViewStyle","shouldPreventAutomaticScroll","props","scrollViewRef","scrollViewMeasurements","scrollViewYOffset","height","windowHeight","width","windowWidth","isLandscape","keyboardOffset","currentCaretData","getTextInputOffset","scrollToTextInputOffset","onScrollToTextInput","caret","textInputOffset","hasTextInputOffset","leading","current","scrollHandler","event","contentOffset","value","y","measureScrollView","scrollRef","getNativeScrollRef","measureInWindow","_x","onContentSizeChange","getRef","ref","contentInset","bottom","style","flex","createElement","automaticallyAdjustContentInsets","keyboardShouldPersistTaps","scrollEventThrottle"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/index.ios.js"],"sourcesContent":["/**\n * External dependencies\n */\n\nimport { ScrollView, FlatList, useWindowDimensions } from 'react-native';\nimport Animated, {\n\tuseAnimatedScrollHandler,\n\tuseSharedValue,\n} from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\nimport { useThrottle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useTextInputOffset from './use-text-input-offset';\nimport useKeyboardOffset from './use-keyboard-offset';\nimport useScrollToTextInput from './use-scroll-to-text-input';\nimport useTextInputCaretPosition from './use-text-input-caret-position';\n\nconst AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );\n\n/**\n * React component that provides a FlatList that is aware of the keyboard state and can scroll\n * to the currently focused TextInput.\n *\n * @param {Object}   props                              Component props.\n * @param {number}   props.extraScrollHeight            Extra scroll height for the content.\n * @param {Function} props.innerRef                     Function to pass the ScrollView ref to the parent component.\n * @param {Function} props.onScroll                     Function to be called when the list is scrolled.\n * @param {boolean}  props.scrollEnabled                Whether the list can be scrolled.\n * @param {Object}   props.scrollViewStyle              Additional style for the ScrollView component.\n * @param {boolean}  props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.\n * @param {Object}   props...                           Other props to pass to the FlatList component.\n * @return {Component} KeyboardAwareFlatList component.\n */\nexport const KeyboardAwareFlatList = ( {\n\textraScrollHeight,\n\tinnerRef,\n\tonScroll,\n\tscrollEnabled,\n\tscrollViewStyle,\n\tshouldPreventAutomaticScroll,\n\t...props\n} ) => {\n\tconst scrollViewRef = useRef();\n\tconst scrollViewMeasurements = useRef();\n\tconst scrollViewYOffset = useSharedValue( -1 );\n\n\tconst { height: windowHeight, width: windowWidth } = useWindowDimensions();\n\tconst isLandscape = windowWidth >= windowHeight;\n\n\tconst [ keyboardOffset ] = useKeyboardOffset(\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll\n\t);\n\n\tconst [ currentCaretData ] = useTextInputCaretPosition( scrollEnabled );\n\n\tconst [ getTextInputOffset ] = useTextInputOffset(\n\t\tscrollEnabled,\n\t\tscrollViewRef\n\t);\n\n\tconst [ scrollToTextInputOffset ] = useScrollToTextInput(\n\t\textraScrollHeight,\n\t\tkeyboardOffset,\n\t\tscrollEnabled,\n\t\tscrollViewMeasurements,\n\t\tscrollViewRef,\n\t\tscrollViewYOffset\n\t);\n\n\tconst onScrollToTextInput = useThrottle(\n\t\tuseCallback(\n\t\t\tasync ( caret ) => {\n\t\t\t\tconst textInputOffset = await getTextInputOffset( caret );\n\t\t\t\tconst hasTextInputOffset = textInputOffset !== null;\n\n\t\t\t\tif ( hasTextInputOffset ) {\n\t\t\t\t\tscrollToTextInputOffset( caret, textInputOffset );\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ getTextInputOffset, scrollToTextInputOffset ]\n\t\t),\n\t\t200,\n\t\t{ leading: false }\n\t);\n\n\tuseEffect( () => {\n\t\tonScrollToTextInput( currentCaretData );\n\t}, [ currentCaretData, onScrollToTextInput ] );\n\n\t// When the orientation changes, the ScrollView measurements\n\t// need to be re-calculated.\n\tuseEffect( () => {\n\t\tscrollViewMeasurements.current = null;\n\t}, [ isLandscape ] );\n\n\tconst scrollHandler = useAnimatedScrollHandler( {\n\t\tonScroll: ( event ) => {\n\t\t\tconst { contentOffset } = event;\n\t\t\tscrollViewYOffset.value = contentOffset.y;\n\t\t\tonScroll( event );\n\t\t},\n\t} );\n\n\tconst measureScrollView = useCallback( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tconst scrollRef = scrollViewRef.current.getNativeScrollRef();\n\n\t\t\tscrollRef.measureInWindow( ( _x, y, width, height ) => {\n\t\t\t\tscrollViewMeasurements.current = { y, width, height };\n\t\t\t} );\n\t\t}\n\t}, [] );\n\n\tconst onContentSizeChange = useCallback( () => {\n\t\tonScrollToTextInput( currentCaretData );\n\n\t\t// Sets the first values when the content size changes.\n\t\tif ( ! scrollViewMeasurements.current ) {\n\t\t\tmeasureScrollView();\n\t\t}\n\t}, [ measureScrollView, onScrollToTextInput, currentCaretData ] );\n\n\tconst getRef = useCallback(\n\t\t( ref ) => {\n\t\t\tscrollViewRef.current = ref;\n\t\t\tinnerRef( ref );\n\t\t},\n\t\t[ innerRef ]\n\t);\n\n\t// Adds content insets when the keyboard is opened to have\n\t// extra padding at the bottom.\n\tconst contentInset = { bottom: keyboardOffset };\n\n\tconst style = [ { flex: 1 }, scrollViewStyle ];\n\n\treturn (\n\t\t<AnimatedScrollView\n\t\t\tautomaticallyAdjustContentInsets={ false }\n\t\t\tcontentInset={ contentInset }\n\t\t\tkeyboardShouldPersistTaps=\"handled\"\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScroll={ scrollHandler }\n\t\t\tref={ getRef }\n\t\t\tscrollEnabled={ scrollEnabled }\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t<FlatList { ...props } scrollEnabled={ false } />\n\t\t</AnimatedScrollView>\n\t);\n};\n\nexport default KeyboardAwareFlatList;\n"],"mappings":"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"}
+{"version":3,"names":["ScrollView","FlatList","Animated","useCallback","useEffect","forwardRef","useImperativeHandle","useThrottle","useScroll","useTextInputOffset","useTextInputCaretPosition","DEFAULT_FONT_SIZE","AnimatedScrollView","createAnimatedComponent","KeyboardAwareFlatList","extraScrollHeight","onScroll","scrollEnabled","scrollViewStyle","shouldPreventAutomaticScroll","props","ref","scrollViewRef","scrollHandler","keyboardOffset","scrollToSection","scrollToElement","onContentSizeChange","lastScrollTo","onSizeChange","getTextInputOffset","onScrollToTextInput","caret","caretHeight","textInputOffset","hasTextInputOffset","leading","currentCaretData","contentInset","bottom","style","flex","current","createElement","automaticallyAdjustContentInsets","keyboardShouldPersistTaps","scrollEventThrottle"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/index.ios.js"],"sourcesContent":["/**\n * External dependencies\n */\n\nimport { ScrollView, FlatList } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseEffect,\n\tforwardRef,\n\tuseImperativeHandle,\n} from '@wordpress/element';\nimport { useThrottle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport useScroll from './use-scroll';\nimport useTextInputOffset from './use-text-input-offset';\nimport useTextInputCaretPosition from './use-text-input-caret-position';\n\nconst DEFAULT_FONT_SIZE = 16;\nconst AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );\n\n/** @typedef {import('@wordpress/element').RefObject} RefObject */\n/**\n * React component that provides a FlatList that is aware of the keyboard state and can scroll\n * to the currently focused TextInput.\n *\n * @param {Object}    props                              Component props.\n * @param {number}    props.extraScrollHeight            Extra scroll height for the content.\n * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.\n * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.\n * @param {Object}    props.scrollViewStyle              Additional style for the ScrollView component.\n * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.\n * @param {Object}    props...                           Other props to pass to the FlatList component.\n * @param {RefObject} ref\n * @return {Component} KeyboardAwareFlatList component.\n */\nexport const KeyboardAwareFlatList = (\n\t{\n\t\textraScrollHeight,\n\t\tonScroll,\n\t\tscrollEnabled,\n\t\tscrollViewStyle,\n\t\tshouldPreventAutomaticScroll,\n\t\t...props\n\t},\n\tref\n) => {\n\tconst {\n\t\tscrollViewRef,\n\t\tscrollHandler,\n\t\tkeyboardOffset,\n\t\tscrollToSection,\n\t\tscrollToElement,\n\t\tonContentSizeChange,\n\t\tlastScrollTo,\n\t} = useScroll( {\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll,\n\t\textraScrollHeight,\n\t\tonScroll,\n\t\tonSizeChange,\n\t} );\n\n\tconst [ getTextInputOffset ] = useTextInputOffset(\n\t\tscrollEnabled,\n\t\tscrollViewRef\n\t);\n\n\tconst onScrollToTextInput = useThrottle(\n\t\tuseCallback(\n\t\t\tasync ( caret ) => {\n\t\t\t\tconst { caretHeight = DEFAULT_FONT_SIZE } = caret ?? {};\n\t\t\t\tconst textInputOffset = await getTextInputOffset( caret );\n\t\t\t\tconst hasTextInputOffset = textInputOffset !== null;\n\n\t\t\t\tif ( hasTextInputOffset ) {\n\t\t\t\t\tscrollToSection( textInputOffset, caretHeight );\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ getTextInputOffset, scrollToSection ]\n\t\t),\n\t\t200,\n\t\t{ leading: false }\n\t);\n\n\tconst [ currentCaretData ] = useTextInputCaretPosition( scrollEnabled );\n\n\tconst onSizeChange = useCallback(\n\t\t() => onScrollToTextInput( currentCaretData ),\n\t\t[ currentCaretData, onScrollToTextInput ]\n\t);\n\n\tuseEffect( () => {\n\t\tonScrollToTextInput( currentCaretData );\n\t}, [ currentCaretData, onScrollToTextInput ] );\n\n\t// Adds content insets when the keyboard is opened to have\n\t// extra padding at the bottom.\n\tconst contentInset = { bottom: keyboardOffset };\n\n\tconst style = [ { flex: 1 }, scrollViewStyle ];\n\n\tuseImperativeHandle( ref, () => {\n\t\treturn {\n\t\t\tscrollViewRef: scrollViewRef.current,\n\t\t\tscrollToSection,\n\t\t\tscrollToElement,\n\t\t\tlastScrollTo,\n\t\t};\n\t} );\n\n\treturn (\n\t\t<AnimatedScrollView\n\t\t\tautomaticallyAdjustContentInsets={ false }\n\t\t\tcontentInset={ contentInset }\n\t\t\tkeyboardShouldPersistTaps=\"handled\"\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScroll={ scrollHandler }\n\t\t\tref={ scrollViewRef }\n\t\t\tscrollEnabled={ scrollEnabled }\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t<FlatList { ...props } scrollEnabled={ false } />\n\t\t</AnimatedScrollView>\n\t);\n};\n\nexport default forwardRef( KeyboardAwareFlatList );\n"],"mappings":"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"}

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

@@ -0,0 +1,33 @@
+/**
+ * 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];
+}
+//# sourceMappingURL=use-scroll-to-element.native.js.map

package/build-module/mobile/keyboard-aware-flat-list/use-scroll-to-element.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useScrollToElement","scrollViewRef","scrollToSection","scrollToElement","elementRef","current","measureLayout","_x","y","_width","height","Math","round"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/use-scroll-to-element.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/** @typedef {import('@wordpress/element').RefObject} RefObject */\n/**\n * Hook to scroll to a specified element by taking into account the Keyboard\n * and the Header.\n *\n * @param {RefObject} scrollViewRef   Scroll view reference.\n * @param {Function}  scrollToSection Function to scroll.\n * @return {Function[]} Function to scroll to an element.\n */\nexport default function useScrollToElement( scrollViewRef, scrollToSection ) {\n\t/**\n\t * Function to scroll to an element.\n\t *\n\t * @param {RefObject} elementRef Ref of the element.\n\t */\n\tconst scrollToElement = useCallback(\n\t\t( elementRef ) => {\n\t\t\tif ( ! scrollViewRef.current || ! elementRef ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\telementRef.current.measureLayout(\n\t\t\t\tscrollViewRef.current,\n\t\t\t\t( _x, y, _width, height ) => {\n\t\t\t\t\tif ( height || y ) {\n\t\t\t\t\t\tscrollToSection( Math.round( y ), height );\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t() => {}\n\t\t\t);\n\t\t},\n\t\t[ scrollViewRef, scrollToSection ]\n\t);\n\n\treturn [ scrollToElement ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,oBAAoB;;AAEhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,kBAAkBA,CAAEC,aAAa,EAAEC,eAAe,EAAG;EAC5E;AACD;AACA;AACA;AACA;EACC,MAAMC,eAAe,GAAGJ,WAAW,CAChCK,UAAU,IAAM;IACjB,IAAK,CAAEH,aAAa,CAACI,OAAO,IAAI,CAAED,UAAU,EAAG;MAC9C;IACD;IAEAA,UAAU,CAACC,OAAO,CAACC,aAAa,CAC/BL,aAAa,CAACI,OAAO,EACrB,CAAEE,EAAE,EAAEC,CAAC,EAAEC,MAAM,EAAEC,MAAM,KAAM;MAC5B,IAAKA,MAAM,IAAIF,CAAC,EAAG;QAClBN,eAAe,CAAES,IAAI,CAACC,KAAK,CAAEJ,CAAE,CAAC,EAAEE,MAAO,CAAC;MAC3C;IACD,CAAC,EACD,MAAM,CAAC,CACR,CAAC;EACF,CAAC,EACD,CAAET,aAAa,EAAEC,eAAe,CACjC,CAAC;EAED,OAAO,CAAEC,eAAe,CAAE;AAC3B"}