Alt image setting (#13631)

* rnmobile: Implement image settings button using InspectorControls.Slot pattern.

* rnmobile: Add missing semicolon

* rnmobile: Adding bottom-sheet component to mobile

* rnmobile: Styling bottom-sheet header

* rnmobile: Bottom-sheet clean up

* rnmobile: Fix lint issues on bottom-sheet related code.

* rnmobile: Fix small lint issues

* rnmobile: Move inline toolbar button definition out of constant.

* rnmobile: Remove extra white-spaces

* revert package-lock.json changes

* rnmobile: Fix merge issue

* rnmobile: Imported BaseControl and TextinputControl to be used on Alt Image Settings

* rnmobile: exporting component BottomSheet.Button to be used as bottom-sheet header buttons

* rnmobile: Adding BottomSheet.Cell component as an extraction for BottomSheet users.

* Fix lint issues

* Reverting changes to package-lock.json

* Fix merge issues

* Remove Done button from Image settings bottom sheet

* Make bottom-sheet avoid being behind keyboard

* Fix lint issues

* Making BottomSheet.Cell value editable as textinput.

* Remove unnecesary onPress prop from Alt cell.

* Fix lint issues

packages/block-library/src/image/edit.native.js

@@ -44,6 +44,7 @@ export default class ImageEdit extends React.Component {
 		this.removeMediaUploadListener = this.removeMediaUploadListener.bind( this );
 		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind( this );
 		this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind( this );
+		this.updateAlt = this.updateAlt.bind( this );
 		this.onImagePressed = this.onImagePressed.bind( this );
 	}
 
@@ -128,9 +129,13 @@ export default class ImageEdit extends React.Component {
 		}
 	}
 
+	updateAlt( newAlt ) {
+		this.props.setAttributes( { alt: newAlt } );
+	}
+
 	render() {
 		const { attributes, isSelected, setAttributes } = this.props;
-		const { url, caption, height, width } = attributes;
+		const { url, caption, height, width, alt } = attributes;
 
 		const onMediaLibraryButtonPressed = () => {
 			requestMediaPickFromMediaLibrary( ( mediaId, mediaUrl ) => {
@@ -191,19 +196,13 @@ export default class ImageEdit extends React.Component {
 				isVisible={ this.state.showSettings }
 				onClose={ onImageSettingsClose }
 				hideHeader
-				rightButton={
-					<BottomSheet.Button
-						text={ __( 'Done' ) }
-						color={ '#0087be' }
-						onPress={ onImageSettingsClose }
-					/>
-				}
 			>
 				<BottomSheet.Cell
 					icon={ 'editor-textcolor' }
 					label={ __( 'Alt Text' ) }
-					value={ __( 'None' ) }
-					onPress={ () => {} }
+					value={ alt || '' }
+					valuePlaceholder={ __( 'None' ) }
+					onChangeValue={ this.updateAlt }
 				/>
 				<BottomSheet.Cell
 					label={ __( 'Reset to original' ) }

packages/components/src/base-control/index.native.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+
+export default function BaseControl( { label, help, children } ) {
+	return (
+		<View
+			accessible={ true }
+			accessibilityLabel={ label }
+		>
+			{ label && <Text>{ label }</Text> }
+			{ children }
+			{ help && <Text>{ help }</Text> }
+		</View>
+	);
+}

packages/components/src/index.native.js

@@ -7,6 +7,8 @@ export { default as withSpokenMessages } from './higher-order/with-spoken-messag
 export { default as IconButton } from './icon-button';
 export { default as Spinner } from './spinner';
 export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
+export { default as BaseControl } from './base-control';
+export { default as TextareaControl } from './textarea-control';
 
 // Higher-Order Components
 export { default as withFilters } from './higher-order/with-filters';

packages/components/src/textarea-control/index.native.js

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { TextInput } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from '../base-control';
+
+function TextareaControl( { label, value, help, onChange, rows = 4 } ) {
+	return (
+		<BaseControl label={ label } help={ help } >
+			<TextInput
+				style={ { height: 80, borderColor: 'gray', borderWidth: 1 } }
+				value={ value }
+				onChangeText={ onChange }
+				numberOfLines={ rows }
+				multiline={ rows > 1 }
+				textAlignVertical="top"
+			/>
+		</BaseControl>
+	);
+}
+
+export default TextareaControl;

packages/editor/src/components/mobile/bottom-sheet/cell.native.js

@@ -1,7 +1,7 @@
 /**
 * External dependencies
 */
-import { TouchableOpacity, Text, View } from 'react-native';
+import { TouchableOpacity, Text, View, TextInput } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -18,16 +18,29 @@ export default function Cell( props ) {
 		onPress,
 		label,
 		value,
+		valuePlaceholder = '',
 		drawSeparator = true,
 		icon,
 		labelStyle = {},
 		valueStyle = {},
+		onChangeValue,
 	} = props;
 
-	const defaultLabelStyle = value ? styles.cellLabel : styles.cellLabelCentered;
+	const showValue = value !== undefined;
+	const isValueEditable = onChangeValue !== undefined;
+	const defaultLabelStyle = showValue ? styles.cellLabel : styles.cellLabelCentered;
+	let valueTextInput;
+
+	const onCellPress = () => {
+		if ( isValueEditable ) {
+			valueTextInput.focus();
+		} else {
+			onPress();
+		}
+	};
 
 	return (
-		<TouchableOpacity onPress={ onPress }>
+		<TouchableOpacity onPress={ onCellPress }>
 			<View style={ styles.cellContainer }>
 				<View style={ styles.cellRowContainer }>
 					{ icon && (
@@ -36,10 +49,20 @@ export default function Cell( props ) {
 							<View style={ { width: 12 } } />
 						</View>
 					) }
-					<Text style={ { ...defaultLabelStyle, ...labelStyle } }>{ label }</Text>
+					<Text numberOfLines={ 1 } style={ { ...defaultLabelStyle, ...labelStyle } }>
+						{ label }
+					</Text>
 				</View>
-				{ value && (
-					<Text style={ { ...styles.cellValue, ...valueStyle } }>{ value }</Text>
+				{ showValue && (
+					<TextInput
+						ref={ ( c ) => valueTextInput = c }
+						numberOfLines={ 1 }
+						style={ { ...styles.cellValue, ...valueStyle } }
+						value={ value }
+						placeholder={ valuePlaceholder }
+						onChangeText={ onChangeValue }
+						editable={ isValueEditable }
+					/>
 				) }
 			</View>
 			{ drawSeparator && (

packages/editor/src/components/mobile/bottom-sheet/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Text, View } from 'react-native';
+import { Text, View, KeyboardAvoidingView, Platform } from 'react-native';
 import Modal from 'react-native-modal';
 import SafeArea from 'react-native-safe-area';
 
@@ -58,7 +58,10 @@ class BottomSheet extends Component {
 				onSwipe={ this.props.onClose }
 				swipeDirection="down"
 			>
-				<View style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }>
+				<KeyboardAvoidingView
+					behavior={ Platform.OS === 'ios' && 'padding' }
+					style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }
+				>
 					<View style={ styles.dragIndicator } />
 					{ hideHeader || (
 						<View>
@@ -78,12 +81,12 @@ class BottomSheet extends Component {
 							<View style={ styles.separator } />
 						</View>
 					) }
-
 					{ this.props.children }
 					<View style={ { flexGrow: 1 } }></View>
 					<View style={ { height: this.state.safeAreaBottomInset } } />
-				</View>
+				</KeyboardAvoidingView>
 			</Modal>
+
 		);
 	}
 }

packages/editor/src/components/mobile/bottom-sheet/styles.scss

@@ -65,8 +65,8 @@
 	flex-direction: row;
 	min-height: 50;
 	justify-content: space-between;
-	padding-left: 12;
-	padding-right: 12;
+	margin-left: 12;
+	margin-right: 12;
 	align-items: center;
 }
 
@@ -82,6 +82,7 @@
 .cellLabel {
 	font-size: 18px;
 	color: #000;
+	margin-right: 12px;
 }
 
 .cellLabelCentered {
@@ -94,4 +95,5 @@
 .cellValue {
 	font-size: 18px;
 	color: $dark-gray-400;
+	text-align: right;
 }