WordPress · etoledom · Feb 22, 2019 · Feb 20, 2019 · Feb 20, 2019 · Feb 20, 2019
diff --git 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
@@ -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/button.native.js b/packages/format-library/src/link/button.native.js
diff --git 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
@@ -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, Platform } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { URLInput } 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 );
@@ -43,12 +41,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,71 +113,48 @@ 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 }>
-						<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>
-				</View>
-			</Modal>
+				{ /* 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={ Platform.OS === 'ios' }
+					/>
+				/* eslint-enable jsx-a11y/no-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>
+				<BottomSheet.Cell
+					label={ __( 'Remove Link' ) }
+					labelStyle={ styles.clearLinkButton }
+					separatorType={ 'none' }
+					onPress={ this.removeLink }
+				/>
+			</BottomSheet>
 		);
 	}
 }

diff --git a/packages/format-library/src/link/modal.native.scss b/packages/format-library/src/link/modal.native.scss
@@ -1,80 +1,3 @@
-
-.bottomModal {
-	justify-content: flex-end;
-	margin: 0;
+.clearLinkButton {
+	color: $alert-red;
 }
-
-.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;
-}
-