@wordpress/components 34.0.0 → 35.0.1

package/src/mobile/html-text-input/test/index.native.js

@@ -1,118 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent } from 'test/helpers';
-
-/**
- * Internal dependencies
- */
-import { HTMLTextInput } from '..';
-
-// Finds the Content TextInput in our HTMLInputView.
-const findContentTextInput = ( screen ) => {
-	return screen.getByLabelText( 'html-view-content' );
-};
-
-// Finds the Title TextInput in our HTMLInputView.
-const findTitleTextInput = ( screen ) => {
-	return screen.getByLabelText( 'html-view-title' );
-};
-
-const getStylesFromColorScheme = () => {
-	return { color: 'white' };
-};
-
-describe( 'HTMLTextInput', () => {
-	it( 'HTMLTextInput renders and matches snapshot', () => {
-		const screen = render(
-			<HTMLTextInput
-				getStylesFromColorScheme={ getStylesFromColorScheme }
-			/>
-		);
-		expect( screen.toJSON() ).toMatchSnapshot();
-	} );
-
-	it( 'HTMLTextInput updates state on HTML text change', () => {
-		const onChange = jest.fn();
-
-		const screen = render(
-			<HTMLTextInput
-				onChange={ onChange }
-				onPersist={ jest.fn() }
-				getStylesFromColorScheme={ getStylesFromColorScheme }
-			/>
-		);
-
-		// Simulate user typing text.
-		const htmlTextInput = findContentTextInput( screen );
-		fireEvent( htmlTextInput, 'changeText', 'text' );
-
-		// Check if the onChange is called and the state is updated.
-		expect( onChange ).toHaveBeenCalledTimes( 1 );
-		expect( onChange ).toHaveBeenCalledWith( 'text' );
-
-		expect( screen.getByDisplayValue( 'text' ) ).toBeDefined();
-	} );
-
-	it( 'HTMLTextInput persists changes in HTML text input on blur', () => {
-		const onPersist = jest.fn();
-
-		const screen = render(
-			<HTMLTextInput
-				onPersist={ onPersist }
-				onChange={ jest.fn() }
-				getStylesFromColorScheme={ getStylesFromColorScheme }
-			/>
-		);
-
-		// Simulate user typing text.
-		const htmlTextInput = findContentTextInput( screen );
-		fireEvent( htmlTextInput, 'changeText', 'text' );
-
-		//Simulate blur event.
-		fireEvent( htmlTextInput, 'blur' );
-
-		// Normally prop.value is updated with the help of withSelect
-		// but we don't have it in tests so we just simulate it.
-		screen.update(
-			<HTMLTextInput
-				onPersist={ onPersist }
-				onChange={ jest.fn() }
-				getStylesFromColorScheme={ getStylesFromColorScheme }
-				value="text"
-			/>
-		);
-
-		// Check if the onPersist is called and the state is updated.
-		expect( onPersist ).toHaveBeenCalledTimes( 1 );
-		expect( onPersist ).toHaveBeenCalledWith( 'text' );
-
-		//Simulate blur event.
-		fireEvent( htmlTextInput, 'blur' );
-
-		// Check that onPersist is not called for non-dirty state.
-		expect( onPersist ).toHaveBeenCalledTimes( 1 );
-
-		// We expect state.value is getting propagated from prop.value.
-		expect( screen.getByDisplayValue( 'text' ) ).toBeDefined();
-	} );
-
-	it( 'HTMLTextInput propagates title changes to store', () => {
-		const editTitle = jest.fn();
-
-		const screen = render(
-			<HTMLTextInput
-				editTitle={ editTitle }
-				getStylesFromColorScheme={ getStylesFromColorScheme }
-			/>
-		);
-
-		// Simulate user typing text.
-		const textInput = findTitleTextInput( screen );
-		fireEvent( textInput, 'changeText', 'text' );
-
-		// Check if the setTitleAction is called.
-		expect( editTitle ).toHaveBeenCalledTimes( 1 );
-		expect( editTitle ).toHaveBeenCalledWith( 'text' );
-	} );
-} );

package/src/mobile/image/constants.js

@@ -1 +0,0 @@
-export const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };

package/src/mobile/image/icon-customize.native.js

@@ -1,10 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-export default (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2 1.657 0 3 1.343 3 3 0 .386-.08.752-.212 1.09.74.594 1.476 1.19 2.19 1.81L8.9 11.98c-.62-.716-1.214-1.454-1.807-2.192C6.753 9.92 6.387 10 6 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.34-1.34c.607.304 1.283.492 2.008.492 2.485 0 4.5-2.015 4.5-4.5 0-.725-.188-1.4-.493-2.007L18 9l-2-2 3.507-3.507C18.9 3.188 18.225 3 17.5 3 15.015 3 13 5.015 13 7.5c0 .725.188 1.4.493 2.007L3 20l2 2 6.848-6.848c1.885 1.928 3.874 3.753 5.977 5.45l1.425 1.148 1.5-1.5-1.15-1.425c-1.695-2.103-3.52-4.092-5.448-5.977z" />
-	</SVG>
-);

package/src/mobile/image/icon-retry.native.js

@@ -1,11 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-export default (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
-		<Path d="M0 0h24v24H0z" fill="none" />
-	</SVG>
-);

package/src/mobile/image/image-editing-button.native.js

@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import { TouchableWithoutFeedback, View, Platform } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { MediaEdit } from '../media-edit';
-import SvgIconCustomize from './icon-customize';
-import styles from './style.scss';
-import Icon from '../../icon';
-
-const accessibilityHint =
-	Platform.OS === 'ios'
-		? __(
-				'Double tap to open Action Sheet to edit, replace, or clear the image'
-		  )
-		: __(
-				'Double tap to open Bottom Sheet to edit, replace, or clear the image'
-		  );
-
-const ImageEditingButton = ( {
-	onSelectMediaUploadOption,
-	openMediaOptions,
-	pickerOptions,
-	url,
-} ) => {
-	return (
-		<MediaEdit
-			onSelect={ onSelectMediaUploadOption }
-			source={ { uri: url } }
-			openReplaceMediaOptions={ openMediaOptions }
-			render={ ( { open, mediaOptions } ) => (
-				<TouchableWithoutFeedback
-					accessibilityHint={ accessibilityHint }
-					accessibilityLabel={ __( 'Edit image' ) }
-					accessibilityRole="button"
-					onPress={ open }
-				>
-					<View style={ styles.editContainer }>
-						<View style={ styles.edit }>
-							{ mediaOptions() }
-							<Icon
-								size={ 16 }
-								icon={ SvgIconCustomize }
-								{ ...styles.iconCustomise }
-							/>
-						</View>
-					</View>
-				</TouchableWithoutFeedback>
-			) }
-			pickerOptions={ pickerOptions }
-		/>
-	);
-};
-
-export default ImageEditingButton;

package/src/mobile/image/index.native.js

@@ -1,401 +0,0 @@
-/**
- * External dependencies
- */
-import { Image as RNImage, Text, View } from 'react-native';
-import FastImage from 'react-native-fast-image';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { image, offline } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useEffect, useState, Platform } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { getImageWithFocalPointStyles } from './utils';
-import styles from './style.scss';
-import SvgIconRetry from './icon-retry';
-import ImageEditingButton from './image-editing-button';
-import Icon from '../../icon';
-
-const ICON_TYPE = {
-	OFFLINE: 'offline',
-	PLACEHOLDER: 'placeholder',
-	RETRY: 'retry',
-	UPLOAD: 'upload',
-};
-
-const ImageComponent = ( {
-	align,
-	alt,
-	editButton = true,
-	focalPoint,
-	height: imageHeight,
-	highlightSelected = true,
-	isSelected,
-	shouldUseFastImage,
-	isUploadFailed,
-	isUploadPaused,
-	isUploadInProgress,
-	mediaPickerOptions,
-	onImageDataLoad,
-	onSelectMediaUploadOption,
-	openMediaOptions,
-	resizeMode,
-	retryMessage,
-	retryIcon,
-	url,
-	shapeStyle,
-	style,
-	width: imageWidth,
-} ) => {
-	const [ imageData, setImageData ] = useState( null );
-	const [ containerSize, setContainerSize ] = useState( null );
-	const [ localURL, setLocalURL ] = useState( null );
-	const [ networkURL, setNetworkURL ] = useState( null );
-	const [ networkImageLoaded, setNetworkImageLoaded ] = useState( false );
-
-	// Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149
-	const Image =
-		! shouldUseFastImage || Platform.isAndroid ? RNImage : FastImage;
-	const imageResizeMode =
-		! shouldUseFastImage || Platform.isAndroid
-			? resizeMode
-			: FastImage.resizeMode[ resizeMode ];
-
-	useEffect( () => {
-		let isCurrent = true;
-		if ( url ) {
-			RNImage.getSize( url, ( imgWidth, imgHeight ) => {
-				if ( ! isCurrent ) {
-					return;
-				}
-				const metaData = {
-					aspectRatio: imgWidth / imgHeight,
-					width: imgWidth,
-					height: imgHeight,
-				};
-				setImageData( metaData );
-				if ( onImageDataLoad ) {
-					onImageDataLoad( metaData );
-				}
-			} );
-
-			if ( url.startsWith( 'file:///' ) ) {
-				setLocalURL( url );
-				setNetworkURL( null );
-				setNetworkImageLoaded( false );
-			} else if ( url.startsWith( 'https://' ) ) {
-				if ( Platform.isIOS ) {
-					setNetworkURL( url );
-				} else if ( Platform.isAndroid ) {
-					RNImage.prefetch( url ).then(
-						() => {
-							if ( ! isCurrent ) {
-								return;
-							}
-							setNetworkURL( url );
-							setNetworkImageLoaded( true );
-						},
-						() => {
-							// This callback is called when the image fails to load,
-							// but these events are handled by `isUploadFailed`
-							// and `isUploadPaused` events instead.
-							//
-							// Ignoring the error event will persist the local image URI.
-						}
-					);
-				}
-			}
-		}
-		return () => ( isCurrent = false );
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ url ] );
-
-	const onContainerLayout = ( event ) => {
-		const { height, width } = event.nativeEvent.layout;
-
-		if (
-			width !== 0 &&
-			height !== 0 &&
-			( containerSize?.width !== width ||
-				containerSize?.height !== height )
-		) {
-			setContainerSize( { width, height } );
-		}
-	};
-
-	const getIcon = ( iconType ) => {
-		let icon;
-		let iconStyle;
-		switch ( iconType ) {
-			case ICON_TYPE.RETRY:
-				icon = retryIcon || SvgIconRetry;
-				iconStyle = iconRetryStyles;
-				break;
-			case ICON_TYPE.OFFLINE:
-				icon = offline;
-				iconStyle = iconOfflineStyles;
-				break;
-			case ICON_TYPE.PLACEHOLDER:
-				icon = image;
-				iconStyle = iconPlaceholderStyles;
-				break;
-			case ICON_TYPE.UPLOAD:
-				icon = image;
-				iconStyle = iconUploadStyles;
-				break;
-		}
-		return <Icon icon={ icon } { ...iconStyle } />;
-	};
-
-	const iconPlaceholderStyles = usePreferredColorSchemeStyle(
-		styles.iconPlaceholder,
-		styles.iconPlaceholderDark
-	);
-
-	const iconUploadStyles = usePreferredColorSchemeStyle(
-		styles.iconUpload,
-		styles.iconUploadDark
-	);
-
-	const iconOfflineStyles = usePreferredColorSchemeStyle(
-		styles.iconOffline,
-		styles.iconOfflineDark
-	);
-
-	const retryIconStyles = usePreferredColorSchemeStyle(
-		styles.retryIcon,
-		styles.retryIconDark
-	);
-
-	const iconRetryStyles = usePreferredColorSchemeStyle(
-		styles.iconRetry,
-		styles.iconRetryDark
-	);
-
-	const retryContainerStyles = usePreferredColorSchemeStyle(
-		styles.retryContainer,
-		styles.retryContainerDark
-	);
-
-	const uploadFailedTextStyles = usePreferredColorSchemeStyle(
-		styles.uploadFailedText,
-		styles.uploadFailedTextDark
-	);
-
-	const placeholderStyles = [
-		usePreferredColorSchemeStyle(
-			styles.imageContainerUpload,
-			styles.imageContainerUploadDark
-		),
-		focalPoint && styles.imageContainerUploadWithFocalpoint,
-		imageHeight && { height: imageHeight },
-	];
-
-	const customWidth =
-		imageData?.width < containerSize?.width
-			? imageData?.width
-			: styles.wide?.width;
-
-	const imageContainerStyles = [
-		styles.imageContent,
-		{
-			width:
-				imageWidth === styles.wide?.width ||
-				( imageData &&
-					imageWidth > 0 &&
-					imageWidth < containerSize?.width )
-					? imageWidth
-					: customWidth,
-		},
-		resizeMode && { width: styles.wide?.width },
-		focalPoint && styles.focalPointContainer,
-	];
-
-	const imageStyles = [
-		{
-			height: containerSize?.height,
-		},
-		! resizeMode && {
-			aspectRatio: imageData?.aspectRatio,
-		},
-		focalPoint && styles.focalPoint,
-		focalPoint &&
-			getImageWithFocalPointStyles(
-				focalPoint,
-				containerSize,
-				imageData
-			),
-		! focalPoint &&
-			imageData &&
-			containerSize && {
-				height:
-					imageData?.width > containerSize?.width && ! imageWidth
-						? containerSize?.width / imageData?.aspectRatio
-						: undefined,
-			},
-		imageHeight && { height: imageHeight },
-		shapeStyle,
-	];
-
-	// On iOS, add 1 to height to account for the 1px non-visible image
-	// that is used to determine when the network image has loaded
-	// We also must verify that it is not NaN, as it can be NaN when the image is loading.
-	// This is not necessary on Android as the non-visible image is not used.
-	let calculatedSelectedHeight;
-	if ( Platform.isIOS ) {
-		calculatedSelectedHeight =
-			containerSize && ! isNaN( containerSize.height )
-				? containerSize.height + 1
-				: 0;
-	} else {
-		calculatedSelectedHeight = containerSize?.height;
-	}
-
-	const imageSelectedStyles = [
-		usePreferredColorSchemeStyle(
-			styles.imageBorder,
-			styles.imageBorderDark
-		),
-		{
-			height: calculatedSelectedHeight,
-		},
-	];
-
-	return (
-		<View
-			style={ [
-				styles.container,
-				// Only set alignItems if an image exists because alignItems causes the placeholder
-				// to disappear when an aligned image can't be downloaded
-				// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592
-				imageData && align && { alignItems: align },
-				style,
-			] }
-			onLayout={ onContainerLayout }
-		>
-			<View
-				accessible
-				disabled={ ! isSelected }
-				accessibilityLabel={ alt }
-				accessibilityHint={ __( 'Double tap to view larger.' ) }
-				accessibilityRole="imagebutton"
-				key={ url }
-				style={ imageContainerStyles }
-			>
-				{ isSelected && highlightSelected && (
-					<View style={ imageSelectedStyles } />
-				) }
-
-				{ ! imageData ? (
-					<View style={ placeholderStyles }>
-						<View style={ styles.imageUploadingIconContainer }>
-							{ getIcon( ICON_TYPE.UPLOAD ) }
-						</View>
-					</View>
-				) : (
-					<View style={ focalPoint && styles.focalPointContent }>
-						{ Platform.isAndroid && (
-							<>
-								{ networkImageLoaded && networkURL && (
-									<Image
-										style={ imageStyles }
-										fadeDuration={ 0 }
-										source={ { uri: networkURL } }
-										{ ...( ! focalPoint && {
-											resizeMethod: 'scale',
-										} ) }
-										resizeMode={ imageResizeMode }
-										testID={ `network-image-${ url }` }
-									/>
-								) }
-								{ ! networkImageLoaded && ! networkURL && (
-									<Image
-										style={ imageStyles }
-										fadeDuration={ 0 }
-										source={ { uri: localURL } }
-										{ ...( ! focalPoint && {
-											resizeMethod: 'scale',
-										} ) }
-										resizeMode={ imageResizeMode }
-									/>
-								) }
-							</>
-						) }
-						{ Platform.isIOS && (
-							<>
-								<Image
-									style={ imageStyles }
-									source={ {
-										uri:
-											networkURL && networkImageLoaded
-												? networkURL
-												: localURL || url,
-									} }
-									{ ...( ! focalPoint && {
-										resizeMethod: 'scale',
-									} ) }
-									resizeMode={ imageResizeMode }
-									testID={ `network-image-${
-										networkURL && networkImageLoaded
-											? networkURL
-											: localURL || url
-									}` }
-								/>
-								<Image
-									source={ { uri: networkURL } }
-									style={ styles.nonVisibleImage }
-									onLoad={ () => {
-										setNetworkImageLoaded( true );
-									} }
-								/>
-							</>
-						) }
-					</View>
-				) }
-
-				{ ( isUploadFailed || isUploadPaused ) && retryMessage && (
-					<View
-						style={ [
-							styles.imageContainer,
-							retryContainerStyles,
-						] }
-					>
-						<View
-							style={ [
-								retryIconStyles,
-								retryIcon && styles.customRetryIcon,
-							] }
-						>
-							{ isUploadPaused
-								? getIcon( ICON_TYPE.OFFLINE )
-								: getIcon( ICON_TYPE.RETRY ) }
-						</View>
-						<Text style={ uploadFailedTextStyles }>
-							{ retryMessage }
-						</Text>
-					</View>
-				) }
-			</View>
-
-			{ editButton && isSelected && ! isUploadInProgress && (
-				<ImageEditingButton
-					onSelectMediaUploadOption={ onSelectMediaUploadOption }
-					openMediaOptions={ openMediaOptions }
-					url={
-						! ( isUploadFailed || isUploadPaused ) &&
-						imageData &&
-						url
-					}
-					pickerOptions={ mediaPickerOptions }
-				/>
-			) }
-		</View>
-	);
-};
-
-export default ImageComponent;