[RNMobile] Stepper component

docs/manifest-devhub.json

@@ -839,6 +839,12 @@
 		"markdown_source": "../packages/components/src/menu-items-choice/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "StepperControl",
+		"slug": "stepper-control",
+		"markdown_source": "../packages/components/src/mobile/stepper-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Modal",
 		"slug": "modal",

packages/components/src/index.native.js

@@ -37,3 +37,4 @@ export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view
 export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list';
 export { default as Picker } from './mobile/picker';
 export { default as ReadableContentView } from './mobile/readable-content-view';
+export { default as StepperControl } from './mobile/stepper-control';

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

@@ -75,6 +75,7 @@ class BottomSheetCell extends Component {
 			accessibilityLabel,
 			accessibilityHint,
 			accessibilityRole,
+			disabled = false,
 			onPress,
 			label,
 			value,
@@ -218,6 +219,7 @@ class BottomSheetCell extends Component {
 					__( 'Double tap to edit this value' ) :
 					accessibilityHint
 				}
+				disabled={ disabled }
 				onPress={ onCellPress }
 				style={ [ styles.clipToBounds, style ] }
 			>

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

@@ -0,0 +1,164 @@
+/**
+ * External dependencies
+ */
+import { AccessibilityInfo, View, Platform } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Cell from '../cell';
+import Stepper from './stepper';
+import styles from './style.scss';
+
+const STEP_SPEED = 200;
+const DEFAULT_STEP = 1;
+
+class BottomSheetStepperCell extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.announceValue = this.announceValue.bind( this );
+		this.onDecrementValue = this.onDecrementValue.bind( this );
+		this.onDecrementValuePressIn = this.onDecrementValuePressIn.bind( this );
+		this.onIncrementValue = this.onIncrementValue.bind( this );
+		this.onIncrementValuePressIn = this.onIncrementValuePressIn.bind( this );
+		this.onPressOut = this.onPressOut.bind( this );
+		this.startPressInterval = this.startPressInterval.bind( this );
+	}
+
+	componentWillUnmount() {
+		clearTimeout( this.timeout );
+		clearInterval( this.interval );
+		clearTimeout( this.timeoutAnnounceValue );
+	}
+
+	onIncrementValue() {
+		const { step, maxValue, onChangeValue, value } = this.props;
+		const newValue = value + step;
+
+		if ( newValue <= maxValue ) {
+			onChangeValue( newValue );
+			this.announceValue( newValue );
+		}
+	}
+
+	onDecrementValue() {
+		const { step, minValue, onChangeValue, value } = this.props;
+		const newValue = value - step;
+
+		if ( newValue >= minValue ) {
+			onChangeValue( newValue );
+			this.announceValue( newValue );
+		}
+	}
+
+	onIncrementValuePressIn() {
+		this.onIncrementValue();
+		this.timeout = setTimeout( () => {
+			this.startPressInterval( this.onIncrementValue );
+		}, 500 );
+	}
+
+	onDecrementValuePressIn() {
+		this.onDecrementValue();
+		this.timeout = setTimeout( () => {
+			this.startPressInterval( this.onDecrementValue );
+		}, 500 );
+	}
+
+	onPressOut() {
+		clearTimeout( this.timeout );
+		clearInterval( this.interval );
+	}
+
+	startPressInterval( callback ) {
+		let counter = 0;
+		this.interval = setInterval( () => {
+			callback();
+			counter += 1;
+
+			if ( counter === 10 ) {
+				clearInterval( this.interval );
+				this.startPressInterval( callback, STEP_SPEED / 2 );
+			}
+		}, STEP_SPEED );
+	}
+
+	announceValue( value ) {
+		const { label } = this.props;
+
+		if ( Platform.OS === 'ios' ) { // On Android it triggers the accessibilityLabel with the value change
+			clearTimeout( this.timeoutAnnounceValue );
+			this.timeoutAnnounceValue = setTimeout( () => {
+				AccessibilityInfo.announceForAccessibility( `${ value } ${ label }` );
+			}, 300 );
+		}
+	}
+
+	render() {
+		const { label, icon, minValue, maxValue, value, separatorType } = this.props;
+		const isMinValue = value === minValue;
+		const isMaxValue = value === maxValue;
+
+		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' ),
+			label, value
+		);
+
+		return (
+			<View
+				accessible={ true }
+				accessibilityRole="adjustable"
+				accessibilityLabel={ accessibilityLabel }
+				accessibilityActions={ [
+					{ name: 'increment' },
+					{ name: 'decrement' },
+				] }
+				onAccessibilityAction={ ( event ) => {
+					switch ( event.nativeEvent.actionName ) {
+						case 'increment':
+							this.onIncrementValue();
+							break;
+						case 'decrement':
+							this.onDecrementValue();
+							break;
+					}
+				} }>
+				<Cell
+					accessibilityRole="none"
+					accessible={ false }
+					cellContainerStyle={ styles.cellContainerStyles }
+					cellRowContainerStyle={ styles.cellRowStyles }
+					disabled={ true }
+					editable={ false }
+					icon={ icon }
+					label={ label }
+					labelStyle={ styles.cellLabel }
+					separatorType={ separatorType }
+				>
+					<Stepper
+						isMaxValue={ isMaxValue }
+						isMinValue={ isMinValue }
+						onPressInDecrement={ this.onDecrementValuePressIn }
+						onPressInIncrement={ this.onIncrementValuePressIn }
+						onPressOut={ this.onPressOut }
+						value={ value }
+					/>
+				</Cell>
+			</View>
+		);
+	}
+}
+
+BottomSheetStepperCell.defaultProps = {
+	step: DEFAULT_STEP,
+};
+
+export default BottomSheetStepperCell;

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

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { Text, TouchableOpacity, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Dashicon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+function Stepper( {
+	getStylesFromColorScheme,
+	isMaxValue,
+	isMinValue,
+	onPressInDecrement,
+	onPressInIncrement,
+	onPressOut,
+	value,
+} ) {
+	const valueStyle = getStylesFromColorScheme( styles.value, styles.valueTextDark );
+	const buttonIconStyle = getStylesFromColorScheme( styles.buttonNoBg, styles.buttonNoBgTextDark );
+
+	return (
+		<View style={ styles.container } accesibility={ false } importantForAccessibility="no-hide-descendants">
+			<TouchableOpacity
+				disabled={ isMinValue }
+				onPressIn={ onPressInDecrement }
+				onPressOut={ onPressOut }
+				style={ [ styles.buttonNoBg, isMinValue ? { opacity: 0.4 } : null ] }
+			>
+				<Dashicon icon="arrow-down-alt2" size={ 18 } color={ buttonIconStyle.color } />
+			</TouchableOpacity>
+			<Text style={ valueStyle }>{ value }</Text>
+			<TouchableOpacity
+				disabled={ isMaxValue }
+				onPressIn={ onPressInIncrement }
+				onPressOut={ onPressOut }
+				style={ [ styles.buttonNoBg, isMaxValue ? { opacity: 0.4 } : null ] }
+			>
+				<Dashicon icon="arrow-up-alt2" size={ 18 } color={ buttonIconStyle.color } />
+			</TouchableOpacity>
+		</View>
+	);
+}
+
+export default withPreferredColorScheme( Stepper );

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

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { Text, TouchableOpacity, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Dashicon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+function Stepper( {
+	getStylesFromColorScheme,
+	isMaxValue,
+	isMinValue,
+	onPressInDecrement,
+	onPressInIncrement,
+	onPressOut,
+	value,
+} ) {
+	const valueStyle = getStylesFromColorScheme( styles.value, styles.valueTextDark );
+	const buttonStyle = getStylesFromColorScheme( styles.button, styles.buttonDark );
+
+	return (
+		<View style={ styles.container }>
+			<Text style={ valueStyle }>{ value }</Text>
+			<TouchableOpacity
+				disabled={ isMinValue }
+				onPressIn={ onPressInDecrement }
+				onPressOut={ onPressOut }
+				style={ [ buttonStyle, isMinValue ? { opacity: 0.4 } : null ] }
+			>
+				<Dashicon icon="minus" size={ 24 } color={ buttonStyle.color } />
+			</TouchableOpacity>
+			<TouchableOpacity
+				disabled={ isMaxValue }
+				onPressIn={ onPressInIncrement }
+				onPressOut={ onPressOut }
+				style={ [ buttonStyle, isMaxValue ? { opacity: 0.4 } : null ] }
+			>
+				<Dashicon icon="plus" size={ 24 } color={ buttonStyle.color } style={ styles.plus } />
+			</TouchableOpacity>
+		</View>
+	);
+}
+
+export default withPreferredColorScheme( Stepper );

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

@@ -0,0 +1,66 @@
+.container {
+	flex-grow: 1;
+	flex-direction: row;
+	align-items: center;
+	min-height: 48px;
+	justify-content: flex-end;
+}
+
+.cellContainerStyles {
+	flex-direction: row;
+	align-items: flex-start;
+}
+
+.cellRowStyles {
+	min-height: 48px;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.cellLabel {
+	flex: 1;
+}
+
+.button {
+	width: 32px;
+	height: 32px;
+	background-color: $gray-light;
+	color: #0087be;
+	border-radius: 16px;
+	margin-left: 12px;
+	align-items: center;
+	justify-content: center;
+}
+
+.buttonNoBg {
+	width: 32px;
+	height: 32px;
+	color: #87a6bc;
+	margin-left: 12px;
+	align-items: center;
+	justify-content: center;
+}
+
+.buttonNoBgTextDark {
+	color: $light-opacity-700;
+}
+
+.buttonDark {
+	background-color: $light-opacity-light-100;
+	color: #5198d9;
+}
+
+.value {
+	color: #2e4453;
+	font-size: 16px;
+	margin-left: 12px;
+}
+
+.valueTextDark {
+	color: $light-opacity-200;
+}
+
+.plus {
+	margin-top: 4px;
+	margin-right: 1px;
+}