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

package/src/button/index.native.js

@@ -1,236 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	StyleSheet,
-	TouchableOpacity,
-	Text,
-	View,
-	Platform,
-} from 'react-native';
-import { LongPressGestureHandler, State } from 'react-native-gesture-handler';
-
-/**
- * WordPress dependencies
- */
-import { Children, cloneElement, useCallback } from '@wordpress/element';
-import {
-	usePreferredColorScheme,
-	usePreferredColorSchemeStyle,
-} from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Tooltip from '../tooltip';
-import Icon from '../icon';
-import style from './style.scss';
-
-const isAndroid = Platform.OS === 'android';
-const marginBottom = isAndroid ? -0.5 : 0;
-const marginLeft = -3;
-
-const styles = StyleSheet.create( {
-	container: {
-		flex: 1,
-		padding: 3,
-		justifyContent: 'center',
-		alignItems: 'center',
-	},
-	buttonInactive: {
-		flex: 1,
-		flexDirection: 'row',
-		justifyContent: 'center',
-		alignItems: 'center',
-	},
-	fixedRatio: {
-		aspectRatio: 1,
-	},
-	buttonActive: {
-		flex: 1,
-		flexDirection: 'row',
-		justifyContent: 'center',
-		alignItems: 'center',
-		borderRadius: 6,
-	},
-	subscriptInactive: {
-		color: '#7b9ab1', // $toolbar-button.
-		fontWeight: 'bold',
-		fontSize: 13,
-		alignSelf: 'flex-end',
-		marginLeft,
-		marginBottom,
-	},
-	subscriptInactiveDark: {
-		color: '#a7aaad', // $gray_20.
-	},
-	subscriptActive: {
-		color: 'white',
-		fontWeight: 'bold',
-		fontSize: 13,
-		alignSelf: 'flex-end',
-		marginLeft,
-		marginBottom,
-	},
-} );
-
-export function Button( props ) {
-	const {
-		children,
-		onClick,
-		onLongPress,
-		disabled,
-		hint,
-		fixedRatio = true,
-		isPressed,
-		'aria-disabled': ariaDisabled,
-		'data-subscript': subscript,
-		testID,
-		icon,
-		iconSize,
-		showTooltip,
-		label,
-		shortcut,
-		tooltipPosition,
-		isActiveStyle,
-		customContainerStyles,
-		hitSlop,
-	} = props;
-	const preferredColorScheme = usePreferredColorScheme();
-
-	const isDisabled = ariaDisabled || disabled;
-
-	const containerStyle = [
-		styles.container,
-		customContainerStyles && { ...customContainerStyles },
-	];
-
-	const buttonActiveColorStyles = usePreferredColorSchemeStyle(
-		style[ 'components-button-light--active' ],
-		style[ 'components-button-dark--active' ]
-	);
-
-	const buttonViewStyle = {
-		opacity: isDisabled ? 0.3 : 1,
-		...( fixedRatio && styles.fixedRatio ),
-		...( isPressed ? styles.buttonActive : styles.buttonInactive ),
-		...( isPressed ? buttonActiveColorStyles : {} ),
-		...( isPressed &&
-			isActiveStyle?.borderRadius && {
-				borderRadius: isActiveStyle.borderRadius,
-			} ),
-		...( isActiveStyle?.backgroundColor && {
-			backgroundColor: isActiveStyle.backgroundColor,
-		} ),
-	};
-
-	const states = [];
-	if ( isPressed ) {
-		states.push( 'selected' );
-	}
-
-	if ( isDisabled ) {
-		states.push( 'disabled' );
-	}
-
-	const subscriptInactive = usePreferredColorSchemeStyle(
-		styles.subscriptInactive,
-		styles.subscriptInactiveDark
-	);
-
-	const newChildren = Children.map( children, ( child ) => {
-		return child
-			? cloneElement( child, {
-					colorScheme: preferredColorScheme,
-					isPressed,
-			  } )
-			: child;
-	} );
-
-	// Should show the tooltip if...
-	const shouldShowTooltip =
-		! isDisabled &&
-		// An explicit tooltip is passed or...
-		( ( showTooltip && label ) ||
-			// There's a shortcut or...
-			shortcut ||
-			// There's a label and...
-			( !! label &&
-				// The children are empty and...
-				( ! children ||
-					( Array.isArray( children ) && ! children.length ) ) &&
-				// The tooltip is not explicitly disabled.
-				false !== showTooltip ) );
-
-	const newIcon = icon
-		? cloneElement( <Icon icon={ icon } size={ iconSize } />, {
-				isPressed,
-		  } )
-		: null;
-
-	const longPressHandler = useCallback(
-		( { nativeEvent } ) => {
-			if ( nativeEvent.state === State.ACTIVE && onLongPress ) {
-				onLongPress();
-			}
-		},
-		[ onLongPress ]
-	);
-
-	const element = (
-		<TouchableOpacity
-			activeOpacity={ 0.7 }
-			accessible
-			accessibilityLabel={ label }
-			accessibilityStates={ states }
-			accessibilityRole="button"
-			accessibilityHint={ hint }
-			onPress={ onClick }
-			style={ containerStyle }
-			disabled={ isDisabled }
-			testID={ testID }
-			hitSlop={ hitSlop }
-		>
-			<LongPressGestureHandler
-				minDurationMs={ 500 }
-				maxDist={ 150 }
-				onHandlerStateChange={ longPressHandler }
-			>
-				<View style={ buttonViewStyle }>
-					<View style={ { flexDirection: 'row' } }>
-						{ newIcon }
-						{ newChildren }
-						{ subscript && (
-							<Text
-								style={
-									isPressed
-										? styles.subscriptActive
-										: subscriptInactive
-								}
-							>
-								{ subscript }
-							</Text>
-						) }
-					</View>
-				</View>
-			</LongPressGestureHandler>
-		</TouchableOpacity>
-	);
-
-	if ( ! shouldShowTooltip ) {
-		return element;
-	}
-
-	return (
-		<Tooltip
-			text={ label }
-			shortcut={ shortcut }
-			position={ tooltipPosition }
-			visible={ showTooltip === true }
-		>
-			{ element }
-		</Tooltip>
-	);
-}
-
-export default Button;

package/src/button/style.native.scss

@@ -1,9 +0,0 @@
-.components-button-light--active {
-	border-color: $light-dim;
-	background-color: $light-dim;
-}
-
-.components-button-dark--active {
-	border-color: $dark-quaternary;
-	background-color: $dark-quaternary;
-}

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

@@ -1,24 +0,0 @@
-/**
- * Internal dependencies
- */
-import ColorCell from '../mobile/bottom-sheet/color-cell';
-
-function ColorControl( {
-	label,
-	onPress,
-	color,
-	withColorIndicator,
-	...props
-} ) {
-	return (
-		<ColorCell
-			label={ label }
-			onPress={ onPress }
-			color={ color }
-			withColorIndicator={ withColorIndicator }
-			{ ...props }
-		/>
-	);
-}
-
-export default ColorControl;

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

@@ -1,80 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Animated } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { Icon, check } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import Gradient from '../mobile/gradient';
-import { colorsUtils } from '../mobile/color-settings/utils';
-
-function SelectedIcon( { opacity } ) {
-	return (
-		<Animated.View style={ [ styles.selected, { opacity } ] }>
-			<View style={ [ styles.outline, styles.selectedOutline ] } />
-			<Icon icon={ check } style={ styles.icon } size={ 24 } />
-		</Animated.View>
-	);
-}
-
-function ColorIndicator( {
-	color,
-	isSelected,
-	withCustomPicker,
-	style,
-	opacity,
-} ) {
-	const { isGradient } = colorsUtils;
-
-	const outlineStyle = usePreferredColorSchemeStyle(
-		styles.outline,
-		styles.outlineDark
-	);
-
-	if ( isGradient( color ) ) {
-		return (
-			<Gradient
-				style={ [ styles.circleOption, style ] }
-				gradientValue={ color }
-			>
-				<View style={ outlineStyle } />
-				{ isSelected && <SelectedIcon opacity={ opacity } /> }
-			</Gradient>
-		);
-	} else if ( withCustomPicker ) {
-		return (
-			<View style={ [ styles.circleOption, style ] }>
-				<View style={ outlineStyle } />
-				{ color.map( ( gradientValue ) => {
-					return (
-						<Gradient
-							gradientValue={ gradientValue }
-							style={ [
-								styles.circleOption,
-								styles.absolute,
-								style,
-							] }
-							key={ gradientValue }
-						/>
-					);
-				} ) }
-				{ isSelected && <SelectedIcon /> }
-			</View>
-		);
-	}
-	return (
-		<View
-			style={ [ styles.circleOption, style, { backgroundColor: color } ] }
-		>
-			<View style={ outlineStyle } />
-			{ isSelected && <SelectedIcon opacity={ opacity } /> }
-		</View>
-	);
-}
-export default ColorIndicator;

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

@@ -1,51 +0,0 @@
-.selected {
-	height: 28px;
-	width: 28px;
-	border-radius: 14px;
-	background-color: $white;
-	justify-content: center;
-	align-items: center;
-}
-
-.circleOption {
-	height: $mobile-color-swatch;
-	width: $mobile-color-swatch;
-	border-radius: 24px;
-	margin-right: 8px;
-	justify-content: center;
-	align-items: center;
-}
-
-.absolute {
-	position: absolute;
-	margin-right: 0;
-	border-width: 0;
-}
-
-.icon {
-	color: $gray-dark;
-}
-
-.outline {
-	border-color: $light-dim;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	border-radius: 24px;
-	border-width: $border-width;
-	position: absolute;
-	z-index: 2;
-}
-
-.outlineDark {
-	border-color: $dark-ultra-dim;
-}
-
-.selectedOutline {
-	top: -$border-width;
-	bottom: -$border-width;
-	left: -$border-width;
-	right: -$border-width;
-	border-radius: 14px;
-}