From 4df464cb5db6981888e07230cd79f57fb9d2b724 Mon Sep 17 00:00:00 2001
From: Dratwas <drapich.piotr@gmail.com>
Date: Fri, 16 Oct 2020 15:16:32 +0200
Subject: [PATCH] Add navigation to link settings and add link picker screen

---
 .../block-settings/container.native.js        | 16 ++++++-
 .../block-library/src/button/edit.native.js   |  4 +-
 .../src/social-link/edit.native.js            |  4 +-
 packages/components/src/index.native.js       |  3 ++
 .../mobile/bottom-sheet/link-cell.native.js   |  4 +-
 .../link-picker/link-picker-screen.native.js  | 43 ++++++++++++++++++
 .../src/mobile/link-settings/index.native.js  | 42 +++++++-----------
 .../link-settings-navigation.native.js        | 44 +++++++++++++++++++
 .../link-settings-screen.native.js            | 36 +++++++++++++++
 9 files changed, 163 insertions(+), 33 deletions(-)
 create mode 100644 packages/components/src/mobile/link-picker/link-picker-screen.native.js
 create mode 100644 packages/components/src/mobile/link-settings/link-settings-navigation.native.js
 create mode 100644 packages/components/src/mobile/link-settings/link-settings-screen.native.js

diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js
index a91fc582d589d..c324d0afbe86d 100644
--- a/packages/block-editor/src/components/block-settings/container.native.js
+++ b/packages/block-editor/src/components/block-settings/container.native.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { InspectorControls } from '@wordpress/block-editor';
-import { BottomSheet, ColorSettings } from '@wordpress/components';
+import {
+	BottomSheet,
+	ColorSettings,
+	LinkPickerScreen,
+} from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 /**
@@ -13,6 +17,7 @@ import styles from './container.native.scss';
 export const blockSettingsScreens = {
 	settings: 'Settings',
 	color: 'Color',
+	linkPicker: 'linkPicker',
 };
 
 function BottomSheetSettings( {
@@ -41,6 +46,15 @@ function BottomSheetSettings( {
 				>
 					<ColorSettings defaultSettings={ settings } />
 				</BottomSheet.NavigationScreen>
+				<BottomSheet.NavigationScreen
+					name={ blockSettingsScreens.linkPicker }
+					fullScreen
+					isScrollable
+				>
+					<LinkPickerScreen
+						returnScreenName={ blockSettingsScreens.settings }
+					/>
+				</BottomSheet.NavigationScreen>
 			</BottomSheet.NavigationContainer>
 		</BottomSheet>
 	);
diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
index 508a36a813057..d437a8b12d28b 100644
--- a/packages/block-library/src/button/edit.native.js
+++ b/packages/block-library/src/button/edit.native.js
@@ -19,7 +19,7 @@ import {
 	RangeControl,
 	ToolbarGroup,
 	ToolbarButton,
-	LinkSettings,
+	LinkSettingsNavigation,
 } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -242,7 +242,7 @@ class ButtonEdit extends Component {
 		};
 
 		return (
-			<LinkSettings
+			<LinkSettingsNavigation
 				isVisible={ isLinkSheetVisible }
 				attributes={ attributes }
 				onClose={ this.dismissSheet }
diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js
index b1fe5814c1f56..7443c57f9fc95 100644
--- a/packages/block-library/src/social-link/edit.native.js
+++ b/packages/block-library/src/social-link/edit.native.js
@@ -11,7 +11,7 @@ import { useEffect, useState, useRef } from '@wordpress/element';
 import {
 	ToolbarGroup,
 	ToolbarButton,
-	LinkSettings,
+	LinkSettingsNavigation,
 } from '@wordpress/components';
 import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
@@ -162,7 +162,7 @@ const SocialLinkEdit = ( {
 					</ToolbarGroup>
 				</BlockControls>
 			) }
-			<LinkSettings
+			<LinkSettingsNavigation
 				isVisible={ isLinkSheetVisible }
 				attributes={ attributes }
 				onEmptyURL={ onEmptyURL }
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 5b963a20dc33a..dcb11eb7da9be 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -73,7 +73,10 @@ 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 LinkPickerScreen } from './mobile/link-picker/link-picker-screen';
 export { default as LinkSettings } from './mobile/link-settings';
+export { default as LinkSettingsScreen } from './mobile/link-settings/link-settings-screen';
+export { default as LinkSettingsNavigation } from './mobile/link-settings/link-settings-navigation';
 export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';
 export { default as InserterButton } from './mobile/inserter-button';
diff --git a/packages/components/src/mobile/bottom-sheet/link-cell.native.js b/packages/components/src/mobile/bottom-sheet/link-cell.native.js
index c4ff2da87b76e..4d3c2f61a7fd8 100644
--- a/packages/components/src/mobile/bottom-sheet/link-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/link-cell.native.js
@@ -12,10 +12,10 @@ import styles from './styles.scss';
 
 const { placeholderColor } = styles;
 
-export default function LinkCell( { value, onPress } ) {
+export default function LinkCell( { value, onPress, showIcon = true } ) {
 	return (
 		<Cell
-			icon={ link }
+			icon={ showIcon && link }
 			label={ __( 'Link to' ) }
 			// since this is not actually editable, we treat value as a placeholder
 			value={ value || __( 'Search or type URL' ) }
diff --git a/packages/components/src/mobile/link-picker/link-picker-screen.native.js b/packages/components/src/mobile/link-picker/link-picker-screen.native.js
new file mode 100644
index 0000000000000..3301779646c01
--- /dev/null
+++ b/packages/components/src/mobile/link-picker/link-picker-screen.native.js
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { useNavigation, useRoute } from '@react-navigation/native';
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { LinkPicker } from './';
+
+const LinkPickerScreen = ( { returnScreenName } ) => {
+	const navigation = useNavigation();
+	const route = useRoute();
+
+	const onLinkPicked = ( { url, title } ) => {
+		navigation.navigate( returnScreenName, {
+			inputValue: url,
+			text: title,
+		} );
+	};
+
+	const onCancel = () => {
+		navigation.goBack();
+	};
+
+	const { inputValue } = route.params;
+	return useMemo( () => {
+		return (
+			<LinkPicker
+				value={ inputValue }
+				onLinkPicked={ onLinkPicked }
+				onCancel={ onCancel }
+			/>
+		);
+	}, [ inputValue ] );
+};
+
+export default LinkPickerScreen;
diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js
index b809080b4a29f..e10db29379399 100644
--- a/packages/components/src/mobile/link-settings/index.native.js
+++ b/packages/components/src/mobile/link-settings/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Platform, Clipboard } from 'react-native';
+import { Clipboard } from 'react-native';
 /**
  * WordPress dependencies
  */
@@ -9,7 +9,7 @@ import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { isURL, prependHTTP } from '@wordpress/url';
 import { useEffect, useState, useRef } from '@wordpress/element';
-import { link, external } from '@wordpress/icons';
+import { external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -80,6 +80,8 @@ function LinkSettings( {
 	editorSidebarOpened,
 	// Specifies whether icon should be displayed next to the label
 	showIcon,
+	onLinkCellPressed,
+	urlValue,
 } ) {
 	const { url, label, linkTarget, rel } = attributes;
 	const [ urlInputValue, setUrlInputValue ] = useState( '' );
@@ -115,12 +117,14 @@ function LinkSettings( {
 		}
 	}, [ editorSidebarOpened, isVisible ] );
 
-	function onChangeURL( value ) {
-		if ( ! value && onEmptyURL ) {
+	useEffect( () => {
+		if ( ! urlValue && onEmptyURL ) {
 			onEmptyURL();
 		}
-		setUrlInputValue( value );
-	}
+		setAttributes( {
+			url: prependHTTP( urlValue ),
+		} );
+	}, [ urlValue ] );
 
 	function onChangeLabel( value ) {
 		setLabelInputValue( value );
@@ -177,20 +181,10 @@ function LinkSettings( {
 		return (
 			<>
 				{ options.url && (
-					<TextControl
-						icon={ showIcon && link }
-						label={ options.url.label }
-						value={ urlInputValue }
-						valuePlaceholder={ options.url.placeholder }
-						onChange={ onChangeURL }
-						onSubmit={ onCloseSettingsSheet }
-						autoCapitalize="none"
-						autoCorrect={ false }
-						// eslint-disable-next-line jsx-a11y/no-autofocus
-						autoFocus={
-							Platform.OS === 'ios' && options.url.autoFocus
-						}
-						keyboardType="url"
+					<BottomSheet.LinkCell
+						showIcon={ showIcon }
+						value={ url }
+						onPress={ onLinkCellPressed }
 					/>
 				) }
 				{ options.linkLabel && (
@@ -231,11 +225,7 @@ function LinkSettings( {
 	}
 
 	return (
-		<BottomSheet
-			isVisible={ isVisible }
-			onClose={ onCloseSettingsSheet }
-			hideHeader
-		>
+		<>
 			<PanelBody style={ styles.linkSettingsPanel }>
 				{ getSettings() }
 			</PanelBody>
@@ -248,7 +238,7 @@ function LinkSettings( {
 				</PanelBody>
 			) }
 			{ actions && <PanelActions actions={ actions } /> }
-		</BottomSheet>
+		</>
 	);
 }
 
diff --git a/packages/components/src/mobile/link-settings/link-settings-navigation.native.js b/packages/components/src/mobile/link-settings/link-settings-navigation.native.js
new file mode 100644
index 0000000000000..a71b53bf9a2fa
--- /dev/null
+++ b/packages/components/src/mobile/link-settings/link-settings-navigation.native.js
@@ -0,0 +1,44 @@
+/**
+ * Internal dependencies
+ */
+import BottomSheet from '../bottom-sheet';
+import LinkSettingsScreen from './link-settings-screen';
+import LinkPickerScreen from '../link-picker/link-picker-screen';
+
+const linkSettingsScreens = {
+	settings: 'LinkSettingsScreen',
+	linkPicker: 'linkPicker',
+};
+
+function LinkSettingsNavigation( props ) {
+	if ( ! props.withBottomSheet ) {
+		return <LinkSettingsScreen { ...props } />;
+	}
+	return (
+		<BottomSheet
+			isVisible={ props.isVisible }
+			onClose={ props.onClose }
+			hideHeader
+			withNavigation
+		>
+			<BottomSheet.NavigationContainer animate main>
+				<BottomSheet.NavigationScreen
+					name={ linkSettingsScreens.settings }
+				>
+					<LinkSettingsScreen { ...props } withBottomSheet />
+				</BottomSheet.NavigationScreen>
+				<BottomSheet.NavigationScreen
+					name={ linkSettingsScreens.linkPicker }
+					isScrollable
+					fullScreen
+				>
+					<LinkPickerScreen
+						returnScreenName={ linkSettingsScreens.settings }
+					/>
+				</BottomSheet.NavigationScreen>
+			</BottomSheet.NavigationContainer>
+		</BottomSheet>
+	);
+}
+
+export default LinkSettingsNavigation;
diff --git a/packages/components/src/mobile/link-settings/link-settings-screen.native.js b/packages/components/src/mobile/link-settings/link-settings-screen.native.js
new file mode 100644
index 0000000000000..49f240c2074d0
--- /dev/null
+++ b/packages/components/src/mobile/link-settings/link-settings-screen.native.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { useNavigation, useRoute } from '@react-navigation/native';
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import LinkSettings from './';
+
+const LinkSettingsScreen = ( props ) => {
+	const navigation = useNavigation();
+	const route = useRoute();
+	const { url = '' } = props.attributes || {};
+	const { inputValue = url } = route.params || {};
+
+	const onLinkCellPressed = () => {
+		navigation.navigate( 'linkPicker', { inputValue } );
+	};
+
+	return useMemo( () => {
+		return (
+			<LinkSettings
+				onLinkCellPressed={ onLinkCellPressed }
+				urlValue={ inputValue }
+				{ ...props }
+			/>
+		);
+	}, [ props, inputValue, navigation, route ] );
+};
+
+export default LinkSettingsScreen;