@wordpress/components 34.0.0 → 35.0.1

package/src/mobile/color-settings/palette.screen.native.js

@@ -1,232 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState, useContext } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useRoute, useNavigation } from '@react-navigation/native';
-
-/**
- * Internal dependencies
- */
-import ColorPalette from '../../color-palette';
-import ColorIndicator from '../../color-indicator';
-import NavBar from '../bottom-sheet/nav-bar';
-import SegmentedControls from '../segmented-control';
-import { colorsUtils } from './utils';
-import PanelBody from '../../panel/body';
-import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
-import ColorControl from '../../color-control';
-
-import styles from './style.scss';
-
-const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
-
-const PaletteScreen = () => {
-	const route = useRoute();
-	const navigation = useNavigation();
-	const { shouldEnableBottomSheetScroll } = useContext( BottomSheetContext );
-	const {
-		label,
-		onColorChange,
-		onGradientChange,
-		onColorCleared,
-		colorValue,
-		defaultSettings,
-		hideNavigation = false,
-	} = route.params || {};
-	const { segments, isGradient } = colorsUtils;
-	const [ currentValue, setCurrentValue ] = useState( colorValue );
-	const isGradientColor = isGradient( currentValue );
-	const selectedSegmentIndex = isGradientColor ? 1 : 0;
-
-	const [ currentSegment, setCurrentSegment ] = useState(
-		segments[ selectedSegmentIndex ]
-	);
-	const isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];
-	const currentSegmentColors = ! isGradientSegment
-		? defaultSettings.colors
-		: defaultSettings.gradients;
-	const allAvailableColors = defaultSettings?.allAvailableColors || [];
-	const allAvailableGradients = currentSegmentColors
-		.flatMap( ( { gradients } ) => gradients )
-		.filter( Boolean );
-
-	const horizontalSeparatorStyle = usePreferredColorSchemeStyle(
-		styles.horizontalSeparator,
-		styles.horizontalSeparatorDark
-	);
-	const clearButtonStyle = usePreferredColorSchemeStyle(
-		styles.clearButton,
-		styles.clearButtonDark
-	);
-	const selectedColorTextStyle = usePreferredColorSchemeStyle(
-		styles.colorText,
-		styles.colorTextDark
-	);
-
-	const isSolidSegment = currentSegment === segments[ 0 ];
-	const isCustomGadientShown = ! isSolidSegment && isGradientColor;
-
-	const setColor = ( color ) => {
-		setCurrentValue( color );
-		if ( isSolidSegment && onColorChange && onGradientChange ) {
-			onColorChange( color );
-		} else if ( isSolidSegment && onColorChange ) {
-			onColorChange( color );
-		} else if ( ! isSolidSegment && onGradientChange ) {
-			onGradientChange( color );
-		}
-	};
-
-	function onClear() {
-		setCurrentValue( undefined );
-
-		if ( onColorCleared ) {
-			onColorCleared();
-		}
-	}
-
-	function onCustomPress() {
-		if ( isSolidSegment ) {
-			navigation.navigate( colorsUtils.screens.picker, {
-				currentValue,
-				setColor,
-			} );
-		} else {
-			navigation.navigate( colorsUtils.screens.gradientPicker, {
-				setColor,
-				isGradientColor,
-				currentValue,
-			} );
-		}
-	}
-
-	function getClearButton() {
-		return (
-			<TouchableWithoutFeedback
-				accessibilityLabel={ __( 'Clear selected color' ) }
-				onPress={ onClear }
-				hitSlop={ HIT_SLOP }
-			>
-				<View style={ styles.clearButtonContainer }>
-					<Text style={ clearButtonStyle }>{ __( 'Reset' ) }</Text>
-				</View>
-			</TouchableWithoutFeedback>
-		);
-	}
-
-	function getFooter() {
-		if ( onGradientChange ) {
-			return (
-				<SegmentedControls
-					segments={ segments }
-					segmentHandler={ setCurrentSegment }
-					selectedIndex={ segments.indexOf( currentSegment ) }
-					addonLeft={
-						currentValue && (
-							<ColorIndicator
-								color={ currentValue }
-								style={ styles.colorIndicator }
-							/>
-						)
-					}
-					addonRight={ currentValue && getClearButton() }
-				/>
-			);
-		}
-		return (
-			<View style={ styles.footer }>
-				<View style={ styles.flex }>
-					{ currentValue && (
-						<ColorIndicator
-							color={ currentValue }
-							style={ styles.colorIndicator }
-						/>
-					) }
-				</View>
-				{ currentValue ? (
-					<Text
-						style={ selectedColorTextStyle }
-						maxFontSizeMultiplier={ 2 }
-						selectable
-					>
-						{ currentValue.toUpperCase() }
-					</Text>
-				) : (
-					<Text
-						style={ styles.selectColorText }
-						maxFontSizeMultiplier={ 2 }
-					>
-						{ __( 'Select a color above' ) }
-					</Text>
-				) }
-				<View style={ styles.flex }>
-					{ currentValue && getClearButton() }
-				</View>
-			</View>
-		);
-	}
-	return (
-		<View>
-			{ ! hideNavigation && (
-				<NavBar>
-					<NavBar.BackButton onPress={ navigation.goBack } />
-					<NavBar.Heading>{ label } </NavBar.Heading>
-				</NavBar>
-			) }
-
-			<View style={ styles.colorPalettes }>
-				{ currentSegmentColors.map( ( palette, paletteKey ) => {
-					const paletteSettings = {
-						colors: palette.colors,
-						gradients: palette.gradients,
-						allColors: allAvailableColors,
-						allGradients: allAvailableGradients,
-					};
-					// Limit to show the custom indicator to the first available palette
-					const enableCustomColor = paletteKey === 0;
-
-					return (
-						<ColorPalette
-							enableCustomColor={ enableCustomColor }
-							label={ palette.name }
-							key={ paletteKey }
-							setColor={ setColor }
-							activeColor={ currentValue }
-							isGradientColor={ isGradientColor }
-							currentSegment={ currentSegment }
-							onCustomPress={ onCustomPress }
-							shouldEnableBottomSheetScroll={
-								shouldEnableBottomSheetScroll
-							}
-							defaultSettings={ paletteSettings }
-						/>
-					);
-				} ) }
-			</View>
-
-			{ isCustomGadientShown && (
-				<>
-					<View style={ horizontalSeparatorStyle } />
-					<PanelBody>
-						<ColorControl
-							label={ __( 'Customize Gradient' ) }
-							onPress={ onCustomPress }
-							withColorIndicator={ false }
-						/>
-					</PanelBody>
-				</>
-			) }
-			<View style={ horizontalSeparatorStyle } />
-			{ getFooter() }
-		</View>
-	);
-};
-
-export default PaletteScreen;

package/src/mobile/color-settings/picker-screen.native.js

@@ -1,60 +0,0 @@
-/**
- * External dependencies
- */
-import { useRoute, useNavigation } from '@react-navigation/native';
-
-/**
- * WordPress dependencies
- */
-import { useContext, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ColorPicker } from '../../color-picker';
-import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
-
-const PickerScreen = () => {
-	const route = useRoute();
-	const navigation = useNavigation();
-	const {
-		onShouldEnableInnerHandling,
-		shouldEnableBottomSheetMaxHeight,
-		onHandleClosingBottomSheet,
-		isBottomSheetContentScrolling,
-		shouldEnableBottomSheetScroll,
-		onHandleHardwareButtonPress,
-	} = useContext( BottomSheetContext );
-	const { setColor, currentValue, isGradientColor } = route.params;
-	return useMemo( () => {
-		return (
-			<ColorPicker
-				onShouldEnableInnerHandling={ onShouldEnableInnerHandling }
-				shouldEnableBottomSheetMaxHeight={
-					shouldEnableBottomSheetMaxHeight
-				}
-				setColor={ setColor }
-				activeColor={ currentValue }
-				isGradientColor={ isGradientColor }
-				onNavigationBack={ navigation.goBack }
-				onHandleClosingBottomSheet={ onHandleClosingBottomSheet }
-				isBottomSheetContentScrolling={ isBottomSheetContentScrolling }
-				shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll }
-				onHandleHardwareButtonPress={ onHandleHardwareButtonPress }
-			/>
-		);
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [
-		setColor,
-		currentValue,
-		isGradientColor,
-		onShouldEnableInnerHandling,
-		shouldEnableBottomSheetMaxHeight,
-		onHandleClosingBottomSheet,
-		isBottomSheetContentScrolling,
-		shouldEnableBottomSheetScroll,
-		onHandleHardwareButtonPress,
-	] );
-};
-
-export default PickerScreen;

package/src/mobile/color-settings/style.native.scss

@@ -1,62 +0,0 @@
-
-.horizontalSeparator {
-	border-bottom-width: $border-width;
-	border-color: $light-gray-400;
-}
-
-.horizontalSeparatorDark {
-	border-color: $gray-70;
-}
-
-.footer {
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-	align-content: center;
-	padding: 12px $grid-unit-20;
-}
-
-.colorPalettes {
-	padding: $grid-unit-10 0;
-}
-
-.colorIndicator {
-	width: 24px;
-	height: 24px;
-}
-
-.selectColorText {
-	text-align: center;
-	color: $gray;
-	font-size: 16px;
-	flex: 2;
-	line-height: 24px;
-}
-
-.colorText {
-	font-family: $default-monospace-font;
-	color: $light-primary;
-	font-size: 16px;
-	font-weight: 400;
-}
-
-.colorTextDark {
-	color: $dark-primary;
-}
-
-.flex {
-	flex: 1;
-}
-
-.clearButtonContainer {
-	align-self: flex-end;
-}
-
-.clearButton {
-	color: $blue-50;
-	font-size: 17px;
-}
-
-.clearButtonDark {
-	color: $blue-30;
-}

package/src/mobile/color-settings/utils.native.js

@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-const gradients = {
-	linear: 'linear-gradient',
-	radial: 'radial-gradient',
-};
-
-const gradientOptions = [
-	{ label: __( 'Linear' ), value: gradients.linear },
-	{ label: __( 'Radial' ), value: gradients.radial },
-];
-
-const getGradientType = ( color ) => {
-	if ( color?.includes( gradients.radial ) ) {
-		return gradients.radial;
-	} else if ( color?.includes( gradients.linear ) ) {
-		return gradients.linear;
-	}
-	return false;
-};
-
-export const colorsUtils = {
-	screens: {
-		gradientPicker: 'GradientPicker',
-		picker: 'Picker',
-		palette: 'Palette',
-	},
-	segments: [ __( 'Color' ), __( 'Gradient' ) ],
-	gradients,
-	gradientOptions,
-	getGradientType,
-	isGradient: ( color ) => !! getGradientType( color ),
-};

package/src/mobile/cycle-select-control/README.md

@@ -1,3 +0,0 @@
-# CycleSelectControl
-
-`CycleSelectControl` is an experimental alternative to SelectControl for mobile.

package/src/mobile/cycle-select-control/index.native.js

@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import CyclePickerCell from '../bottom-sheet/cycle-picker-cell';
-
-function CycleSelectControl( {
-	help,
-	instanceId,
-	label,
-	multiple = false,
-	onChange,
-	options = [],
-	className,
-	hideLabelFromVision,
-	...props
-} ) {
-	const id = `inspector-select-control-${ instanceId }`;
-
-	return (
-		<CyclePickerCell
-			label={ label }
-			hideLabelFromVision={ hideLabelFromVision }
-			id={ id }
-			help={ help }
-			className={ className }
-			onChangeValue={ onChange }
-			aria-describedby={ !! help ? `${ id }__help` : undefined }
-			multiple={ multiple }
-			options={ options }
-			{ ...props }
-		/>
-	);
-}
-
-export default memo( CycleSelectControl );

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

@@ -1,22 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const fromPathData24x24 = ( pathData ) => (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d={ pathData } />
-	</SVG>
-);
-
-export const facebook = fromPathData24x24(
-	'M20 3H4c-.6 0-1 .4-1 1v16c0 .5.4 1 1 1h8.6v-7h-2.3v-2.7h2.3v-2c0-2.3 1.4-3.6 3.5-3.6 1 0 1.8.1 2.1.1v2.4h-1.4c-1.1 0-1.3.5-1.3 1.3v1.7h2.7l-.4 2.8h-2.3v7H20c.5 0 1-.4 1-1V4c0-.6-.4-1-1-1z'
-);
-
-export const instagram = fromPathData24x24(
-	'M12 4.622c2.403 0 2.688.01 3.637.052.877.04 1.354.187 1.67.31.42.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.67.043.95.052 1.235.052 3.638s-.01 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.67-.163.42-.358.72-.673 1.036-.315.315-.615.51-1.035.673-.317.123-.794.27-1.67.31-.95.043-1.234.052-3.638.052s-2.688-.01-3.637-.052c-.877-.04-1.354-.187-1.67-.31-.42-.163-.72-.358-1.036-.673-.315-.315-.51-.615-.673-1.035-.123-.317-.27-.794-.31-1.67-.043-.95-.052-1.235-.052-3.638s.01-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.42.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.67-.31.95-.043 1.235-.052 3.638-.052M12 3c-2.444 0-2.75.01-3.71.054s-1.613.196-2.185.418c-.592.23-1.094.538-1.594 1.04-.5.5-.807 1-1.037 1.593-.223.572-.375 1.226-.42 2.184C3.01 9.25 3 9.555 3 12s.01 2.75.054 3.71.196 1.613.418 2.186c.23.592.538 1.094 1.038 1.594s1.002.808 1.594 1.038c.572.222 1.227.375 2.185.418.96.044 1.266.054 3.71.054s2.75-.01 3.71-.054 1.613-.196 2.186-.418c.592-.23 1.094-.538 1.594-1.038s.808-1.002 1.038-1.594c.222-.572.375-1.227.418-2.185.044-.96.054-1.266.054-3.71s-.01-2.75-.054-3.71-.196-1.613-.418-2.186c-.23-.592-.538-1.094-1.038-1.594s-1.002-.808-1.594-1.038c-.572-.222-1.227-.375-2.185-.418C14.75 3.01 14.445 3 12 3zm0 4.378c-2.552 0-4.622 2.07-4.622 4.622s2.07 4.622 4.622 4.622 4.622-2.07 4.622-4.622S14.552 7.378 12 7.378zM12 15c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zm4.804-8.884c-.596 0-1.08.484-1.08 1.08s.484 1.08 1.08 1.08c.596 0 1.08-.484 1.08-1.08s-.483-1.08-1.08-1.08z'
-);
-
-export const empty = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" />
-);

package/src/mobile/focal-point-settings-panel/index.native.js

@@ -1,84 +0,0 @@
-/**
- * External dependencies
- */
-import { SafeAreaView } from 'react-native';
-import { useRoute, useNavigation } from '@react-navigation/native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { memo, useContext, useState, useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import NavBar from '../bottom-sheet/nav-bar';
-import styles from './styles.scss';
-import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
-import FocalPointPicker from '../../focal-point-picker';
-
-const FocalPointSettingsPanelMemo = memo(
-	( {
-		focalPoint,
-		onFocalPointChange,
-		shouldEnableBottomSheetScroll,
-		url,
-	} ) => {
-		const navigation = useNavigation();
-
-		function onButtonPress( action ) {
-			navigation.goBack();
-			if ( action === 'apply' ) {
-				onFocalPointChange( draftFocalPoint );
-			}
-		}
-
-		const [ draftFocalPoint, setDraftFocalPoint ] = useState( focalPoint );
-		function setPosition( coordinates ) {
-			setDraftFocalPoint( ( prevState ) => ( {
-				...prevState,
-				...coordinates,
-			} ) );
-		}
-
-		return (
-			<SafeAreaView style={ styles.safearea }>
-				<NavBar>
-					<NavBar.DismissButton
-						onPress={ () => onButtonPress( 'cancel' ) }
-					/>
-					<NavBar.Heading>
-						{ __( 'Edit focal point' ) }
-					</NavBar.Heading>
-					<NavBar.ApplyButton
-						onPress={ () => onButtonPress( 'apply' ) }
-					/>
-				</NavBar>
-				<FocalPointPicker
-					focalPoint={ draftFocalPoint }
-					onChange={ useCallback( setPosition, [] ) }
-					shouldEnableBottomSheetScroll={
-						shouldEnableBottomSheetScroll
-					}
-					url={ url }
-				/>
-			</SafeAreaView>
-		);
-	}
-);
-
-function FocalPointSettingsPanel( props ) {
-	const route = useRoute();
-	const { shouldEnableBottomSheetScroll } = useContext( BottomSheetContext );
-
-	return (
-		<FocalPointSettingsPanelMemo
-			shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll }
-			{ ...props }
-			{ ...route.params }
-		/>
-	);
-}
-
-export default FocalPointSettingsPanel;

package/src/mobile/focal-point-settings-panel/styles.native.scss

@@ -1,3 +0,0 @@
-.safearea {
-	height: 100%;
-}