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

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

@@ -1,215 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-/**
- * WordPress dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { Icon, check, close } from '@wordpress/icons';
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import HsvColorPicker from './hsv-color-picker.native.js';
-import BottomSheet from '../mobile/bottom-sheet';
-
-extend( [ namesPlugin ] );
-
-function ColorPicker( {
-	shouldEnableBottomSheetScroll,
-	shouldEnableBottomSheetMaxHeight,
-	isBottomSheetContentScrolling,
-	setColor,
-	activeColor,
-	isGradientColor,
-	onNavigationBack,
-	onHandleClosingBottomSheet,
-	onBottomSheetClosed,
-	onHandleHardwareButtonPress,
-	bottomLabelText,
-} ) {
-	const isIOS = Platform.OS === 'ios';
-	const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
-	const {
-		h: initH,
-		s: initS,
-		v: initV,
-	} = ! isGradientColor && activeColor
-		? colord( activeColor ).toHsv()
-		: { h: 0, s: 50, v: 50 };
-	const [ hue, setHue ] = useState( initH );
-	const [ sat, setSaturation ] = useState( initS / 100 );
-	const [ val, setValue ] = useState( initV / 100 );
-	const [ savedColor ] = useState( activeColor );
-
-	const {
-		paddingLeft: spacing,
-		height: pickerHeight,
-		borderRadius,
-	} = styles.picker;
-	const { height: pickerPointerSize } = styles.pickerPointer;
-	const pickerWidth = BottomSheet.getWidth() - 2 * spacing;
-
-	const applyButtonStyle = usePreferredColorSchemeStyle(
-		styles.applyButton,
-		styles.applyButtonDark
-	);
-	const cancelButtonStyle = usePreferredColorSchemeStyle(
-		styles.cancelButton,
-		styles.cancelButtonDark
-	);
-	const colorTextStyle = usePreferredColorSchemeStyle(
-		styles.colorText,
-		styles.colorTextDark
-	);
-	const selectColorTextStyle = usePreferredColorSchemeStyle(
-		styles.selectColorText,
-		styles.selectColorTextDark
-	);
-	const footerStyle = usePreferredColorSchemeStyle(
-		styles.footer,
-		styles.footerDark
-	);
-
-	const combineToHex = ( h = hue, s = sat, v = val ) =>
-		colord( { h, s: s * 100, v: v * 100 } ).toHex();
-
-	const currentColor = combineToHex();
-
-	const updateColor = ( { hue: h, saturation: s, value: v } ) => {
-		if ( h !== undefined ) {
-			setHue( h );
-		}
-		if ( s !== undefined ) {
-			setSaturation( s );
-		}
-		if ( v !== undefined ) {
-			setValue( v );
-		}
-		setColor( combineToHex( h, s, v ) );
-	};
-
-	useEffect( () => {
-		shouldEnableBottomSheetMaxHeight( false );
-		onHandleClosingBottomSheet( () => {
-			if ( savedColor ) {
-				setColor( savedColor );
-			}
-			if ( onBottomSheetClosed ) {
-				onBottomSheetClosed();
-			}
-		} );
-		if ( onHandleHardwareButtonPress ) {
-			onHandleHardwareButtonPress( onButtonPress );
-		}
-		// TODO: Revisit this to discover if there's a good reason for omitting
-		// the hook’s dependencies and running it a single time. Ideally there
-		// may be a way to refactor and obviate the disabled lint rule. If not,
-		// this comment should be replaced by one that explains the reasoning.
-	}, [] );
-
-	function onButtonPress( action ) {
-		onNavigationBack();
-		onHandleClosingBottomSheet( null );
-		shouldEnableBottomSheetMaxHeight( true );
-		setColor( action === 'apply' ? currentColor : savedColor );
-		if ( onBottomSheetClosed ) {
-			onBottomSheetClosed();
-		}
-	}
-
-	return (
-		<>
-			<HsvColorPicker
-				huePickerHue={ hue }
-				currentColor={ currentColor }
-				onHuePickerDragMove={ updateColor }
-				onHuePickerPress={
-					! isBottomSheetContentScrolling && updateColor
-				}
-				satValPickerHue={ hue }
-				satValPickerSaturation={ sat }
-				satValPickerValue={ val }
-				onSatValPickerDragMove={ updateColor }
-				onSatValPickerPress={
-					! isBottomSheetContentScrolling && updateColor
-				}
-				onSatValPickerDragStart={ () => {
-					shouldEnableBottomSheetScroll( false );
-				} }
-				onSatValPickerDragEnd={ () =>
-					shouldEnableBottomSheetScroll( true )
-				}
-				onHuePickerDragStart={ () =>
-					shouldEnableBottomSheetScroll( false )
-				}
-				onHuePickerDragEnd={ () =>
-					shouldEnableBottomSheetScroll( true )
-				}
-				huePickerBarWidth={ pickerWidth }
-				huePickerBarHeight={ pickerPointerSize / 2 }
-				satValPickerSize={ {
-					width: pickerWidth,
-					height: pickerHeight,
-				} }
-				satValPickerSliderSize={ pickerPointerSize * 2 }
-				satValPickerBorderRadius={ borderRadius }
-				huePickerBorderRadius={ borderRadius }
-			/>
-			<View style={ footerStyle }>
-				<TouchableWithoutFeedback
-					onPress={ () => onButtonPress( 'cancel' ) }
-					hitSlop={ hitSlop }
-				>
-					<View>
-						{ isIOS ? (
-							<Text style={ cancelButtonStyle }>
-								{ __( 'Cancel' ) }
-							</Text>
-						) : (
-							<Icon
-								icon={ close }
-								size={ 24 }
-								style={ cancelButtonStyle }
-							/>
-						) }
-					</View>
-				</TouchableWithoutFeedback>
-				{ bottomLabelText ? (
-					<Text style={ selectColorTextStyle }>
-						{ bottomLabelText }
-					</Text>
-				) : (
-					<Text style={ colorTextStyle } selectable>
-						{ currentColor.toUpperCase() }
-					</Text>
-				) }
-				<TouchableWithoutFeedback
-					onPress={ () => onButtonPress( 'apply' ) }
-					hitSlop={ hitSlop }
-				>
-					<View>
-						{ isIOS ? (
-							<Text style={ applyButtonStyle }>
-								{ __( 'Apply' ) }
-							</Text>
-						) : (
-							<Icon
-								icon={ check }
-								size={ 24 }
-								style={ applyButtonStyle }
-							/>
-						) }
-					</View>
-				</TouchableWithoutFeedback>
-			</View>
-		</>
-	);
-}
-
-export { ColorPicker };

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

@@ -1,167 +0,0 @@
-/**
- * External dependencies
- */
-import { View, PanResponder } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { colord } from 'colord';
-
-/**
- * WordPress dependencies
- */
-import React, { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './style.native.scss';
-
-export default class SaturationValuePicker extends Component {
-	constructor( props ) {
-		super( props );
-
-		this.panResponder = PanResponder.create( {
-			onStartShouldSetPanResponder: () => true,
-			onStartShouldSetPanResponderCapture: () => true,
-			onMoveShouldSetPanResponder: () => true,
-			onMoveShouldSetPanResponderCapture: () => true,
-			onPanResponderGrant: ( evt, gestureState ) => {
-				const { onPress } = this.props;
-				const { saturation, value } = this.computeSatValPress( evt );
-				this.dragStartValue = {
-					saturation,
-					value,
-				};
-
-				if ( onPress ) {
-					onPress( {
-						...this.computeSatValPress( 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,
-		} );
-	}
-
-	normalizeValue( value ) {
-		if ( value < 0 ) {
-			return 0;
-		}
-		if ( value > 1 ) {
-			return 1;
-		}
-		return value;
-	}
-
-	computeSatValDrag( gestureState ) {
-		const { dx, dy } = gestureState;
-		const { size } = this.props;
-		const { saturation, value } = this.dragStartValue;
-		const diffx = dx / size.width;
-		const diffy = dy / size.height;
-		return {
-			saturation: this.normalizeValue( saturation + diffx ),
-			value: this.normalizeValue( value - diffy ),
-		};
-	}
-
-	computeSatValPress( event ) {
-		const { nativeEvent } = event;
-		const { locationX, locationY } = nativeEvent;
-		const { size } = this.props;
-		return {
-			saturation: this.normalizeValue( locationX / size.width ),
-			value: 1 - this.normalizeValue( locationY / size.height ),
-		};
-	}
-
-	fireDragEvent( eventName, gestureState ) {
-		const { [ eventName ]: event } = this.props;
-		if ( event ) {
-			event( {
-				...this.computeSatValDrag( gestureState ),
-				gestureState,
-			} );
-		}
-	}
-
-	render() {
-		const {
-			size,
-			sliderSize = 24,
-			hue = 0,
-			value = 1,
-			saturation = 1,
-			containerStyle = {},
-			borderRadius = 0,
-			currentColor,
-		} = this.props;
-
-		return (
-			<View
-				style={ [
-					styles[ 'hsv-container' ],
-					containerStyle,
-					{
-						height: size.height + sliderSize,
-						width: size.width + sliderSize,
-					},
-				] }
-				{ ...this.panResponder.panHandlers }
-			>
-				<LinearGradient
-					style={ [
-						styles[ 'gradient-container' ],
-						{
-							borderRadius,
-						},
-					] }
-					colors={ [
-						'#fff',
-						colord( { h: hue, s: 100, l: 50 } ).toHex(),
-					] }
-					start={ { x: 0, y: 0.5 } }
-					end={ { x: 1, y: 0.5 } }
-				>
-					<LinearGradient colors={ [ 'rgba(0, 0, 0, 0)', '#000' ] }>
-						<View
-							style={ {
-								height: size.height,
-								width: size.width,
-							} }
-						/>
-					</LinearGradient>
-				</LinearGradient>
-				<View
-					pointerEvents="none"
-					style={ [
-						styles[ 'saturation-slider' ],
-						{
-							width: sliderSize,
-							height: sliderSize,
-							borderRadius: sliderSize / 2,
-							borderWidth: sliderSize / 10,
-							backgroundColor: currentColor,
-							transform: [
-								{ translateX: size.width * saturation },
-								{ translateY: size.height * ( 1 - value ) },
-							],
-						},
-					] }
-				/>
-			</View>
-		);
-	}
-}

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

@@ -1,87 +0,0 @@
-.footer {
-	border-top-width: $border-width;
-	border-color: $light-gray-400;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	padding: $grid-unit-20;
-	margin-top: $grid-unit-20;
-	flex-wrap: wrap;
-}
-
-.footerDark {
-	border-color: $gray-70;
-}
-
-.cancelButton {
-	color: #d63638;
-	font-size: 17px;
-}
-
-.cancelButtonDark {
-	color: #f86368;
-}
-
-.applyButton {
-	color: $blue-50;
-	font-size: 17px;
-}
-
-.applyButtonDark {
-	color: $blue-30;
-}
-
-.colorText {
-	font-family: $default-monospace-font;
-	color: $light-primary;
-	font-size: 16px;
-	font-weight: 400;
-}
-
-.colorTextDark {
-	color: $dark-primary;
-}
-
-.selectColorText {
-	text-align: center;
-	color: $gray;
-	font-size: 16px;
-	line-height: 24px;
-}
-
-.selectColorTextDark {
-	color: $dark-primary;
-}
-
-.picker {
-	padding: $grid-unit-20;
-	border-radius: $grid-unit-20 * 0.5;
-	height: 200px;
-}
-
-.pickerPointer {
-	height: 16px;
-}
-
-.hsv-container {
-	justify-content: center;
-	align-items: center;
-}
-
-.gradient-gontainer {
-	overflow: hidden;
-}
-
-.saturation-slider {
-	top: 0;
-	left: 0;
-	position: absolute;
-	border-color: $white;
-}
-
-.hue-slider {
-	position: absolute;
-	background-color: #fff;
-	box-shadow: 0 7px 10px rgba(0, 0, 0, 0.5);
-	z-index: 5;
-}

package/src/custom-gradient-picker/index.native.js

@@ -1,110 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { colorsUtils } from '../mobile/color-settings/utils';
-import { getGradientAstWithDefault } from './utils';
-import { serializeGradient } from './serializer';
-import {
-	DEFAULT_LINEAR_GRADIENT_ANGLE,
-	HORIZONTAL_GRADIENT_ORIENTATION,
-} from './constants';
-import styles from './style.scss';
-import PanelBody from '../panel/body';
-import RadioControl from '../radio-control';
-import RangeControl from '../range-control';
-
-function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
-	const [ gradientOrientation, setGradientOrientation ] = useState(
-		HORIZONTAL_GRADIENT_ORIENTATION
-	);
-
-	const [ currentColor, setCurrentColor ] = useState( currentValue );
-
-	const { getGradientType, gradients, gradientOptions } = colorsUtils;
-	const { gradientAST } = getGradientAstWithDefault( currentColor );
-	const gradientType = getGradientType( currentColor );
-
-	function isLinearGradient( type ) {
-		return type === gradients.linear;
-	}
-
-	function getGradientColor( type ) {
-		const { orientation, ...restGradientAST } = gradientAST;
-
-		if ( orientation ) {
-			setGradientOrientation( orientation );
-		}
-
-		return serializeGradient(
-			isLinearGradient( type )
-				? {
-						...gradientAST,
-						...( gradientAST.orientation
-							? {}
-							: {
-									orientation: gradientOrientation,
-							  } ),
-						type,
-				  }
-				: {
-						...restGradientAST,
-						type,
-				  }
-		);
-	}
-
-	function onGradientTypeChange( type ) {
-		const gradientColor = getGradientColor( type );
-		setCurrentColor( gradientColor );
-		setColor( gradientColor );
-	}
-
-	function setGradientAngle( value ) {
-		const gradientColor = serializeGradient( {
-			...gradientAST,
-			orientation: {
-				type: 'angular',
-				value,
-			},
-		} );
-
-		if ( isGradientColor && gradientColor !== currentColor ) {
-			setCurrentColor( gradientColor );
-			setColor( gradientColor );
-		}
-	}
-
-	function getGradientAngle() {
-		return gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;
-	}
-	return (
-		<>
-			<PanelBody title={ __( 'Gradient Type' ) }>
-				<RadioControl
-					selected={ gradientType }
-					options={ gradientOptions }
-					onChange={ onGradientTypeChange }
-				/>
-			</PanelBody>
-			{ isLinearGradient( gradientType ) && (
-				<PanelBody style={ styles.angleControl }>
-					<RangeControl
-						label={ __( 'Angle' ) }
-						minimumValue={ 0 }
-						maximumValue={ 360 }
-						value={ getGradientAngle() }
-						onChange={ setGradientAngle }
-					/>
-				</PanelBody>
-			) }
-		</>
-	);
-}
-
-export default CustomGradientPicker;

package/src/custom-gradient-picker/style.native.scss

@@ -1,3 +0,0 @@
-.angleControl {
-	padding-top: $grid-unit-20 * 0.5;
-}

package/src/dashicon/index.native.js

@@ -1,18 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import * as dashicons from '../mobile/dashicons';
-
-// A predefined SVG icon is rendered instead of Dashicon because it's not supported in the native version.
-function Dashicon( { icon, ...extraProps } ) {
-	return (
-		<Icon icon={ dashicons[ icon ] || dashicons.empty } { ...extraProps } />
-	);
-}
-
-export default Dashicon;

package/src/disabled/index.native.js

@@ -1,10 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-function Disabled( { children } ) {
-	return <View pointerEvents="none">{ children }</View>;
-}
-
-export default Disabled;