@wordpress/components 35.0.0 → 35.0.1

package/src/mobile/bottom-sheet/ripple.native.js

@@ -1,83 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	Platform,
-	TouchableOpacity,
-	TouchableNativeFeedback,
-	View,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { withPreferredColorScheme } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import rippleStyles from './ripple.native.scss';
-
-const ANDROID_VERSION_LOLLIPOP = 21;
-const ANDROID_VERSION_PIE = 28;
-
-const TouchableRipple = ( {
-	style,
-	onPress,
-	disabled: disabledProp,
-	children,
-	activeOpacity,
-	getStylesFromColorScheme,
-	borderless = false,
-	...touchableProps
-} ) => {
-	const isTouchableNativeSupported =
-		Platform.OS === 'android' &&
-		Platform.Version >= ANDROID_VERSION_LOLLIPOP;
-
-	const disabled = disabledProp || ! onPress;
-	const rippleColor = getStylesFromColorScheme(
-		rippleStyles.ripple,
-		rippleStyles.rippleDark
-	).backgroundColor;
-
-	if ( isTouchableNativeSupported ) {
-		// A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
-		// https://github.com/facebook/react-native/issues/6480
-		const useForeground =
-			Platform.OS === 'android' &&
-			Platform.Version >= ANDROID_VERSION_PIE &&
-			borderless;
-
-		return (
-			<TouchableNativeFeedback
-				{ ...touchableProps }
-				onPress={ onPress }
-				disabled={ disabled }
-				useForeground={ useForeground }
-				background={ TouchableNativeFeedback.Ripple(
-					rippleColor,
-					borderless
-				) }
-			>
-				<View style={ [ borderless && rippleStyles.overflow, style ] }>
-					{ children }
-				</View>
-			</TouchableNativeFeedback>
-		);
-	}
-
-	return (
-		<TouchableOpacity
-			{ ...touchableProps }
-			onPress={ onPress }
-			disabled={ disabled }
-			activeOpacity={ activeOpacity }
-			style={ style }
-		>
-			{ children }
-		</TouchableOpacity>
-	);
-};
-
-export default withPreferredColorScheme( TouchableRipple );

package/src/mobile/bottom-sheet/ripple.native.scss

@@ -1,11 +0,0 @@
-.ripple {
-	background-color: rgba(0, 0, 0, 0.2);
-}
-
-.rippleDark {
-	background-color: rgba(255, 255, 255, 0.2);
-}
-
-.overflow {
-	overflow: hidden;
-}

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

@@ -1,264 +0,0 @@
-/**
- * External dependencies
- */
-import { AccessibilityInfo, View, Platform } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import { withPreferredColorScheme } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Cell from '../cell';
-import Stepper from './stepper';
-import styles from './style.scss';
-import RangeTextInput from '../range-text-input';
-import { toFixed } from '../../utils';
-
-const STEP_DELAY = 200;
-const DEFAULT_STEP = 1;
-
-const isIOS = Platform.OS === 'ios';
-
-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 );
-
-		const { value, defaultValue, min } = props;
-
-		const initialValue = value || defaultValue || min;
-
-		this.state = {
-			inputValue: initialValue,
-			stepperValue: initialValue,
-		};
-	}
-
-	componentWillUnmount() {
-		clearTimeout( this.timeout );
-		clearInterval( this.interval );
-		clearTimeout( this.timeoutAnnounceValue );
-	}
-
-	onIncrementValue() {
-		const { step, max, onChange, value, decimalNum } = this.props;
-		let newValue = toFixed( value + step, decimalNum );
-		newValue =
-			parseInt( newValue ) === newValue ? parseInt( newValue ) : newValue;
-		if ( newValue <= max || max === undefined ) {
-			onChange( newValue );
-			this.setState( {
-				inputValue: newValue,
-			} );
-			this.announceValue( newValue );
-		}
-	}
-
-	onDecrementValue() {
-		const { step, min, onChange, value, decimalNum } = this.props;
-		let newValue = toFixed( value - step, decimalNum );
-		newValue =
-			parseInt( newValue ) === newValue ? parseInt( newValue ) : newValue;
-		if ( newValue >= min ) {
-			onChange( newValue );
-			this.setState( {
-				inputValue: 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, speed = STEP_DELAY ) {
-		let counter = 0;
-		this.interval = setInterval( () => {
-			callback();
-			counter += 1;
-
-			if ( counter === 10 ) {
-				clearInterval( this.interval );
-				this.startPressInterval( callback, speed / 2 );
-			}
-		}, speed );
-	}
-
-	announceValue( value ) {
-		const { label, unitLabel = '' } = this.props;
-
-		if ( isIOS ) {
-			// On Android it triggers the accessibilityLabel with the value change
-			clearTimeout( this.timeoutAnnounceValue );
-			this.timeoutAnnounceValue = setTimeout( () => {
-				AccessibilityInfo.announceForAccessibility(
-					`${ value } ${ unitLabel } ${ label }`
-				);
-			}, 300 );
-		}
-	}
-
-	render() {
-		const {
-			label,
-			settingLabel = 'Value',
-			unitLabel = '',
-			icon,
-			min,
-			max,
-			value,
-			separatorType,
-			children,
-			shouldDisplayTextInput = false,
-			preview,
-			onChange,
-			openUnitPicker,
-			decimalNum,
-			cellContainerStyle,
-			disabled,
-		} = this.props;
-		const { inputValue } = this.state;
-		const isMinValue = value === min;
-		const isMaxValue = value === max;
-		const labelStyle = [
-			styles.cellLabel,
-			! icon ? styles.cellLabelNoIcon : {},
-		];
-
-		const getAccessibilityHint = () => {
-			return openUnitPicker ? __( 'double-tap to change unit' ) : '';
-		};
-
-		const accessibilityLabel = sprintf(
-			/* translators: accessibility text. Inform about current value. 1: Control label. 2: setting label (example: width). 3: Current value. 4: value measurement unit (example: pixels) */
-			__( '%1$s. %2$s is %3$s %4$s.' ),
-			label,
-			settingLabel,
-			value,
-			unitLabel
-		);
-
-		const containerStyle = [
-			styles.rowContainer,
-			isIOS ? styles.containerIOS : styles.containerAndroid,
-		];
-
-		return (
-			<View
-				accessible
-				accessibilityRole="adjustable"
-				accessibilityLabel={ accessibilityLabel }
-				accessibilityHint={ getAccessibilityHint() }
-				accessibilityActions={ [
-					{ name: 'increment' },
-					{ name: 'decrement' },
-					{ name: 'activate' },
-				] }
-				onAccessibilityAction={ ( event ) => {
-					switch ( event.nativeEvent.actionName ) {
-						case 'increment':
-							this.onIncrementValue();
-							break;
-						case 'decrement':
-							this.onDecrementValue();
-							break;
-						case 'activate':
-							if ( openUnitPicker ) {
-								openUnitPicker();
-							}
-							break;
-					}
-				} }
-			>
-				<View importantForAccessibility="no-hide-descendants">
-					<Cell
-						accessible={ false }
-						cellContainerStyle={ [
-							styles.cellContainerStyle,
-							preview && styles.columnContainer,
-							cellContainerStyle,
-						] }
-						cellRowContainerStyle={
-							preview ? containerStyle : styles.cellRowStyles
-						}
-						editable={ false }
-						icon={ icon }
-						label={ label }
-						labelStyle={ labelStyle }
-						leftAlign
-						separatorType={ separatorType }
-						disabled={ disabled }
-					>
-						<View style={ preview && containerStyle }>
-							{ preview }
-							<Stepper
-								isMaxValue={ isMaxValue }
-								isMinValue={ isMinValue }
-								onPressInDecrement={
-									this.onDecrementValuePressIn
-								}
-								onPressInIncrement={
-									this.onIncrementValuePressIn
-								}
-								onPressOut={ this.onPressOut }
-								value={ value }
-								shouldDisplayTextInput={
-									shouldDisplayTextInput
-								}
-							>
-								{ shouldDisplayTextInput && (
-									<RangeTextInput
-										label={ label }
-										onChange={ onChange }
-										defaultValue={ `${ inputValue }` }
-										value={ value }
-										min={ min }
-										step={ 1 }
-										decimalNum={ decimalNum }
-									>
-										{ children }
-									</RangeTextInput>
-								) }
-							</Stepper>
-						</View>
-					</Cell>
-				</View>
-			</View>
-		);
-	}
-}
-
-BottomSheetStepperCell.defaultProps = {
-	step: DEFAULT_STEP,
-};
-
-export default withPreferredColorScheme( BottomSheetStepperCell );

package/src/mobile/bottom-sheet/stepper-cell/stepper.android.js

@@ -1,78 +0,0 @@
-/**
- * External dependencies
- */
-import { Text, TouchableOpacity, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
-import { withPreferredColorScheme } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-function Stepper( {
-	getStylesFromColorScheme,
-	isMaxValue,
-	isMinValue,
-	onPressInDecrement,
-	onPressInIncrement,
-	onPressOut,
-	value,
-	shouldDisplayTextInput,
-	children,
-} ) {
-	const valueStyle = getStylesFromColorScheme(
-		styles.value,
-		styles.valueTextDark
-	);
-	const buttonIconStyle = getStylesFromColorScheme(
-		styles.buttonNoBg,
-		styles.buttonNoBgTextDark
-	);
-
-	return (
-		<View style={ styles.container }>
-			<TouchableOpacity
-				disabled={ isMinValue }
-				onPressIn={ onPressInDecrement }
-				onPressOut={ onPressOut }
-				style={ [
-					styles.buttonNoBg,
-					isMinValue ? { opacity: 0.4 } : null,
-				] }
-			>
-				<Icon
-					icon={ chevronDown }
-					size={ 24 }
-					color={ buttonIconStyle.color }
-				/>
-			</TouchableOpacity>
-			{ ! shouldDisplayTextInput && (
-				<Text style={ [ valueStyle, styles.spacings ] }>{ value }</Text>
-			) }
-			{ children }
-			<TouchableOpacity
-				testID="Increment"
-				disabled={ isMaxValue }
-				onPressIn={ onPressInIncrement }
-				onPressOut={ onPressOut }
-				style={ [
-					styles.buttonNoBg,
-					isMaxValue ? { opacity: 0.4 } : null,
-				] }
-			>
-				<Icon
-					icon={ chevronUp }
-					size={ 24 }
-					color={ buttonIconStyle.color }
-				/>
-			</TouchableOpacity>
-		</View>
-	);
-}
-
-export default withPreferredColorScheme( Stepper );

package/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js

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

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

@@ -1,89 +0,0 @@
-.container {
-	flex-grow: 1;
-	flex-direction: row;
-	align-items: center;
-	min-height: 48px;
-	justify-content: flex-end;
-}
-
-.rowContainer {
-	flex-direction: row;
-	align-items: center;
-}
-
-.columnContainer {
-	margin-top: 13px;
-	flex-direction: column;
-}
-
-.containerIOS {
-	padding-top: 6px;
-	padding-bottom: 6px;
-}
-
-.containerAndroid {
-	padding-top: 8px;
-	padding-bottom: 8px;
-}
-
-.cellContainerStyles {
-	flex-direction: row;
-	align-items: flex-start;
-}
-
-.cellRowStyles {
-	flex-shrink: 1;
-	min-height: 48px;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.cellLabel {
-	flex: 1;
-}
-
-.cellLabelNoIcon {
-	margin-left: 0;
-}
-
-.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;
-	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;
-}
-
-.spacings {
-	margin-left: 12px;
-	margin-right: 12px;
-}
-
-.valueTextDark {
-	color: $light-opacity-200;
-}