RNMobile - Gallery - better use of Stepper component

WordPress · Jan 30, 2020 · 7c0a10d · 7c0a10d
1 parent 1a011eb
commit 7c0a10d
Showing 1 changed file with 10 additions and 28 deletions.
diff --git 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' ) }