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

package/src/mobile/keyboard-aware-flat-list/use-keyboard-offset.native.js

@@ -1,87 +0,0 @@
-/**
- * External dependencies
- */
-
-import { Keyboard } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useCallback, useState, useRef } from '@wordpress/element';
-
-/**
- * Hook that adds Keyboard listeners to get the offset space
- * when the keyboard is opened, taking into account focused AztecViews.
- *
- * @param {boolean}  scrollEnabled                Whether the scroll is enabled or not.
- * @param {Function} shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
- * @return {[number]} Keyboard offset.
- */
-export default function useKeyboardOffset(
-	scrollEnabled,
-	shouldPreventAutomaticScroll
-) {
-	const [ keyboardOffset, setKeyboardOffset ] = useState( 0 );
-	const timeoutRef = useRef();
-
-	const onKeyboardDidHide = useCallback( () => {
-		if ( shouldPreventAutomaticScroll() ) {
-			clearTimeout( timeoutRef.current );
-			return;
-		}
-
-		// A timeout is being used to delay resetting the offset in cases
-		// where the focus is changed to a different TextInput.
-		clearTimeout( timeoutRef.current );
-		timeoutRef.current = setTimeout( () => {
-			setKeyboardOffset( 0 );
-		}, 200 );
-	}, [ shouldPreventAutomaticScroll ] );
-
-	const onKeyboardDidShow = useCallback( ( { endCoordinates } ) => {
-		clearTimeout( timeoutRef.current );
-		setKeyboardOffset( endCoordinates.height );
-	}, [] );
-
-	const onKeyboardWillShow = useCallback( () => {
-		clearTimeout( timeoutRef.current );
-	}, [] );
-
-	useEffect( () => {
-		let willShowSubscription;
-		let showSubscription;
-		let hideSubscription;
-
-		if ( scrollEnabled ) {
-			willShowSubscription = Keyboard.addListener(
-				'keyboardWillShow',
-				onKeyboardWillShow
-			);
-			showSubscription = Keyboard.addListener(
-				'keyboardDidShow',
-				onKeyboardDidShow
-			);
-			hideSubscription = Keyboard.addListener(
-				'keyboardDidHide',
-				onKeyboardDidHide
-			);
-		} else {
-			willShowSubscription?.remove();
-			showSubscription?.remove();
-			hideSubscription?.remove();
-		}
-
-		return () => {
-			clearTimeout( timeoutRef.current );
-			willShowSubscription?.remove();
-			showSubscription?.remove();
-			hideSubscription?.remove();
-		};
-	}, [
-		onKeyboardDidHide,
-		onKeyboardDidShow,
-		onKeyboardWillShow,
-		scrollEnabled,
-	] );
-	return [ keyboardOffset ];
-}

package/src/mobile/keyboard-aware-flat-list/use-scroll-to-element.native.js

@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useCallback } from '@wordpress/element';
-
-/** @typedef {import('@wordpress/element').RefObject} RefObject */
-/**
- * Hook to scroll to a specified element by taking into account the Keyboard
- * and the Header.
- *
- * @param {RefObject} scrollViewRef   Scroll view reference.
- * @param {Function}  scrollToSection Function to scroll.
- * @return {Function[]} Function to scroll to an element.
- */
-export default function useScrollToElement( scrollViewRef, scrollToSection ) {
-	/**
-	 * Function to scroll to an element.
-	 *
-	 * @param {RefObject} elementRef Ref of the element.
-	 */
-	const scrollToElement = useCallback(
-		( elementRef ) => {
-			if ( ! scrollViewRef.current || ! elementRef ) {
-				return;
-			}
-
-			elementRef.current.measureLayout(
-				scrollViewRef.current,
-				( _x, y, _width, height ) => {
-					if ( height || y ) {
-						scrollToSection( Math.round( y ), height );
-					}
-				},
-				() => {}
-			);
-		},
-		[ scrollViewRef, scrollToSection ]
-	);
-
-	return [ scrollToElement ];
-}

package/src/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js

@@ -1,100 +0,0 @@
-/**
- * External dependencies
- */
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-/**
- * WordPress dependencies
- */
-import { useCallback } from '@wordpress/element';
-
-/** @typedef {import('@wordpress/element').RefObject} RefObject */
-/** @typedef {import('react-native-reanimated').SharedValue} SharedValue */
-/**
- * Hook to scroll to a specified section by taking into account the Keyboard
- * and the Header.
- *
- * @param {number}      extraScrollHeight      Extra space to not overlap the content.
- * @param {number}      keyboardOffset         Keyboard space offset.
- * @param {boolean}     scrollEnabled          Whether the scroll is enabled or not.
- * @param {RefObject}   scrollViewMeasurements ScrollView Layout measurements.
- * @param {RefObject}   scrollViewRef          Scroll view reference.
- * @param {SharedValue} scrollViewYOffset      Current offset position of the ScrollView.
- * @return {Function[]} Function to scroll to a section.
- */
-export default function useScrollToSection(
-	extraScrollHeight,
-	keyboardOffset,
-	scrollEnabled,
-	scrollViewMeasurements,
-	scrollViewRef,
-	scrollViewYOffset
-) {
-	const { top, bottom } = useSafeAreaInsets();
-	const insets = top + bottom;
-
-	/**
-	 * Function to scroll to a section.
-	 *
-	 * @param {Object} section        Section data to scroll to.
-	 * @param {number} section.y      Y-coordinate of of the section.
-	 * @param {number} section.height Height of the section.
-	 */
-	const scrollToSection = useCallback(
-		( sectionY, sectionHeight ) => {
-			if (
-				! scrollViewRef.current ||
-				! scrollEnabled ||
-				! scrollViewMeasurements.current
-			) {
-				return;
-			}
-
-			const currentScrollViewYOffset = Math.max(
-				0,
-				scrollViewYOffset.value
-			);
-
-			// Scroll to the top of the section.
-			if ( sectionY < currentScrollViewYOffset ) {
-				scrollViewRef.current.scrollTo( {
-					y: sectionY,
-					animated: true,
-				} );
-				return;
-			}
-
-			const availableScreenSpace = Math.abs(
-				Math.floor(
-					scrollViewMeasurements.current.height -
-						( keyboardOffset + extraScrollHeight + sectionHeight )
-				)
-			);
-			const maxOffset = Math.floor(
-				currentScrollViewYOffset + availableScreenSpace
-			);
-
-			const isAtTheTop =
-				sectionY < scrollViewMeasurements.current.y + insets;
-
-			// Scroll to the bottom of the section.
-			if ( sectionY > maxOffset && ! isAtTheTop ) {
-				scrollViewRef.current.scrollTo( {
-					y: sectionY - availableScreenSpace,
-					animated: true,
-				} );
-			}
-		},
-		[
-			extraScrollHeight,
-			insets,
-			keyboardOffset,
-			scrollEnabled,
-			scrollViewMeasurements,
-			scrollViewRef,
-			scrollViewYOffset,
-		]
-	);
-
-	return [ scrollToSection ];
-}

package/src/mobile/keyboard-aware-flat-list/use-scroll.native.js

@@ -1,100 +0,0 @@
-/**
- * External dependencies
- */
-
-import { useWindowDimensions } from 'react-native';
-import {
-	useAnimatedScrollHandler,
-	useSharedValue,
-} from 'react-native-reanimated';
-
-/**
- * WordPress dependencies
- */
-import { useCallback, useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import useKeyboardOffset from './use-keyboard-offset';
-import useScrollToSection from './use-scroll-to-section';
-import useScrollToElement from './use-scroll-to-element';
-
-export default function useScroll( {
-	scrollEnabled,
-	shouldPreventAutomaticScroll,
-	onScroll,
-	onSizeChange,
-	extraScrollHeight,
-} ) {
-	const scrollViewRef = useRef();
-	const scrollViewMeasurements = useRef();
-	const scrollViewYOffset = useSharedValue( -1 );
-	const lastScrollTo = useRef( {
-		clientId: null,
-	} );
-
-	const { height: windowHeight, width: windowWidth } = useWindowDimensions();
-	const isLandscape = windowWidth >= windowHeight;
-
-	const [ keyboardOffset ] = useKeyboardOffset(
-		scrollEnabled,
-		shouldPreventAutomaticScroll
-	);
-
-	const scrollHandler = useAnimatedScrollHandler( {
-		onScroll: ( event ) => {
-			const { contentOffset } = event;
-			scrollViewYOffset.value = contentOffset.y;
-			onScroll( event );
-		},
-	} );
-
-	// When the orientation changes, the ScrollView measurements
-	// need to be re-calculated.
-	useEffect( () => {
-		scrollViewMeasurements.current = null;
-	}, [ isLandscape ] );
-
-	const [ scrollToSection ] = useScrollToSection(
-		extraScrollHeight,
-		keyboardOffset,
-		scrollEnabled,
-		scrollViewMeasurements,
-		scrollViewRef,
-		scrollViewYOffset
-	);
-	const [ scrollToElement ] = useScrollToElement(
-		scrollViewRef,
-		scrollToSection
-	);
-
-	const measureScrollView = useCallback( () => {
-		if ( scrollViewRef.current ) {
-			scrollViewRef.current.measureInWindow( ( _x, y, width, height ) => {
-				scrollViewMeasurements.current = { y, width, height };
-			} );
-		}
-	}, [ scrollViewRef ] );
-
-	const onContentSizeChange = useCallback( () => {
-		if ( onSizeChange ) {
-			onSizeChange();
-		}
-
-		// Sets the first values when the content size changes.
-		if ( ! scrollViewMeasurements.current ) {
-			measureScrollView();
-		}
-	}, [ measureScrollView, onSizeChange ] );
-
-	return {
-		scrollViewRef,
-		scrollHandler,
-		keyboardOffset,
-		scrollToSection,
-		scrollToElement,
-		onContentSizeChange,
-		lastScrollTo,
-	};
-}

package/src/mobile/keyboard-aware-flat-list/use-text-input-caret-position.native.js

@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import RCTAztecView from '@wordpress/react-native-aztec';
-import { useCallback, useEffect, useState } from '@wordpress/element';
-
-/**
- * Hook that listens to caret changes from AztecView TextInputs.
- *
- * @param {boolean} scrollEnabled Whether the scroll is enabled or not.
- * @return {[number]} Current caret's data.
- */
-export default function useTextInputCaretPosition( scrollEnabled ) {
-	const [ currentCaretData, setCurrentCaretData ] = useState();
-
-	const onCaretChange = useCallback( ( caret ) => {
-		setCurrentCaretData( caret );
-	}, [] );
-
-	useEffect( () => {
-		if ( scrollEnabled ) {
-			RCTAztecView.InputState.addCaretChangeListener( onCaretChange );
-		} else {
-			RCTAztecView.InputState.removeCaretChangeListener( onCaretChange );
-		}
-
-		return () => {
-			if ( scrollEnabled ) {
-				RCTAztecView.InputState.removeCaretChangeListener(
-					onCaretChange
-				);
-			}
-		};
-	}, [ scrollEnabled, onCaretChange ] );
-	return [ currentCaretData ];
-}

package/src/mobile/keyboard-aware-flat-list/use-text-input-offset.native.js

@@ -1,54 +0,0 @@
-/**
- * WordPress dependencies
- */
-import RCTAztecView from '@wordpress/react-native-aztec';
-import { useCallback } from '@wordpress/element';
-
-/** @typedef {import('@wordpress/element').RefObject} RefObject */
-/**
- * Hook that calculates the currently focused TextInput's current
- * caret Y coordinate position.
- *
- * @param {boolean}   scrollEnabled Whether the scroll is enabled or not.
- * @param {RefObject} scrollViewRef ScrollView reference.
- * @return {[Function]} Function to get the current TextInput's offset.
- */
-export default function useTextInputOffset( scrollEnabled, scrollViewRef ) {
-	const getTextInputOffset = useCallback(
-		async ( caret ) => {
-			const { caretY = null } = caret ?? {};
-			const textInput =
-				RCTAztecView.InputState.getCurrentFocusedElement();
-
-			return new Promise( ( resolve ) => {
-				if (
-					scrollViewRef.current &&
-					textInput &&
-					scrollEnabled &&
-					caretY !== null
-				) {
-					textInput.measureLayout(
-						scrollViewRef.current,
-						( _x, y, _width, height ) => {
-							const caretYOffset =
-								// For cases where the caretY value is -1
-								// we use the y + height value, e.g the current
-								// character index is not valid or out of bounds
-								// see https://github.com/wordpress-mobile/AztecEditor-iOS/blob/4d0522d67b0056ac211466caaa76936cc5b4f947/Aztec/Classes/TextKit/TextView.swift#L762
-								caretY >= 0 && caretY < height
-									? y + caretY
-									: y + height;
-							resolve( Math.round( Math.abs( caretYOffset ) ) );
-						},
-						() => resolve( null )
-					);
-				} else {
-					resolve( null );
-				}
-			} );
-		},
-		[ scrollEnabled, scrollViewRef ]
-	);
-
-	return [ getTextInputOffset ];
-}

package/src/mobile/layout-animation/index.native.js

@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import { LayoutAnimation } from 'react-native';
-
-const ANIMATION_DURATION = 300;
-
-export function performLayoutAnimation( duration = ANIMATION_DURATION ) {
-	LayoutAnimation.configureNext(
-		LayoutAnimation.create(
-			duration,
-			LayoutAnimation.Types.easeInEaseOut,
-			LayoutAnimation.Properties.opacity
-		)
-	);
-}

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

@@ -1,160 +0,0 @@
-/**
- * External dependencies
- */
-import { SafeAreaView, TouchableOpacity, View } from 'react-native';
-import Clipboard from '@react-native-clipboard/clipboard';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { getProtocol, isURL, prependHTTP } from '@wordpress/url';
-import { link, cancelCircleFilled } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import LinkPickerResults from './link-picker-results';
-import NavBar from '../bottom-sheet/nav-bar';
-import styles from './styles.scss';
-import BottomSheet from '../bottom-sheet';
-import Icon from '../../icon';
-
-// This creates a search suggestion for adding a url directly.
-export const createDirectEntry = ( value ) => {
-	let type = 'URL';
-
-	const protocol = getProtocol( value )?.toLowerCase() || '';
-
-	if ( protocol.includes( 'mailto' ) ) {
-		type = 'mailto';
-	}
-
-	if ( protocol.includes( 'tel' ) ) {
-		type = 'tel';
-	}
-
-	if ( value?.startsWith( '#' ) ) {
-		type = 'internal';
-	}
-
-	return {
-		isDirectEntry: true,
-		title: value,
-		url: type === 'URL' ? prependHTTP( value ) : value,
-		type,
-	};
-};
-
-const getURLFromClipboard = async () => {
-	const text = await Clipboard.getString();
-	return !! text && isURL( text ) ? text : '';
-};
-
-export const LinkPicker = ( {
-	value: initialValue,
-	onLinkPicked,
-	onCancel: cancel,
-} ) => {
-	const [ value, setValue ] = useState( initialValue );
-	const [ clipboardUrl, setClipboardUrl ] = useState( '' );
-	const directEntry = createDirectEntry( value );
-
-	// The title of a direct entry is displayed as the raw input value, but if we
-	// are replacing empty text, we want to use the generated url.
-	const pickLink = ( { title, url, isDirectEntry } ) => {
-		onLinkPicked( { title: isDirectEntry ? url : title, url } );
-	};
-
-	const onSubmit = () => {
-		pickLink( directEntry );
-	};
-
-	const clear = () => {
-		setValue( '' );
-		setClipboardUrl( '' );
-	};
-
-	const omniCellStyle = usePreferredColorSchemeStyle(
-		styles.omniCell,
-		styles.omniCellDark
-	);
-
-	const iconStyle = usePreferredColorSchemeStyle(
-		styles.icon,
-		styles.iconDark
-	);
-
-	useEffect( () => {
-		getURLFromClipboard()
-			.then( setClipboardUrl )
-			.catch( () => setClipboardUrl( '' ) );
-	}, [] );
-
-	// TODO: Localize the accessibility label.
-	// TODO: Decide on if `LinkSuggestionItemCell` with `isDirectEntry` makes sense.
-	return (
-		<SafeAreaView style={ styles.safeArea }>
-			<NavBar>
-				<NavBar.DismissButton onPress={ cancel } />
-				<NavBar.Heading>{ __( 'Link to' ) }</NavBar.Heading>
-				<NavBar.ApplyButton onPress={ onSubmit } />
-			</NavBar>
-			<View style={ styles.contentContainer }>
-				<BottomSheet.Cell
-					icon={ link }
-					style={ omniCellStyle }
-					valueStyle={ styles.omniInput }
-					value={ value }
-					placeholder={ __( 'Search or type URL' ) }
-					autoCapitalize="none"
-					autoCorrect={ false }
-					keyboardType="url"
-					onChangeValue={ setValue }
-					onSubmit={ onSubmit }
-					/* eslint-disable-next-line jsx-a11y/no-autofocus */
-					autoFocus
-					separatorType="none"
-				>
-					{ value !== '' && (
-						<TouchableOpacity
-							onPress={ clear }
-							style={ styles.clearIcon }
-						>
-							<Icon
-								icon={ cancelCircleFilled }
-								fill={ iconStyle.color }
-								size={ 24 }
-							/>
-						</TouchableOpacity>
-					) }
-				</BottomSheet.Cell>
-				{ !! clipboardUrl && clipboardUrl !== value && (
-					<BottomSheet.LinkSuggestionItemCell
-						accessible
-						accessibilityLabel={ sprintf(
-							/* translators: %s: Copy URL from the clipboard, https://sample.url */
-							__( 'Copy URL from the clipboard, %s' ),
-							clipboardUrl
-						) }
-						suggestion={ {
-							type: 'clipboard',
-							url: clipboardUrl,
-							isDirectEntry: true,
-						} }
-						onLinkPicked={ pickLink }
-					/>
-				) }
-				{ !! value && (
-					<LinkPickerResults
-						query={ value }
-						onLinkPicked={ pickLink }
-						directEntry={ directEntry }
-					/>
-				) }
-			</View>
-		</SafeAreaView>
-	);
-};