@wordpress/components 35.0.0 → 35.1.1-next.v.202606191442.0

package/src/focal-point-picker/index.native.js

@@ -1,281 +0,0 @@
-/**
- * External dependencies
- */
-import { Animated, PanResponder, StyleSheet, View } from 'react-native';
-import Video from 'react-native-video';
-
-/**
- * WordPress dependencies
- */
-import {
-	requestFocalPointPickerTooltipShown,
-	setFocalPointPickerTooltipShown,
-} from '@wordpress/react-native-bridge';
-import { __ } from '@wordpress/i18n';
-import { useRef, useState, useMemo, useEffect } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import FocalPoint from './focal-point';
-import Tooltip from './tooltip';
-import styles from './style.scss';
-import { isVideoType } from './utils';
-import { clamp } from '../utils/math';
-import Image from '../mobile/image';
-import UnitControl from '../unit-control';
-
-const MIN_POSITION_VALUE = 0;
-const MAX_POSITION_VALUE = 100;
-const FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];
-
-function FocalPointPicker( props ) {
-	const { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;
-
-	const isVideo = isVideoType( url );
-
-	const [ containerSize, setContainerSize ] = useState( null );
-	const [ sliderKey, setSliderKey ] = useState( 0 );
-	const [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );
-	const [ videoNaturalSize, setVideoNaturalSize ] = useState( null );
-	const [ tooltipVisible, setTooltipVisible ] = useState( false );
-
-	const locationPageOffsetX = useRef();
-	const locationPageOffsetY = useRef();
-	const videoRef = useRef( null );
-
-	useEffect( () => {
-		requestFocalPointPickerTooltipShown( ( tooltipShown ) => {
-			if ( ! tooltipShown ) {
-				setTooltipVisible( true );
-				setFocalPointPickerTooltipShown( true );
-			}
-		} );
-	}, [] );
-
-	// Animated coordinates for drag handle.
-	const pan = useRef( new Animated.ValueXY() ).current;
-
-	/**
-	 * Set drag handle position anytime focal point coordinates change.
-	 * E.g. initial render, dragging range sliders.
-	 */
-	useEffect( () => {
-		if ( containerSize ) {
-			pan.setValue( {
-				x: focalPoint.x * containerSize.width,
-				y: focalPoint.y * containerSize.height,
-			} );
-		}
-	}, [ focalPoint, containerSize, pan ] );
-
-	// Pan responder to manage drag handle interactivity.
-	const panResponder = useMemo(
-		() =>
-			PanResponder.create( {
-				onStartShouldSetPanResponder: () => true,
-				onStartShouldSetPanResponderCapture: () => true,
-				onMoveShouldSetPanResponder: () => true,
-				onMoveShouldSetPanResponderCapture: () => true,
-
-				onPanResponderGrant: ( event ) => {
-					shouldEnableBottomSheetScroll( false );
-					const {
-						locationX: x,
-						locationY: y,
-						pageX,
-						pageY,
-					} = event.nativeEvent;
-					locationPageOffsetX.current = pageX - x;
-					locationPageOffsetY.current = pageY - y;
-					pan.setValue( { x, y } ); // Set cursor to tap location.
-					pan.extractOffset(); // Set offset to current value.
-				},
-				// Move cursor to match delta drag.
-				onPanResponderMove: Animated.event(
-					[ null, { dx: pan.x, dy: pan.y } ],
-					{ useNativeDriver: false }
-				),
-				onPanResponderRelease: ( event ) => {
-					shouldEnableBottomSheetScroll( true );
-					pan.flattenOffset(); // Flatten offset into value.
-					const { pageX, pageY } = event.nativeEvent;
-					// Ideally, x and y below are merely locationX and locationY from the
-					// nativeEvent. However, we are required to compute these relative
-					// coordinates to workaround a bug affecting Android's PanResponder.
-					// Specifically, dragging the handle outside the bounds of the image
-					// results in inaccurate locationX and locationY coordinates to be
-					// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944
-					const x = pageX - locationPageOffsetX.current;
-					const y = pageY - locationPageOffsetY.current;
-					onChange( {
-						x: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),
-						y: clamp( y / containerSize?.height, 0, 1 ).toFixed(
-							2
-						),
-					} );
-					// Slider (child of RangeCell) is uncontrolled, so we must increment a
-					// key to re-mount and sync the pan gesture values to the sliders
-					// https://github.com/callstack/react-native-slider/tree/v3.0.3#value
-					setSliderKey( ( prevState ) => prevState + 1 );
-				},
-			} ),
-		[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]
-	);
-
-	const mediaBackground = usePreferredColorSchemeStyle(
-		styles.mediaBackground,
-		styles.mediaBackgroundDark
-	);
-	const imagePreviewStyles = [
-		displayPlaceholder && styles.mediaPlaceholder,
-		styles.image,
-	];
-	const videoPreviewStyles = [
-		{
-			aspectRatio:
-				videoNaturalSize &&
-				videoNaturalSize.width / videoNaturalSize.height,
-			// Hide Video component since it has black background while loading the source
-			opacity: displayPlaceholder ? 0 : 1,
-		},
-		styles.video,
-		displayPlaceholder && styles.mediaPlaceholder,
-	];
-	const focalPointGroupStyles = [
-		styles.focalPointGroup,
-		{
-			transform: [
-				{
-					translateX: pan.x.interpolate( {
-						inputRange: [ 0, containerSize?.width || 0 ],
-						outputRange: [ 0, containerSize?.width || 0 ],
-						extrapolate: 'clamp',
-					} ),
-				},
-				{
-					translateY: pan.y.interpolate( {
-						inputRange: [ 0, containerSize?.height || 0 ],
-						outputRange: [ 0, containerSize?.height || 0 ],
-						extrapolate: 'clamp',
-					} ),
-				},
-			],
-		},
-	];
-	const FOCAL_POINT_SIZE = 50;
-	const focalPointStyles = StyleSheet.flatten( [
-		styles.focalPoint,
-		{
-			height: FOCAL_POINT_SIZE,
-			marginLeft: -( FOCAL_POINT_SIZE / 2 ),
-			marginTop: -( FOCAL_POINT_SIZE / 2 ),
-			width: FOCAL_POINT_SIZE,
-		},
-	] );
-
-	const onTooltipPress = () => setTooltipVisible( false );
-	const onMediaLayout = ( event ) => {
-		const { height, width } = event.nativeEvent.layout;
-
-		if (
-			width !== 0 &&
-			height !== 0 &&
-			( containerSize?.width !== width ||
-				containerSize?.height !== height )
-		) {
-			setContainerSize( { width, height } );
-		}
-	};
-	const onImageDataLoad = () => setDisplayPlaceholder( false );
-	const onVideoLoad = ( event ) => {
-		const { height, width } = event.naturalSize;
-		setVideoNaturalSize( { height, width } );
-		setDisplayPlaceholder( false );
-		// Avoid invisible, paused video on Android, presumably related to
-		// https://github.com/react-native-video/react-native-video/issues/1979
-		videoRef?.current.seek( 0 );
-	};
-	const onXCoordinateChange = ( x ) =>
-		onChange( { x: ( x / 100 ).toFixed( 2 ) } );
-	const onYCoordinateChange = ( y ) =>
-		onChange( { y: ( y / 100 ).toFixed( 2 ) } );
-
-	return (
-		<View style={ styles.container }>
-			<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>
-				<View style={ [ styles.media, mediaBackground ] }>
-					<View
-						{ ...panResponder.panHandlers }
-						onLayout={ onMediaLayout }
-						style={ styles.mediaContainer }
-					>
-						{ ! isVideo && (
-							<Image
-								editButton={ false }
-								highlightSelected={ false }
-								isSelected={ ! displayPlaceholder }
-								height="100%"
-								url={ url }
-								style={ imagePreviewStyles }
-								onImageDataLoad={ onImageDataLoad }
-							/>
-						) }
-						{ isVideo && (
-							<Video
-								muted
-								paused
-								disableFocus
-								onLoad={ onVideoLoad }
-								ref={ videoRef }
-								resizeMode="contain"
-								source={ { uri: url } }
-								style={ videoPreviewStyles }
-							/>
-						) }
-						{ ! displayPlaceholder && (
-							<Animated.View
-								pointerEvents="none"
-								style={ focalPointGroupStyles }
-							>
-								<Tooltip.Label
-									text={ __( 'Drag to adjust focal point' ) }
-									yOffset={ -( FOCAL_POINT_SIZE / 2 ) }
-								/>
-								<FocalPoint
-									height={ focalPointStyles.height }
-									style={ focalPointStyles }
-									testID="focal-point-picker-handle"
-									width={ focalPointStyles.width }
-								/>
-							</Animated.View>
-						) }
-					</View>
-				</View>
-				<UnitControl
-					key={ `xAxis-${ sliderKey }` }
-					label={ __( 'X-Axis Position' ) }
-					max={ MAX_POSITION_VALUE }
-					min={ MIN_POSITION_VALUE }
-					onChange={ onXCoordinateChange }
-					unit="%"
-					units={ FOCAL_POINT_UNITS }
-					value={ Math.round( focalPoint.x * 100 ) }
-				/>
-				<UnitControl
-					key={ `yAxis-${ sliderKey }` }
-					label={ __( 'Y-Axis Position' ) }
-					max={ MAX_POSITION_VALUE }
-					min={ MIN_POSITION_VALUE }
-					onChange={ onYCoordinateChange }
-					unit="%"
-					units={ FOCAL_POINT_UNITS }
-					value={ Math.round( focalPoint.y * 100 ) }
-				/>
-			</Tooltip>
-		</View>
-	);
-}
-
-export default FocalPointPicker;

package/src/focal-point-picker/tooltip/index.native.js

@@ -1,144 +0,0 @@
-/**
- * External dependencies
- */
-import { Animated, Easing, PanResponder, Text, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	createContext,
-	useEffect,
-	useRef,
-	useState,
-	useContext,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const TooltipContext = createContext();
-
-function Tooltip( { children, onPress, style, visible } ) {
-	const panResponder = useRef(
-		PanResponder.create( {
-			/**
-			 * To allow dimissing the tooltip on press while also avoiding blocking
-			 * interactivity within the child context, we place this `onPress` side
-			 * effect within the `onStartShouldSetPanResponderCapture` callback.
-			 *
-			 * This is a bit unorthodox, but may be the simplest approach to achieving
-			 * this outcome. This is effectively a gesture responder that never
-			 * becomes the controlling responder. https://bit.ly/2J3ugKF
-			 */
-			onStartShouldSetPanResponderCapture: () => {
-				if ( onPress ) {
-					onPress();
-				}
-				return false;
-			},
-		} )
-	).current;
-
-	return (
-		<TooltipContext.Provider value={ visible }>
-			<View
-				{ ...( visible ? panResponder.panHandlers : {} ) }
-				style={ style }
-			>
-				{ children }
-			</View>
-		</TooltipContext.Provider>
-	);
-}
-
-function Label( { align = 'center', text, xOffset = 0, yOffset = 0 } ) {
-	const animationValue = useRef( new Animated.Value( 0 ) ).current;
-	const [ dimensions, setDimensions ] = useState( null );
-	const visible = useContext( TooltipContext );
-
-	if ( typeof visible === 'undefined' ) {
-		throw new Error(
-			'Tooltip.Label cannot be rendered outside of the Tooltip component'
-		);
-	}
-
-	useEffect( () => {
-		const startAnimation = () => {
-			Animated.timing( animationValue, {
-				toValue: visible ? 1 : 0,
-				duration: visible ? 300 : 150,
-				useNativeDriver: true,
-				delay: visible ? 500 : 0,
-				easing: Easing.out( Easing.quad ),
-			} ).start();
-		};
-		startAnimation();
-	}, [ animationValue, visible ] );
-
-	// Transforms rely upon onLayout to enable custom offsets additions.
-	let tooltipTransforms;
-	if ( dimensions ) {
-		tooltipTransforms = [
-			{
-				translateX:
-					( align === 'center' ? -dimensions.width / 2 : 0 ) +
-					xOffset,
-			},
-			{ translateY: -dimensions.height + yOffset },
-		];
-	}
-
-	const tooltipStyles = [
-		styles.tooltip,
-		{
-			shadowColor: styles.tooltipShadow?.color,
-			shadowOffset: {
-				width: 0,
-				height: 2,
-			},
-			shadowOpacity: 0.25,
-			shadowRadius: 2,
-			elevation: 2,
-			transform: tooltipTransforms,
-		},
-		align === 'left' && styles.tooltipLeftAlign,
-	];
-	const arrowStyles = [
-		styles.arrow,
-		align === 'left' && styles.arrowLeftAlign,
-	];
-
-	return (
-		<Animated.View
-			style={ {
-				opacity: animationValue,
-				transform: [
-					{
-						translateY: animationValue.interpolate( {
-							inputRange: [ 0, 1 ],
-							outputRange: [ visible ? 4 : -8, -8 ],
-						} ),
-					},
-				],
-			} }
-		>
-			<View
-				onLayout={ ( { nativeEvent } ) => {
-					const { height, width } = nativeEvent.layout;
-					setDimensions( { height, width } );
-				} }
-				style={ tooltipStyles }
-			>
-				<Text style={ styles.text }>{ text }</Text>
-				<View style={ arrowStyles } />
-			</View>
-		</Animated.View>
-	);
-}
-
-Tooltip.Label = Label;
-
-export default Tooltip;

package/src/focal-point-picker/tooltip/style.native.scss

@@ -1,42 +0,0 @@
-$tooltipColor: #121212;
-$tooltipArrowSize: 6px;
-$tooltipArrowOffset: -($tooltipArrowSize - 1);
-
-.tooltip {
-	background-color: $tooltipColor;
-	border-radius: 4px;
-	left: 50%;
-	position: absolute;
-	top: $tooltipArrowOffset;
-	z-index: 1;
-}
-
-.tooltipLeftAlign {
-	left: 0;
-}
-
-.tooltipShadow {
-	color: $black;
-}
-
-.text {
-	color: $white;
-	padding: 12px 16px;
-}
-
-.arrow {
-	border-color: $tooltipColor transparent transparent transparent;
-	border-style: solid;
-	border-width: $tooltipArrowSize $tooltipArrowSize 0 $tooltipArrowSize;
-	bottom: $tooltipArrowOffset;
-	height: 0;
-	left: 50%;
-	margin-left: -$tooltipArrowSize;
-	position: absolute;
-	top: 100%;
-	width: 0;
-}
-
-.arrowLeftAlign {
-	left: 16px;
-}

package/src/font-size-picker/index.native.js

@@ -1,190 +0,0 @@
-/**
- * External dependencies
- */
-import { View, useWindowDimensions } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useNavigation } from '@react-navigation/native';
-import { useState } from '@wordpress/element';
-import { Icon, chevronRight, check } from '@wordpress/icons';
-import { __, _x, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';
-import { default as UnitControl, useCustomUnits } from '../unit-control';
-import styles from './style.scss';
-import BottomSheet from '../mobile/bottom-sheet';
-
-const DEFAULT_FONT_SIZE = 16;
-
-function FontSizePicker( {
-	fontSizes = [],
-	disableCustomFontSizes = false,
-	onChange,
-	value: selectedValue,
-} ) {
-	const [ showSubSheet, setShowSubSheet ] = useState( false );
-	const navigation = useNavigation();
-
-	const { height, width } = useWindowDimensions();
-	const cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };
-	// We need to always convert to px units because the selected value
-	// could be coming from the web where it could be stored as a different unit.
-	const selectedPxValue = getPxFromCssUnit( selectedValue, cssUnitOptions );
-
-	const onChangeValue = ( value ) => {
-		return () => {
-			goBack();
-			onChange( value );
-		};
-	};
-
-	const selectedOption = fontSizes.find(
-		( option ) => option.sizePx === selectedPxValue
-	) ?? { name: 'Custom' };
-
-	const goBack = () => {
-		setShowSubSheet( false );
-		navigation.goBack();
-	};
-
-	const openSubSheet = () => {
-		navigation.navigate( BottomSheet.SubSheet.screenName );
-		setShowSubSheet( true );
-	};
-	const label = __( 'Font Size' );
-
-	const units = useCustomUnits( {
-		availableUnits: [ 'px', 'em', 'rem', 'vw', 'vh' ],
-	} );
-
-	const accessibilityLabel = sprintf(
-		// translators: %s: Font size name e.g. Small
-		__( 'Font Size, %s' ),
-		selectedOption.name
-	);
-
-	return (
-		<BottomSheet.SubSheet
-			navigationButton={
-				<BottomSheet.Cell
-					label={ label }
-					separatorType="none"
-					value={
-						selectedValue
-							? sprintf(
-									// translators: 1: Select control font size name e.g. Small. 2: Select control font size e.g. 12px
-									_x( '%1$s (%2$s)', 'font size' ),
-									selectedOption.name,
-									selectedPxValue
-							  )
-							: __( 'Default' )
-					}
-					onPress={ openSubSheet }
-					accessibilityRole="button"
-					accessibilityLabel={ accessibilityLabel }
-					accessibilityHint={ sprintf(
-						// translators: %s: Select control button label e.g. "Button width"
-						__( 'Navigates to select %s' ),
-						selectedOption.name
-					) }
-				>
-					<Icon icon={ chevronRight }></Icon>
-				</BottomSheet.Cell>
-			}
-			showSheet={ showSubSheet }
-		>
-			<>
-				<BottomSheet.NavBar>
-					<BottomSheet.NavBar.BackButton onPress={ goBack } />
-					<BottomSheet.NavBar.Heading>
-						{ label }
-					</BottomSheet.NavBar.Heading>
-				</BottomSheet.NavBar>
-				<View style={ styles[ 'components-font-size-picker' ] }>
-					<BottomSheet.Cell
-						customActionButton
-						separatorType="none"
-						label={ __( 'Default' ) }
-						onPress={ onChangeValue( undefined ) }
-						leftAlign
-						key="default"
-						accessibilityRole="button"
-						accessibilityLabel={ __( 'Selected: Default' ) }
-						accessibilityHint={ __(
-							'Double tap to select default font size'
-						) }
-					>
-						<View>
-							{ selectedValue === undefined && (
-								<Icon icon={ check }></Icon>
-							) }
-						</View>
-					</BottomSheet.Cell>
-					{ fontSizes.map( ( item, index ) => {
-						// Only display a choice that we can currently select.
-						if ( ! parseFloat( item.sizePx ) ) {
-							return null;
-						}
-						return (
-							<BottomSheet.Cell
-								customActionButton
-								separatorType="none"
-								label={ item.name }
-								subLabel={ item.sizePx }
-								onPress={ onChangeValue( item.sizePx ) }
-								leftAlign
-								key={ index }
-								accessibilityRole="button"
-								accessibilityLabel={
-									item.sizePx === selectedValue
-										? sprintf(
-												// translators: %s: The selected option.
-												__( 'Selected: %s' ),
-												item.name
-										  )
-										: item.name
-								}
-								accessibilityHint={ __(
-									'Double tap to select font size'
-								) }
-							>
-								<View>
-									{ item.sizePx === selectedPxValue && (
-										<Icon icon={ check }></Icon>
-									) }
-								</View>
-							</BottomSheet.Cell>
-						);
-					} ) }
-					{ ! disableCustomFontSizes && (
-						<UnitControl
-							label={ __( 'Custom' ) }
-							min={ 0 }
-							max={ 200 }
-							step={ 1 }
-							value={ selectedValue }
-							onChange={ ( nextSize ) => {
-								if (
-									0 === parseFloat( nextSize ) ||
-									! nextSize
-								) {
-									onChange( undefined );
-								} else {
-									onChange( nextSize );
-								}
-							} }
-							units={ units }
-						/>
-					) }
-				</View>
-			</>
-		</BottomSheet.SubSheet>
-	);
-}
-
-export default FontSizePicker;

package/src/font-size-picker/style.native.scss

@@ -1,6 +0,0 @@
-.components-font-size-picker {
-	padding: 0 $block-edge-to-content;
-}
-.components-font-size-picker__font-size {
-	font-size: 11px;
-}

package/src/footer-message-control/index.native.js

@@ -1,14 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import FooterMessageCell from '../mobile/bottom-sheet/footer-message-cell';
-
-function FooterMessageControl( { ...props } ) {
-	return <FooterMessageCell { ...props } />;
-}
-
-export default memo( FooterMessageControl );