From 7c0a10d08fcceacf15cced8d11f5f01ab40754d8 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Thu, 30 Jan 2020 14:48:48 +0100
Subject: [PATCH] RNMobile - Gallery - better use of Stepper component

---
 packages/block-library/src/gallery/edit.js | 38 ++++++----------------
 1 file changed, 10 insertions(+), 28 deletions(-)

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index dd26843e1d515..96917012bcb55 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -42,6 +42,7 @@ import { sharedIcon } from './shared-icon';
 import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared';
 import Gallery from './gallery';
 
+const ColumnsControl = Platform.OS === 'web' ? RangeControl : StepperControl;
 const MAX_COLUMNS = 8;
 const linkOptions = [
 	{ value: 'attachment', label: __( 'Attachment Page' ) },
@@ -300,33 +301,6 @@ class GalleryEdit extends Component {
 		}
 	}
 
-	renderColumnsSettings( columns ) {
-		const { attributes } = this.props;
-		const { images } = attributes;
-		const label = __( 'Columns' );
-		const minValue = 1;
-		const maxValue = Math.min( MAX_COLUMNS, images.length );
-
-		return images.length > 1 && (
-			Platform.OS === 'web' ?
-				<RangeControl
-					label={ label }
-					value={ columns }
-					onChange={ this.setColumnsNumber }
-					min={ minValue }
-					max={ maxValue }
-					required
-				/> :
-				<StepperControl
-					label={ label }
-					maxValue={ maxValue }
-					minValue={ minValue }
-					onChangeValue={ this.setColumnsNumber }
-					value={ columns }
-				/>
-		);
-	}
-
 	render() {
 		const {
 			attributes,
@@ -382,7 +356,15 @@ class GalleryEdit extends Component {
 			<>
 				<InspectorControls>
 					<PanelBody title={ __( 'Gallery settings' ) }>
-						{ this.renderColumnsSettings( columns ) }
+						{ images.length > 1 && <ColumnsControl
+							label={ __( 'Columns' ) }
+							{ ...MOBILE_CONTROL_PROPS }
+							value={ columns }
+							onChange={ this.setColumnsNumber }
+							min={ 1 }
+							max={ Math.min( MAX_COLUMNS, images.length ) }
+							required
+						/> }
 
 						<ToggleControl
 							label={ __( 'Crop Images' ) }