Unify container component within html text input

WordPress · Mar 25, 2022 · 5c6e21a · 5c6e21a
1 parent 7fac2ec
commit 5c6e21a
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 102 deletions.
diff --git a/packages/components/src/mobile/html-text-input/container.android.js b/packages/components/src/mobile/html-text-input/container.android.js
diff --git a/packages/components/src/mobile/html-text-input/container.ios.js b/packages/components/src/mobile/html-text-input/container.ios.js
diff --git a/packages/components/src/mobile/html-text-input/index.native.js b/packages/components/src/mobile/html-text-input/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TextInput } from 'react-native';
+import { ScrollView, TextInput } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ import {
 /**
  * Internal dependencies
  */
-import HTMLInputContainer from './container';
+import KeyboardAvoidingView from '../keyboard-avoiding-view';
 import styles from './style.scss';
 
 export class HTMLTextInput extends Component {
@@ -73,7 +73,13 @@ export class HTMLTextInput extends Component {
 	}
 
 	render() {
-		const { getStylesFromColorScheme, style } = this.props;
+		const {
+			editTitle,
+			getStylesFromColorScheme,
+			parentHeight,
+			style,
+			title,
+		} = this.props;
 		const titleStyle = [
 			styles.htmlViewTitle,
 			style?.text && { color: style.text },
@@ -90,32 +96,42 @@ export class HTMLTextInput extends Component {
 			...( style?.text && { color: style.text } ),
 		};
 		return (
-			<HTMLInputContainer parentHeight={ this.props.parentHeight }>
-				<TextInput
-					autoCorrect={ false }
-					accessibilityLabel="html-view-title"
-					textAlignVertical="center"
-					numberOfLines={ 1 }
-					style={ titleStyle }
-					value={ this.props.title }
-					placeholder={ __( 'Add title' ) }
-					placeholderTextColor={ placeholderStyle.color }
-					onChangeText={ this.props.editTitle }
-				/>
-				<TextInput
-					autoCorrect={ false }
-					accessibilityLabel="html-view-content"
-					textAlignVertical="top"
-					multiline
-					style={ htmlStyle }
-					value={ this.state.value }
-					onChangeText={ this.edit }
-					onBlur={ this.stopEditing }
-					placeholder={ __( 'Start writing…' ) }
-					placeholderTextColor={ placeholderStyle.color }
-					scrollEnabled={ HTMLInputContainer.scrollEnabled }
-				/>
-			</HTMLInputContainer>
+			<KeyboardAvoidingView
+				style={ styles.keyboardAvoidingView }
+				parentHeight={ parentHeight }
+			>
+				<ScrollView style={ styles.scrollView }>
+					<TextInput
+						autoCorrect={ false }
+						accessibilityLabel="html-view-title"
+						textAlignVertical="center"
+						numberOfLines={ 1 }
+						style={ titleStyle }
+						value={ title }
+						placeholder={ __( 'Add title' ) }
+						placeholderTextColor={ placeholderStyle.color }
+						onChangeText={ editTitle }
+					/>
+					<TextInput
+						ref={ this.contentTextInputRef }
+						autoCorrect={ false }
+						accessibilityLabel="html-view-content"
+						textAlignVertical="top"
+						multiline
+						style={ htmlStyle }
+						value={ this.state.value }
+						onChangeText={ this.edit }
+						onBlur={ this.stopEditing }
+						placeholder={ __( 'Start writing…' ) }
+						placeholderTextColor={ placeholderStyle.color }
+						scrollEnabled={ false }
+						// [Only iOS] This prop prevents the text input from
+						// automatically getting focused after scrolling
+						// content.
+						rejectResponderTermination={ false }
+					/>
+				</ScrollView>
+			</KeyboardAvoidingView>
 		);
 	}
 }