[RNMobile] - Replace Slider with Stepper for columns settings on Gallery block

packages/block-library/src/gallery/edit.js

@@ -21,6 +21,7 @@ import {
 	PanelBody,
 	RangeControl,
 	SelectControl,
+	StepperControl,
 	ToggleControl,
 	withNotices,
 } from '@wordpress/components';
@@ -38,6 +39,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' ) },
@@ -365,7 +367,7 @@ class GalleryEdit extends Component {
 				<InspectorControls>
 					<PanelBody title={ __( 'Gallery settings' ) }>
 						{ images.length > 1 && (
-							<RangeControl
+							<ColumnsControl
 								label={ __( 'Columns' ) }
 								{ ...MOBILE_CONTROL_PROPS }
 								value={ columns }
@@ -375,6 +377,7 @@ class GalleryEdit extends Component {
 								required
 							/>
 						) }
+
 						<ToggleControl
 							label={ __( 'Crop Images' ) }
 							{ ...MOBILE_CONTROL_PROPS }

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

@@ -16,7 +16,7 @@ import Cell from '../cell';
 import Stepper from './stepper';
 import styles from './style.scss';
 
-const STEP_SPEED = 200;
+const STEP_DELAY = 200;
 const DEFAULT_STEP = 1;
 
 class BottomSheetStepperCell extends Component {
@@ -43,21 +43,21 @@ class BottomSheetStepperCell extends Component {
 	}
 
 	onIncrementValue() {
-		const { step, maxValue, onChangeValue, value } = this.props;
+		const { step, max, onChange, value } = this.props;
 		const newValue = value + step;
 
-		if ( newValue <= maxValue ) {
-			onChangeValue( newValue );
+		if ( newValue <= max ) {
+			onChange( newValue );
 			this.announceValue( newValue );
 		}
 	}
 
 	onDecrementValue() {
-		const { step, minValue, onChangeValue, value } = this.props;
+		const { step, min, onChange, value } = this.props;
 		const newValue = value - step;
 
-		if ( newValue >= minValue ) {
-			onChangeValue( newValue );
+		if ( newValue >= min ) {
+			onChange( newValue );
 			this.announceValue( newValue );
 		}
 	}
@@ -81,17 +81,17 @@ class BottomSheetStepperCell extends Component {
 		clearInterval( this.interval );
 	}
 
-	startPressInterval( callback ) {
+	startPressInterval( callback, speed = STEP_DELAY ) {
 		let counter = 0;
 		this.interval = setInterval( () => {
 			callback();
 			counter += 1;
 
 			if ( counter === 10 ) {
 				clearInterval( this.interval );
-				this.startPressInterval( callback, STEP_SPEED / 2 );
+				this.startPressInterval( callback, speed / 2 );
 			}
-		}, STEP_SPEED );
+		}, speed );
 	}
 
 	announceValue( value ) {
@@ -109,17 +109,13 @@ class BottomSheetStepperCell extends Component {
 	}
 
 	render() {
-		const {
-			label,
-			icon,
-			minValue,
-			maxValue,
-			value,
-			separatorType,
-		} = this.props;
-		const isMinValue = value === minValue;
-		const isMaxValue = value === maxValue;
-
+		const { label, icon, min, max, value, separatorType } = this.props;
+		const isMinValue = value === min;
+		const isMaxValue = value === max;
+		const labelStyle = [
+			styles.cellLabel,
+			! icon ? styles.cellLabelNoIcon : {},
+		];
 		const accessibilityLabel = sprintf(
 			/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: Current value. */
 			__( '%1$s. Current value is %2$s' ),
@@ -156,7 +152,8 @@ class BottomSheetStepperCell extends Component {
 					editable={ false }
 					icon={ icon }
 					label={ label }
-					labelStyle={ styles.cellLabel }
+					labelStyle={ labelStyle }
+					leftAlign={ true }
 					separatorType={ separatorType }
 				>
 					<Stepper

packages/components/src/mobile/bottom-sheet/stepper-cell/style.native.scss

@@ -21,6 +21,10 @@
 	flex: 1;
 }
 
+.cellLabelNoIcon {
+	margin-left: 0;
+}
+
 .button {
 	width: 32px;
 	height: 32px;

packages/components/src/mobile/stepper-control/README.md

@@ -10,14 +10,14 @@ Usage example
 import { StepperControl } from '@wordpress/components';
 import { more } from '@wordpress/icons';
 
-function Stepper( { onChangeValue, value } ) {
+function Stepper( { onChange, value } ) {
 	return (
 		<StepperControl
 			icon={ more }
 			label="Columns"
-			maxValue={ 8 }
-			minValue={ 1 }
-			onChangeValue={ onChangeValue }
+			max={ 8 }
+			min={ 1 }
+			onChange={ onChange }
 			value={ value }
 		/>
 	);
@@ -26,15 +26,15 @@ function Stepper( { onChangeValue, value } ) {
 
 ## Props
 
-### maxValue
+### max 
 
 Maximum value of the stepper.
 
 -   Type: `Number`
 -   Required: Yes
 -   Platform: Mobile
 
-### minValue
+### min 
 
 Minimum value of the stepper.
 
@@ -58,7 +58,7 @@ Current value of the stepper.
 -   Required: Yes
 -   Platform: Mobile
 
-### onChangeValue
+### onChange
 
 Callback called when the value has changed
 

packages/components/src/mobile/stepper-control/index.native.js

@@ -6,9 +6,9 @@ import StepperCell from '../bottom-sheet/stepper-cell';
 function StepperControl( {
 	icon,
 	label,
-	maxValue,
-	minValue,
-	onChangeValue,
+	max,
+	min,
+	onChange,
 	separatorType,
 	step,
 	value,
@@ -17,9 +17,9 @@ function StepperControl( {
 		<StepperCell
 			icon={ icon }
 			label={ label }
-			maxValue={ maxValue }
-			minValue={ minValue }
-			onChangeValue={ onChangeValue }
+			max={ max }
+			min={ min }
+			onChange={ onChange }
 			separatorType={ separatorType }
 			step={ step }
 			value={ value }