[RNMobile] Move MediaUploadPorgress to its own component folder (#17392)

* Move MediaUploadPorgress to its own component folder (native)

* MediaUploadProgress - Fix import to code standards

* MediaUploadProgress readme

* Mobile - MediaUploadProgress README update

packages/block-editor/src/components/index.native.js

@@ -18,6 +18,7 @@ export {
 } from './rich-text';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from './media-upload';
+export { default as MediaUploadProgress } from './media-upload-progress';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
 export { default as Caption } from './caption';

packages/block-editor/src/components/media-upload-progress/README.md

@@ -0,0 +1,140 @@
+MediaUploadProgress
+===================
+
+`MediaUploadProgress` shows a progress bar while a media file associated with a block is being uploaded.
+
+## Usage
+
+Usage example
+
+```jsx
+import { ImageBackground, Text, View } from 'react-native';
+import {
+	MediaUploadProgress,
+} from '@wordpress/block-editor';
+
+function MediaProgress( { height, width, url, id } ) {
+	return (
+		<MediaUploadProgress
+			height={ height }
+			width={ width }
+			coverUrl={ url }
+			mediaId={ id }
+			renderContent={ ( { isUploadFailed, finalWidth, finalHeight, retryMessage } ) => {
+				return (
+					<ImageBackground
+						style={ { width: finalWidth, height: finalHeight } }
+						resizeMethod="scale"
+						source={ { uri: url } }
+					>
+						{ isUploadFailed &&
+							<View>
+								<Text>{ retryMessage }</Text>
+							</View>
+						}
+					</ImageBackground>
+				);
+			} }
+		/>
+	);
+}
+```
+
+## Props
+
+### mediaId
+
+A media ID that identifies the current upload.
+
+- Type: `Number`
+- Required: Yes
+- Platform: Mobile
+
+### coverUrl
+
+By passing an image url, it'll calculate the right size depending on the container of the component maintaining its aspect ratio, it'll pass these values through `renderContent`.
+
+- Type: `String`
+- Required: No
+- Platform: Mobile
+
+### renderContent
+
+Content to be rendered along with the progress bar, usually the thumbnail of the media being uploaded.
+
+- Type: `React components`
+- Required: Yes
+- Platform: Mobile
+
+It passes an object containing the following properties:
+
+**With** `coverUrl` as a parameter:
+
+`{ isUploadInProgress, isUploadFailed, finalWidth, finalHeight, imageWidthWithinContainer, retryMessage }`
+
+**Without** `coverUrl` as a parameter:
+
+`{ isUploadInProgress, isUploadFailed, retryMessage }`
+
+
+### width
+
+Forces the final width to be returned in `finalWidth`
+
+- Type: `Number`
+- Required: No
+- Platform: Mobile
+
+### height
+
+Forces the final height to be returned in `finalHeight`
+
+- Type: `Number`
+- Required: No
+- Platform: Mobile
+
+### onUpdateMediaProgress
+
+Callback called when the progress of the upload is updated.
+
+- Type: `Function`
+- Required: No
+- Platform: Mobile
+
+The argument of the callback is an object containing the following properties:
+
+`{ mediaId, mediaUrl, progress, state }`
+
+### onFinishMediaUploadWithSuccess
+
+Callback called when the media file has been uploaded successfully.
+
+- Type: `Function`
+- Required: No
+- Platform: Mobile
+
+The argument of the callback is an object containing the following properties:
+
+`{ mediaId, mediaServerId, mediaUrl, progress, state }`
+
+### onFinishMediaUploadWithFailure
+
+Callback called when the media file couldn't be uploaded.
+
+- Type: `Function`
+- Required: No
+- Platform: Mobile
+
+The argument of the callback is an object containing the following properties:
+
+`{ mediaId, progress, state }`
+
+
+### onMediaUploadStateReset
+
+Callback called when the media upload is reset
+
+- Type: `Function`
+- Required: No
+- Platform: Mobile
+

packages/block-library/src/image/image-size.native.js → packages/block-editor/src/components/media-upload-progress/image-size.native.js

@@ -11,7 +11,15 @@ import { View, Image } from 'react-native';
 /**
  * Internal dependencies
  */
-import { calculatePreferedImageSize } from './utils';
+
+function calculatePreferedImageSize( image, container ) {
+	const maxWidth = container.clientWidth;
+	const exceedMaxWidth = image.width > maxWidth;
+	const ratio = image.height / image.width;
+	const width = exceedMaxWidth ? maxWidth : image.width;
+	const height = exceedMaxWidth ? maxWidth * ratio : image.height;
+	return { width, height };
+}
 
 class ImageSize extends Component {
 	constructor() {

packages/block-editor/src/components/media-upload-progress/styles.native.scss

@@ -0,0 +1,4 @@
+.mediaUploadProgress {
+	flex: 1;
+	background-color: $gray-lighten-30;
+}

packages/block-library/src/image/test/media-upload-progress.native.js → packages/block-editor/src/components/media-upload-progress/test/index.native.js

@@ -15,7 +15,7 @@ import {
 	MEDIA_UPLOAD_STATE_SUCCEEDED,
 	MEDIA_UPLOAD_STATE_FAILED,
 	MEDIA_UPLOAD_STATE_RESET,
-} from '../media-upload-progress';
+} from '../';
 
 jest.mock( 'react-native-gutenberg-bridge', () => {
 	const callUploadCallback = ( payload ) => {

packages/block-library/src/image/edit.native.js

@@ -25,6 +25,7 @@ import {
 	Caption,
 	MediaPlaceholder,
 	MediaUpload,
+	MediaUploadProgress,
 	MEDIA_TYPE_IMAGE,
 	BlockControls,
 	InspectorControls,
@@ -38,7 +39,6 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  * Internal dependencies
  */
 import styles from './styles.scss';
-import MediaUploadProgress from './media-upload-progress';
 import SvgIcon from './icon';
 import SvgIconRetry from './icon-retry';
 

packages/block-library/src/image/styles.native.scss

@@ -22,11 +22,6 @@
 	color: $alert-red;
 }
 
-.mediaUploadProgress {
-	flex: 1;
-	background-color: $gray-lighten-30;
-}
-
 .modalIcon {
 	width: 80px;
 	height: 80px;

packages/block-library/src/video/edit.native.js

@@ -26,6 +26,7 @@ import {
 	Caption,
 	MediaPlaceholder,
 	MediaUpload,
+	MediaUploadProgress,
 	MEDIA_TYPE_VIDEO,
 	BlockControls,
 	InspectorControls,
@@ -37,7 +38,6 @@ import { doAction, hasAction } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import MediaUploadProgress from '../image/media-upload-progress';
 import style from './style.scss';
 import SvgIcon from './icon';
 import SvgIconRetry from './icon-retry';