From 6f9be7227a5d9ca5393e8afedfc4a84f8340bb8b Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Wed, 20 Feb 2019 09:33:57 +0100
Subject: [PATCH 1/4] Mobile: Replaced Links UI with bottom-sheet component

---
 .../mobile/bottom-sheet/cell.native.js        | 13 ++-
 .../mobile/bottom-sheet/styles.native.scss    |  1 +
 .../format-library/src/link/index.native.js   | 20 ++--
 .../format-library/src/link/modal.native.js   | 98 +++++++++++--------
 .../format-library/src/link/modal.native.scss |  4 +
 5 files changed, 83 insertions(+), 53 deletions(-)

diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js
index 6ac26d2d00ff8b..9acc94bbfb3bbd 100644
--- a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js
+++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js
@@ -16,10 +16,10 @@ import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
 
 export default class Cell extends Component {
-	constructor() {
+	constructor( props ) {
 		super( ...arguments );
 		this.state = {
-			isEditingValue: false,
+			isEditingValue: props.autoFocus || false,
 		};
 	}
 
@@ -53,7 +53,7 @@ export default class Cell extends Component {
 
 		const onCellPress = () => {
 			if ( isValueEditable ) {
-				this.setState( { isEditingValue: true } );
+				startEditing();
 			} else if ( onPress !== undefined ) {
 				onPress();
 			}
@@ -63,6 +63,12 @@ export default class Cell extends Component {
 			this.setState( { isEditingValue: false } );
 		};
 
+		const startEditing = () => {
+			if ( this.state.isEditingValue === false ) {
+				this.setState( { isEditingValue: true } );
+			}
+		};
+
 		const separatorStyle = () => {
 			const leftMarginStyle = { ...styles.cellSeparator, ...platformStyles.separatorMarginLeft };
 			switch ( separatorType ) {
@@ -97,6 +103,7 @@ export default class Cell extends Component {
 					onChangeText={ onChangeValue }
 					editable={ isValueEditable }
 					pointerEvents={ this.state.isEditingValue ? 'auto' : 'none' }
+					onFocus={ startEditing }
 					onBlur={ finishEditing }
 					{ ...valueProps }
 				/>
diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.native.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.native.scss
index 198d526092a851..53764ee4fe38f1 100644
--- a/packages/editor/src/components/mobile/bottom-sheet/styles.native.scss
+++ b/packages/editor/src/components/mobile/bottom-sheet/styles.native.scss
@@ -31,6 +31,7 @@
 	border-top-left-radius: 8px;
 	width: 100%;
 	max-width: 512;
+	padding-bottom: 0;
 }
 
 .content {
diff --git a/packages/format-library/src/link/index.native.js b/packages/format-library/src/link/index.native.js
index 4a2def1614323d..4ea3ee0e309342 100644
--- a/packages/format-library/src/link/index.native.js
+++ b/packages/format-library/src/link/index.native.js
@@ -107,17 +107,15 @@ export const link = {
 
 			return (
 				<Fragment>
-					{ this.state.addingLink &&
-						<ModalLinkUI
-							isVisible
-							isActive={ isActive }
-							activeAttributes={ activeAttributes }
-							onClose={ this.stopAddingLink }
-							onChange={ onChange }
-							onRemove={ this.onRemoveFormat }
-							value={ linkSelection }
-						/>
-					}
+					<ModalLinkUI
+						isVisible={ this.state.addingLink }
+						isActive={ isActive }
+						activeAttributes={ activeAttributes }
+						onClose={ this.stopAddingLink }
+						onChange={ onChange }
+						onRemove={ this.onRemoveFormat }
+						value={ linkSelection }
+					/>
 					<RichTextToolbarButton
 						name="link"
 						icon="admin-links"
diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js
index 6736b4a707945f..712c2013a1b17d 100644
--- a/packages/format-library/src/link/modal.native.js
+++ b/packages/format-library/src/link/modal.native.js
@@ -10,7 +10,7 @@ import Modal from 'react-native-modal';
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { URLInput } from '@wordpress/editor';
+import { URLInput, BottomSheet } from '@wordpress/editor';
 import { prependHTTP } from '@wordpress/url';
 import {
 	withSpokenMessages,
@@ -43,12 +43,24 @@ class ModalLinkUI extends Component {
 		this.removeLink = this.removeLink.bind( this );
 
 		this.state = {
-			inputValue: props.activeAttributes.url || '',
-			text: getTextContent( slice( props.value ) ),
+			inputValue: '',
+			text: '',
 			opensInNewWindow: false,
 		};
 	}
 
+	componentDidUpdate( oldProps ) {
+		if ( oldProps === this.props ) {
+			return;
+		}
+
+		this.setState({
+			inputValue: this.props.activeAttributes.url || '',
+			text: getTextContent( slice( this.props.value ) ),
+			opensInNewWindow: false,
+		})
+	}
+
 	onChangeInputValue( inputValue ) {
 		this.setState( { inputValue } );
 	}
@@ -103,37 +115,46 @@ class ModalLinkUI extends Component {
 		const { isVisible } = this.props;
 
 		return (
-			<Modal
+			<BottomSheet
 				isVisible={ isVisible }
-				style={ styles.bottomModal }
-				animationInTiming={ 500 }
-				animationOutTiming={ 500 }
-				backdropTransitionInTiming={ 500 }
-				backdropTransitionOutTiming={ 500 }
-				onBackdropPress={ this.props.onClose }
-				onSwipe={ this.props.onClose }
-				swipeDirection="down"
-				avoidKeyboard={ true }
+				onClose={ this.submitLink }
+				hideHeader
 			>
-				<View style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }>
-					<View style={ styles.dragIndicator } />
-					<View style={ styles.head }>
-						<Button onClick={ this.removeLink }>
-							<Text style={ { ...styles.buttonText, color: 'red' } }>
-								{ __( 'Remove' ) }
-							</Text>
-						</Button>
-						<Text style={ styles.title }>
-							{ __( 'Link Settings' ) }
-						</Text>
-						<Button onClick={ this.submitLink }>
-							<Text style={ { ...styles.buttonText, color: '#0087be' } } >
-								{ __( 'Done' ) }
-							</Text>
-						</Button>
-					</View>
-					<View style={ styles.separator } />
-					<View style={ styles.inlineInput }>
+					<BottomSheet.Cell
+						icon={ 'admin-links' }
+						label={ __( 'URL' ) }
+						value={ this.state.inputValue }
+						placeholder={ __( 'Add URL' ) }
+						autoCapitalize="none"
+						autoCorrect={ false }
+						textContentType="URL"
+						autoFocus={ true }
+						onChangeValue={ this.onChangeInputValue }
+					/>
+					<BottomSheet.Cell
+						icon={ 'editor-textcolor' }
+						label={ __( 'Link Text' ) }
+						value={ this.state.text }
+						placeholder={ __( 'Add Link Text' ) }
+						onChangeValue={ this.onChangeText }
+					/>
+					<BottomSheet.Cell
+						icon={ 'external' }
+						label={ __( 'Open in New Tab' ) }
+						value={ '' }
+					>
+						<Switch
+							value={ this.state.opensInNewWindow }
+							onValueChange={ this.onChangeOpensInNewWindow }
+						/>
+					</BottomSheet.Cell>
+					<BottomSheet.Cell
+						label={ __( 'Remove Link' ) }
+						labelStyle={ styles.clearLinkButton }
+						separatorType={ 'none' }
+						onPress={ this.removeLink }
+					/>
+					{/* <View style={ styles.inlineInput }>
 						<Text style={ styles.inlineInputLabel }>
 							{ __( 'URL' ) }
 						</Text>
@@ -143,8 +164,8 @@ class ModalLinkUI extends Component {
 							onChange={ this.onChangeInputValue }
 						/>
 					</View>
-					<View style={ styles.separator } />
-					<View style={ styles.inlineInput }>
+					<View style={ styles.separator } /> */}
+					{/* <View style={ styles.inlineInput }>
 						<Text style={ styles.inlineInputLabel }>
 							{ __( 'Link Text' ) }
 						</Text>
@@ -154,8 +175,8 @@ class ModalLinkUI extends Component {
 							onChangeText={ this.onChangeText }
 						/>
 					</View>
-					<View style={ styles.separator } />
-					<View style={ styles.inlineInput }>
+					<View style={ styles.separator } /> */}
+					{/* <View style={ styles.inlineInput }>
 						<Text style={ styles.inlineInputLabel }>
 							{ __( 'Open in a new window' ) }
 						</Text>
@@ -165,9 +186,8 @@ class ModalLinkUI extends Component {
 								onValueChange={ this.onChangeOpensInNewWindow }
 							/>
 						</View>
-					</View>
-				</View>
-			</Modal>
+					</View> */}
+			</BottomSheet>
 		);
 	}
 }
diff --git a/packages/format-library/src/link/modal.native.scss b/packages/format-library/src/link/modal.native.scss
index 72f6a647b23966..10627ee8cc8341 100644
--- a/packages/format-library/src/link/modal.native.scss
+++ b/packages/format-library/src/link/modal.native.scss
@@ -78,3 +78,7 @@
 	padding: 5px;
 }
 
+.clearLinkButton {
+	color: $alert-red;
+}
+

From 5b1dae2c6d2138db07d0c6bfcaf77d2599a47af3 Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Wed, 20 Feb 2019 09:59:26 +0100
Subject: [PATCH 2/4] Mobile links UI: Removed commented code.

---
 .../format-library/src/link/modal.native.js   | 99 +++++++------------
 1 file changed, 33 insertions(+), 66 deletions(-)

diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js
index 712c2013a1b17d..3724eb132afb80 100644
--- a/packages/format-library/src/link/modal.native.js
+++ b/packages/format-library/src/link/modal.native.js
@@ -120,73 +120,40 @@ class ModalLinkUI extends Component {
 				onClose={ this.submitLink }
 				hideHeader
 			>
-					<BottomSheet.Cell
-						icon={ 'admin-links' }
-						label={ __( 'URL' ) }
-						value={ this.state.inputValue }
-						placeholder={ __( 'Add URL' ) }
-						autoCapitalize="none"
-						autoCorrect={ false }
-						textContentType="URL"
-						autoFocus={ true }
-						onChangeValue={ this.onChangeInputValue }
+				<BottomSheet.Cell
+					icon={ 'admin-links' }
+					label={ __( 'URL' ) }
+					value={ this.state.inputValue }
+					placeholder={ __( 'Add URL' ) }
+					autoCapitalize="none"
+					autoCorrect={ false }
+					textContentType="URL"
+					onChangeValue={ this.onChangeInputValue }
+					autoFocus
+				/>
+				<BottomSheet.Cell
+					icon={ 'editor-textcolor' }
+					label={ __( 'Link Text' ) }
+					value={ this.state.text }
+					placeholder={ __( 'Add Link Text' ) }
+					onChangeValue={ this.onChangeText }
+				/>
+				<BottomSheet.Cell
+					icon={ 'external' }
+					label={ __( 'Open in New Tab' ) }
+					value={ '' }
+				>
+					<Switch
+						value={ this.state.opensInNewWindow }
+						onValueChange={ this.onChangeOpensInNewWindow }
 					/>
-					<BottomSheet.Cell
-						icon={ 'editor-textcolor' }
-						label={ __( 'Link Text' ) }
-						value={ this.state.text }
-						placeholder={ __( 'Add Link Text' ) }
-						onChangeValue={ this.onChangeText }
-					/>
-					<BottomSheet.Cell
-						icon={ 'external' }
-						label={ __( 'Open in New Tab' ) }
-						value={ '' }
-					>
-						<Switch
-							value={ this.state.opensInNewWindow }
-							onValueChange={ this.onChangeOpensInNewWindow }
-						/>
-					</BottomSheet.Cell>
-					<BottomSheet.Cell
-						label={ __( 'Remove Link' ) }
-						labelStyle={ styles.clearLinkButton }
-						separatorType={ 'none' }
-						onPress={ this.removeLink }
-					/>
-					{/* <View style={ styles.inlineInput }>
-						<Text style={ styles.inlineInputLabel }>
-							{ __( 'URL' ) }
-						</Text>
-						<URLInput
-							style={ styles.inlineInputValue }
-							value={ this.state.inputValue }
-							onChange={ this.onChangeInputValue }
-						/>
-					</View>
-					<View style={ styles.separator } /> */}
-					{/* <View style={ styles.inlineInput }>
-						<Text style={ styles.inlineInputLabel }>
-							{ __( 'Link Text' ) }
-						</Text>
-						<TextInput
-							style={ styles.inlineInputValue }
-							value={ this.state.text }
-							onChangeText={ this.onChangeText }
-						/>
-					</View>
-					<View style={ styles.separator } /> */}
-					{/* <View style={ styles.inlineInput }>
-						<Text style={ styles.inlineInputLabel }>
-							{ __( 'Open in a new window' ) }
-						</Text>
-						<View style={ { ...styles.inlineInputValue, ...styles.inlineInputValueSwitch, alignItems: 'flex-end' } }>
-							<Switch
-								value={ this.state.opensInNewWindow }
-								onValueChange={ this.onChangeOpensInNewWindow }
-							/>
-						</View>
-					</View> */}
+				</BottomSheet.Cell>
+				<BottomSheet.Cell
+					label={ __( 'Remove Link' ) }
+					labelStyle={ styles.clearLinkButton }
+					separatorType={ 'none' }
+					onPress={ this.removeLink }
+				/>
 			</BottomSheet>
 		);
 	}

From 822d87c7e101cadb6a7f73e053982e5fe4626839 Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Wed, 20 Feb 2019 10:16:26 +0100
Subject: [PATCH 3/4] Mobile: Fix lint issues

---
 .../format-library/src/link/button.native.js  | 24 ------
 .../format-library/src/link/modal.native.js   | 36 ++++-----
 .../format-library/src/link/modal.native.scss | 81 -------------------
 3 files changed, 18 insertions(+), 123 deletions(-)
 delete mode 100644 packages/format-library/src/link/button.native.js

diff --git a/packages/format-library/src/link/button.native.js b/packages/format-library/src/link/button.native.js
deleted file mode 100644
index fa8fd004c5a37b..00000000000000
--- a/packages/format-library/src/link/button.native.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import { TouchableOpacity, View } from 'react-native';
-
-export default function Button( props ) {
-	const {
-		children,
-		onClick,
-		disabled,
-	} = props;
-
-	return (
-		<TouchableOpacity
-			accessible={ true }
-			onPress={ onClick }
-			disabled={ disabled }
-		>
-			<View style={ { flexDirection: 'row' } }>
-				{ children }
-			</View>
-		</TouchableOpacity>
-	);
-}
diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js
index 3724eb132afb80..56b3468a232c38 100644
--- a/packages/format-library/src/link/modal.native.js
+++ b/packages/format-library/src/link/modal.native.js
@@ -2,15 +2,14 @@
  * External dependencies
  */
 import React from 'react';
-import { Switch, Text, TextInput, View } from 'react-native';
-import Modal from 'react-native-modal';
+import { Switch } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { URLInput, BottomSheet } from '@wordpress/editor';
+import { BottomSheet } from '@wordpress/editor';
 import { prependHTTP } from '@wordpress/url';
 import {
 	withSpokenMessages,
@@ -28,12 +27,11 @@ import {
  * Internal dependencies
  */
 import { createLinkFormat, isValidHref } from './utils';
-import Button from './button';
 
 import styles from './modal.scss';
 
 class ModalLinkUI extends Component {
-	constructor( props ) {
+	constructor() {
 		super( ...arguments );
 
 		this.submitLink = this.submitLink.bind( this );
@@ -54,11 +52,11 @@ class ModalLinkUI extends Component {
 			return;
 		}
 
-		this.setState({
+		this.setState( {
 			inputValue: this.props.activeAttributes.url || '',
 			text: getTextContent( slice( this.props.value ) ),
 			opensInNewWindow: false,
-		})
+		} );
 	}
 
 	onChangeInputValue( inputValue ) {
@@ -120,17 +118,19 @@ class ModalLinkUI extends Component {
 				onClose={ this.submitLink }
 				hideHeader
 			>
-				<BottomSheet.Cell
-					icon={ 'admin-links' }
-					label={ __( 'URL' ) }
-					value={ this.state.inputValue }
-					placeholder={ __( 'Add URL' ) }
-					autoCapitalize="none"
-					autoCorrect={ false }
-					textContentType="URL"
-					onChangeValue={ this.onChangeInputValue }
-					autoFocus
-				/>
+				{ /* eslint-disable jsx-a11y/no-autofocus */
+					<BottomSheet.Cell
+						icon={ 'admin-links' }
+						label={ __( 'URL' ) }
+						value={ this.state.inputValue }
+						placeholder={ __( 'Add URL' ) }
+						autoCapitalize="none"
+						autoCorrect={ false }
+						textContentType="URL"
+						onChangeValue={ this.onChangeInputValue }
+						autoFocus
+					/>
+				/* eslint-enable jsx-a11y/no-autofocus */ }
 				<BottomSheet.Cell
 					icon={ 'editor-textcolor' }
 					label={ __( 'Link Text' ) }
diff --git a/packages/format-library/src/link/modal.native.scss b/packages/format-library/src/link/modal.native.scss
index 10627ee8cc8341..e6a590eab85f77 100644
--- a/packages/format-library/src/link/modal.native.scss
+++ b/packages/format-library/src/link/modal.native.scss
@@ -1,84 +1,3 @@
-
-.bottomModal {
-	justify-content: flex-end;
-	margin: 0;
-}
-
-.dragIndicator {
-	background-color: $light-gray-400;
-	height: 4px;
-	width: 10%;
-	top: -12px;
-	margin: auto;
-	border-radius: 2px;
-}
-
-.separator {
-	background-color: $light-gray-400;
-	height: 1px;
-	width: 95%;
-	margin: auto;
-}
-
-.content {
-	background-color: $white;
-	padding: 18px 10px 5px 10px;
-	justify-content: center;
-	border-top-right-radius: 8px;
-	border-top-left-radius: 8px;
-}
-
-.head {
-	flex-direction: row;
-	width: 100%;
-	margin-bottom: 5px;
-	justify-content: space-between;
-	align-items: center;
-	align-content: center;
-}
-
-.title {
-	color: $dark-gray-600;
-	font-size: 18px;
-	font-weight: 600;
-	flex: 1;
-	text-align: center;
-}
-
-.buttonText {
-	font-size: 18px;
-	padding: 5px;
-}
-
-.inlineInput {
-	flex-direction: row;
-	width: 100%;
-	justify-content: space-between;
-	align-items: center;
-	margin: 5px 0;
-}
-
-.inlineInputLabel {
-	padding: 10px 10px;
-	color: $dark-gray-600;
-	font-size: 14px;
-	font-weight: bold;
-}
-
-.inlineInputValue {
-	flex-grow: 1;
-	font-size: 14px;
-	text-align: right;
-	align-items: stretch;
-	align-self: flex-end;
-	padding: 10px;
-}
-
-.inlineInputValueSwitch {
-	padding: 5px;
-}
-
 .clearLinkButton {
 	color: $alert-red;
 }
-

From d65a838793e76dad1e855bec10bf96144d2786c3 Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Wed, 20 Feb 2019 14:11:03 +0100
Subject: [PATCH 4/4] Mobile Links UI: Remove autofocus on Android. This hides
 an issue where the modal sometimes will be under the keyboard on Android.

---
 packages/format-library/src/link/modal.native.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js
index 56b3468a232c38..0b0accadc9ea58 100644
--- a/packages/format-library/src/link/modal.native.js
+++ b/packages/format-library/src/link/modal.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React from 'react';
-import { Switch } from 'react-native';
+import { Switch, Platform } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -128,7 +128,7 @@ class ModalLinkUI extends Component {
 						autoCorrect={ false }
 						textContentType="URL"
 						onChangeValue={ this.onChangeInputValue }
-						autoFocus
+						autoFocus={ Platform.OS === 'ios' }
 					/>
 				/* eslint-enable jsx-a11y/no-autofocus */ }
 				<BottomSheet.Cell