@wordpress/components 34.0.0 → 35.0.1

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;

package/src/draggable/index.native.js

@@ -1,234 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	Gesture,
-	GestureDetector,
-	LongPressGestureHandler,
-} from 'react-native-gesture-handler';
-import Animated, {
-	useSharedValue,
-	runOnJS,
-	useAnimatedReaction,
-	useAnimatedGestureHandler,
-} from 'react-native-reanimated';
-
-/**
- * WordPress dependencies
- */
-import { createContext, useContext, useRef, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const Context = createContext( {} );
-const { Provider } = Context;
-
-/**
- * Draggable component.
- *
- * @param {Object}            props               Component props.
- * @param {React.JSX.Element} props.children      Children to be rendered.
- * @param {Function}          [props.onDragEnd]   Callback when dragging ends.
- * @param {Function}          [props.onDragOver]  Callback when dragging happens over an element.
- * @param {Function}          [props.onDragStart] Callback when dragging starts.
- * @param {string}            [props.testID]      Id used for querying the pan gesture in tests.
- *
- * @return {React.JSX.Element} The component to be rendered.
- */
-const Draggable = ( {
-	children,
-	onDragEnd,
-	onDragOver,
-	onDragStart,
-	testID,
-} ) => {
-	const isDragging = useSharedValue( false );
-	const isPanActive = useSharedValue( false );
-	const draggingId = useSharedValue( '' );
-	const panGestureRef = useRef();
-	const currentFirstTouchId = useSharedValue( null );
-
-	const initialPosition = {
-		x: useSharedValue( 0 ),
-		y: useSharedValue( 0 ),
-	};
-	const lastPosition = {
-		x: useSharedValue( 0 ),
-		y: useSharedValue( 0 ),
-	};
-
-	useAnimatedReaction(
-		() => isDragging.value,
-		( result, previous ) => {
-			if ( result === previous ) {
-				return;
-			}
-
-			if ( result ) {
-				if ( onDragStart ) {
-					onDragStart( {
-						x: initialPosition.x.value,
-						y: initialPosition.y.value,
-						id: draggingId.value,
-					} );
-				}
-			} else if ( previous !== null && onDragEnd ) {
-				onDragEnd( {
-					x: lastPosition.x.value,
-					y: lastPosition.y.value,
-					id: draggingId.value,
-				} );
-			}
-		}
-	);
-
-	function getFirstTouchEvent( event ) {
-		'worklet';
-
-		return event.allTouches.find(
-			( touch ) => touch.id === currentFirstTouchId.value
-		);
-	}
-
-	const panGesture = Gesture.Pan()
-		.manualActivation( true )
-		.onTouchesDown( ( event ) => {
-			if ( ! currentFirstTouchId.value ) {
-				const firstEvent = event.allTouches[ 0 ];
-				const { x = 0, y = 0 } = firstEvent;
-
-				currentFirstTouchId.value = firstEvent.id;
-
-				initialPosition.x.value = x;
-				initialPosition.y.value = y;
-			}
-		} )
-		.onTouchesMove( ( event, state ) => {
-			if ( ! isPanActive.value && isDragging.value ) {
-				isPanActive.value = true;
-				state.activate();
-			}
-
-			if ( isPanActive.value && isDragging.value ) {
-				const firstEvent = getFirstTouchEvent( event );
-
-				if ( ! firstEvent ) {
-					state.end();
-					return;
-				}
-
-				lastPosition.x.value = firstEvent.x;
-				lastPosition.y.value = firstEvent.y;
-
-				if ( onDragOver ) {
-					onDragOver( firstEvent );
-				}
-			}
-		} )
-		.onTouchesCancelled( ( _event, state ) => {
-			state.end();
-		} )
-		.onEnd( () => {
-			currentFirstTouchId.value = null;
-			isPanActive.value = false;
-			isDragging.value = false;
-		} )
-		.withRef( panGestureRef )
-		.shouldCancelWhenOutside( false )
-		.withTestId( testID );
-
-	const providerValue = useMemo( () => {
-		return { panGestureRef, isDragging, isPanActive, draggingId };
-	}, [
-		// `isDragging`, `isPanActive` and `draggingId` are created using the
-		// `useSharedValue` hook provided by the `react-native-reanimated`, which in
-		// theory should guarantee that the value of these variables remains stable.
-		// ESLint can't pick this up, and that's why they have to be specified as
-		// dependencies for this hook call.
-		isDragging,
-		isPanActive,
-		draggingId,
-	] );
-
-	return (
-		<GestureDetector gesture={ panGesture }>
-			<Animated.View style={ styles.draggable__container }>
-				<Provider value={ providerValue }>{ children }</Provider>
-			</Animated.View>
-		</GestureDetector>
-	);
-};
-
-/**
- * Draggable trigger component.
- *
- * This component acts as the trigger for the dragging functionality.
- *
- * @param {Object}            props                  Component props.
- * @param {React.JSX.Element} props.children         Children to be rendered.
- * @param {*}                 props.id               Identifier passed within the event callbacks.
- * @param {boolean}           [props.enabled]        Enables the long-press gesture.
- * @param {number}            [props.maxDistance]    Maximum distance, that defines how far the finger is allowed to travel during a long press gesture.
- * @param {number}            [props.minDuration]    Minimum time, that a finger must remain pressed on the corresponding view.
- * @param {Function}          [props.onLongPress]    Callback when long-press gesture is triggered over an element.
- * @param {Function}          [props.onLongPressEnd] Callback when long-press gesture ends.
- * @param {string}            [props.testID]         Id used for querying the long-press gesture handler in tests.
- *
- * @return {React.JSX.Element} The component to be rendered.
- */
-const DraggableTrigger = ( {
-	children,
-	enabled = true,
-	id,
-	maxDistance = 1000,
-	minDuration = 500,
-	onLongPress,
-	onLongPressEnd,
-	testID,
-} ) => {
-	const { panGestureRef, isDragging, isPanActive, draggingId } =
-		useContext( Context );
-
-	const gestureHandler = useAnimatedGestureHandler( {
-		onActive: () => {
-			if ( isDragging.value ) {
-				return;
-			}
-
-			draggingId.value = id;
-			isDragging.value = true;
-			if ( onLongPress ) {
-				runOnJS( onLongPress )( id );
-			}
-		},
-		onEnd: () => {
-			if ( ! isPanActive.value ) {
-				isDragging.value = false;
-			}
-
-			if ( onLongPressEnd ) {
-				runOnJS( onLongPressEnd )( id );
-			}
-		},
-	} );
-
-	return (
-		<LongPressGestureHandler
-			enabled={ enabled }
-			minDurationMs={ minDuration }
-			maxDist={ maxDistance }
-			simultaneousHandlers={ panGestureRef }
-			shouldCancelWhenOutside={ false }
-			onGestureEvent={ gestureHandler }
-			testID={ testID }
-		>
-			{ children }
-		</LongPressGestureHandler>
-	);
-};
-
-export { DraggableTrigger };
-export default Draggable;

package/src/draggable/style.native.scss

@@ -1,3 +0,0 @@
-.draggable__container {
-	flex: 1;
-}

package/src/draggable/test/index.native.js

@@ -1,138 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from 'test/helpers';
-import {
-	fireGestureHandler,
-	getByGestureTestId,
-} from 'react-native-gesture-handler/jest-utils';
-import { State } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
-
-/**
- * Internal dependencies
- */
-import Draggable, { DraggableTrigger } from '../../draggable';
-
-// Touch event type constants have been extracted from original source code, as they are not exported in the package.
-// Reference: https://github.com/software-mansion/react-native-gesture-handler/blob/90895e5f38616a6be256fceec6c6a391cd9ad7c7/src/TouchEventType.ts
-const TouchEventType = {
-	UNDETERMINED: 0,
-	TOUCHES_DOWN: 1,
-	TOUCHES_MOVE: 2,
-	TOUCHES_UP: 3,
-	TOUCHES_CANCELLED: 4,
-};
-
-// Reanimated uses "requestAnimationFrame" for notifying shared value updates when using "useAnimatedReaction" hook.
-// For testing, we mock the "requestAnimationFrame" so it calls the callback passed instantly.
-let requestAnimationFrameCopy;
-beforeEach( () => {
-	jest.useFakeTimers();
-	requestAnimationFrameCopy = global.requestAnimationFrame;
-	global.requestAnimationFrame = ( callback ) => callback();
-} );
-afterEach( () => {
-	jest.useRealTimers();
-	global.requestAnimationFrame = requestAnimationFrameCopy;
-} );
-
-describe( 'Draggable', () => {
-	it( 'triggers onLongPress handler', () => {
-		const triggerId = 'trigger-id';
-		const onLongPress = jest.fn();
-		const { getByTestId } = render(
-			<Draggable>
-				<DraggableTrigger
-					id={ triggerId }
-					enabled
-					minDuration={ 500 }
-					onLongPress={ onLongPress }
-					testID="draggableTrigger"
-				>
-					<Animated.View />
-				</DraggableTrigger>
-			</Draggable>
-		);
-
-		const draggableTrigger = getByTestId( 'draggableTrigger' );
-		fireGestureHandler( draggableTrigger, [
-			{ oldState: State.BEGAN, state: State.ACTIVE },
-			{ state: State.ACTIVE },
-		] );
-		jest.runOnlyPendingTimers();
-
-		expect( onLongPress ).toHaveBeenCalledTimes( 1 );
-		expect( onLongPress ).toHaveBeenCalledWith( triggerId );
-	} );
-
-	it( 'triggers dragging handlers', () => {
-		const triggerId = 'trigger-id';
-		const onDragStart = jest.fn();
-		const onDragOver = jest.fn();
-		const onDragEnd = jest.fn();
-		const { getByTestId } = render(
-			<Draggable
-				onDragStart={ onDragStart }
-				onDragOver={ onDragOver }
-				onDragEnd={ onDragEnd }
-				testID="draggable"
-			>
-				<DraggableTrigger id={ triggerId } testID="draggableTrigger">
-					<Animated.View />
-				</DraggableTrigger>
-			</Draggable>
-		);
-
-		const draggableTrigger = getByTestId( 'draggableTrigger' );
-		const draggable = getByGestureTestId( 'draggable' );
-		const touchEventId = 1;
-		const touchEvents = [
-			{ id: touchEventId, x: 0, y: 0 },
-			{ id: touchEventId, x: 100, y: 100 },
-			{ id: touchEventId, x: 50, y: 50 },
-		];
-		fireGestureHandler( draggableTrigger, [
-			{ oldState: State.BEGAN, state: State.ACTIVE },
-			{ state: State.ACTIVE },
-		] );
-		jest.runOnlyPendingTimers();
-		fireGestureHandler( draggable, [
-			// TOUCHES_DOWN event is only received on ACTIVE state, so we have to fire it manually.
-			{ oldState: State.BEGAN, state: State.ACTIVE },
-			{
-				allTouches: [ touchEvents[ 0 ] ],
-				eventType: TouchEventType.TOUCHES_DOWN,
-			},
-			{
-				allTouches: [ touchEvents[ 1 ] ],
-				eventType: TouchEventType.TOUCHES_MOVE,
-			},
-			{
-				allTouches: [ touchEvents[ 2 ] ],
-				eventType: TouchEventType.TOUCHES_MOVE,
-			},
-			{ state: State.END },
-		] );
-		// TODO(jest-console): Fix the warning and remove the expect below.
-		expect( console ).toHaveWarnedWith(
-			'[Reanimated] setGestureState() cannot be used with Jest.'
-		);
-
-		expect( onDragStart ).toHaveBeenCalledTimes( 1 );
-		expect( onDragStart ).toHaveBeenCalledWith( {
-			id: triggerId,
-			x: touchEvents[ 0 ].x,
-			y: touchEvents[ 0 ].y,
-		} );
-		expect( onDragOver ).toHaveBeenCalledTimes( 2 );
-		expect( onDragOver ).toHaveBeenNthCalledWith( 1, touchEvents[ 1 ] );
-		expect( onDragOver ).toHaveBeenNthCalledWith( 2, touchEvents[ 2 ] );
-		expect( onDragEnd ).toHaveBeenCalledTimes( 1 );
-		expect( onDragEnd ).toHaveBeenCalledWith( {
-			id: triggerId,
-			x: touchEvents[ 2 ].x,
-			y: touchEvents[ 2 ].y,
-		} );
-	} );
-} );

package/src/dropdown/index.native.js

@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-class Dropdown extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.toggle = this.toggle.bind( this );
-		this.close = this.close.bind( this );
-
-		this.state = {
-			isOpen: false,
-		};
-	}
-
-	componentWillUnmount() {
-		const { isOpen } = this.state;
-		const { onToggle } = this.props;
-		if ( isOpen && onToggle ) {
-			onToggle( false );
-		}
-	}
-
-	componentDidUpdate( prevProps, prevState ) {
-		const { isOpen } = this.state;
-		const { onToggle } = this.props;
-		if ( prevState.isOpen !== isOpen && onToggle ) {
-			onToggle( isOpen );
-		}
-	}
-
-	toggle() {
-		this.setState( ( state ) => ( {
-			isOpen: ! state.isOpen,
-		} ) );
-	}
-
-	close() {
-		this.setState( { isOpen: false } );
-	}
-
-	render() {
-		const { isOpen } = this.state;
-		const { renderContent, renderToggle } = this.props;
-
-		const args = { isOpen, onToggle: this.toggle, onClose: this.close };
-
-		return (
-			<>
-				{ renderToggle( args ) }
-				{ isOpen && renderContent( args ) }
-			</>
-		);
-	}
-}
-
-export default Dropdown;