diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 7c6906da0066a..b45904361595d 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/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'; diff --git a/packages/block-editor/src/components/media-upload-progress/README.md b/packages/block-editor/src/components/media-upload-progress/README.md new file mode 100644 index 0000000000000..89ef924371777 --- /dev/null +++ b/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 ( + { + return ( + + { isUploadFailed && + + { retryMessage } + + } + + ); + } } + /> + ); +} +``` + +## 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 + diff --git a/packages/block-library/src/image/image-size.native.js b/packages/block-editor/src/components/media-upload-progress/image-size.native.js similarity index 83% rename from packages/block-library/src/image/image-size.native.js rename to packages/block-editor/src/components/media-upload-progress/image-size.native.js index a337a5d14548c..ade5984c1cada 100644 --- a/packages/block-library/src/image/image-size.native.js +++ b/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() { diff --git a/packages/block-library/src/image/media-upload-progress.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js similarity index 100% rename from packages/block-library/src/image/media-upload-progress.native.js rename to packages/block-editor/src/components/media-upload-progress/index.native.js diff --git a/packages/block-editor/src/components/media-upload-progress/styles.native.scss b/packages/block-editor/src/components/media-upload-progress/styles.native.scss new file mode 100644 index 0000000000000..5dea1caaf5aef --- /dev/null +++ b/packages/block-editor/src/components/media-upload-progress/styles.native.scss @@ -0,0 +1,4 @@ +.mediaUploadProgress { + flex: 1; + background-color: $gray-lighten-30; +} diff --git a/packages/block-library/src/image/test/media-upload-progress.native.js b/packages/block-editor/src/components/media-upload-progress/test/index.native.js similarity index 99% rename from packages/block-library/src/image/test/media-upload-progress.native.js rename to packages/block-editor/src/components/media-upload-progress/test/index.native.js index 042f571aeefe5..e7c48e80d05df 100644 --- a/packages/block-library/src/image/test/media-upload-progress.native.js +++ b/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 ) => { diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index db437f11f1703..1839c19c0a58d 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/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'; diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index aaafc3ae5457c..9c5a9cbf5c45e 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/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; diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js index 94dc83b347442..c69ae7bb39e8e 100644 --- a/packages/block-library/src/video/edit.native.js +++ b/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';