[RNMobile] add isSelected prop to PlainText-backed blocks (#11989)

* handling isSelected in PlainText primitive through a deferred call to focus() on React Native TextInput * adds isSelected prop support for Code block * added isSelected prop to More block * promoted PlainText native implentation to extend Component and reuse ReactNative lifecycle * fixed lint warnings * get style from props
WordPress · Nov 16, 2018 · f9ddd68 · f9ddd68
1 parent daa2e8d
commit f9ddd68
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js
@@ -20,7 +20,9 @@ import styles from './theme.scss';
 
 // Note: styling is applied directly to the (nested) PlainText component. Web-side components
 // apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
-export default function CodeEdit( { attributes, setAttributes, style } ) {
+export default function CodeEdit( props ) {
+	const { attributes, setAttributes, style } = props;
+
 	return (
 		<View>
 			<PlainText
@@ -31,6 +33,7 @@ export default function CodeEdit( { attributes, setAttributes, style } ) {
 				onChange={ ( content ) => setAttributes( { content } ) }
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
+				isSelected={ props.isSelected }
 			/>
 		</View>
 	);

diff --git a/packages/block-library/src/more/edit.native.js b/packages/block-library/src/more/edit.native.js
@@ -14,7 +14,8 @@ import { __ } from '@wordpress/i18n';
 import { PlainText } from '@wordpress/editor';
 import styles from './editor.scss';
 
-export default function MoreEdit( { attributes, setAttributes } ) {
+export default function MoreEdit( props ) {
+	const { attributes, setAttributes } = props;
 	const { customText } = attributes;
 	const defaultText = __( 'Read more' );
 	const value = customText !== undefined ? customText : defaultText;
@@ -30,6 +31,7 @@ export default function MoreEdit( { attributes, setAttributes } ) {
 					underlineColorAndroid="transparent"
 					onChange={ ( newValue ) => setAttributes( { customText: newValue } ) }
 					placeholder={ defaultText }
+					isSelected={ props.isSelected }
 				/>
 				<Text className={ styles[ 'block-library-more__right-marker' ] }>--&gt;</Text>
 			</View>

diff --git a/packages/editor/src/components/plain-text/index.native.js b/packages/editor/src/components/plain-text/index.native.js
@@ -3,19 +3,36 @@
  */
 import { TextInput } from 'react-native';
 
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-function PlainText( { onChange, className, ...props } ) {
-	return (
-		<TextInput
-			className={ [ styles[ 'editor-plain-text' ], className ] }
-			onChangeText={ ( text ) => onChange( text ) }
-			{ ...props }
-		/>
-	);
-}
+export default class PlainText extends Component {
+	componentDidMount() {
+		// if isSelected is true, we should request the focus on this TextInput
+		if ( ( this._input.isFocused() === false ) && ( this._input.props.isSelected === true ) ) {
+			this.focus();
+		}
+	}
+
+	focus() {
+		this._input.focus();
+	}
 
-export default PlainText;
+	render() {
+		return (
+			<TextInput
+				ref={ ( x ) => this._input = x }
+				className={ [ styles[ 'editor-plain-text' ], this.props.className ] }
+				onChangeText={ ( text ) => this.props.onChange( text ) }
+				{ ...this.props }
+			/>
+		);
+	}
+}