@wordpress/components 34.0.0 → 35.0.1

package/src/dropdown-menu/index.native.js

@@ -1,152 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { Platform } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { menu } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import Dropdown from '../dropdown';
-import BottomSheet from '../mobile/bottom-sheet';
-import PanelBody from '../panel/body';
-
-function mergeProps( defaultProps = {}, props = {} ) {
-	const mergedProps = {
-		...defaultProps,
-		...props,
-	};
-
-	if ( props.className && defaultProps.className ) {
-		mergedProps.className = clsx( props.className, defaultProps.className );
-	}
-
-	return mergedProps;
-}
-
-/**
- * Whether the argument is a function.
- *
- * @param {*} maybeFunc The argument to check.
- * @return {boolean} True if the argument is a function, false otherwise.
- */
-function isFunction( maybeFunc ) {
-	return typeof maybeFunc === 'function';
-}
-
-function DropdownMenu( {
-	children,
-	className,
-	controls,
-	icon = menu,
-	label,
-	popoverProps,
-	toggleProps,
-} ) {
-	if ( ! controls?.length && ! isFunction( children ) ) {
-		return null;
-	}
-
-	// Normalize controls to nested array of objects (sets of controls)
-	let controlSets;
-	if ( controls?.length ) {
-		controlSets = controls;
-		if ( ! Array.isArray( controlSets[ 0 ] ) ) {
-			controlSets = [ controlSets ];
-		}
-	}
-	const mergedPopoverProps = mergeProps(
-		{
-			className: 'components-dropdown-menu__popover',
-		},
-		popoverProps
-	);
-
-	return (
-		<Dropdown
-			className={ clsx( 'components-dropdown-menu', className ) }
-			popoverProps={ mergedPopoverProps }
-			renderToggle={ ( { isOpen, onToggle } ) => {
-				const mergedToggleProps = mergeProps(
-					{
-						className: clsx( 'components-dropdown-menu__toggle', {
-							'is-opened': isOpen,
-						} ),
-					},
-					toggleProps
-				);
-
-				return (
-					<Button
-						{ ...mergedToggleProps }
-						icon={ icon }
-						onClick={ ( event ) => {
-							onToggle( event );
-							if ( mergedToggleProps.onClick ) {
-								mergedToggleProps.onClick( event );
-							}
-						} }
-						aria-haspopup="true"
-						aria-expanded={ isOpen }
-						label={ label }
-					>
-						{ mergedToggleProps.children }
-					</Button>
-				);
-			} }
-			renderContent={ ( { isOpen, onClose, ...props } ) => {
-				return (
-					<BottomSheet
-						hideHeader
-						isVisible={ isOpen }
-						onClose={ onClose }
-					>
-						{ isFunction( children ) ? children( props ) : null }
-						<PanelBody
-							title={ label }
-							style={ { paddingLeft: 0, paddingRight: 0 } }
-						>
-							{ controlSets?.flatMap(
-								( controlSet, indexOfSet ) =>
-									controlSet.map(
-										( control, indexOfControl ) => (
-											<BottomSheet.Cell
-												key={ [
-													indexOfSet,
-													indexOfControl,
-												].join() }
-												label={ control.title }
-												onPress={ () => {
-													onClose();
-													if ( control.onClick ) {
-														control.onClick();
-													}
-												} }
-												editable={ false }
-												icon={ control.icon }
-												leftAlign
-												isSelected={ control.isActive }
-												separatorType={
-													Platform.OS === 'android'
-														? 'none'
-														: 'leftMargin'
-												}
-											/>
-										)
-									)
-							) }
-						</PanelBody>
-					</BottomSheet>
-				);
-			} }
-		/>
-	);
-}
-
-export default withPreferredColorScheme( DropdownMenu );

package/src/external-link/index.native.js

@@ -1,25 +0,0 @@
-/**
- * External dependencies
- */
-
-import { TouchableOpacity, Text, Linking } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { external, Icon } from '@wordpress/icons';
-
-export function ExternalLink( { href, children } ) {
-	return (
-		<TouchableOpacity
-			onPress={ () => Linking.openURL( href ) }
-			accessibilityLabel={ __( 'Open link in a browser' ) }
-		>
-			<Text>{ children }</Text>
-			<Icon icon={ external } />
-		</TouchableOpacity>
-	);
-}
-
-export default ExternalLink;

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

@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/primitives';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-export default function FocalPoint( { height, style, width } ) {
-	return (
-		<SVG
-			height={ height }
-			style={ style }
-			viewBox="0 0 30 30"
-			width={ width }
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<Path
-				style={ styles.focalPointIconPathOutline }
-				d="M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z"
-			/>
-			<Path
-				style={ styles.focalPointIconPathFill }
-				d="M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z"
-			/>
-		</SVG>
-	);
-}

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;
-}