[Mobile] Link picker via fetch

packages/components/src/index.native.js

@@ -73,6 +73,7 @@ export { default as ReadableContentView } from './mobile/readable-content-view';
 export { default as CycleSelectControl } from './mobile/cycle-select-control';
 export { default as Gradient } from './mobile/gradient';
 export { default as ColorSettings } from './mobile/color-settings';
+export { LinkPicker } from './mobile/link-picker';
 export { default as LinkSettings } from './mobile/link-settings';
 export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';

packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js

@@ -12,6 +12,7 @@ import {
 	useState,
 	useContext,
 	useMemo,
+	useCallback,
 	Children,
 	useRef,
 } from '@wordpress/element';
@@ -77,18 +78,33 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) {
 		},
 	};
 
-	const setHeight = ( height, layout ) => {
-		if ( currentHeight !== height && height > 1 ) {
-			if ( animate && layout && currentHeight === 1 ) {
-				setCurrentHeight( height );
-			} else if ( animate ) {
+	const setHeight = useCallback(
+		( height, layout ) => {
+			// The screen is fullHeight or changing from fullScreen to the default mode
+			if (
+				( typeof currentHeight === 'string' &&
+					typeof height !== 'string' ) ||
+				typeof height === 'string'
+			) {
 				performLayoutAnimation( ANIMATION_DURATION );
 				setCurrentHeight( height );
-			} else {
-				setCurrentHeight( height );
+
+				return;
 			}
-		}
-	};
+
+			if ( currentHeight !== height && height > 1 ) {
+				if ( animate && layout && currentHeight === 1 ) {
+					setCurrentHeight( height );
+				} else if ( animate ) {
+					performLayoutAnimation( ANIMATION_DURATION );
+					setCurrentHeight( height );
+				} else {
+					setCurrentHeight( height );
+				}
+			}
+		},
+		[ currentHeight ]
+	);
 
 	const screens = useMemo( () => {
 		return Children.map( children, ( child ) => {
@@ -105,9 +121,16 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) {
 
 	return useMemo( () => {
 		return (
-			<View style={ { height: currentHeight } }>
+			<View
+				style={ {
+					height: currentHeight,
+				} }
+			>
 				<BottomSheetNavigationProvider
-					value={ { setHeight, currentHeight } }
+					value={ {
+						setHeight,
+						currentHeight,
+					} }
 				>
 					{ main ? (
 						<NavigationContainer theme={ _theme }>

packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

@@ -2,9 +2,9 @@
  * External dependencies
  */
 import {
-	useFocusEffect,
 	useIsFocused,
 	useNavigation,
+	useFocusEffect,
 } from '@react-navigation/native';
 import { View } from 'react-native';
 import { debounce } from 'lodash';
@@ -21,18 +21,21 @@ import { useRef, useCallback, useContext, useMemo } from '@wordpress/element';
  */
 import { BottomSheetNavigationContext } from './bottom-sheet-navigation-context';
 
-const BottomSheetNavigationScreen = ( { children } ) => {
+const BottomSheetNavigationScreen = ( { children, fullScreen } ) => {
 	const navigation = useNavigation();
 	const heightRef = useRef( { maxHeight: 0 } );
 	const isFocused = useIsFocused();
 	const {
 		onHandleHardwareButtonPress,
 		shouldEnableBottomSheetMaxHeight,
+		setIsFullScreen,
 	} = useContext( BottomSheetContext );
 
 	const { setHeight } = useContext( BottomSheetNavigationContext );
 
-	const setHeightDebounce = useCallback( debounce( setHeight, 10 ), [] );
+	const setHeightDebounce = useCallback( debounce( setHeight, 10 ), [
+		setHeight,
+	] );
 
 	useFocusEffect(
 		useCallback( () => {
@@ -45,17 +48,25 @@ const BottomSheetNavigationScreen = ( { children } ) => {
 				onHandleHardwareButtonPress( null );
 				return false;
 			} );
-			if ( heightRef.current.maxHeight !== 0 ) {
+			if ( fullScreen ) {
+				setHeight( '100%' );
+				setIsFullScreen( true );
+			} else if ( heightRef.current.maxHeight !== 0 ) {
+				setIsFullScreen( false );
 				setHeight( heightRef.current.maxHeight );
 			}
 			return () => {};
-		}, [] )
+		}, [ setHeight ] )
 	);
 	const onLayout = ( { nativeEvent } ) => {
+		if ( fullScreen ) {
+			return;
+		}
 		const { height } = nativeEvent.layout;
+
 		if ( heightRef.current.maxHeight !== height && isFocused ) {
 			heightRef.current.maxHeight = height;
-			setHeightDebounce( height, true );
+			setHeightDebounce( height );
 		}
 	};
 

packages/components/src/mobile/bottom-sheet/cell.native.js

@@ -40,8 +40,8 @@ class BottomSheetCell extends Component {
 		);
 	}
 
-	componentDidUpdate() {
-		if ( this.state.isEditingValue ) {
+	componentDidUpdate( prevProps, prevState ) {
+		if ( ! prevState.isEditingValue && this.state.isEditingValue ) {
 			this._valueTextInput.focus();
 		}
 	}
@@ -316,7 +316,7 @@ class BottomSheetCell extends Component {
 									<Icon
 										icon={ icon }
 										size={ 24 }
-										color={ iconStyle.color }
+										fill={ iconStyle.color }
 										isPressed={ false }
 									/>
 									<View

packages/components/src/mobile/bottom-sheet/index.native.js

@@ -33,6 +33,8 @@ import PickerCell from './picker-cell';
 import SwitchCell from './switch-cell';
 import RangeCell from './range-cell';
 import ColorCell from './color-cell';
+import LinkCell from './link-cell';
+import LinkSuggestionItemCell from './link-suggestion-item-cell';
 import RadioCell from './radio-cell';
 import NavigationScreen from './bottom-sheet-navigation/navigation-screen';
 import NavigationContainer from './bottom-sheet-navigation/navigation-container';
@@ -50,6 +52,8 @@ class BottomSheet extends Component {
 			this
 		);
 
+		this.setIsFullScreen = this.setIsFullScreen.bind( this );
+
 		this.onDimensionsChange = this.onDimensionsChange.bind( this );
 		this.onCloseBottomSheet = this.onCloseBottomSheet.bind( this );
 		this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind(
@@ -64,6 +68,7 @@ class BottomSheet extends Component {
 
 		this.state = {
 			safeAreaBottomInset: 0,
+			safeAreaTopInset: 0,
 			bounces: false,
 			maxHeight: 0,
 			keyboardHeight: 0,
@@ -72,6 +77,7 @@ class BottomSheet extends Component {
 			handleClosingBottomSheet: null,
 			handleHardwareButtonPress: null,
 			isMaxHeightSet: true,
+			isFullScreen: this.props.isFullScreen || false,
 		};
 
 		SafeArea.getSafeAreaInsetsForRootView().then(
@@ -136,13 +142,19 @@ class BottomSheet extends Component {
 	}
 
 	onSafeAreaInsetsUpdate( result ) {
-		const { safeAreaBottomInset } = this.state;
+		const { safeAreaBottomInset, safeAreaTopInset } = this.state;
 		if ( this.safeAreaEventSubscription === null ) {
 			return;
 		}
 		const { safeAreaInsets } = result;
-		if ( safeAreaBottomInset !== safeAreaInsets.bottom ) {
-			this.setState( { safeAreaBottomInset: safeAreaInsets.bottom } );
+		if (
+			safeAreaBottomInset !== safeAreaInsets.bottom ||
+			safeAreaTopInset !== safeAreaInsets.top
+		) {
+			this.setState( {
+				safeAreaBottomInset: safeAreaInsets.bottom,
+				safeAreaTopInset: safeAreaInsets.top,
+			} );
 		}
 	}
 
@@ -231,6 +243,16 @@ class BottomSheet extends Component {
 		this.onShouldSetBottomSheetMaxHeight( true );
 	}
 
+	setIsFullScreen( isFullScreen ) {
+		if ( isFullScreen !== this.state.isFullScreen ) {
+			if ( isFullScreen ) {
+				this.setState( { isFullScreen, isMaxHeightSet: false } );
+			} else {
+				this.setState( { isFullScreen, isMaxHeightSet: true } );
+			}
+		}
+	}
+
 	onHardwareButtonPress() {
 		const { onClose } = this.props;
 		const { handleHardwareButtonPress } = this.state;
@@ -245,7 +267,6 @@ class BottomSheet extends Component {
 	getContentStyle() {
 		const { safeAreaBottomInset } = this.state;
 		return {
-			flexGrow: 1,
 			paddingBottom:
 				( safeAreaBottomInset || 0 ) +
 				styles.scrollableContent.paddingBottom,
@@ -272,9 +293,11 @@ class BottomSheet extends Component {
 			maxHeight,
 			bounces,
 			safeAreaBottomInset,
+			safeAreaTopInset,
 			isScrolling,
 			scrollEnabled,
 			isMaxHeightSet,
+			isFullScreen,
 		} = this.state;
 
 		const panResponder = PanResponder.create( {
@@ -303,6 +326,12 @@ class BottomSheet extends Component {
 			styles.bottomSheetHeaderTitleDark
 		);
 
+		let listStyle = {};
+		if ( isFullScreen ) {
+			listStyle = { flexGrow: 1 };
+		} else if ( isMaxHeightSet ) {
+			listStyle = { maxHeight };
+		}
 		const listProps = {
 			disableScrollViewPanResponder: true,
 			bounces,
@@ -316,8 +345,10 @@ class BottomSheet extends Component {
 				contentStyle,
 				isChildrenScrollable && this.getContentStyle(),
 				contentStyle,
+				isFullScreen && { flexGrow: 1 },
 			],
-			style: isMaxHeightSet ? { maxHeight } : {},
+			style: listStyle,
+			safeAreaBottomInset,
 			scrollEnabled,
 			automaticallyAdjustContentInsets: false,
 		};
@@ -373,11 +404,21 @@ class BottomSheet extends Component {
 					style={ {
 						...backgroundStyle,
 						borderColor: 'rgba(0, 0, 0, 0.1)',
+						marginTop:
+							Platform.OS === 'ios' && isFullScreen
+								? safeAreaTopInset
+								: 0,
+						flex: isFullScreen ? 1 : undefined,
+						...( Platform.OS === 'android' && isFullScreen
+							? styles.backgroundFullScreen
+							: {} ),
 						...style,
 					} }
 					keyboardVerticalOffset={ -safeAreaBottomInset }
 				>
-					<View style={ styles.dragIndicator } />
+					{ ! ( Platform.OS === 'android' && isFullScreen ) && (
+						<View style={ styles.dragIndicator } />
+					) }
 					{ ! hideHeader && getHeader() }
 					<WrapperView
 						{ ...( isChildrenScrollable
@@ -396,6 +437,7 @@ class BottomSheet extends Component {
 								onHandleHardwareButtonPress: this
 									.onHandleHardwareButtonPress,
 								listProps,
+								setIsFullScreen: this.setIsFullScreen,
 							} }
 						>
 							<TouchableHighlight accessible={ false }>
@@ -429,6 +471,8 @@ ThemedBottomSheet.PickerCell = PickerCell;
 ThemedBottomSheet.SwitchCell = SwitchCell;
 ThemedBottomSheet.RangeCell = RangeCell;
 ThemedBottomSheet.ColorCell = ColorCell;
+ThemedBottomSheet.LinkCell = LinkCell;
+ThemedBottomSheet.LinkSuggestionItemCell = LinkSuggestionItemCell;
 ThemedBottomSheet.RadioCell = RadioCell;
 ThemedBottomSheet.NavigationScreen = NavigationScreen;
 ThemedBottomSheet.NavigationContainer = NavigationContainer;

packages/components/src/mobile/bottom-sheet/link-cell.native.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { link, Icon, chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Cell from './cell';
+import styles from './styles.scss';
+
+const { placeholderColor } = styles;
+
+export default function LinkCell( { value, onPress } ) {
+	return (
+		<Cell
+			icon={ link }
+			label={ __( 'Link to' ) }
+			// since this is not actually editable, we treat value as a placeholder
+			value={ value || __( 'Search or type URL' ) }
+			valueStyle={ !! value ? undefined : placeholderColor }
+			onPress={ onPress }
+		>
+			<Icon icon={ chevronRight }></Icon>
+		</Cell>
+	);
+}