@wordpress/components 34.0.0 → 35.0.1

package/src/mobile/bottom-sheet-select-control/README.md

@@ -1,97 +0,0 @@
-# BottomSheetSelectControl
-
-`BottomSheetSelectControl` allows users to select an item from a single-option menu just like [`SelectControl`](/packages/components/src/select-control/readme.md),
-However, instead of opening up the selection in a modal, the selection opens up in a BottomSheet.
-
-### Usage
-
-```jsx
-/**
- * WordPress dependencies
- */
-import { BottomSheetSelectControl } from '@wordpress/components';
-import { useState } from 'react';
-
-const options = [
-	{
-		key: 'small',
-		name: 'Small',
-		style: { fontSize: '50%' },
-	},
-	{
-		key: 'normal',
-		name: 'Normal',
-		style: { fontSize: '100%' },
-	},
-	{
-		key: 'large',
-		name: 'Large',
-		style: { fontSize: '200%' },
-	},
-	{
-		key: 'huge',
-		name: 'Huge',
-		style: { fontSize: '300%' },
-	},
-];
-
-function MyCustomSelectControl() {
-	const [ fontSize, setFontSize ] = useState();
-	return (
-		<BottomSheetSelectControl
-			label="Font Size"
-			options={ options }
-			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
-		/>
-	);
-}
-
-function MyControlledCustomSelectControl() {
-	const [ fontSize, setFontSize ] = useState( options[ 0 ] );
-	return (
-		<BottomSheetSelectControl
-			label="Font Size"
-			options={ options }
-			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
-			value={ options.find( ( option ) => option.key === fontSize.key ) }
-		/>
-	);
-}
-```
-
-### Props
-
-#### label
-
-The label for the control.
-
--   Type: `String`
--   Required: Yes
-
-#### options
-
-The options that can be chosen from.
-
--   Type: `Array<{ key: String, name: String, ...rest }>`
--   Required: Yes
-
-#### onChange
-
-Function called with the control's internal state changes. The `selectedItem` property contains the next selected item.
-
--   Type: `Function`
--   Required: No
-
-#### value
-
-Can be used to externally control the value of the control, like in the `MyControlledCustomSelectControl` example above.
-
--   Type: `Object`
--   Required: No
-
-#### icon
-
-The icon for the control.
-
--   Type: `Icon component`
--   Required: No

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -1,124 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useNavigation } from '@react-navigation/native';
-import { useState } from '@wordpress/element';
-import { Icon, chevronRight, check } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import BottomSheet from '../bottom-sheet';
-
-const EMPTY_OPTION = {
-	label: '',
-};
-
-const BottomSheetSelectControl = ( {
-	label,
-	icon,
-	options: items,
-	onChange,
-	value: selectedValue,
-	disabled,
-} ) => {
-	const [ showSubSheet, setShowSubSheet ] = useState( false );
-	const navigation = useNavigation();
-
-	const onChangeValue = ( value ) => {
-		return () => {
-			goBack();
-			onChange( value );
-		};
-	};
-
-	const selectedOption =
-		items.find( ( option ) => option.value === selectedValue ) ??
-		EMPTY_OPTION;
-
-	const goBack = () => {
-		setShowSubSheet( false );
-		navigation.goBack();
-	};
-
-	const openSubSheet = () => {
-		navigation.navigate( BottomSheet.SubSheet.screenName );
-		setShowSubSheet( true );
-	};
-
-	return (
-		<BottomSheet.SubSheet
-			navigationButton={
-				<BottomSheet.Cell
-					label={ label }
-					separatorType="none"
-					icon={ icon }
-					value={ selectedOption.label }
-					onPress={ openSubSheet }
-					accessibilityRole="button"
-					accessibilityLabel={ sprintf(
-						// translators:  1: Select control button label e.g. "Button width". 2: Select control option value e.g: "Auto, 25%".
-						__( '%1$s. Currently selected: %2$s' ),
-						label,
-						selectedOption.label
-					) }
-					accessibilityHint={ sprintf(
-						// translators: %s: Select control button label e.g. "Button width"
-						__( 'Navigates to select %s' ),
-						label
-					) }
-					disabled={ disabled }
-				>
-					{ disabled ? null : <Icon icon={ chevronRight } /> }
-				</BottomSheet.Cell>
-			}
-			showSheet={ showSubSheet }
-		>
-			<>
-				<BottomSheet.NavBar>
-					<BottomSheet.NavBar.BackButton onPress={ goBack } />
-					<BottomSheet.NavBar.Heading>
-						{ label }
-					</BottomSheet.NavBar.Heading>
-				</BottomSheet.NavBar>
-				<View style={ styles.selectControl }>
-					{ items.map( ( item, index ) => (
-						<BottomSheet.Cell
-							customActionButton
-							separatorType="none"
-							label={ item.label }
-							icon={ item.icon }
-							onPress={ onChangeValue( item.value ) }
-							leftAlign
-							key={ index }
-							accessibilityRole="button"
-							accessibilityLabel={
-								item.value === selectedValue
-									? sprintf(
-											// translators: %s: The selected option.
-											__( 'Selected: %s' ),
-											item.label
-									  )
-									: item.label
-							}
-							accessibilityHint={ __( 'Double tap to select' ) }
-						>
-							{ item.value === selectedValue && (
-								<Icon icon={ check }></Icon>
-							) }
-						</BottomSheet.Cell>
-					) ) }
-				</View>
-			</>
-		</BottomSheet.SubSheet>
-	);
-};
-
-export default BottomSheetSelectControl;

package/src/mobile/bottom-sheet-select-control/style.native.scss

@@ -1,3 +0,0 @@
-.selectControl {
-	padding: 0 $block-edge-to-content;
-}

package/src/mobile/bottom-sheet-text-control/README.md

@@ -1,98 +0,0 @@
-# BottomSheetTextControl
-
-`BottomSheetTextControl` allows users to enter and edit text, similar to [`TextControl`](/packages/components/src/text-control/README.md).
-
-`BottomSheetTextControl`'s main difference from `TextControl` is that it utilizes [`BottomSheetSubSheet`](/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md). A user will tap to open a subsheet where they can enter their text into an editor. This is useful for cases where a larger text area is warranted for user input.
-
-### Usage
-
-```jsx
-// This is a paraphrased example from the image block's edit.native.js file
-import {
-	BottomSheetSelectControl,
-	FooterMessageLink,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-const MyTextControl = () => {
-	const {
-		attributes: { alt },
-	} = this.props;
-
-	const updateAlt = ( newAlt ) => {
-		this.props.setAttributes( { alt: newAlt } );
-	};
-
-	return (
-		<PanelBody>
-			<BottomSheetTextControl
-				initialValue={ alt }
-				onChange={ updateAlt }
-				placeholder={ __( 'Generic placeholder text' ) }
-				label={ __( 'Generic label' ) }
-				icon={ textColor }
-				footerNote={
-					<>
-						{ __( 'A footer note to add to the component! ' ) }
-						<FooterMessageLink
-							href={ 'https://wordpress.org/' }
-							value={ __( 'Visit WordPress.org' ) }
-						/>
-					</>
-				}
-			/>
-		</PanelBody>
-	);
-};
-```
-
-### Props
-
-#### initialValue
-
-The initial value of the input.
-
--   Type: `String`
--   Required: Yes
-
-#### onChange
-
-A function that receives the value that's input into the text editor.
-
--   Type: `Function`
--   Required: Yes
-
-#### placeholder
-
-The placeholder text that will display in the component's cell and subsheet when there is no set value.
-
--   Type: `String`
--   Required: No
-
-### cellPlaceholder
-
-The placeholder text that will display in the component's cell when there is no set value. The `cellPlaceholder` will override the more generic placeholder prop when set, enabling the placeholders in the component's cell and subsheet to be different if desired.
-
--   Type: `String`
--   Required: No
-
-#### label
-
-The label for the control. The label will appear in the header area of the subsheet and is necessary for navigation.
-
--   Type: `String`
--   Required: Yes
-
-#### icon
-
-The icon to display alongside the control.
-
--   Type: `String`
--   Required: No
-
-#### footerNote
-
-An optional note to display in the component's footer area.
-
--   Type: `String`
--   Required: No

package/src/mobile/bottom-sheet-text-control/index.native.js

@@ -1,104 +0,0 @@
-/**
- * External dependencies
- */
-import { TextInput } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import BottomSheet from '../bottom-sheet';
-import PanelBody from '../../panel/body';
-import FooterMessageControl from '../../footer-message-control';
-
-const BottomSheetTextControl = ( {
-	initialValue,
-	onChange,
-	placeholder,
-	label,
-	icon,
-	footerNote,
-	cellPlaceholder,
-	disabled,
-} ) => {
-	const [ showSubSheet, setShowSubSheet ] = useState( false );
-	const navigation = useNavigation();
-
-	const goBack = () => {
-		setShowSubSheet( false );
-		navigation.goBack();
-	};
-
-	const openSubSheet = () => {
-		navigation.navigate( BottomSheet.SubSheet.screenName );
-		setShowSubSheet( true );
-	};
-
-	const horizontalBorderStyle = usePreferredColorSchemeStyle(
-		styles.horizontalBorder,
-		styles.horizontalBorderDark
-	);
-
-	const textEditorStyle = usePreferredColorSchemeStyle(
-		styles.textEditor,
-		styles.textEditorDark
-	);
-
-	return (
-		<BottomSheet.SubSheet
-			navigationButton={
-				<BottomSheet.Cell
-					icon={ icon }
-					label={ label }
-					onPress={ openSubSheet }
-					value={ initialValue || '' }
-					placeholder={ cellPlaceholder || placeholder || '' }
-					disabled={ disabled }
-				>
-					{ disabled ? null : <Icon icon={ chevronRight } /> }
-				</BottomSheet.Cell>
-			}
-			showSheet={ showSubSheet }
-		>
-			<>
-				<BottomSheet.NavBar>
-					<BottomSheet.NavBar.BackButton onPress={ goBack } />
-					<BottomSheet.NavBar.Heading>
-						{ label }
-					</BottomSheet.NavBar.Heading>
-				</BottomSheet.NavBar>
-				<PanelBody style={ horizontalBorderStyle }>
-					<TextInput
-						label={ label }
-						onChangeText={ ( text ) => onChange( text ) }
-						defaultValue={ initialValue }
-						multiline
-						placeholder={ placeholder }
-						placeholderTextColor="#87a6bc"
-						style={ textEditorStyle }
-						textAlignVertical="top"
-					/>
-				</PanelBody>
-			</>
-
-			{ footerNote && (
-				<PanelBody style={ styles.textFooternote }>
-					<FooterMessageControl
-						label={ footerNote }
-						textAlign="left"
-					/>
-				</PanelBody>
-			) }
-		</BottomSheet.SubSheet>
-	);
-};
-
-export default BottomSheetTextControl;

package/src/mobile/bottom-sheet-text-control/styles.scss

@@ -1,25 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-.textEditor {
-	padding: 14px 0;
-	height: 80px;
-}
-
-.textEditorDark {
-	color: $white;
-}
-
-.textFooternote {
-	padding: 0 16px 24px;
-}
-
-.horizontalBorder {
-	border-top-width: $border-width;
-	border-bottom-width: $border-width;
-	border-color: $light-gray-400;
-}
-
-.horizontalBorderDark {
-	border-color: $gray-70;
-}

package/src/mobile/clipboard/index.native.js

@@ -1,18 +0,0 @@
-const createClipboard = () => {
-	let currentClipboard;
-
-	const setClipboard = ( clipboard ) => {
-		currentClipboard = clipboard;
-	};
-
-	const getClipboard = () => currentClipboard;
-
-	return {
-		setClipboard,
-		getClipboard,
-	};
-};
-
-const clipboard = createClipboard();
-
-export const { setClipboard, getClipboard } = clipboard;

package/src/mobile/color-settings/gradient-picker-screen.native.js

@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-import { useNavigation, useRoute } from '@react-navigation/native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import CustomGradientPicker from '../../custom-gradient-picker';
-import NavBar from '../bottom-sheet/nav-bar';
-
-const GradientPickerScreen = () => {
-	const navigation = useNavigation();
-	const route = useRoute();
-	const { setColor, currentValue, isGradientColor } = route.params;
-	return (
-		<View>
-			<NavBar>
-				<NavBar.BackButton onPress={ navigation.goBack } />
-				<NavBar.Heading>{ __( 'Customize Gradient' ) }</NavBar.Heading>
-			</NavBar>
-			<CustomGradientPicker
-				setColor={ setColor }
-				currentValue={ currentValue }
-				isGradientColor={ isGradientColor }
-			/>
-		</View>
-	);
-};
-
-export default GradientPickerScreen;

package/src/mobile/color-settings/index.native.js

@@ -1,88 +0,0 @@
-/**
- * External dependencies
- */
-import { useRoute } from '@react-navigation/native';
-
-/**
- * WordPress dependencies
- */
-import { memo, useEffect, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import PickerScreen from './picker-screen';
-import GradientPickerScreen from './gradient-picker-screen';
-import PaletteScreen from './palette.screen';
-import BottomSheet from '../bottom-sheet';
-import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
-
-import { colorsUtils } from './utils';
-
-const ColorSettingsMemo = memo(
-	( {
-		defaultSettings,
-		onHandleClosingBottomSheet,
-		shouldEnableBottomSheetMaxHeight,
-		onColorChange,
-		colorValue,
-		gradientValue,
-		onGradientChange,
-		onColorCleared,
-		label,
-		hideNavigation,
-	} ) => {
-		useEffect( () => {
-			shouldEnableBottomSheetMaxHeight( true );
-			onHandleClosingBottomSheet( null );
-			// See https://github.com/WordPress/gutenberg/pull/41166
-		}, [] );
-		return (
-			<BottomSheet.NavigationContainer>
-				<BottomSheet.NavigationScreen
-					name={ colorsUtils.screens.palette }
-					initialParams={ {
-						defaultSettings,
-						onColorChange,
-						colorValue,
-						gradientValue,
-						onGradientChange,
-						onColorCleared,
-						label,
-						hideNavigation,
-					} }
-				>
-					<PaletteScreen />
-				</BottomSheet.NavigationScreen>
-				<BottomSheet.NavigationScreen
-					name={ colorsUtils.screens.picker }
-				>
-					<PickerScreen />
-				</BottomSheet.NavigationScreen>
-				<BottomSheet.NavigationScreen
-					name={ colorsUtils.screens.gradientPicker }
-				>
-					<GradientPickerScreen />
-				</BottomSheet.NavigationScreen>
-			</BottomSheet.NavigationContainer>
-		);
-	}
-);
-function ColorSettings( props ) {
-	const route = useRoute();
-	const { onHandleClosingBottomSheet, shouldEnableBottomSheetMaxHeight } =
-		useContext( BottomSheetContext );
-
-	return (
-		<ColorSettingsMemo
-			onHandleClosingBottomSheet={ onHandleClosingBottomSheet }
-			shouldEnableBottomSheetMaxHeight={
-				shouldEnableBottomSheetMaxHeight
-			}
-			{ ...props }
-			{ ...route.params }
-		/>
-	);
-}
-
-export default ColorSettings;