[RNMobile] Update image size UI control

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

@@ -17,16 +17,16 @@ import {
 	requestImageFullscreenPreview,
 	showMediaEditorButton,
 } from 'react-native-gutenberg-bridge';
-import { isEmpty, map, get } from 'lodash';
+import { isEmpty, get, find, map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import {
+	CycleSelectControl,
 	Icon,
 	PanelBody,
 	PanelActions,
-	SelectControl,
 	TextControl,
 	ToggleControl,
 	ToolbarButton,
@@ -59,28 +59,17 @@ import SvgIconRetry from './icon-retry';
 import SvgIconCustomize from './icon-customize';
 import { getUpdatedLinkTargetSettings } from './utils';
 
-import { LINK_DESTINATION_CUSTOM, LINK_DESTINATION_NONE } from './constants';
+import {
+	LINK_DESTINATION_CUSTOM,
+	LINK_DESTINATION_NONE,
+	DEFAULT_SIZE_SLUG,
+} from './constants';
 
 const ICON_TYPE = {
 	PLACEHOLDER: 'placeholder',
 	RETRY: 'retry',
 	UPLOAD: 'upload',
 };
-const IMAGE_SIZE_THUMBNAIL = 'thumbnail';
-const IMAGE_SIZE_MEDIUM = 'medium';
-const IMAGE_SIZE_LARGE = 'large';
-const IMAGE_SIZE_FULL_SIZE = 'full';
-const DEFAULT_SIZE_SLUG = IMAGE_SIZE_LARGE;
-const sizeOptionLabels = {
-	[ IMAGE_SIZE_THUMBNAIL ]: __( 'Thumbnail' ),
-	[ IMAGE_SIZE_MEDIUM ]: __( 'Medium' ),
-	[ IMAGE_SIZE_LARGE ]: __( 'Large' ),
-	[ IMAGE_SIZE_FULL_SIZE ]: __( 'Full Size' ),
-};
-const sizeOptions = map( sizeOptionLabels, ( label, option ) => ( {
-	value: option,
-	label,
-} ) );
 
 // Default Image ratio 4:3
 const IMAGE_ASPECT_RATIO = 4 / 3;
@@ -348,7 +337,7 @@ export class ImageEdit extends React.Component {
 	}
 
 	render() {
-		const { attributes, isSelected, image } = this.props;
+		const { attributes, isSelected, image, imageSizes } = this.props;
 		const {
 			align,
 			url,
@@ -368,6 +357,15 @@ export class ImageEdit extends React.Component {
 			},
 		];
 
+		const sizeOptions = map( imageSizes, ( { name, slug } ) => ( {
+			value: slug,
+			name,
+		} ) );
+		const sizeOptionsValid = find( sizeOptions, [
+			'value',
+			DEFAULT_SIZE_SLUG,
+		] );
+
 		const getToolbarEditButton = ( open ) => (
 			<BlockControls>
 				<ToolbarGroup>
@@ -405,16 +403,11 @@ export class ImageEdit extends React.Component {
 						onChange={ this.onSetNewTab }
 					/>
 					{ // eslint-disable-next-line no-undef
-					image && __DEV__ && (
-						<SelectControl
-							hideCancelButton
+					image && sizeOptionsValid && __DEV__ && (
+						<CycleSelectControl
 							icon={ 'editor-expand' }
 							label={ __( 'Size' ) }
-							value={
-								sizeOptionLabels[
-									sizeSlug || DEFAULT_SIZE_SLUG
-								]
-							}
+							value={ sizeSlug || DEFAULT_SIZE_SLUG }
 							onChangeValue={ ( newValue ) =>
 								this.onSetSizeSlug( newValue )
 							}
@@ -663,13 +656,16 @@ export class ImageEdit extends React.Component {
 export default compose( [
 	withSelect( ( select, props ) => {
 		const { getMedia } = select( 'core' );
+		const { getSettings } = select( 'core/block-editor' );
 		const {
 			attributes: { id },
 			isSelected,
 		} = props;
+		const { imageSizes } = getSettings();
 
 		return {
 			image: id && isSelected ? getMedia( id ) : null,
+			imageSizes,
 		};
 	} ),
 	withPreferredColorScheme,

packages/components/src/index.native.js

@@ -54,3 +54,4 @@ export { default as ModalHeaderBar } from './mobile/modal-header-bar';
 export { default as Picker } from './mobile/picker';
 export { default as ReadableContentView } from './mobile/readable-content-view';
 export { default as StepperControl } from './mobile/stepper-control';
+export { default as CycleSelectControl } from './mobile/cycle-select-control';

packages/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { findIndex } from 'lodash';
+/**
+ * Internal dependencies
+ */
+import Cell from './cell';
+
+export default function BottomSheetCyclePickerCell( props ) {
+	const { value, options, onChangeValue, ...cellProps } = props;
+
+	const nextOptionValue = () => {
+		return options[ ( selectedOptionIndex + 1 ) % options.length ].value;
+	};
+
+	const selectedOptionIndex = findIndex( options, [ 'value', value ] );
+	const optionsContainsValue =
+		options.length > 0 && selectedOptionIndex !== -1;
+
+	return (
+		<Cell
+			onPress={ () =>
+				optionsContainsValue && onChangeValue( nextOptionValue() )
+			}
+			editable={ false }
+			value={
+				optionsContainsValue && options[ selectedOptionIndex ].name
+			}
+			{ ...cellProps }
+		/>
+	);
+}

packages/components/src/mobile/bottom-sheet/index.native.js

@@ -17,6 +17,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 import styles from './styles.scss';
 import Button from './button';
 import Cell from './cell';
+import CyclePickerCell from './cycle-picker-cell';
 import PickerCell from './picker-cell';
 import SwitchCell from './switch-cell';
 import RangeCell from './range-cell';
@@ -170,6 +171,7 @@ const ThemedBottomSheet = withPreferredColorScheme( BottomSheet );
 ThemedBottomSheet.getWidth = getWidth;
 ThemedBottomSheet.Button = Button;
 ThemedBottomSheet.Cell = Cell;
+ThemedBottomSheet.CyclePickerCell = CyclePickerCell;
 ThemedBottomSheet.PickerCell = PickerCell;
 ThemedBottomSheet.SwitchCell = SwitchCell;
 ThemedBottomSheet.RangeCell = RangeCell;

packages/components/src/mobile/cycle-select-control/README.md

@@ -0,0 +1,4 @@
+CycleSelectControl
+===================
+
+`CycleSelectControl` is an experimental alternative to SelectControl for mobile. 

packages/components/src/mobile/cycle-select-control/index.native.js

@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+import CyclePickerCell from '../bottom-sheet/cycle-picker-cell';
+
+function CycleSelectControl( {
+	help,
+	instanceId,
+	label,
+	multiple = false,
+	onChange,
+	options = [],
+	className,
+	hideLabelFromVision,
+	...props
+} ) {
+	const id = `inspector-select-control-${ instanceId }`;
+
+	return (
+		<CyclePickerCell
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+			id={ id }
+			help={ help }
+			className={ className }
+			onChangeValue={ onChange }
+			aria-describedby={ !! help ? `${ id }__help` : undefined }
+			multiple={ multiple }
+			options={ options }
+			{ ...props }
+		/>
+	);
+}
+
+export default CycleSelectControl;