@wordpress/components 34.0.0 → 35.0.1

package/src/mobile/bottom-sheet/picker-cell.native.js

@@ -1,40 +0,0 @@
-/**
- * Internal dependencies
- */
-import Cell from './cell';
-import Picker from '../picker';
-
-export default function BottomSheetPickerCell( props ) {
-	const { options, hideCancelButton, onChangeValue, value, ...cellProps } =
-		props;
-
-	let picker;
-
-	const onCellPress = () => {
-		picker.presentPicker();
-	};
-
-	const onChange = ( newValue ) => {
-		onChangeValue( newValue );
-	};
-
-	const option = options.find( ( opt ) => opt.value === value );
-	const label = option ? option.label : value;
-
-	return (
-		<Cell
-			onPress={ onCellPress }
-			editable={ false }
-			value={ label }
-			{ ...cellProps }
-		>
-			<Picker
-				leftAlign
-				hideCancelButton={ hideCancelButton }
-				ref={ ( instance ) => ( picker = instance ) }
-				options={ options }
-				onChange={ onChange }
-			/>
-		</Cell>
-	);
-}

package/src/mobile/bottom-sheet/radio-cell.native.js

@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, check } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import Cell from './cell';
-import styles from './styles.scss';
-
-export default function BottomSheetRadioCell( props ) {
-	const { selected, ...cellProps } = props;
-
-	const selectedIconStyle = usePreferredColorSchemeStyle(
-		styles.selectedIcon,
-		styles.selectedIconDark
-	);
-
-	return (
-		<Cell
-			{ ...cellProps }
-			accessibilityRole="radio"
-			accessibilityState={ { selected } }
-			accessibilityHint={
-				/* translators: accessibility text (hint for selecting option) */
-				__( 'Double tap to select the option' )
-			}
-			editable={ false }
-			value=""
-			showLockIcon={ selected }
-		>
-			{ selected && (
-				<Icon icon={ check } style={ selectedIconStyle }></Icon>
-			) }
-		</Cell>
-	);
-}

package/src/mobile/bottom-sheet/range-cell.native.js

@@ -1,274 +0,0 @@
-/**
- * External dependencies
- */
-import { Platform, AccessibilityInfo, View } from 'react-native';
-import Slider from '@react-native-community/slider';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import { withPreferredColorScheme } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Cell from './cell';
-import LockIcon from './lock-icon';
-import styles from './range-cell.scss';
-import RangeTextInput from './range-text-input';
-import { toFixed } from '../utils';
-
-const isIOS = Platform.OS === 'ios';
-
-class BottomSheetRangeCell extends Component {
-	constructor( props ) {
-		super( props );
-		this.onSliderChange = this.onSliderChange.bind( this );
-		this.onCompleteSliderChange = this.onCompleteSliderChange.bind( this );
-		this.onTextInputChange = this.onTextInputChange.bind( this );
-		this.a11yIncrementValue = this.a11yIncrementValue.bind( this );
-		this.a11yDecrementValue = this.a11yDecrementValue.bind( this );
-		this.a11yUpdateValue = this.a11yUpdateValue.bind( this );
-
-		const { value, defaultValue, minimumValue } = props;
-		const initialValue = Number( value || defaultValue || minimumValue );
-
-		this.state = {
-			inputValue: initialValue,
-			sliderValue: initialValue,
-		};
-	}
-
-	componentWillUnmount() {
-		clearTimeout( this.timeoutAnnounceValue );
-	}
-
-	onSliderChange( initialValue ) {
-		const { decimalNum, onChange } = this.props;
-		initialValue = toFixed( initialValue, decimalNum );
-		this.setState( { inputValue: initialValue } );
-		onChange( initialValue );
-	}
-
-	onTextInputChange( nextValue ) {
-		const { onChange, onComplete } = this.props;
-		this.setState( {
-			sliderValue: nextValue,
-		} );
-		onChange( nextValue );
-		if ( onComplete ) {
-			onComplete( nextValue );
-		}
-	}
-
-	onCompleteSliderChange( nextValue ) {
-		const { decimalNum, onComplete } = this.props;
-		nextValue = toFixed( nextValue, decimalNum );
-		if ( onComplete ) {
-			onComplete( nextValue );
-		}
-	}
-
-	/*
-	 * Only used with screenreaders like VoiceOver and TalkBack. Increments the
-	 * value of this setting programmatically.
-	 */
-	a11yIncrementValue() {
-		const { step = 5, maximumValue, decimalNum } = this.props;
-		const { inputValue } = this.state;
-
-		const newValue = toFixed( inputValue + step, decimalNum );
-
-		if ( newValue <= maximumValue || maximumValue === undefined ) {
-			this.a11yUpdateValue( newValue );
-		}
-	}
-
-	/*
-	 * Only used with screenreaders like VoiceOver and TalkBack. Decrements the
-	 * value of this setting programmatically.
-	 */
-	a11yDecrementValue() {
-		const { step = 5, minimumValue, decimalNum } = this.props;
-		const { sliderValue } = this.state;
-
-		const newValue = toFixed( sliderValue - step, decimalNum );
-
-		if ( newValue >= minimumValue ) {
-			this.a11yUpdateValue( newValue );
-		}
-	}
-
-	a11yUpdateValue( newValue ) {
-		const { onChange, onComplete } = this.props;
-		this.setState( {
-			sliderValue: newValue,
-			inputValue: newValue,
-		} );
-		onChange( newValue );
-		if ( onComplete ) {
-			onComplete( newValue );
-		}
-		this.announceValue( newValue );
-	}
-
-	/*
-	 * Only used with screenreaders like VoiceOver and TalkBack.
-	 */
-	announceValue( value ) {
-		const { label, unitLabel = '' } = this.props;
-
-		if ( isIOS ) {
-			// On Android it triggers the accessibilityLabel with the value change, but
-			// on iOS we need to do this manually.
-			clearTimeout( this.timeoutAnnounceValue );
-			this.timeoutAnnounceValue = setTimeout( () => {
-				AccessibilityInfo.announceForAccessibility(
-					`${ value } ${ unitLabel },  ${ label }`
-				);
-			}, 300 );
-		}
-	}
-
-	render() {
-		const {
-			value,
-			defaultValue,
-			minimumValue = 0,
-			maximumValue = 10,
-			disabled,
-			step = 1,
-			preferredColorScheme,
-			minimumTrackTintColor = preferredColorScheme === 'light'
-				? '#00669b'
-				: '#5198d9',
-			maximumTrackTintColor = isIOS ? '#e9eff3' : '#909090',
-			thumbTintColor = ! isIOS && '#00669b',
-			preview,
-			cellContainerStyle,
-			shouldDisplayTextInput = true,
-			unitLabel = '',
-			settingLabel = 'Value',
-			openUnitPicker,
-			children,
-			decimalNum,
-			...cellProps
-		} = this.props;
-
-		const { inputValue, sliderValue } = this.state;
-
-		const getAccessibilityHint = () => {
-			return openUnitPicker ? __( 'double-tap to change unit' ) : '';
-		};
-
-		const getAccessibilityLabel = () => {
-			return 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.' ),
-				cellProps.label,
-				settingLabel,
-				toFixed( value, decimalNum ),
-				unitLabel
-			);
-		};
-
-		const containerStyle = [
-			styles.container,
-			isIOS ? styles.containerIOS : styles.containerAndroid,
-		];
-
-		return (
-			<View
-				accessible
-				accessibilityRole="adjustable"
-				accessibilityActions={ [
-					{ name: 'increment' },
-					{ name: 'decrement' },
-					{ name: 'activate' },
-				] }
-				onAccessibilityAction={ ( event ) => {
-					switch ( event.nativeEvent.actionName ) {
-						case 'increment':
-							this.a11yIncrementValue();
-							break;
-						case 'decrement':
-							this.a11yDecrementValue();
-							break;
-						case 'activate':
-							if ( openUnitPicker ) {
-								openUnitPicker();
-							}
-							break;
-					}
-				} }
-				accessibilityLabel={ getAccessibilityLabel() }
-				accessibilityHint={ getAccessibilityHint() }
-			>
-				<View importantForAccessibility="no-hide-descendants">
-					<Cell
-						{ ...cellProps }
-						cellContainerStyle={ [
-							styles.cellContainerStyles,
-							cellContainerStyle,
-						] }
-						cellRowContainerStyle={ containerStyle }
-						leftAlign
-						editable={ false }
-						activeOpacity={ 1 }
-						accessible={ false }
-						valueStyle={ styles.valueStyle }
-						disabled={ disabled }
-						showLockIcon={ false }
-					>
-						<View style={ containerStyle }>
-							{ preview }
-							<Slider
-								testID={ `Slider ${ cellProps.label }` }
-								value={ sliderValue }
-								defaultValue={ defaultValue }
-								disabled={ disabled && ! isIOS }
-								step={ step }
-								minimumValue={ minimumValue }
-								maximumValue={ maximumValue }
-								minimumTrackTintColor={ minimumTrackTintColor }
-								maximumTrackTintColor={ maximumTrackTintColor }
-								thumbTintColor={ thumbTintColor }
-								onValueChange={ this.onSliderChange }
-								onSlidingComplete={
-									this.onCompleteSliderChange
-								}
-								ref={ ( slider ) => {
-									this.sliderRef = slider;
-								} }
-								style={
-									isIOS
-										? styles.sliderIOS
-										: styles.sliderAndroid
-								}
-							/>
-							{ shouldDisplayTextInput && (
-								<RangeTextInput
-									label={ cellProps.label }
-									onChange={ this.onTextInputChange }
-									defaultValue={ `${ inputValue }` }
-									value={ inputValue }
-									min={ minimumValue }
-									max={ maximumValue }
-									step={ step }
-									decimalNum={ decimalNum }
-								>
-									{ children }
-								</RangeTextInput>
-							) }
-							{ disabled && <LockIcon /> }
-						</View>
-					</Cell>
-				</View>
-			</View>
-		);
-	}
-}
-
-export default withPreferredColorScheme( BottomSheetRangeCell );

package/src/mobile/bottom-sheet/range-cell.native.scss

@@ -1,40 +0,0 @@
-.sliderIOS {
-	flex-grow: 1;
-	min-height: $grid-unit-60;
-}
-
-.sliderAndroid {
-	flex-grow: 1;
-	min-height: $grid-unit-60;
-	margin-left: -6px;
-}
-
-.isSelected {
-	border-width: 2px;
-	border-color: $blue-wordpress;
-}
-
-.container {
-	flex-direction: row;
-	align-items: center;
-}
-
-.cellContainerStyles {
-	margin-top: 13px;
-	flex-direction: column;
-	align-items: flex-start;
-}
-
-.containerIOS {
-	padding-top: 6px;
-	padding-bottom: 6px;
-}
-
-.containerAndroid {
-	padding-top: 8px;
-	padding-bottom: 8px;
-}
-
-.valueStyle {
-	height: 0;
-}

package/src/mobile/bottom-sheet/range-text-input.native.js

@@ -1,248 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	AccessibilityInfo,
-	View,
-	TextInput,
-	PixelRatio,
-	AppState,
-	Platform,
-	Text,
-	TouchableWithoutFeedback,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { toFixed, removeNonDigit } from '../utils';
-import styles from './styles.scss';
-import borderStyles from './borderStyles.scss';
-
-const isIOS = Platform.OS === 'ios';
-
-class RangeTextInput extends Component {
-	constructor( props ) {
-		super( props );
-
-		this.announceCurrentValue = this.announceCurrentValue.bind( this );
-		this.onInputFocus = this.onInputFocus.bind( this );
-		this.onInputBlur = this.onInputBlur.bind( this );
-		this.handleChangePixelRatio = this.handleChangePixelRatio.bind( this );
-		this.onSubmitEditing = this.onSubmitEditing.bind( this );
-		this.onChangeText = this.onChangeText.bind( this );
-
-		const { value, defaultValue, min, decimalNum } = props;
-		const initialValue = toFixed(
-			value || defaultValue || min,
-			decimalNum
-		);
-
-		const fontScale = this.getFontScale();
-
-		this.state = {
-			fontScale,
-			inputValue: initialValue,
-			controlValue: initialValue,
-			hasFocus: false,
-		};
-	}
-
-	componentDidMount() {
-		this.appStateChangeSubscription = AppState.addEventListener(
-			'change',
-			this.handleChangePixelRatio
-		);
-	}
-
-	componentWillUnmount() {
-		this.appStateChangeSubscription.remove();
-		clearTimeout( this.timeoutAnnounceValue );
-	}
-
-	componentDidUpdate( prevProps, prevState ) {
-		const { value } = this.props;
-		const { hasFocus, inputValue } = this.state;
-
-		if ( prevProps.value !== value ) {
-			this.setState( { inputValue: value } );
-		}
-
-		if ( prevState.hasFocus !== hasFocus ) {
-			const validValue = this.validateInput( inputValue );
-			this.setState( { inputValue: validValue } );
-		}
-
-		if ( ! prevState.hasFocus && hasFocus ) {
-			this._valueTextInput.focus();
-		}
-	}
-
-	getFontScale() {
-		return PixelRatio.getFontScale() < 1 ? 1 : PixelRatio.getFontScale();
-	}
-
-	handleChangePixelRatio( nextAppState ) {
-		if ( nextAppState === 'active' ) {
-			this.setState( { fontScale: this.getFontScale() } );
-		}
-	}
-
-	onInputFocus() {
-		this.setState( {
-			hasFocus: true,
-		} );
-	}
-
-	onInputBlur() {
-		const { inputValue } = this.state;
-		this.onChangeText( `${ inputValue }` );
-		this.setState( {
-			hasFocus: false,
-		} );
-	}
-
-	validateInput( text ) {
-		const { min, max, decimalNum } = this.props;
-		let result = min;
-		if ( ! text ) {
-			return min;
-		}
-
-		if ( typeof text === 'number' ) {
-			result = Math.max( text, min );
-			return max ? Math.min( result, max ) : result;
-		}
-
-		result = Math.max( removeNonDigit( text, decimalNum ), min );
-		return max ? Math.min( result, max ) : result;
-	}
-
-	updateValue( value ) {
-		const { onChange } = this.props;
-		const validValue = this.validateInput( value );
-
-		this.announceCurrentValue( `${ validValue }` );
-
-		onChange( validValue );
-	}
-
-	onChangeText( textValue ) {
-		const { decimalNum } = this.props;
-		const inputValue = removeNonDigit( textValue, decimalNum );
-
-		textValue = inputValue.replace( ',', '.' );
-		textValue = toFixed( textValue, decimalNum );
-		const value = this.validateInput( textValue );
-		this.setState( {
-			inputValue,
-			controlValue: value,
-		} );
-		this.updateValue( value );
-	}
-
-	onSubmitEditing( { nativeEvent: { text } } ) {
-		const { decimalNum } = this.props;
-		const { inputValue } = this.state;
-
-		if ( ! isNaN( Number( text ) ) ) {
-			text = toFixed( text.replace( ',', '.' ), decimalNum );
-			const validValue = this.validateInput( text );
-
-			if ( inputValue !== validValue ) {
-				this.setState( { inputValue: validValue } );
-				this.announceCurrentValue( `${ validValue }` );
-				this.props.onChange( validValue );
-			}
-		}
-	}
-
-	announceCurrentValue( value ) {
-		/* translators: %s: current cell value. */
-		const announcement = sprintf( __( 'Current value is %s' ), value );
-		AccessibilityInfo.announceForAccessibility( announcement );
-	}
-
-	render() {
-		const { getStylesFromColorScheme, children, label } = this.props;
-		const { fontScale, inputValue, hasFocus } = this.state;
-
-		const textInputStyle = getStylesFromColorScheme(
-			styles.textInput,
-			styles.textInputDark
-		);
-
-		const textInputIOSStyle = getStylesFromColorScheme(
-			styles.textInputIOS,
-			styles.textInputIOSDark
-		);
-
-		const inputBorderStyles = [
-			textInputStyle,
-			borderStyles.borderStyle,
-			hasFocus && borderStyles.isSelected,
-		];
-
-		const valueFinalStyle = [
-			Platform.select( {
-				android: inputBorderStyles,
-				ios: textInputIOSStyle,
-			} ),
-			{
-				width: 50 * fontScale,
-				borderRightWidth: children ? 1 : 0,
-			},
-		];
-
-		return (
-			<TouchableWithoutFeedback
-				onPress={ this.onInputFocus }
-				accessible={ false }
-			>
-				<View
-					style={ [
-						styles.textInputContainer,
-						isIOS && inputBorderStyles,
-					] }
-					accessible={ false }
-				>
-					{ isIOS || hasFocus ? (
-						<TextInput
-							accessibilityLabel={ label }
-							ref={ ( c ) => ( this._valueTextInput = c ) }
-							style={ valueFinalStyle }
-							onChangeText={ this.onChangeText }
-							onSubmitEditing={ this.onSubmitEditing }
-							onFocus={ this.onInputFocus }
-							onBlur={ this.onInputBlur }
-							keyboardType="numeric"
-							returnKeyType="done"
-							numberOfLines={ 1 }
-							defaultValue={ `${ inputValue }` }
-							value={ inputValue.toString() }
-							pointerEvents={ hasFocus ? 'auto' : 'none' }
-						/>
-					) : (
-						<Text
-							style={ valueFinalStyle }
-							numberOfLines={ 1 }
-							ellipsizeMode="clip"
-						>
-							{ inputValue }
-						</Text>
-					) }
-					{ children }
-				</View>
-			</TouchableWithoutFeedback>
-		);
-	}
-}
-
-export default withPreferredColorScheme( RangeTextInput );