@wordpress/components 34.0.0 → 35.0.1

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>
-		);
-	}
-}

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;
-}