Mobile bottom sheet component

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React from 'react';
-import { View, Image, TextInput } from 'react-native';
+import { View, Image, TextInput, Text, TouchableOpacity } from 'react-native';
 import {
 	subscribeMediaUpload,
 	requestMediaPickFromMediaLibrary,
@@ -14,11 +14,12 @@ import {
 /**
  * Internal dependencies
  */
-import { MediaPlaceholder, RichText, BlockControls, InspectorControls } from '@wordpress/editor';
+import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet } from '@wordpress/editor';
 import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
 import { isURL } from '@wordpress/url';
+import inspectorStyles from './inspector-styles.scss';
 
 const MEDIA_ULOAD_STATE_UPLOADING = 1;
 const MEDIA_ULOAD_STATE_SUCCEEDED = 2;
@@ -31,6 +32,7 @@ export default class ImageEdit extends React.Component {
 		this.state = {
 			progress: 0,
 			isUploadInProgress: false,
+			showSettings: false,
 		};
 
 		this.mediaUpload = this.mediaUpload.bind( this );
@@ -144,7 +146,11 @@ export default class ImageEdit extends React.Component {
 		}
 
 		const onImageSettingsButtonPressed = () => {
+			this.setState( { showSettings: true } );
+		};
 
+		const onImageSettingsClose = () => {
+			this.setState( { showSettings: false } );
 		};
 
 		const toolbarEditButton = (
@@ -157,12 +163,18 @@ export default class ImageEdit extends React.Component {
 			</Toolbar>
 		);
 
-		const inlineToolbarButtons = (
-			<ToolbarButton
-				label={ __( 'Image Settings' ) }
-				icon="admin-generic"
-				onClick={ onImageSettingsButtonPressed }
-			/>
+		const getInspectorControls = () => (
+			<BottomSheet
+				isVisible={ this.state.showSettings }
+				title={ __( 'Image Settings' ) }
+				onClose={ onImageSettingsClose }
+				rightButtonConfig={ { text: __( 'Done' ), color: '#0087be', onPress: onImageSettingsClose } }
+			>
+				<TouchableOpacity style={ inspectorStyles.bottomSheetCell } onPress={ () => { } }>
+					<Text style={ inspectorStyles.bottomSheetCellLabel }>{ __( 'Alt Text' ) }</Text>
+					<Text style={ inspectorStyles.bottomSheetCellValue }>{ __( 'None' ) }</Text>
+				</TouchableOpacity>
+			</BottomSheet>
 		);
 
 		const showSpinner = this.state.isUploadInProgress;
@@ -176,7 +188,11 @@ export default class ImageEdit extends React.Component {
 					{ toolbarEditButton }
 				</BlockControls>
 				<InspectorControls>
-					{ inlineToolbarButtons }
+					<ToolbarButton
+						label={ __( 'Image Settings' ) }
+						icon="admin-generic"
+						onClick={ onImageSettingsButtonPressed }
+					/>
 				</InspectorControls>
 				<ImageSize src={ url } >
 					{ ( sizes ) => {
@@ -197,6 +213,7 @@ export default class ImageEdit extends React.Component {
 
 						return (
 							<View style={ { flex: 1 } } >
+								{ getInspectorControls() }
 								<Image
 									style={ { width: finalWidth, height: finalHeight, opacity } }
 									resizeMethod="scale"

packages/block-library/src/image/inspector-styles.native.scss

@@ -0,0 +1,20 @@
+//Bottom Sheet
+
+.bottomSheetCell {
+	flex-direction: row;
+	min-height: 60;
+	justify-content: space-between;
+	padding-left: 12;
+	padding-right: 12;
+	align-items: center;
+}
+
+.bottomSheetCellLabel {
+	font-size: 18px;
+	color: #000;
+}
+
+.bottomSheetCellValue {
+	font-size: 18px;
+	color: $dark-gray-400;
+}

packages/editor/src/components/index.native.js

@@ -11,3 +11,4 @@ export { default as PostTitle } from './post-title';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
 export { default as InspectorControls } from './inspector-controls';
+export { default as BottomSheet } from './mobile/bottom-sheet';

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

@@ -0,0 +1,24 @@
+/**
+* External dependencies
+*/
+import { TouchableOpacity, View } from 'react-native';
+
+export default function Button( props ) {
+	const {
+		children,
+		onPress,
+		disabled,
+	} = props;
+
+	return (
+		<TouchableOpacity
+			accessible={ true }
+			onPress={ onPress }
+			disabled={ disabled }
+		>
+			<View style={ { flexDirection: 'row', justifyContent: 'center' } }>
+				{ children }
+			</View>
+		</TouchableOpacity>
+	);
+}

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

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+import Modal from 'react-native-modal';
+import SafeArea from 'react-native-safe-area';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+import Button from './button';
+
+class BottomSheet extends Component {
+	constructor() {
+		super( ...arguments );
+		this.onSafeAreaInsetsUpdate = this.onSafeAreaInsetsUpdate.bind( this );
+		this.state = {
+			safeAreaBottomInset: 0,
+		};
+
+		SafeArea.getSafeAreaInsetsForRootView().then( this.onSafeAreaInsetsUpdate );
+	}
+
+	componentDidMount() {
+		SafeArea.addEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate );
+	}
+
+	componentWillUnmount() {
+		SafeArea.removeEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate );
+	}
+
+	headerButton( config ) {
+		return (
+			<Button onPress={ config.onPress }>
+				<Text style={ { ...styles.buttonText, color: config.color } }>
+					{ config.text }
+				</Text>
+			</Button>
+		);
+	}
+
+	onSafeAreaInsetsUpdate( result ) {
+		const { safeAreaInsets } = result;
+		if ( this.state.safeAreaBottomInset !== safeAreaInsets.bottom ) {
+			this.setState( { safeAreaBottomInset: safeAreaInsets.bottom } );
+		}
+	}
+
+	render() {
+		const { isVisible, leftButtonConfig, rightButtonConfig } = this.props;
+
+		return (
+			<Modal
+				isVisible={ isVisible }
+				style={ styles.bottomModal }
+				animationInTiming={ 500 }
+				animationOutTiming={ 500 }
+				backdropTransitionInTiming={ 500 }
+				backdropTransitionOutTiming={ 500 }
+				onBackdropPress={ this.props.onClose }
+				onSwipe={ this.props.onClose }
+				swipeDirection="down"
+			>
+				<View style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }>
+					<View style={ styles.dragIndicator } />
+					<View style={ styles.head }>
+						<View style={ { flex: 1 } }>
+							{ leftButtonConfig && this.headerButton( leftButtonConfig ) }
+						</View>
+						<View style={ styles.titleContainer }>
+							<Text style={ styles.title }>
+								{ this.props.title }
+							</Text>
+						</View>
+						<View style={ { flex: 1 } }>
+							{ rightButtonConfig && this.headerButton( rightButtonConfig ) }
+						</View>
+					</View>
+
+					<View style={ styles.separator } />
+					{ this.props.children }
+					<View style={ { flexGrow: 1 } }></View>
+					<View style={ { height: this.state.safeAreaBottomInset } } />
+				</View>
+			</Modal>
+		);
+	}
+}
+
+export default BottomSheet;

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

@@ -0,0 +1,59 @@
+//Bottom Sheet
+
+.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: 100%;
+	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;
+	text-align: center;
+}
+
+.titleContainer {
+	justify-content: center;
+	flex: 2;
+	align-content: center;
+}
+
+// Button
+
+.buttonText {
+	font-size: 18px;
+	padding: 5px;
+}