@wordpress/components 34.0.0 → 35.0.1

package/src/mobile/picker/index.ios.js

@@ -1,96 +0,0 @@
-/**
- * External dependencies
- */
-import { ActionSheetIOS } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Component, forwardRef, useContext } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { usePreferredColorScheme } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
-
-class Picker extends Component {
-	presentPicker() {
-		const {
-			options,
-			onChange,
-			title,
-			destructiveButtonIndex,
-			disabledButtonIndices,
-			getAnchor,
-			isBottomSheetOpened,
-			closeBottomSheet,
-			onHandleClosingBottomSheet,
-			colorScheme,
-		} = this.props;
-		const labels = options.map( ( { label } ) => label );
-		const fullOptions = [ __( 'Cancel' ) ].concat( labels );
-
-		const buttonTitleColor =
-			colorScheme === 'light'
-				? styles[ 'components-picker__button-title' ].color
-				: styles[ 'components-picker__button-title--dark' ].color;
-
-		ActionSheetIOS.showActionSheetWithOptions(
-			{
-				title,
-				options: fullOptions,
-				cancelButtonIndex: 0,
-				destructiveButtonIndex,
-				disabledButtonIndices,
-				anchor: getAnchor && getAnchor(),
-				tintColor: buttonTitleColor,
-			},
-			( buttonIndex ) => {
-				if ( buttonIndex === 0 ) {
-					return;
-				}
-				const selected = options[ buttonIndex - 1 ];
-
-				if ( selected.requiresModal && isBottomSheetOpened ) {
-					onHandleClosingBottomSheet( () => {
-						onChange( selected.value );
-					} );
-					closeBottomSheet();
-				} else {
-					onChange( selected.value );
-				}
-			}
-		);
-	}
-
-	render() {
-		return null;
-	}
-}
-
-const PickerComponent = forwardRef( ( props, ref ) => {
-	const isBottomSheetOpened = useSelect( ( select ) =>
-		select( 'core/edit-post' ).isEditorSidebarOpened()
-	);
-	const { closeGeneralSidebar } = useDispatch( 'core/edit-post' );
-	const { onHandleClosingBottomSheet } = useContext( BottomSheetContext );
-
-	const colorScheme = usePreferredColorScheme();
-
-	return (
-		<Picker
-			ref={ ref }
-			{ ...props }
-			isBottomSheetOpened={ isBottomSheetOpened }
-			closeBottomSheet={ closeGeneralSidebar }
-			onHandleClosingBottomSheet={ onHandleClosingBottomSheet }
-			colorScheme={ colorScheme }
-		/>
-	);
-} );
-
-export default PickerComponent;

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

@@ -1,29 +0,0 @@
-.components-picker__separator {
-	margin-top: $grid-unit-20 * 0.5;
-	margin-bottom: $grid-unit-20 * 0.5;
-	margin-left: -$grid-unit-20;
-	margin-right: -$grid-unit-20;
-	height: $border-width;
-	background-color: $light-gray-400;
-}
-
-.components-picker__separator--dark {
-	background-color: $gray-70;
-}
-
-.components-picker__button--disabled {
-	opacity: 0.3;
-}
-
-.components-picker__panel {
-	padding-left: 0;
-	padding-right: 0;
-}
-
-.components-picker__button-title {
-	color: $blue-50;
-}
-
-.components-picker__button-title--dark {
-	color: $blue-30;
-}

package/src/mobile/segmented-control/index.native.js

@@ -1,186 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	View,
-	TouchableWithoutFeedback,
-	Text,
-	Platform,
-	Animated,
-	Easing,
-} from 'react-native';
-/**
- * WordPress dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { performLayoutAnimation } from '../layout-animation';
-import styles from './style.scss';
-
-const ANIMATION_DURATION = 200;
-
-const isIOS = Platform.OS === 'ios';
-
-const Segment = ( { isSelected, title, onPress, onLayout, ...props } ) => {
-	const isSelectedIOS = isIOS && isSelected;
-
-	const segmentStyle = [ styles.segment, isIOS && styles.segmentIOS ];
-
-	const textStyle = usePreferredColorSchemeStyle(
-		styles.buttonTextDefault,
-		styles.buttonTextDefaultDark
-	);
-	const selectedTextStyle = usePreferredColorSchemeStyle(
-		styles.buttonTextSelected,
-		styles.buttonTextSelectedDark
-	);
-	const shadowStyle = usePreferredColorSchemeStyle( styles.shadowIOS, {} );
-
-	return (
-		<View style={ isSelectedIOS && shadowStyle }>
-			<TouchableWithoutFeedback onPress={ onPress }>
-				<View style={ segmentStyle } onLayout={ onLayout } { ...props }>
-					<Text
-						style={ [ textStyle, isSelected && selectedTextStyle ] }
-						maxFontSizeMultiplier={ 2 }
-					>
-						{ title }
-					</Text>
-				</View>
-			</TouchableWithoutFeedback>
-		</View>
-	);
-};
-
-const SegmentedControls = ( {
-	segments,
-	segmentHandler,
-	selectedIndex,
-	addonLeft,
-	addonRight,
-} ) => {
-	const selectedSegmentIndex = selectedIndex || 0;
-	const [ activeSegmentIndex, setActiveSegmentIndex ] =
-		useState( selectedSegmentIndex );
-	const [ segmentsDimensions, setSegmentsDimensions ] = useState( {
-		[ activeSegmentIndex ]: { width: 0, height: 0 },
-	} );
-	const [ positionAnimationValue ] = useState( new Animated.Value( 0 ) );
-
-	useEffect( () => {
-		setActiveSegmentIndex( selectedSegmentIndex );
-		segmentHandler( segments[ selectedSegmentIndex ] );
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [] );
-
-	useEffect( () => {
-		positionAnimationValue.setValue(
-			calculateEndValue( activeSegmentIndex )
-		);
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ segmentsDimensions ] );
-
-	const containerStyle = usePreferredColorSchemeStyle(
-		styles.container,
-		styles.containerDark
-	);
-
-	function performSwatchAnimation( index ) {
-		Animated.timing( positionAnimationValue, {
-			toValue: calculateEndValue( index ),
-			duration: ANIMATION_DURATION,
-			easing: Easing.ease,
-			useNativeDriver: false,
-		} ).start();
-	}
-
-	function calculateEndValue( index ) {
-		const { paddingLeft: offset } = isIOS
-			? styles.containerIOS
-			: styles.container;
-		const widths = Object.values( segmentsDimensions ).map(
-			( dimension ) => dimension.width
-		);
-		const widthsDistance = widths.slice( 0, index );
-		const widthsDistanceSum = widthsDistance.reduce(
-			( sum, n ) => sum + n,
-			0
-		);
-
-		const endValue = index === 0 ? 0 : widthsDistanceSum;
-		return endValue + offset;
-	}
-
-	function onHandlePress( segment, index ) {
-		performLayoutAnimation( ANIMATION_DURATION );
-		setActiveSegmentIndex( index );
-		segmentHandler( segment );
-		performSwatchAnimation( index );
-	}
-
-	function segmentOnLayout( event, index ) {
-		const { width, height } = event.nativeEvent.layout;
-
-		setSegmentsDimensions( {
-			...segmentsDimensions,
-			[ index ]: { width, height },
-		} );
-	}
-
-	const selectedStyle = usePreferredColorSchemeStyle(
-		styles.selected,
-		styles.selectedDark
-	);
-
-	const width = segmentsDimensions[ activeSegmentIndex ]?.width;
-	const height = segmentsDimensions[ activeSegmentIndex ]?.height;
-
-	const outlineStyle = [ styles.outline, isIOS && styles.outlineIOS ];
-
-	return (
-		<View style={ styles.row }>
-			<View style={ styles.flex }>{ addonLeft }</View>
-			<View style={ [ containerStyle, isIOS && styles.containerIOS ] }>
-				<Animated.View
-					style={ [
-						{
-							width,
-							left: positionAnimationValue,
-							height,
-						},
-						selectedStyle,
-						outlineStyle,
-					] }
-				/>
-				{ segments.map( ( segment, index ) => {
-					return (
-						<Segment
-							title={ segment }
-							onPress={ () => onHandlePress( segment, index ) }
-							isSelected={ activeSegmentIndex === index }
-							key={ index }
-							onLayout={ ( event ) =>
-								segmentOnLayout( event, index )
-							}
-							accessibilityState={ {
-								selected: activeSegmentIndex === index,
-							} }
-							accessibilityRole="button"
-							accessibilityLabel={ segment }
-							accessibilityHint={ `${ index + 1 } on ${
-								segments.length
-							}` }
-						/>
-					);
-				} ) }
-			</View>
-			<View style={ styles.flex }>{ addonRight }</View>
-		</View>
-	);
-};
-
-export default SegmentedControls;

package/src/mobile/segmented-control/style.native.scss

@@ -1,99 +0,0 @@
-$container-height: 32px;
-$segment-height: 28px;
-$segment-spacing: 2px;
-$border-width-ios: $border-width * 0.5;
-$border-width-android: $border-width;
-$border-radius-ios: 7px;
-
-.segment {
-	border-radius: $segment-height * 0.5;
-	padding: 6px $grid-unit-20;
-	align-items: center;
-	justify-content: center;
-	margin-top: $segment-spacing + $border-width;
-	margin-bottom: $segment-spacing + $border-width;
-	z-index: 2;
-}
-
-.segmentIOS {
-	border-radius: $border-radius-ios;
-	margin-top: $segment-spacing + $border-width-ios;
-	margin-bottom: $segment-spacing + $border-width-ios;
-}
-
-.selected {
-	position: absolute;
-	background-color: $white;
-}
-
-.selectedDark {
-	background-color: $dark-quaternary;
-}
-
-.shadowIOS {
-	box-shadow: 0 0 8px $light-dim;
-	z-index: 2;
-}
-
-.container {
-	min-height: $container-height;
-	background-color: $light-ultra-dim;
-	border-radius: $container-height * 0.5;
-	align-items: center;
-	flex-direction: row;
-	align-self: center;
-	padding-left: $segment-spacing + $border-width;
-	padding-right: $segment-spacing + $border-width;
-}
-
-.containerDark {
-	background-color: $dark-ultra-dim;
-}
-
-.containerIOS {
-	border-radius: $border-radius-ios + 2 * $border-width-ios;
-	padding-left: $segment-spacing + $border-width-ios;
-	padding-right: $segment-spacing + $border-width-ios;
-}
-
-.outline {
-	position: absolute;
-	min-height: $segment-height - 2 * $border-width-ios;
-	border-width: $border-width;
-	border-radius: $container-height * 0.5;
-	border-color: $light-ultra-dim;
-}
-
-.outlineIOS {
-	border-radius: $border-radius-ios;
-	border-width: $border-width-ios;
-}
-
-.buttonTextDefault {
-	font-size: 12px;
-	font-weight: 600;
-	text-align: center;
-	color: $light-secondary;
-}
-
-.buttonTextDefaultDark {
-	color: #e0e0e0;
-}
-
-.buttonTextSelected {
-	color: $light-primary;
-}
-
-.buttonTextSelectedDark {
-	color: #f4f4f4;
-}
-
-.row {
-	flex-direction: row;
-	align-items: center;
-	padding: $grid-unit-20 * 0.5 $grid-unit-20;
-}
-
-.flex {
-	flex: 1;
-}

package/src/mobile/utils/alignments.native.js

@@ -1,78 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { getBlockType } from '@wordpress/blocks';
-
-export const WIDE_ALIGNMENTS = {
-	alignments: {
-		wide: 'wide',
-		full: 'full',
-	},
-	excludeBlocks: [ 'core/heading' ],
-	notInnerContainers: [
-		'core/image',
-		'core/separator',
-		'core/media-text',
-		'core/quote',
-		'core/pullquote',
-	],
-};
-
-export const ALIGNMENT_BREAKPOINTS = {
-	wide: 1024,
-	large: 820,
-	medium: 768,
-	small: 680,
-	mobile: 480,
-};
-
-const isFullWidth = ( align ) => align === WIDE_ALIGNMENTS.alignments.full;
-
-const isWideWidth = ( align ) => align === WIDE_ALIGNMENTS.alignments.wide;
-
-const isWider = ( width, breakpoint ) =>
-	width > ALIGNMENT_BREAKPOINTS[ breakpoint ];
-
-const isContainerRelated = ( blockName ) => {
-	if ( WIDE_ALIGNMENTS.notInnerContainers.includes( blockName ) ) {
-		return false;
-	}
-
-	if ( hasFullWidthSupport( blockName ) ) {
-		return true;
-	}
-
-	return hasParentFullWidthSupport( blockName );
-};
-
-/**
- * Whether the block has support for full width alignment.
- *
- * @param {string} blockName
- * @return {boolean} Return whether the block supports full width alignment.
- */
-function hasFullWidthSupport( blockName ) {
-	const blockType = getBlockType( blockName );
-	const blockAlign = blockType?.supports?.align;
-	return (
-		!! Array.isArray( blockAlign ) &&
-		blockAlign.includes( WIDE_ALIGNMENTS.alignments.full )
-	);
-}
-/**
- * Whether the block's parent has support for full width alignment.
- *
- * @param {string} blockName
- * @return {boolean} Return whether the block's parent supports full width alignment.
- */
-function hasParentFullWidthSupport( blockName ) {
-	const blockType = getBlockType( blockName );
-	return !! blockType?.parent?.some( hasFullWidthSupport );
-}
-
-export const alignmentHelpers = {
-	isFullWidth,
-	isWideWidth,
-	isWider,
-	isContainerRelated,
-};