@wordpress/components 34.0.0 → 35.0.1

package/src/mobile/image/style.native.scss

@@ -1,179 +0,0 @@
-.container {
-	flex-grow: 1;
-}
-
-.imageContent {
-	overflow: hidden;
-}
-
-.imageBorder {
-	border-color: $blue-40;
-	border-width: 2px;
-	border-style: solid;
-	position: absolute;
-	z-index: 1;
-	width: 100%;
-	height: 100%;
-}
-
-.imageBorderDark {
-	border-color: $blue-50;
-}
-
-.retryIcon {
-	background-color: $black;
-	border-radius: 200px;
-	padding: 8px;
-}
-
-.retryIconDark {
-	background-color: $white;
-}
-
-.iconOffline {
-	fill: $white;
-	width: 24px;
-	height: 24px;
-}
-
-.iconOfflineDark {
-	fill: $black;
-}
-
-.customRetryIcon {
-	width: 24px;
-	height: 24px;
-}
-
-.iconRetry {
-	fill: $white;
-	width: 24px;
-	height: 24px;
-}
-
-.iconRetryDark {
-	fill: $black;
-}
-
-.iconPlaceholder {
-	fill: $gray-dark;
-	width: 100%;
-	height: 100%;
-}
-
-.iconPlaceholderDark {
-	fill: $white;
-}
-
-.iconUpload {
-	fill: $gray-lighten-20;
-	width: 100%;
-	height: 100%;
-}
-
-.iconUploadDark {
-	fill: $gray-70;
-}
-
-.imageContainerUpload {
-	justify-content: center;
-	align-items: center;
-	background-color: $gray-light;
-	height: 200px;
-}
-
-.imageContainerUploadDark {
-	background-color: $gray-90;
-}
-
-.imageContainerUploadWithFocalpoint {
-	height: 100%;
-}
-
-.imageUploadingIconContainer {
-	width: 40px;
-	height: 40px;
-	justify-content: center;
-	align-items: center;
-}
-
-.imageContainer {
-	width: 100%;
-	height: 100%;
-	justify-content: center;
-	align-items: center;
-	background-color: $gray-lighten-30;
-	position: absolute;
-}
-
-.uploadFailedText {
-	color: $black;
-	font-weight: bold;
-	font-size: 14;
-	margin-top: 5;
-	text-align: center;
-}
-
-.uploadFailedTextDark {
-	color: $white;
-}
-
-.editContainer {
-	width: 44px;
-	height: 44px;
-	position: absolute;
-	top: 0;
-	right: 0;
-	z-index: 2;
-}
-
-.edit {
-	width: 30px;
-	height: 30px;
-	background-color: $gray-dark;
-	border-radius: 22px;
-	position: absolute;
-	top: 5px;
-	right: 5px;
-}
-
-.iconCustomise {
-	fill: $white;
-	position: absolute;
-	top: 7px;
-	left: 7px;
-}
-
-.retryContainer {
-	flex: 1;
-	background-color: "rgba(255, 255, 255, 0.8)";
-}
-
-.retryContainerDark {
-	background-color: "rgba(0, 0, 0, 0.5)";
-}
-
-.focalPointContainer {
-	height: 100%;
-}
-
-.focalPoint {
-	position: absolute;
-	width: 100%;
-}
-
-.focalPointContent {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-}
-
-.wide {
-	width: 100%;
-}
-
-.nonVisibleImage {
-	height: 1;
-	width: 1;
-	opacity: 0;
-}

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

@@ -1,58 +0,0 @@
-function getFocalPointOffset( imageRatio, container, imageSize, focusPoint ) {
-	const containerCenter = Math.floor( container / 2 );
-	const scaledImage = Math.floor( imageSize / imageRatio );
-	const focus = Math.floor( focusPoint * scaledImage );
-	let focusOffset = focus - containerCenter;
-	const offsetRest = scaledImage - focus;
-	const containerRest = container - containerCenter;
-
-	if ( offsetRest < containerRest ) {
-		focusOffset -= containerRest - offsetRest;
-	}
-
-	if ( focusOffset < 0 ) {
-		focusOffset = 0;
-	}
-
-	return -focusOffset;
-}
-
-export function getImageWithFocalPointStyles(
-	focalPoint,
-	containerSize,
-	originalImageData
-) {
-	const imageStyle = {};
-	if ( focalPoint && containerSize && originalImageData ) {
-		let horizontalOffset = 0;
-		let verticalOffset = 0;
-		const widthRatio = originalImageData.width / containerSize.width;
-		const heightRatio = originalImageData.height / containerSize.height;
-
-		imageStyle.resizeMode = 'stretch';
-
-		if ( widthRatio > heightRatio ) {
-			horizontalOffset = getFocalPointOffset(
-				heightRatio,
-				containerSize.width,
-				originalImageData.width,
-				focalPoint.x
-			);
-			imageStyle.width = undefined;
-			imageStyle.left = horizontalOffset;
-		} else if ( widthRatio < heightRatio ) {
-			verticalOffset = getFocalPointOffset(
-				widthRatio,
-				containerSize.height,
-				originalImageData.height,
-				focalPoint.y
-			);
-			imageStyle.height = undefined;
-			imageStyle.top = verticalOffset;
-		}
-
-		return imageStyle;
-	}
-
-	return imageStyle;
-}

package/src/mobile/keyboard-avoiding-view/index.android.js

@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { KeyboardAvoidingView as AndroidKeyboardAvoidingView } from 'react-native';
-
-export const KeyboardAvoidingView = AndroidKeyboardAvoidingView;
-
-export default KeyboardAvoidingView;

package/src/mobile/keyboard-avoiding-view/index.ios.js

@@ -1,143 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	KeyboardAvoidingView as IOSKeyboardAvoidingView,
-	Animated,
-	Keyboard,
-	Dimensions,
-	View,
-} from 'react-native';
-import SafeArea from 'react-native-safe-area';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import useIsFloatingKeyboard from '../utils/use-is-floating-keyboard';
-import styles from './styles.scss';
-
-const AnimatedKeyboardAvoidingView = Animated.createAnimatedComponent(
-	IOSKeyboardAvoidingView
-);
-
-const MIN_HEIGHT = 44;
-
-export const KeyboardAvoidingView = ( {
-	parentHeight,
-	style,
-	withAnimatedHeight = false,
-	...otherProps
-} ) => {
-	const [ resizeObserver, sizes ] = useResizeObserver();
-	const [ isKeyboardOpen, setIsKeyboardOpen ] = useState( false );
-	const [ safeAreaBottomInset, setSafeAreaBottomInset ] = useState( 0 );
-	const { height = 0 } = sizes || {};
-	const floatingKeyboard = useIsFloatingKeyboard();
-
-	const animatedHeight = useRef( new Animated.Value( MIN_HEIGHT ) ).current;
-
-	const { height: fullHeight } = Dimensions.get( 'screen' );
-	const keyboardVerticalOffset = fullHeight - parentHeight;
-
-	useEffect( () => {
-		SafeArea.getSafeAreaInsetsForRootView().then(
-			( { safeAreaInsets } ) => {
-				setSafeAreaBottomInset( safeAreaInsets.bottom );
-			}
-		);
-		const safeAreaSubscription = SafeArea.addEventListener(
-			'safeAreaInsetsForRootViewDidChange',
-			onSafeAreaInsetsUpdate
-		);
-		const keyboardShowSubscription = Keyboard.addListener(
-			'keyboardWillShow',
-			onKeyboardWillShow
-		);
-		const keyboardHideSubscription = Keyboard.addListener(
-			'keyboardWillHide',
-			onKeyboardWillHide
-		);
-
-		return () => {
-			safeAreaSubscription.remove();
-			keyboardShowSubscription.remove();
-			keyboardHideSubscription.remove();
-		};
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [] );
-
-	function onSafeAreaInsetsUpdate( { safeAreaInsets } ) {
-		setSafeAreaBottomInset( safeAreaInsets.bottom );
-	}
-
-	function onKeyboardWillShow( { endCoordinates } ) {
-		setIsKeyboardOpen( true );
-		animatedHeight.setValue( endCoordinates.height + MIN_HEIGHT );
-	}
-
-	function onKeyboardWillHide( { duration, startCoordinates } ) {
-		// The startCoordinates.height is set to wrong value when we use cmd + k for hide the keyboard (Have no idea why).
-		// Because of that the `setIsKeyboardOpened` is not invoked and the state of keyboard is wrong.
-		// The keyboardIsOpenBreakpoint use 100 as a fallback if the startCoordinates.height is too small (cmd + k case)
-		const keyboardIsOpenBreakpoint =
-			startCoordinates.height > 100 ? startCoordinates.height / 3 : 100;
-		const animatedListenerId = animatedHeight.addListener(
-			( { value } ) => {
-				if ( value < keyboardIsOpenBreakpoint ) {
-					setIsKeyboardOpen( false );
-				}
-			}
-		);
-
-		Animated.timing( animatedHeight, {
-			toValue: MIN_HEIGHT,
-			duration,
-			useNativeDriver: false,
-		} ).start( () => {
-			animatedHeight.removeListener( animatedListenerId );
-		} );
-	}
-
-	return (
-		<AnimatedKeyboardAvoidingView
-			{ ...otherProps }
-			enabled={ ! floatingKeyboard }
-			behavior="padding"
-			keyboardVerticalOffset={ keyboardVerticalOffset }
-			style={
-				withAnimatedHeight
-					? [
-							style,
-							{
-								height: animatedHeight,
-								marginBottom: isKeyboardOpen
-									? -safeAreaBottomInset
-									: 0,
-							},
-					  ]
-					: style
-			}
-		>
-			<View
-				style={ [
-					{
-						top: -height + MIN_HEIGHT,
-					},
-					styles.animatedChildStyle,
-					! withAnimatedHeight && styles.defaultChildStyle,
-				] }
-			>
-				{ resizeObserver }
-				{ otherProps.children }
-			</View>
-		</AnimatedKeyboardAvoidingView>
-	);
-};
-
-export default KeyboardAvoidingView;

package/src/mobile/keyboard-avoiding-view/styles.native.scss

@@ -1,9 +0,0 @@
-.animatedChildStyle {
-	position: absolute;
-	width: 100%;
-}
-
-.defaultChildStyle {
-	height: 100%;
-	top: 0;
-}

package/src/mobile/keyboard-aware-flat-list/index.android.js

@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import { FlatList } from 'react-native';
-import Animated from 'react-native-reanimated';
-
-/**
- * WordPress dependencies
- */
-import {
-	forwardRef,
-	useCallback,
-	useImperativeHandle,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import useScroll from './use-scroll';
-import KeyboardAvoidingView from '../keyboard-avoiding-view';
-import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
-
-const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
-const EMPTY_OBJECT = {};
-
-export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
-	const { extraScrollHeight, scrollEnabled, shouldPreventAutomaticScroll } =
-		props;
-
-	const {
-		scrollViewRef,
-		scrollHandler,
-		scrollToSection,
-		scrollToElement,
-		onContentSizeChange,
-		lastScrollTo,
-	} = useScroll( {
-		scrollEnabled,
-		shouldPreventAutomaticScroll,
-		extraScrollHeight,
-		onScroll,
-	} );
-
-	const getFlatListRef = useCallback(
-		( flatListRef ) => {
-			scrollViewRef.current = flatListRef?.getNativeScrollRef();
-		},
-		[ scrollViewRef ]
-	);
-
-	useImperativeHandle( ref, () => {
-		return {
-			scrollViewRef: scrollViewRef.current,
-			scrollToSection,
-			scrollToElement,
-			lastScrollTo,
-		};
-	} );
-
-	const optimizationProps =
-		props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD
-			? OPTIMIZATION_PROPS
-			: EMPTY_OBJECT;
-
-	return (
-		<KeyboardAvoidingView style={ { flex: 1 } }>
-			<AnimatedFlatList
-				ref={ getFlatListRef }
-				onScroll={ scrollHandler }
-				onContentSizeChange={ onContentSizeChange }
-				// Disable clipping to fix focus losing.
-				// See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
-				removeClippedSubviews={ false }
-				{ ...optimizationProps }
-				{ ...props }
-			/>
-		</KeyboardAvoidingView>
-	);
-};
-
-export default forwardRef( KeyboardAwareFlatList );

package/src/mobile/keyboard-aware-flat-list/index.ios.js

@@ -1,147 +0,0 @@
-/**
- * External dependencies
- */
-import { FlatList, View } from 'react-native';
-import Animated from 'react-native-reanimated';
-
-/**
- * WordPress dependencies
- */
-import {
-	useCallback,
-	useEffect,
-	forwardRef,
-	useImperativeHandle,
-} from '@wordpress/element';
-import { useThrottle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import useScroll from './use-scroll';
-import useTextInputOffset from './use-text-input-offset';
-import useTextInputCaretPosition from './use-text-input-caret-position';
-import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
-import styles from './styles.scss';
-
-const DEFAULT_FONT_SIZE = 16;
-const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
-const EMPTY_OBJECT = {};
-
-/** @typedef {import('@wordpress/element').RefObject} RefObject */
-/**
- * React component that provides a FlatList that is aware of the keyboard state and can scroll
- * to the currently focused TextInput.
- *
- * @param {Object}    props                              Component props.
- * @param {number}    props.extraScrollHeight            Extra scroll height for the content.
- * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.
- * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.
- * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
- * @param {Object}    props...                           Other props to pass to the FlatList component.
- * @param {RefObject} ref
- * @return {Component} KeyboardAwareFlatList component.
- */
-export const KeyboardAwareFlatList = (
-	{
-		extraScrollHeight,
-		onScroll,
-		scrollEnabled,
-		shouldPreventAutomaticScroll,
-		...props
-	},
-	ref
-) => {
-	const {
-		scrollViewRef,
-		scrollHandler,
-		keyboardOffset,
-		scrollToSection,
-		scrollToElement,
-		onContentSizeChange,
-		lastScrollTo,
-	} = useScroll( {
-		scrollEnabled,
-		shouldPreventAutomaticScroll,
-		extraScrollHeight,
-		onScroll,
-		onSizeChange,
-	} );
-
-	const [ getTextInputOffset ] = useTextInputOffset(
-		scrollEnabled,
-		scrollViewRef
-	);
-
-	const onScrollToTextInput = useThrottle(
-		useCallback(
-			async ( caret ) => {
-				const { caretHeight = DEFAULT_FONT_SIZE } = caret ?? {};
-				const textInputOffset = await getTextInputOffset( caret );
-				const hasTextInputOffset = textInputOffset !== null;
-
-				if ( hasTextInputOffset ) {
-					scrollToSection( textInputOffset, caretHeight );
-				}
-			},
-			[ getTextInputOffset, scrollToSection ]
-		),
-		200,
-		{ leading: false }
-	);
-
-	const [ currentCaretData ] = useTextInputCaretPosition( scrollEnabled );
-
-	const onSizeChange = useCallback(
-		() => onScrollToTextInput( currentCaretData ),
-		[ currentCaretData, onScrollToTextInput ]
-	);
-
-	useEffect( () => {
-		onScrollToTextInput( currentCaretData );
-	}, [ currentCaretData, onScrollToTextInput ] );
-
-	// Adds content insets when the keyboard is opened to have
-	// extra padding at the bottom.
-	const contentInset = { bottom: keyboardOffset };
-
-	const getFlatListRef = useCallback(
-		( flatListRef ) => {
-			scrollViewRef.current = flatListRef?.getNativeScrollRef();
-		},
-		[ scrollViewRef ]
-	);
-
-	useImperativeHandle( ref, () => {
-		return {
-			scrollViewRef: scrollViewRef.current,
-			scrollToSection,
-			scrollToElement,
-			lastScrollTo,
-		};
-	} );
-
-	const optimizationProps =
-		props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD
-			? OPTIMIZATION_PROPS
-			: EMPTY_OBJECT;
-
-	return (
-		<View style={ styles.list__container }>
-			<AnimatedFlatList
-				ref={ getFlatListRef }
-				automaticallyAdjustContentInsets={ false }
-				contentInset={ contentInset }
-				keyboardShouldPersistTaps="handled"
-				onContentSizeChange={ onContentSizeChange }
-				onScroll={ scrollHandler }
-				scrollEventThrottle={ 16 }
-				style={ styles.list__content }
-				{ ...optimizationProps }
-				{ ...props }
-			/>
-		</View>
-	);
-};
-
-export default forwardRef( KeyboardAwareFlatList );

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

@@ -1,26 +0,0 @@
-/**
- * Optimization properties for FlatList.
- * @typedef {Object} OptimizationProps
- * @property {number} maxToRenderPerBatch - Controls the amount of items rendered per batch during scrolling.
- *                                        Increasing this number reduces visual blank areas but may affect responsiveness.
- *                                        Default: 10
- * @property {number} windowSize          - Measurement unit representing viewport height.
- *                                        Default: 21 (10 viewports above, 10 below, and 1 in between).
- *                                        Larger values reduce chances of seeing blank spaces while scrolling but increase memory consumption.
- *                                        Smaller values save memory but increase chances of seeing blank areas.
- */
-
-/**
- * Threshold for applying optimization settings.
- * @type {number}
- */
-export const OPTIMIZATION_ITEMS_THRESHOLD = 30;
-
-/**
- * Optimization properties for FlatList.
- * @type {OptimizationProps}
- */
-export const OPTIMIZATION_PROPS = {
-	maxToRenderPerBatch: 15,
-	windowSize: 17,
-};

package/src/mobile/keyboard-aware-flat-list/styles.native.scss

@@ -1,8 +0,0 @@
-.list__container {
-	flex-grow: 1;
-	align-items: stretch;
-}
-
-.list__content {
-	margin-bottom: $mobile-block-toolbar-height;
-}