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

package/src/color-palette/index.native.js

@@ -1,360 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	ScrollView,
-	TouchableWithoutFeedback,
-	View,
-	Animated,
-	Easing,
-	Dimensions,
-	Platform,
-	Text,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useRef, useEffect } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import ColorIndicator from '../color-indicator';
-import { colorsUtils } from '../mobile/color-settings/utils';
-
-const ANIMATION_DURATION = 200;
-
-let contentWidth = 0;
-let scrollPosition = 0;
-let customIndicatorWidth = 0;
-
-function ColorPalette( {
-	enableCustomColor = false,
-	setColor,
-	activeColor,
-	isGradientColor,
-	defaultSettings,
-	currentSegment,
-	onCustomPress,
-	shouldEnableBottomSheetScroll,
-	shouldShowCustomIndicatorOption = true,
-	shouldShowCustomLabel = true,
-	shouldShowCustomVerticalSeparator = true,
-	customColorIndicatorStyles,
-	customIndicatorWrapperStyles,
-	label,
-} ) {
-	const customSwatchGradients = [
-		'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',
-		'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',
-		'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',
-	];
-
-	const scrollViewRef = useRef();
-	const isIOS = Platform.OS === 'ios';
-
-	const isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];
-
-	const scale = useRef( new Animated.Value( 1 ) ).current;
-	const opacity = useRef( new Animated.Value( 1 ) ).current;
-	const delayedScrollRef = useRef();
-
-	const mergedColors = [
-		...new Set(
-			( defaultSettings.colors ?? [] ).map( ( { color } ) => color )
-		),
-	];
-	const mergedGradients = [
-		...new Set(
-			( defaultSettings.gradients ?? [] ).map(
-				( { gradient } ) => gradient
-			)
-		),
-	];
-	const allAvailableColors = [
-		...new Set(
-			( defaultSettings.allColors ?? [] ).map( ( { color } ) => color )
-		),
-	];
-	const allAvailableGradients = [
-		...new Set(
-			( defaultSettings.allGradients ?? [] ).map(
-				( { gradient } ) => gradient
-			)
-		),
-	];
-
-	const colors = isGradientSegment ? mergedGradients : mergedColors;
-	const allColors = isGradientSegment
-		? allAvailableGradients
-		: allAvailableColors;
-
-	const customIndicatorColor = isGradientSegment
-		? activeColor
-		: customSwatchGradients;
-	const isCustomGradientColor = isGradientColor && isSelectedCustom();
-	const shouldShowCustomIndicator =
-		enableCustomColor &&
-		shouldShowCustomIndicatorOption &&
-		( ! isGradientSegment || isCustomGradientColor );
-
-	const accessibilityHint = isGradientSegment
-		? __( 'Navigates to customize the gradient' )
-		: __( 'Navigates to custom color picker' );
-	const customText = __( 'Custom' );
-
-	useEffect( () => {
-		if ( scrollViewRef.current ) {
-			if ( isSelectedCustom() ) {
-				scrollToEndWithDelay();
-			} else {
-				scrollViewRef.current.scrollTo( { x: 0, y: 0 } );
-			}
-		}
-		// Not adding additional dependencies until the component can be refactored and updated safely.
-		// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.
-	}, [ currentSegment ] );
-
-	function isSelectedCustom() {
-		const isWithinColors =
-			activeColor && allColors?.includes( activeColor );
-		if ( enableCustomColor && activeColor ) {
-			if ( isGradientSegment ) {
-				return isGradientColor && ! isWithinColors;
-			}
-			return ! isGradientColor && ! isWithinColors;
-		}
-		return false;
-	}
-
-	function isSelected( color ) {
-		return ! isSelectedCustom() && activeColor === color;
-	}
-
-	function timingAnimation( property, toValue ) {
-		return Animated.timing( property, {
-			toValue,
-			duration: ANIMATION_DURATION,
-			easing: Easing.ease,
-			useNativeDriver: true,
-		} );
-	}
-
-	function performAnimation( color ) {
-		if ( ! isSelected( color ) ) {
-			opacity.setValue( 0 );
-		}
-
-		Animated.parallel( [
-			timingAnimation( scale, 2 ),
-			timingAnimation( opacity, 1 ),
-		] ).start( () => {
-			opacity.setValue( 1 );
-			scale.setValue( 1 );
-		} );
-	}
-
-	const scaleInterpolation = scale.interpolate( {
-		inputRange: [ 1, 1.5, 2 ],
-		outputRange: [ 1, 0.7, 1 ],
-	} );
-
-	function deselectCustomGradient() {
-		const { width } = Dimensions.get( 'window' );
-		const isVisible =
-			contentWidth - scrollPosition - customIndicatorWidth < width;
-
-		if ( isCustomGradientColor ) {
-			if ( ! isIOS ) {
-				// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.
-				// https://github.com/facebook/react-native/issues/27504
-				// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.
-				if (
-					isCustomGradientColor &&
-					isVisible &&
-					scrollViewRef.current
-				) {
-					scrollViewRef.current.scrollTo( {
-						x: scrollPosition - customIndicatorWidth,
-					} );
-				}
-			}
-		}
-	}
-
-	function getColorGradientName( value ) {
-		const fallbackName = sprintf(
-			/* translators: %s: the hex color value */
-			__( 'Unlabeled color. %s' ),
-			value
-		);
-		const foundColorName = isGradientSegment
-			? defaultSettings.gradients?.find(
-					( gradient ) => gradient.gradient === value
-			  )
-			: defaultSettings.allColors?.find(
-					( color ) => color.color === value
-			  );
-		return foundColorName ? foundColorName?.name : fallbackName;
-	}
-
-	function onColorPress( color ) {
-		deselectCustomGradient();
-		performAnimation( color );
-		setColor( color );
-	}
-
-	function onContentSizeChange( width ) {
-		contentWidth = width;
-		if ( isSelectedCustom() && scrollViewRef.current ) {
-			scrollToEndWithDelay();
-		}
-	}
-
-	function scrollToEndWithDelay() {
-		delayedScrollRef.current = setTimeout( () => {
-			scrollViewRef?.current.scrollToEnd();
-		}, ANIMATION_DURATION );
-		return () => {
-			clearTimeout( delayedScrollRef.current );
-		};
-	}
-
-	function onCustomIndicatorLayout( { nativeEvent } ) {
-		const { width } = nativeEvent.layout;
-		if ( width !== customIndicatorWidth ) {
-			customIndicatorWidth = width;
-		}
-	}
-
-	function onScroll( { nativeEvent } ) {
-		scrollPosition = nativeEvent.contentOffset.x;
-	}
-
-	const verticalSeparatorStyle = usePreferredColorSchemeStyle(
-		styles.verticalSeparator,
-		styles.verticalSeparatorDark
-	);
-
-	const customTextStyle = usePreferredColorSchemeStyle(
-		[ styles.customText, ! isIOS && styles.customTextAndroid ],
-		styles.customTextDark
-	);
-
-	const customIndicatorWrapperStyle = [
-		styles.customIndicatorWrapper,
-		customIndicatorWrapperStyles,
-	];
-
-	return (
-		<>
-			{ label && (
-				<Text accessibilityRole="header" style={ styles.headerText }>
-					{ label }
-				</Text>
-			) }
-
-			<ScrollView
-				contentContainerStyle={ styles.contentContainer }
-				horizontal
-				showsHorizontalScrollIndicator={ false }
-				keyboardShouldPersistTaps="always"
-				disableScrollViewPanResponder
-				scrollEventThrottle={ 16 }
-				onScroll={ onScroll }
-				onContentSizeChange={ onContentSizeChange }
-				onScrollBeginDrag={ () =>
-					shouldEnableBottomSheetScroll( false )
-				}
-				onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
-				ref={ scrollViewRef }
-				testID={ `color-palette${ label ? '-' + label : '' }` }
-			>
-				{ colors.map( ( color ) => {
-					const scaleValue = isSelected( color )
-						? scaleInterpolation
-						: 1;
-					const colorName = getColorGradientName( color );
-
-					return (
-						<View key={ `${ color }-${ isSelected( color ) }` }>
-							<TouchableWithoutFeedback
-								onPress={ () => onColorPress( color ) }
-								accessibilityRole="button"
-								accessibilityState={ {
-									selected: isSelected( color ),
-								} }
-								accessibilityHint={ color }
-								accessibilityLabel={ colorName }
-								testID={ color }
-							>
-								<Animated.View
-									style={ {
-										transform: [
-											{
-												scale: scaleValue,
-											},
-										],
-									} }
-								>
-									<ColorIndicator
-										color={ color }
-										isSelected={ isSelected( color ) }
-										opacity={ opacity }
-										style={ [
-											styles.colorIndicator,
-											customColorIndicatorStyles,
-										] }
-									/>
-								</Animated.View>
-							</TouchableWithoutFeedback>
-						</View>
-					);
-				} ) }
-				{ shouldShowCustomIndicator && (
-					<View
-						style={ customIndicatorWrapperStyle }
-						onLayout={ onCustomIndicatorLayout }
-					>
-						{ shouldShowCustomVerticalSeparator && (
-							<View style={ verticalSeparatorStyle } />
-						) }
-						<TouchableWithoutFeedback
-							onPress={ onCustomPress }
-							accessibilityRole="button"
-							accessibilityState={ {
-								selected: isSelectedCustom(),
-							} }
-							accessibilityHint={ accessibilityHint }
-						>
-							<View style={ customIndicatorWrapperStyle }>
-								<ColorIndicator
-									withCustomPicker={ ! isGradientSegment }
-									color={ customIndicatorColor }
-									isSelected={ isSelectedCustom() }
-									style={ [
-										styles.colorIndicator,
-										customColorIndicatorStyles,
-									] }
-								/>
-								{ shouldShowCustomLabel && (
-									<Text style={ customTextStyle }>
-										{ isIOS
-											? customText
-											: customText.toUpperCase() }
-									</Text>
-								) }
-							</View>
-						</TouchableWithoutFeedback>
-					</View>
-				) }
-			</ScrollView>
-		</>
-	);
-}
-
-export default ColorPalette;

package/src/color-palette/style.native.scss

@@ -1,49 +0,0 @@
-.contentContainer {
-	flex-direction: row;
-	padding: 0 $grid-unit-20;
-}
-
-.verticalSeparator {
-	border-width: $border-width * 0.5;
-	border-color: $light-gray-400;
-	height: 38px;
-	margin-right: $grid-unit-20 * 0.5;
-	align-self: center;
-}
-
-.verticalSeparatorDark {
-	border-color: $gray-70;
-}
-
-.colorIndicator {
-	margin-top: 12px;
-	margin-bottom: 12px;
-}
-
-.customIndicatorWrapper {
-	flex-direction: row;
-	align-items: center;
-}
-
-.customText {
-	font-size: 16px;
-	color: $gray-dark;
-}
-
-.customTextDark {
-	color: $white;
-}
-
-.customTextAndroid {
-	letter-spacing: 1.25;
-	font-weight: 500;
-}
-
-.headerText {
-	color: $gray;
-	padding-top: 8;
-	font-size: 14;
-	font-weight: 500;
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-20;
-}

package/src/color-picker/hsv-color-picker.native.js

@@ -1,88 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Dimensions } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import HuePicker from './hue-picker';
-import SaturationValuePicker from './saturation-picker';
-import styles from './style.native.scss';
-
-const HsvColorPicker = ( props ) => {
-	const maxWidth = Dimensions.get( 'window' ).width - 32;
-	const satValPickerRef = useRef( null );
-
-	const {
-		containerStyle = {},
-		currentColor,
-		huePickerContainerStyle = {},
-		huePickerBorderRadius = 0,
-		huePickerHue = 0,
-		huePickerBarWidth = maxWidth,
-		huePickerBarHeight = 12,
-		huePickerSliderSize = 24,
-		onHuePickerDragStart,
-		onHuePickerDragMove,
-		onHuePickerDragEnd,
-		onHuePickerDragTerminate,
-		onHuePickerPress,
-		satValPickerContainerStyle = {},
-		satValPickerBorderRadius = 0,
-		satValPickerSize = { width: maxWidth, height: 200 },
-		satValPickerSliderSize = 24,
-		satValPickerHue = 0,
-		satValPickerSaturation = 1,
-		satValPickerValue = 1,
-		onSatValPickerDragStart,
-		onSatValPickerDragMove,
-		onSatValPickerDragEnd,
-		onSatValPickerDragTerminate,
-		onSatValPickerPress,
-	} = props;
-
-	return (
-		<View
-			style={ [ styles[ 'hsv-container' ], containerStyle ] }
-			testID="hsv-color-picker"
-		>
-			<SaturationValuePicker
-				containerStyle={ satValPickerContainerStyle }
-				currentColor={ currentColor }
-				borderRadius={ satValPickerBorderRadius }
-				size={ satValPickerSize }
-				sliderSize={ satValPickerSliderSize }
-				hue={ satValPickerHue }
-				saturation={ satValPickerSaturation }
-				value={ satValPickerValue }
-				onDragStart={ onSatValPickerDragStart }
-				onDragMove={ onSatValPickerDragMove }
-				onDragEnd={ onSatValPickerDragEnd }
-				onDragTerminate={ onSatValPickerDragTerminate }
-				onPress={ onSatValPickerPress }
-				ref={ satValPickerRef }
-			/>
-			<HuePicker
-				containerStyle={ huePickerContainerStyle }
-				borderRadius={ huePickerBorderRadius }
-				hue={ huePickerHue }
-				barWidth={ huePickerBarWidth }
-				barHeight={ huePickerBarHeight }
-				sliderSize={ huePickerSliderSize }
-				onDragStart={ onHuePickerDragStart }
-				onDragMove={ onHuePickerDragMove }
-				onDragEnd={ onHuePickerDragEnd }
-				onDragTerminate={ onHuePickerDragTerminate }
-				onPress={ onHuePickerPress }
-			/>
-		</View>
-	);
-};
-
-export default HsvColorPicker;

package/src/color-picker/hue-picker.native.js

@@ -1,198 +0,0 @@
-/**
- * External dependencies
- */
-import { Animated, View, PanResponder } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-
-/**
- * WordPress dependencies
- */
-import React, { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-export default class HuePicker extends Component {
-	constructor( props ) {
-		super( props );
-		this.hueColors = [
-			'#ff0000',
-			'#ffff00',
-			'#00ff00',
-			'#00ffff',
-			'#0000ff',
-			'#ff00ff',
-			'#ff0000',
-		];
-		this.sliderX = new Animated.Value(
-			( props.barHeight * props.hue ) / 360
-		);
-		this.panResponder = PanResponder.create( {
-			onStartShouldSetPanResponder: () => true,
-			onStartShouldSetPanResponderCapture: () => true,
-			onMoveShouldSetPanResponder: () => true,
-			onMoveShouldSetPanResponderCapture: () => true,
-			onPanResponderGrant: ( evt, gestureState ) => {
-				const { onPress } = this.props;
-				this.dragStartValue = this.computeHueValuePress( evt );
-
-				if ( onPress ) {
-					onPress( {
-						hue: this.computeHueValuePress( evt ),
-						nativeEvent: evt.nativeEvent,
-					} );
-				}
-
-				this.fireDragEvent( 'onDragStart', gestureState );
-			},
-			onPanResponderMove: ( evt, gestureState ) => {
-				this.fireDragEvent( 'onDragMove', gestureState );
-			},
-			onPanResponderTerminationRequest: () => true,
-			onPanResponderRelease: ( evt, gestureState ) => {
-				this.fireDragEvent( 'onDragEnd', gestureState );
-			},
-			onPanResponderTerminate: ( evt, gestureState ) => {
-				this.fireDragEvent( 'onDragTerminate', gestureState );
-			},
-			onShouldBlockNativeResponder: () => true,
-		} );
-	}
-
-	componentDidUpdate( prevProps ) {
-		const { hue = 0, barWidth = 200, sliderSize = 24 } = this.props;
-		const borderWidth = sliderSize / 10;
-		if ( prevProps.hue !== hue || prevProps.barWidth !== barWidth ) {
-			this.sliderX.setValue(
-				( ( barWidth - sliderSize + borderWidth ) * hue ) / 360
-			);
-		}
-	}
-
-	normalizeValue( value ) {
-		if ( value < 0 ) {
-			return 0;
-		}
-		if ( value > 1 ) {
-			return 1;
-		}
-		return value;
-	}
-
-	getContainerStyle() {
-		const {
-			sliderSize = 24,
-			barHeight = 12,
-			containerStyle = {},
-		} = this.props;
-		const paddingLeft = sliderSize / 2;
-		const paddingTop =
-			sliderSize - barHeight > 0 ? ( sliderSize - barHeight ) / 2 : 0;
-		return [
-			styles[ 'hsv-container' ],
-			containerStyle,
-			{
-				paddingTop,
-				paddingBottom: paddingTop,
-				paddingLeft,
-				paddingRight: paddingLeft,
-			},
-		];
-	}
-
-	computeHueValueDrag( gestureState ) {
-		const { dx } = gestureState;
-		const { barWidth = 200 } = this.props;
-		const { dragStartValue } = this;
-		const diff = dx / barWidth;
-		const updatedHue =
-			this.normalizeValue( dragStartValue / 360 + diff ) * 360;
-		return updatedHue;
-	}
-
-	computeHueValuePress( event ) {
-		const { nativeEvent } = event;
-		const { locationX } = nativeEvent;
-		const { barWidth = 200 } = this.props;
-		const updatedHue = this.normalizeValue( locationX / barWidth ) * 360;
-		return updatedHue;
-	}
-
-	fireDragEvent( eventName, gestureState ) {
-		const { [ eventName ]: event } = this.props;
-		if ( event ) {
-			event( {
-				hue: this.computeHueValueDrag( gestureState ),
-				gestureState,
-			} );
-		}
-	}
-
-	firePressEvent( event ) {
-		const { onPress } = this.props;
-		if ( onPress ) {
-			onPress( {
-				hue: this.computeHueValuePress( event ),
-				nativeEvent: event.nativeEvent,
-			} );
-		}
-	}
-
-	render() {
-		const { hueColors } = this;
-		const {
-			sliderSize = 24,
-			barWidth = 200,
-			barHeight = 12,
-			borderRadius = 0,
-		} = this.props;
-		const borderWidth = sliderSize / 10;
-		return (
-			<View
-				style={ this.getContainerStyle() }
-				{ ...this.panResponder.panHandlers }
-				hitSlop={ {
-					top: 10,
-					bottom: 10,
-					left: 0,
-					right: 0,
-				} }
-			>
-				<LinearGradient
-					colors={ hueColors }
-					style={ {
-						borderRadius,
-					} }
-					start={ { x: 0, y: 0 } }
-					end={ { x: 1, y: 0 } }
-				>
-					<View
-						style={ {
-							width: barWidth,
-							height: barHeight,
-						} }
-					/>
-				</LinearGradient>
-				<Animated.View
-					pointerEvents="none"
-					style={ [
-						styles[ 'hue-slider' ],
-						{
-							width: sliderSize,
-							height: sliderSize,
-							left: ( sliderSize - borderWidth ) / 2,
-							borderRadius: sliderSize / 2,
-							transform: [
-								{
-									translateX: this.sliderX,
-								},
-							],
-						},
-					] }
-				/>
-			</View>
-		);
-	}
-}