Added checks for empty size options

WordPress · Feb 3, 2020 · 12ebc85 · 12ebc85
1 parent 9aa8aa7
commit 12ebc85
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -17,7 +17,7 @@ import {
 	requestImageFullscreenPreview,
 	showMediaEditorButton,
 } from 'react-native-gutenberg-bridge';
-import { isEmpty, map, get } from 'lodash';
+import { isEmpty, get, find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -357,7 +357,14 @@ export class ImageEdit extends React.Component {
 			},
 		];
 
-		const sizeOptions = imageSizes.map( ( { label, slug } ) => ( { value: slug, label } ) );
+		const sizeOptions = imageSizes.map( ( { label, slug } ) => ( {
+			value: slug,
+			label,
+		} ) );
+		const sizeOptionsValid = find( sizeOptions, [
+			'value',
+			DEFAULT_SIZE_SLUG,
+		] );
 
 		const getToolbarEditButton = ( open ) => (
 			<BlockControls>
@@ -396,14 +403,17 @@ export class ImageEdit extends React.Component {
 						onChange={ this.onSetNewTab }
 					/>
 					{ // eslint-disable-next-line no-undef
-						image && __DEV__ &&
+					image && sizeOptionsValid && __DEV__ && (
 						<CycleSelectControl
 							icon={ 'editor-expand' }
 							label={ __( 'Size' ) }
 							value={ sizeSlug || DEFAULT_SIZE_SLUG }
-							onChangeValue={ ( newValue ) => this.onSetSizeSlug( newValue ) }
+							onChangeValue={ ( newValue ) =>
+								this.onSetSizeSlug( newValue )
+							}
 							options={ sizeOptions }
-						/> }
+						/>
+					) }
 					<TextControl
 						icon={ 'editor-textcolor' }
 						label={ __( 'Alt Text' ) }
@@ -651,9 +661,7 @@ export default compose( [
 			attributes: { id },
 			isSelected,
 		} = props;
-		const {
-			imageSizes,
-		} = getSettings();
+		const { imageSizes } = getSettings();
 
 		return {
 			image: id && isSelected ? getMedia( id ) : null,

diff --git a/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js b/packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js
@@ -11,15 +11,22 @@ export default function BottomSheetCyclePickerCell( props ) {
 	const { value, options, onChangeValue, ...cellProps } = props;
 
 	const nextOptionValue = () => {
-		const selectedOptionIndex = findIndex( options, [ 'value', value ] );
 		return options[ ( selectedOptionIndex + 1 ) % options.length ].value;
 	};
 
+	const selectedOptionIndex = findIndex( options, [ 'value', value ] );
+	const optionsContainsValue =
+		options.length > 0 && selectedOptionIndex !== -1;
+
 	return (
 		<Cell
-			onPress={ () => onChangeValue( nextOptionValue() ) }
+			onPress={ () =>
+				optionsContainsValue && onChangeValue( nextOptionValue() )
+			}
 			editable={ false }
-			value={ options[ findIndex( options, [ 'value', value ] ) ].label }
+			value={
+				optionsContainsValue && options[ selectedOptionIndex ].label
+			}
 			{ ...cellProps }
 		/>
 	);