@wordpress/components 34.0.0 → 35.0.1

package/src/mobile/link-picker/link-picker-results.native.js

@@ -1,129 +0,0 @@
-/**
- * External dependencies
- */
-import { ActivityIndicator, FlatList, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { debounce } from '@wordpress/compose';
-import { useState, useEffect, useRef } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import BottomSheet from '../bottom-sheet';
-import { BottomSheetConsumer } from '../bottom-sheet/bottom-sheet-context';
-
-const PER_PAGE = 20;
-const REQUEST_DEBOUNCE_DELAY = 400;
-const MINIMUM_QUERY_SIZE = 2;
-const meetsThreshold = ( query ) => MINIMUM_QUERY_SIZE <= query.length;
-
-export default function LinkPickerResults( {
-	query,
-	onLinkPicked,
-	directEntry,
-} ) {
-	const [ links, setLinks ] = useState( [ directEntry ] );
-	const [ hasAllSuggestions, setHasAllSuggestions ] = useState( false );
-	const nextPage = useRef( 1 );
-	const pendingRequest = useRef();
-	const clearRequest = () => {
-		pendingRequest.current = null;
-	};
-
-	// A stable debounced function to fetch suggestions and append.
-	const { fetchMoreSuggestions } = useSelect( ( select ) => {
-		const { getSettings } = select( 'core/block-editor' );
-		const fetchLinkSuggestions = async ( { search } ) => {
-			if ( meetsThreshold( search ) ) {
-				return await getSettings().__experimentalFetchLinkSuggestions(
-					search,
-					{ page: nextPage.current, type: 'post', perPage: PER_PAGE }
-				);
-			}
-		};
-		const fetchMore = async ( {
-			query: search,
-			links: currentSuggestions,
-		} ) => {
-			// Return early if we've already detected the end of data or we are
-			// already awaiting a response.
-			if ( hasAllSuggestions || pendingRequest.current ) {
-				return;
-			}
-			const request = fetchLinkSuggestions( { search } );
-			pendingRequest.current = request;
-			const suggestions = await request;
-
-			// Only update links for the most recent request.
-			if ( suggestions && request === pendingRequest.current ) {
-				// Since we don't have the response header, we check if the results
-				// are truncated to determine we've reached the end.
-				if ( suggestions.length < PER_PAGE ) {
-					setHasAllSuggestions( true );
-				}
-				setLinks( [ ...currentSuggestions, ...suggestions ] );
-				nextPage.current++;
-			}
-
-			clearRequest();
-		};
-		return {
-			fetchMoreSuggestions: debounce( fetchMore, REQUEST_DEBOUNCE_DELAY ),
-		};
-		// Not adding dependencies for now, to avoid introducing a regression
-		// (see https://github.com/WordPress/gutenberg/pull/23922#discussion_r1170634879).
-	}, [] );
-
-	// Prevent setting state when unmounted.
-	useEffect( () => clearRequest, [] );
-
-	// Any time the query changes, we reset pagination.
-	useEffect( () => {
-		clearRequest();
-		nextPage.current = 1;
-		setHasAllSuggestions( false );
-		setLinks( [ directEntry ] );
-		fetchMoreSuggestions( { query, links: [ directEntry ] } );
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ query ] );
-
-	const onEndReached = () => fetchMoreSuggestions( { query, links } );
-
-	const spinner = ! hasAllSuggestions && meetsThreshold( query ) && (
-		<View style={ styles.spinner } testID="link-picker-loading">
-			<ActivityIndicator animating />
-		</View>
-	);
-
-	return (
-		<BottomSheetConsumer>
-			{ ( { listProps } ) => (
-				<FlatList
-					data={ links }
-					keyboardShouldPersistTaps="always"
-					renderItem={ ( { item } ) => (
-						<BottomSheet.LinkSuggestionItemCell
-							suggestion={ item }
-							onLinkPicked={ onLinkPicked }
-						/>
-					) }
-					keyExtractor={ ( { url, type } ) => `${ url }-${ type }` }
-					onEndReached={ onEndReached }
-					onEndReachedThreshold={ 0.1 }
-					initialNumToRender={ PER_PAGE }
-					ListFooterComponent={ spinner }
-					{ ...listProps }
-					contentContainerStyle={ [
-						...listProps.contentContainerStyle,
-						styles.list,
-					] }
-				/>
-			) }
-		</BottomSheetConsumer>
-	);
-}

package/src/mobile/link-picker/link-picker-screen.native.js

@@ -1,60 +0,0 @@
-/**
- * External dependencies
- */
-import { Keyboard } from 'react-native';
-import { useNavigation, useRoute } from '@react-navigation/native';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useMemo, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { LinkPicker } from './';
-
-const LinkPickerScreen = ( { returnScreenName } ) => {
-	const navigation = useNavigation();
-	const route = useRoute();
-	const navigateToLinkTimeoutRef = useRef( null );
-	const navigateBackTimeoutRef = useRef( null );
-
-	const onLinkPicked = ( { url, title } ) => {
-		Keyboard.dismiss();
-		navigateToLinkTimeoutRef.current = setTimeout( () => {
-			navigation.navigate( returnScreenName, {
-				inputValue: url,
-				text: title,
-			} );
-		}, 100 );
-	};
-
-	const onCancel = () => {
-		Keyboard.dismiss();
-		navigateBackTimeoutRef.current = setTimeout( () => {
-			navigation.goBack();
-		}, 100 );
-	};
-
-	useEffect( () => {
-		return () => {
-			clearTimeout( navigateToLinkTimeoutRef.current );
-			clearTimeout( navigateBackTimeoutRef.current );
-		};
-	}, [] );
-
-	const { inputValue } = route.params;
-	return useMemo( () => {
-		return (
-			<LinkPicker
-				value={ inputValue }
-				onLinkPicked={ onLinkPicked }
-				onCancel={ onCancel }
-			/>
-		);
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ inputValue ] );
-};
-
-export default LinkPickerScreen;

package/src/mobile/link-picker/styles.native.scss

@@ -1,45 +0,0 @@
-.omniCell {
-	border-bottom-width: 1px;
-	border-bottom-color: $light-gray-400;
-}
-
-.omniCellDark {
-	border-bottom-color: $gray-70;
-}
-
-.omniInput {
-	text-align: left;
-}
-
-.spinner {
-	height: 150px;
-	justify-content: center;
-}
-
-.clearIcon {
-	margin-left: 16;
-}
-
-.icon {
-	color: $gray-lighten-10;
-}
-
-.iconDark {
-	color: $dark-tertiary;
-}
-
-.contentContainer {
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-20;
-	flex: 1;
-}
-
-.safeArea {
-	height: 100%;
-}
-
-.list {
-	padding-left: 0;
-	padding-right: 0;
-	padding-bottom: $grid-unit-20;
-}

package/src/mobile/link-picker/test/performance/index.native.js

@@ -1,35 +0,0 @@
-/**
- * External dependencies
- */
-import { act, measurePerformance } from 'test/helpers';
-import Clipboard from '@react-native-clipboard/clipboard';
-
-/**
- * Internal dependencies
- */
-import { LinkPicker } from '../../index';
-
-describe( 'LinkPicker', () => {
-	const onLinkPicked = jest.fn();
-	const onCancel = jest.fn();
-	const clipboardResult = Promise.resolve( '' );
-	Clipboard.getString.mockReturnValue( clipboardResult );
-
-	it( 'performance is stable when clipboard results do not change', async () => {
-		const scenario = async () => {
-			// Given the clipboard result is an empty string, there are no
-			// user-facing changes to query. Thus, we must await the promise
-			// itself.
-			await act( () => clipboardResult );
-		};
-
-		await measurePerformance(
-			<LinkPicker
-				onLinkPicked={ onLinkPicked }
-				onCancel={ onCancel }
-				value=""
-			/>,
-			{ scenario }
-		);
-	} );
-} );

package/src/mobile/link-settings/index.native.js

@@ -1,332 +0,0 @@
-/**
- * External dependencies
- */
-import { Platform } from 'react-native';
-import Clipboard from '@react-native-clipboard/clipboard';
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-import { isURL, prependHTTP } from '@wordpress/url';
-import {
-	useEffect,
-	useState,
-	useRef,
-	useContext,
-	useCallback,
-} from '@wordpress/element';
-import { link, external } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import BottomSheet from '../bottom-sheet';
-import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
-import PanelBody from '../../panel/body';
-import TextControl from '../../text-control';
-import ToggleControl from '../../toggle-control';
-import FooterMessageControl from '../../footer-message-control';
-import PanelActions from '../../panel/actions';
-import LinkRelIcon from './link-rel';
-
-import styles from './style.scss';
-
-const NEW_TAB_REL = 'noopener';
-function LinkSettings( {
-	// Control link settings `BottomSheet` visibility
-	isVisible,
-	// Callback that is called on closing bottom sheet
-	onClose,
-	// Function called to set attributes
-	setAttributes,
-	// Callback that is called when url input field is empty
-	onEmptyURL,
-	// Object of available options along with specific, customizable properties.
-	// Available options keys:
-	//	* url - uses `TextControl` component to set `attributes.url`
-	//	* linkLabel - uses `TextControl` component to set `attributes.label`
-	//	* openInNewTab - uses `ToggleControl` component to set `attributes.linkTarget` and `attributes.rel`
-	//	* linkRel - uses `TextControl` component to set `attributes.rel`
-	//	* footer - uses `FooterMessageControl` component to display message, e.g. about missing functionality
-	// Available properties:
-	//	* label - control component label, e.g. `Button Link URL`
-	//	* placeholder - control component placeholder, e.g. `Add URL`
-	//	* autoFocus (url only) - whether url input should be focused on sheet opening
-	//	* autoFill (url only) - whether url input should be filled with url from clipboard
-	// Example:
-	//	const options = {
-	//		url: {
-	//			label: __( 'Button Link URL' ),
-	//			placeholder: __( 'Add URL' ),
-	//			autoFocus: true,
-	//			autoFill: true,
-	//		}
-	//	}
-	options,
-	// Specifies whether settings should be wrapped into `BottomSheet`
-	withBottomSheet,
-	// Defines buttons which will be displayed below the all options.
-	// It's an array of objects with following properties:
-	//	* label - button title
-	//	* onPress - callback that is called on pressing button
-	// Example:
-	// 	const actions = [
-	//		{
-	//			label: __( 'Remove link' ),
-	//			onPress: () => setAttributes({ url: '' }),
-	//		},
-	//	];
-	actions,
-	// Specifies whether general `BottomSheet` is opened
-	editorSidebarOpened,
-	// Specifies whether icon should be displayed next to the label
-	showIcon,
-	onLinkCellPressed,
-	urlValue,
-	// Attributes properties
-	url,
-	label = '',
-	linkTarget,
-	rel = '',
-} ) {
-	const [ urlInputValue, setUrlInputValue ] = useState( '' );
-	const [ labelInputValue, setLabelInputValue ] = useState( '' );
-	const [ linkRelInputValue, setLinkRelInputValue ] = useState( '' );
-	const onCloseSettingsSheetConsumed = useRef( false );
-	const prevEditorSidebarOpenedRef = useRef();
-
-	const { onHandleClosingBottomSheet } = useContext( BottomSheetContext );
-	useEffect( () => {
-		if ( onHandleClosingBottomSheet ) {
-			onHandleClosingBottomSheet( onCloseSettingsSheet );
-		}
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ urlInputValue, labelInputValue, linkRelInputValue ] );
-
-	useEffect( () => {
-		prevEditorSidebarOpenedRef.current = editorSidebarOpened;
-	} );
-	const prevEditorSidebarOpened = prevEditorSidebarOpenedRef.current;
-
-	useEffect( () => {
-		if ( url !== urlInputValue ) {
-			setUrlInputValue( url || '' );
-		}
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ url ] );
-
-	useEffect( () => {
-		setLabelInputValue( label || '' );
-	}, [ label ] );
-
-	useEffect( () => {
-		setLinkRelInputValue( rel || '' );
-	}, [ rel ] );
-
-	useEffect( () => {
-		const isSettingSheetOpen = isVisible || editorSidebarOpened;
-		if ( isSettingSheetOpen ) {
-			onCloseSettingsSheetConsumed.current = false;
-		}
-
-		if ( options.url.autoFill && isSettingSheetOpen && ! url ) {
-			getURLFromClipboard();
-		}
-
-		if ( prevEditorSidebarOpened && ! editorSidebarOpened ) {
-			onSetAttributes();
-		}
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ editorSidebarOpened, isVisible ] );
-
-	useEffect( () => {
-		if ( ! urlValue && onEmptyURL ) {
-			onEmptyURL();
-		}
-
-		if ( prependHTTP( urlValue ) !== url ) {
-			setAttributes( {
-				url: prependHTTP( urlValue ),
-			} );
-		}
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ urlValue ] );
-
-	const onChangeURL = useCallback(
-		( value ) => {
-			if ( ! value && onEmptyURL ) {
-				onEmptyURL();
-			}
-			setUrlInputValue( value );
-		},
-		[ onEmptyURL ]
-	);
-
-	const onChangeLabel = useCallback( ( value ) => {
-		setLabelInputValue( value );
-	}, [] );
-
-	const onSetAttributes = useCallback( () => {
-		const newURL = prependHTTP( urlInputValue );
-		if (
-			url !== newURL ||
-			labelInputValue !== label ||
-			linkRelInputValue !== rel
-		) {
-			setAttributes( {
-				url: newURL,
-				label: labelInputValue,
-				rel: linkRelInputValue,
-			} );
-		}
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ urlInputValue, labelInputValue, linkRelInputValue, setAttributes ] );
-
-	const onCloseSettingsSheet = useCallback( () => {
-		if ( onCloseSettingsSheetConsumed.current ) {
-			return;
-		}
-
-		onCloseSettingsSheetConsumed.current = true;
-
-		onSetAttributes();
-
-		if ( onClose ) {
-			onClose();
-		}
-	}, [ onClose, onSetAttributes ] );
-
-	const onChangeOpenInNewTab = useCallback(
-		( value ) => {
-			const newLinkTarget = value ? '_blank' : undefined;
-
-			let updatedRel = linkRelInputValue;
-			if ( newLinkTarget && ! linkRelInputValue ) {
-				updatedRel = NEW_TAB_REL;
-			} else if ( ! newLinkTarget && linkRelInputValue === NEW_TAB_REL ) {
-				updatedRel = undefined;
-			}
-
-			setAttributes( {
-				linkTarget: newLinkTarget,
-				rel: updatedRel,
-			} );
-		},
-		// See https://github.com/WordPress/gutenberg/pull/41166
-		[ linkRelInputValue ]
-	);
-
-	const onChangeLinkRel = useCallback( ( value ) => {
-		setLinkRelInputValue( value );
-	}, [] );
-
-	async function getURLFromClipboard() {
-		const clipboardText = await Clipboard.getString();
-
-		if ( ! clipboardText ) {
-			return;
-		}
-		// Check if pasted text is URL.
-		if ( ! isURL( clipboardText ) ) {
-			return;
-		}
-
-		setAttributes( { url: clipboardText } );
-	}
-
-	function getSettings() {
-		return (
-			<>
-				{ options.url &&
-					( onLinkCellPressed ? (
-						<BottomSheet.LinkCell
-							showIcon={ showIcon }
-							value={ url }
-							valueMask={ options.url.valueMask }
-							onPress={ onLinkCellPressed }
-						/>
-					) : (
-						<TextControl
-							icon={ showIcon && link }
-							label={ options.url.label }
-							value={ urlInputValue }
-							valuePlaceholder={ options.url.placeholder }
-							onChange={ onChangeURL }
-							onSubmit={ onCloseSettingsSheet }
-							autoCapitalize="none"
-							autoCorrect={ false }
-							// eslint-disable-next-line jsx-a11y/no-autofocus
-							autoFocus={
-								Platform.OS === 'ios' && options.url.autoFocus
-							}
-							keyboardType="url"
-						/>
-					) ) }
-				{ options.linkLabel && (
-					<TextControl
-						label={ options.linkLabel.label }
-						value={ labelInputValue }
-						valuePlaceholder={ options.linkLabel.placeholder }
-						onChange={ onChangeLabel }
-					/>
-				) }
-				{ !! urlInputValue && (
-					<>
-						{ options.openInNewTab && (
-							<ToggleControl
-								icon={ showIcon && external }
-								label={ options.openInNewTab.label }
-								checked={ linkTarget === '_blank' }
-								onChange={ onChangeOpenInNewTab }
-							/>
-						) }
-						{ options.linkRel && (
-							<TextControl
-								icon={ showIcon && LinkRelIcon }
-								label={ options.linkRel.label }
-								value={ linkRelInputValue }
-								valuePlaceholder={ options.linkRel.placeholder }
-								onChange={ onChangeLinkRel }
-								onSubmit={ onCloseSettingsSheet }
-								autoCapitalize="none"
-								autoCorrect={ false }
-								keyboardType="default"
-							/>
-						) }
-					</>
-				) }
-			</>
-		);
-	}
-
-	if ( ! withBottomSheet ) {
-		return getSettings();
-	}
-
-	return (
-		<>
-			<PanelBody style={ styles.linkSettingsPanel }>
-				{ getSettings() }
-			</PanelBody>
-			{ options.footer && (
-				<PanelBody style={ styles.linkSettingsPanel }>
-					<FooterMessageControl
-						label={ options.footer.label }
-						separatorType={ options.footer.separatorType }
-					/>
-				</PanelBody>
-			) }
-			{ actions && <PanelActions actions={ actions } /> }
-		</>
-	);
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { isEditorSidebarOpened } = select( 'core/edit-post' );
-		return {
-			editorSidebarOpened: isEditorSidebarOpened(),
-		};
-	} ),
-] )( LinkSettings );

package/src/mobile/link-settings/link-rel.native.js

@@ -1,10 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/primitives';
-
-export default (
-	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M17 16l-4-4V8.82C14.16 8.4 15 7.3 15 6c0-1.66-1.34-3-3-3S9 4.34 9 6c0 1.3.84 2.4 2 2.82V12l-4 4H3v5h5v-3.05l4-4.2 4 4.2V21h5v-5h-4z" />
-	</SVG>
-);

package/src/mobile/link-settings/link-settings-navigation.native.js

@@ -1,50 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import BottomSheet from '../bottom-sheet';
-import LinkSettingsScreen from './link-settings-screen';
-import LinkPickerScreen from '../link-picker/link-picker-screen';
-
-const linkSettingsScreens = {
-	settings: 'LinkSettingsScreen',
-	linkPicker: 'linkPicker',
-};
-
-function LinkSettingsNavigation( props ) {
-	if ( ! props.withBottomSheet ) {
-		return <LinkSettingsScreen { ...props } />;
-	}
-	return (
-		<BottomSheet
-			isVisible={ props.isVisible }
-			onClose={ props.onClose }
-			onDismiss={ props.onDismiss }
-			testID="link-settings-navigation"
-			hideHeader
-			hasNavigation
-		>
-			<BottomSheet.NavigationContainer animate main>
-				<BottomSheet.NavigationScreen
-					name={ linkSettingsScreens.settings }
-				>
-					<LinkSettingsScreen { ...props } withBottomSheet />
-				</BottomSheet.NavigationScreen>
-				<BottomSheet.NavigationScreen
-					name={ linkSettingsScreens.linkPicker }
-					isScrollable
-					fullScreen
-				>
-					<LinkPickerScreen
-						returnScreenName={ linkSettingsScreens.settings }
-					/>
-				</BottomSheet.NavigationScreen>
-			</BottomSheet.NavigationContainer>
-		</BottomSheet>
-	);
-}
-
-export default memo( LinkSettingsNavigation );

package/src/mobile/link-settings/link-settings-screen.native.js

@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { useNavigation, useRoute } from '@react-navigation/native';
-
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import LinkSettings from './';
-
-const LinkSettingsScreen = ( props ) => {
-	const navigation = useNavigation();
-	const route = useRoute();
-	const { url = '' } = props;
-	const { inputValue = url } = route.params || {};
-
-	const onLinkCellPressed = () => {
-		if ( props.onLinkCellPressed ) {
-			props.onLinkCellPressed( { navigation } );
-		} else {
-			navigation.navigate( 'linkPicker', { inputValue } );
-		}
-	};
-
-	return useMemo( () => {
-		return (
-			<LinkSettings
-				{ ...props }
-				onLinkCellPressed={
-					props.hasPicker ? onLinkCellPressed : undefined
-				}
-				urlValue={ inputValue }
-			/>
-		);
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ props, inputValue, navigation, route ] );
-};
-
-export default LinkSettingsScreen;