Mobile - Gallery - Allow removing image when it's in failed state (#2…

…5838)
WordPress · Oct 9, 2020 · c120818 · c120818
1 parent 3ad20a4
commit c120818
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 60 deletions.
diff --git a/packages/block-library/src/gallery/gallery-image-style.native.scss b/packages/block-library/src/gallery/gallery-image-style.native.scss
@@ -58,34 +58,6 @@ $caption-background-color: rgba(0, 0, 0, 0.4);
 	justify-content: space-between;
 }
 
-.uploadFailedContainer {
-	position: absolute;
-	background-color: rgba(0, 0, 0, 0.5);
-	width: 100%;
-	height: 100%;
-	justify-content: center;
-	align-items: center;
-}
-
-.uploadFailed {
-	width: 24px;
-	height: 24px;
-	justify-content: center;
-	align-items: center;
-}
-
-.uploadFailedIcon {
-	fill: #fff;
-	width: 100%;
-	height: 100%;
-}
-
-.uploadFailedText {
-	color: #fff;
-	font-size: 14px;
-	margin-top: 5px;
-}
-
 .captionContainer {
 	flex: 1;
 	flex-direction: row;

diff --git a/packages/block-library/src/gallery/gallery-image.native.js b/packages/block-library/src/gallery/gallery-image.native.js
@@ -5,7 +5,6 @@ import {
 	StyleSheet,
 	View,
 	ScrollView,
-	Text,
 	TouchableWithoutFeedback,
 } from 'react-native';
 import { isEmpty } from 'lodash';
@@ -19,7 +18,7 @@ import {
 	requestImageFullscreenPreview,
 } from '@wordpress/react-native-bridge';
 import { Component } from '@wordpress/element';
-import { Icon, Image } from '@wordpress/components';
+import { Image } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Caption, MediaUploadProgress } from '@wordpress/block-editor';
 import { getProtocol } from '@wordpress/url';
@@ -233,22 +232,10 @@ class GalleryImage extends Component {
 					onSelectMediaUploadOption={ this.onSelectMedia }
 					resizeMode={ resizeMode }
 					url={ url }
+					retryMessage={ retryMessage }
+					retryIcon={ warning }
 				/>
 
-				{ isUploadFailed && (
-					<View style={ style.uploadFailedContainer }>
-						<View style={ style.uploadFailed }>
-							<Icon
-								icon={ warning }
-								{ ...style.uploadFailedIcon }
-							/>
-						</View>
-						<Text style={ style.uploadFailedText }>
-							{ retryMessage }
-						</Text>
-					</View>
-				) }
-
 				{ ! isUploadInProgress && isSelected && (
 					<View style={ style.toolbarContainer }>
 						<View style={ style.toolbar }>

diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
@@ -42,6 +42,7 @@ const ImageComponent = ( {
 	openMediaOptions,
 	resizeMode,
 	retryMessage,
+	retryIcon,
 	url,
 	shapeStyle,
 	width: imageWidth,
@@ -78,7 +79,12 @@ const ImageComponent = ( {
 		let iconStyle;
 		switch ( iconType ) {
 			case ICON_TYPE.RETRY:
-				return <Icon icon={ SvgIconRetry } { ...styles.iconRetry } />;
+				return (
+					<Icon
+						icon={ retryIcon || SvgIconRetry }
+						{ ...styles.iconRetry }
+					/>
+				);
 			case ICON_TYPE.PLACEHOLDER:
 				iconStyle = iconPlaceholderStyles;
 				break;
@@ -210,7 +216,12 @@ const ImageComponent = ( {
 							styles.retryContainer,
 						] }
 					>
-						<View style={ styles.modalIcon }>
+						<View
+							style={ [
+								styles.retryIcon,
+								retryIcon && styles.customRetryIcon,
+							] }
+						>
 							{ getIcon( ICON_TYPE.RETRY ) }
 						</View>
 						<Text style={ styles.uploadFailedText }>
@@ -219,19 +230,14 @@ const ImageComponent = ( {
 					</View>
 				) }
 
-				{ editButton &&
-					isSelected &&
-					! isUploadInProgress &&
-					! isUploadFailed && (
-						<ImageEditingButton
-							onSelectMediaUploadOption={
-								onSelectMediaUploadOption
-							}
-							openMediaOptions={ openMediaOptions }
-							url={ imageData && url }
-							pickerOptions={ mediaPickerOptions }
-						/>
-					) }
+				{ editButton && isSelected && ! isUploadInProgress && (
+					<ImageEditingButton
+						onSelectMediaUploadOption={ onSelectMediaUploadOption }
+						openMediaOptions={ openMediaOptions }
+						url={ ! isUploadFailed && imageData && url }
+						pickerOptions={ mediaPickerOptions }
+					/>
+				) }
 			</View>
 		</View>
 	);

diff --git a/packages/components/src/mobile/image/style.native.scss b/packages/components/src/mobile/image/style.native.scss
@@ -16,13 +16,17 @@
 	height: 100%;
 }
 
-.modalIcon {
+.retryIcon {
 	width: 80px;
 	height: 80px;
 	justify-content: center;
 	align-items: center;
 }
 
+.customRetryIcon {
+	width: 24px;
+	height: 24px;
+}
 
 .iconRetry {
 	fill: #fff;