@wordpress/components 35.0.0 → 35.0.1

package/src/mobile/utils/use-unit-converter-to-mobile.native.js

@@ -1,90 +0,0 @@
-/**
- * External dependencies
- */
-import { Dimensions } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
-
-const getValueAndUnit = ( value, unit ) => {
-	const regex = /(\d+\.?\d*)(.*)/;
-
-	const splitValue = `${ value }`
-		?.match( regex )
-		?.filter( ( v ) => v !== '' );
-
-	if ( splitValue ) {
-		return {
-			valueToConvert: splitValue[ 1 ],
-			valueUnit: unit || splitValue[ 2 ],
-		};
-	}
-	return undefined;
-};
-
-const convertUnitToMobile = ( containerSize, globalStyles, value, unit ) => {
-	const { width, height } = containerSize;
-	const { valueToConvert, valueUnit } = getValueAndUnit( value, unit ) || {};
-	const { fontSize = 16 } = globalStyles || {};
-
-	if ( valueToConvert === undefined ) {
-		return undefined;
-	}
-
-	switch ( valueUnit ) {
-		case 'rem':
-		case 'em':
-			return valueToConvert * fontSize;
-		case '%':
-			return Number( valueToConvert / 100 ) * width;
-		case 'px':
-			return Number( valueToConvert );
-		case 'vw':
-			const vw = width / 100;
-			return Math.round( valueToConvert * vw );
-		case 'vh':
-			const vh = height / 100;
-			return Math.round( valueToConvert * vh );
-		default:
-			return Number( valueToConvert / 100 ) * width;
-	}
-};
-
-const useConvertUnitToMobile = ( value, unit, styles ) => {
-	const [ windowSizes, setWindowSizes ] = useState(
-		Dimensions.get( 'window' )
-	);
-
-	useEffect( () => {
-		const dimensionsChangeSubscription = Dimensions.addEventListener(
-			'change',
-			onDimensionsChange
-		);
-
-		return () => {
-			dimensionsChangeSubscription.remove();
-		};
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [] );
-
-	const onDimensionsChange = useCallback( ( { window } ) => {
-		setWindowSizes( window );
-	}, [] );
-
-	return useMemo( () => {
-		const { valueToConvert, valueUnit } =
-			getValueAndUnit( value, unit ) || {};
-
-		return convertUnitToMobile(
-			windowSizes,
-			styles,
-			valueToConvert,
-			valueUnit
-		);
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ windowSizes, value, unit ] );
-};
-
-export { convertUnitToMobile, useConvertUnitToMobile, getValueAndUnit };

package/src/notice/index.native.js

@@ -1,123 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	Animated,
-	Easing,
-	Text,
-	TouchableWithoutFeedback,
-	View,
-	useWindowDimensions,
-} from 'react-native';
-import { BlurView } from '@react-native-community/blur';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef, useCallback, Platform } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const HIDE_TIMER = 3000;
-
-const Notice = ( { onNoticeHidden, content, id, status } ) => {
-	const { width } = useWindowDimensions();
-	const animationValue = useRef( new Animated.Value( 0 ) ).current;
-	const timer = useRef( null );
-
-	useEffect( () => {
-		// start animation
-		Animated.timing( animationValue, {
-			toValue: 1,
-			duration: 300,
-			useNativeDriver: true,
-			easing: Easing.out( Easing.quad ),
-		} ).start( ( { finished } ) => {
-			if ( finished && onNoticeHidden ) {
-				timer.current = setTimeout( () => {
-					onHide();
-				}, HIDE_TIMER );
-			}
-		} );
-
-		return () => {
-			clearTimeout( timer?.current );
-		};
-	}, [ animationValue, onHide, onNoticeHidden ] );
-
-	const onHide = useCallback( () => {
-		Animated.timing( animationValue, {
-			toValue: 0,
-			duration: 150,
-			useNativeDriver: true,
-			easing: Easing.out( Easing.quad ),
-		} ).start( ( { finished } ) => {
-			if ( finished && onNoticeHidden ) {
-				onNoticeHidden( id );
-			}
-		} );
-	}, [ animationValue, onNoticeHidden, id ] );
-
-	const noticeSolidStyles = usePreferredColorSchemeStyle(
-		styles.noticeSolid,
-		styles.noticeSolidDark
-	);
-
-	const successTextStyles = usePreferredColorSchemeStyle(
-		styles.successText,
-		styles.successTextDark
-	);
-
-	const errorTextStyles = usePreferredColorSchemeStyle(
-		styles.errorText,
-		styles.errorTextDark
-	);
-
-	const textStyles = [
-		status === 'success' && successTextStyles,
-		status === 'error' && errorTextStyles,
-	];
-
-	const containerStyles = [
-		styles.notice,
-		! Platform.isIOS && noticeSolidStyles,
-		{
-			width,
-			transform: [
-				{
-					translateY: animationValue.interpolate( {
-						inputRange: [ 0, 1 ],
-						outputRange: [ -24, 0 ],
-					} ),
-				},
-			],
-		},
-	];
-
-	return (
-		<>
-			<Animated.View style={ containerStyles }>
-				<TouchableWithoutFeedback onPress={ onHide }>
-					<View style={ styles.noticeContent }>
-						<Text numberOfLines={ 3 } style={ textStyles }>
-							{ content }
-						</Text>
-					</View>
-				</TouchableWithoutFeedback>
-				{ Platform.isIOS && (
-					<BlurView
-						style={ styles.blurBackground }
-						blurType="prominent"
-						blurAmount={ 10 }
-					/>
-				) }
-			</Animated.View>
-		</>
-	);
-};
-
-export default Notice;

package/src/notice/list.native.js

@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import Notice from './';
-import styles from './style.scss';
-import { useCallback } from '@wordpress/element';
-
-function NoticeList() {
-	const { notices } = useSelect( ( select ) => {
-		const { getNotices } = select( noticesStore );
-		return {
-			notices: getNotices(),
-		};
-	}, [] );
-
-	const { removeNotice } = useDispatch( noticesStore );
-
-	const onRemoveNotice = useCallback(
-		( id ) => {
-			removeNotice( id );
-		},
-		[ removeNotice ]
-	);
-
-	if ( ! notices.length ) {
-		return null;
-	}
-
-	return (
-		<View style={ styles.list }>
-			{ notices.map( ( notice ) => {
-				return (
-					<Notice
-						{ ...notice }
-						key={ notice.id }
-						onNoticeHidden={ onRemoveNotice }
-					></Notice>
-				);
-			} ) }
-		</View>
-	);
-}
-
-export default NoticeList;

package/src/notice/style.native.scss

@@ -1,60 +0,0 @@
-.successText {
-	color: #212121;
-	align-self: center;
-	background-color: transparent;
-	font-size: 12;
-}
-
-.successTextDark {
-	color: $white;
-}
-
-.errorText {
-	color: $red-50;
-	align-self: center;
-	background-color: transparent;
-	font-size: 12;
-}
-
-.errorTextDark {
-	color: $red-30;
-}
-
-.list {
-	position: absolute;
-	margin-left: auto;
-	margin-right: auto;
-	top: 0;
-	flex-direction: column;
-	z-index: 102;
-	align-items: center;
-	align-self: center;
-}
-
-.notice {
-	justify-content: center;
-	position: absolute;
-}
-
-.noticeContent {
-	position: relative;
-	z-index: 1;
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 5px;
-	padding-bottom: 5px;
-}
-
-.noticeSolid {
-	background-color: #f4f4f4;
-}
-
-.noticeSolidDark {
-	background-color: #2a2a2a;
-}
-
-.blurBackground {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-}

package/src/panel/actions.native.js

@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './actions.scss';
-import BottomSeparatorCover from './bottom-separator-cover';
-import TextControl from '../text-control';
-
-function PanelActions( { actions, getStylesFromColorScheme } ) {
-	const mappedActions = useMemo( () => {
-		return actions.map( ( { label, onPress } ) => {
-			return (
-				<TextControl
-					label={ label }
-					onPress={ onPress }
-					labelStyle={ styles.defaultLabelStyle }
-					key={ label }
-				/>
-			);
-		} );
-	}, [ actions ] );
-
-	return (
-		<View
-			style={ getStylesFromColorScheme(
-				styles.panelActionsContainer,
-				styles.panelActionsContainerDark
-			) }
-		>
-			{ mappedActions }
-			<BottomSeparatorCover />
-		</View>
-	);
-}
-
-export default withPreferredColorScheme( PanelActions );

package/src/panel/actions.native.scss

@@ -1,12 +0,0 @@
-.panelActionsContainer {
-	border-top-color: $light-gray-400;
-	border-top-width: 1px;
-}
-
-.panelActionsContainerDark {
-	border-top-color: $gray-70;
-}
-
-.defaultLabelStyle {
-	color: $alert-red;
-}

package/src/panel/body.native.js

@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { Text, View } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import styles from './body.scss';
-import BottomSeparatorCover from './bottom-separator-cover';
-
-export function PanelBody( { children, title, style, titleStyle = {} } ) {
-	return (
-		<View style={ [ styles.panelContainer, style ] }>
-			{ title && (
-				<Text
-					accessibilityRole="header"
-					style={ [ styles.sectionHeaderText, titleStyle ] }
-				>
-					{ title }
-				</Text>
-			) }
-			{ children }
-			<BottomSeparatorCover />
-		</View>
-	);
-}
-
-export default PanelBody;

package/src/panel/body.native.scss

@@ -1,11 +0,0 @@
-.panelContainer {
-	padding: 0 16px;
-}
-
-.sectionHeaderText {
-	color: $gray;
-	padding-top: 24;
-	padding-bottom: 8;
-	font-size: 14;
-	font-weight: 500;
-}

package/src/panel/bottom-separator-cover.native.js

@@ -1,27 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { withPreferredColorScheme } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './bottom-separator-cover.scss';
-
-function BottomSeparatorCover( { getStylesFromColorScheme } ) {
-	return (
-		<View
-			style={ getStylesFromColorScheme(
-				styles.coverSeparator,
-				styles.coverSeparatorDark
-			) }
-		/>
-	);
-}
-
-export default withPreferredColorScheme( BottomSeparatorCover );

package/src/panel/bottom-separator-cover.native.scss

@@ -1,9 +0,0 @@
-.coverSeparator {
-	height: 2px;
-	margin-top: -2px;
-	background-color: $white;
-}
-
-.coverSeparatorDark {
-	background-color: $background-dark-elevated;
-}

package/src/private-apis.native.js

@@ -1,13 +0,0 @@
-/**
- * Internal dependencies
- */
-import { kebabCase } from './utils/strings';
-import { lock } from './lock-unlock';
-
-/**
- * Private @wordpress/components APIs.
- */
-export const privateApis = {};
-lock( privateApis, {
-	kebabCase,
-} );

package/src/query-controls/index.native.js

@@ -1,103 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, _x } from '@wordpress/i18n';
-import { useCallback, memo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import RangeControl from '../range-control';
-import SelectControl from '../select-control';
-import CategorySelect from './category-select';
-
-const DEFAULT_MIN_ITEMS = 1;
-const DEFAULT_MAX_ITEMS = 100;
-
-const defaultOrderByOptions = [
-	{
-		label: __( 'Newest to oldest' ),
-		value: 'date/desc',
-	},
-	{
-		label: __( 'Oldest to newest' ),
-		value: 'date/asc',
-	},
-	{
-		/* translators: Label for ordering posts by title in ascending order. */
-		label: __( 'A → Z' ),
-		value: 'title/asc',
-	},
-	{
-		/* translators: Label for ordering posts by title in descending order. */
-		label: __( 'Z → A' ),
-		value: 'title/desc',
-	},
-];
-
-const QueryControls = memo(
-	( {
-		categoriesList,
-		selectedCategoryId,
-		numberOfItems,
-		order,
-		orderBy,
-		orderByOptions = defaultOrderByOptions,
-		maxItems = DEFAULT_MAX_ITEMS,
-		minItems = DEFAULT_MIN_ITEMS,
-		onCategoryChange,
-		onNumberOfItemsChange,
-		onOrderChange,
-		onOrderByChange,
-	} ) => {
-		const onChange = useCallback(
-			( value ) => {
-				const [ newOrderBy, newOrder ] = value.split( '/' );
-				if ( newOrder !== order ) {
-					onOrderChange( newOrder );
-				}
-				if ( newOrderBy !== orderBy ) {
-					onOrderByChange( newOrderBy );
-				}
-			},
-			[ order, orderBy, onOrderByChange, onOrderChange ]
-		);
-
-		return (
-			<>
-				{ onOrderChange && onOrderByChange && (
-					<SelectControl
-						label={ __( 'Order by' ) }
-						value={ `${ orderBy }/${ order }` }
-						options={ orderByOptions }
-						onChange={ onChange }
-						hideCancelButton
-					/>
-				) }
-				{ onCategoryChange && (
-					<CategorySelect
-						categoriesList={ categoriesList }
-						label={ __( 'Category' ) }
-						noOptionLabel={ _x( 'All', 'categories' ) }
-						selectedCategoryId={ selectedCategoryId }
-						onChange={ onCategoryChange }
-						hideCancelButton
-					/>
-				) }
-				{ onNumberOfItemsChange && (
-					<RangeControl
-						__next40pxDefaultSize
-						label={ __( 'Number of items' ) }
-						value={ numberOfItems }
-						onChange={ onNumberOfItemsChange }
-						min={ minItems }
-						max={ maxItems }
-						required
-					/>
-				) }
-			</>
-		);
-	}
-);
-
-export default QueryControls;

package/src/radio-control/index.native.js

@@ -1,24 +0,0 @@
-/**
- * Internal dependencies
- */
-import RadioCell from '../mobile/bottom-sheet/radio-cell';
-
-function RadioControl( { onChange, selected, options = [], ...props } ) {
-	return (
-		<>
-			{ options.map( ( option, index ) => {
-				return (
-					<RadioCell
-						label={ option.label }
-						onPress={ () => onChange( option.value ) }
-						selected={ option.value === selected }
-						key={ `${ option.value }-${ index }` }
-						{ ...props }
-					/>
-				);
-			} ) }
-		</>
-	);
-}
-
-export default RadioControl;

package/src/range-control/index.native.js

@@ -1,73 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import RangeCell from '../mobile/bottom-sheet/range-cell';
-import StepperCell from '../mobile/bottom-sheet/stepper-cell';
-
-const RangeControl = memo(
-	( {
-		className,
-		currentInput,
-		label,
-		value,
-		instanceId,
-		onChange,
-		beforeIcon,
-		afterIcon,
-		help,
-		allowReset,
-		initialPosition,
-		min,
-		max,
-		type,
-		separatorType,
-		disabled,
-		...props
-	} ) => {
-		if ( type === 'stepper' ) {
-			return (
-				<StepperCell
-					label={ label }
-					max={ max }
-					min={ min }
-					onChange={ onChange }
-					separatorType={ separatorType }
-					value={ value }
-					disabled={ disabled }
-				/>
-			);
-		}
-		const id = `inspector-range-control-${ instanceId }`;
-		const currentInputValue = currentInput === null ? value : currentInput;
-		const initialSliderValue = isFinite( currentInputValue )
-			? currentInputValue
-			: initialPosition;
-
-		return (
-			<RangeCell
-				label={ label }
-				id={ id }
-				help={ help }
-				className={ className }
-				onChange={ onChange }
-				aria-describedby={ !! help ? `${ id }__help` : undefined }
-				minimumValue={ min }
-				maximumValue={ max }
-				value={ value }
-				beforeIcon={ beforeIcon }
-				afterIcon={ afterIcon }
-				allowReset={ allowReset }
-				defaultValue={ initialSliderValue }
-				separatorType={ separatorType }
-				disabled={ disabled }
-				{ ...props }
-			/>
-		);
-	}
-);
-
-export default RangeControl;