Merge pull request #600 from wordpress-mobile/issue/bottom-sheet-widt…

…h-centered

BottomSheet centered with maximum width.

src/block-management/block-manager.js

@@ -239,7 +239,7 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 						onDismiss={ () => this.showBlockTypePicker( false ) }
 						onValueSelected={ this.onBlockTypeSelected }
 						isReplacement={ this.isReplaceable( this.props.selectedBlock ) }
-						safeAreaBottomInset={ this.state.safeAreaBottomInset }
+						addExtraBottomPadding={ this.state.safeAreaBottomInset === 0 }
 					/>
 				) }
 			</SafeAreaView>

src/block-management/block-picker.js

@@ -4,83 +4,78 @@
  */
 
 /**
- * WordPress dependencies
- */
-import { SVG } from '@wordpress/components';
-
+* External dependencies
+*/
 import React from 'react';
+import { FlatList, Text, TouchableHighlight, View } from 'react-native';
+
+/**
+* WordPress dependencies
+*/
+import { SVG } from '@wordpress/components';
+import { BottomSheet } from '@wordpress/editor';
 import { Component } from '@wordpress/element';
-import { FlatList, Text, TouchableHighlight, View, Dimensions } from 'react-native';
-import Modal from 'react-native-modal';
+import { getBlockTypes } from '@wordpress/blocks';
+
+/**
+* Internal dependencies
+*/
 import styles from './block-picker.scss';
 import { name as unsupportedBlockName } from '../block-types/unsupported-block';
-// Gutenberg imports
-import { getBlockTypes } from '@wordpress/blocks';
 
 type PropsType = {
 	style?: StyleSheet,
 	isReplacement: boolean,
 	onValueSelected: ( itemValue: string ) => void,
 	onDismiss: () => void,
-	safeAreaBottomInset: number,
+	addExtraBottomPadding: boolean,
 };
 
 export default class BlockPicker extends Component<PropsType> {
 	availableBlockTypes = getBlockTypes().filter( ( { name } ) => name !== unsupportedBlockName );
 
 	render() {
 		const numberOfColumns = this.calculateNumberOfColumns();
-		const paddingBottom = this.paddingBottom();
+		const bottomPadding = this.props.addExtraBottomPadding && styles.contentBottomPadding;
 
 		return (
-			<Modal
-				transparent={ true }
+			<BottomSheet
 				isVisible={ true }
-				onSwipe={ this.props.onDismiss }
-				onBackButtonPress={ this.props.onDismiss }
-				swipeDirection="down"
-				style={ [ styles.bottomModal, this.props.style ] }
-				backdropColor={ 'lightgrey' }
-				backdropOpacity={ 0.4 }
-				onBackdropPress={ this.props.onDismiss }>
-				<View style={ [ styles.modalContent, { paddingBottom } ] }>
-					<View style={ styles.shortLineStyle } />
-					<FlatList
-						scrollEnabled={ false }
-						key={ `InserterUI-${ numberOfColumns }` } //re-render when numberOfColumns changes
-						keyboardShouldPersistTaps="always"
-						numColumns={ numberOfColumns }
-						data={ this.availableBlockTypes }
-						keyExtractor={ ( item ) => item.name }
-						renderItem={ ( { item } ) =>
-							<TouchableHighlight
-								style={ styles.touchableArea }
-								underlayColor={ 'transparent' }
-								activeOpacity={ .5 }
-								onPress={ () => this.props.onValueSelected( item.name ) }>
-								<View style={ styles.modalItem }>
-									<View style={ styles.modalIconWrapper }>
-										<View style={ styles.modalIcon }>
-											{ this.iconWithUpdatedFillColor( styles.modalIcon.fill, item.icon ) }
-										</View>
+				onClose={ this.props.onDismiss }
+				contentStyle={ [ styles.content, bottomPadding ] }
+				hideHeader
+			>
+				<FlatList
+					scrollEnabled={ false }
+					key={ `InserterUI-${ numberOfColumns }` } //re-render when numberOfColumns changes
+					keyboardShouldPersistTaps="always"
+					numColumns={ numberOfColumns }
+					data={ this.availableBlockTypes }
+					ItemSeparatorComponent={ () =>
+						<View style={ styles.rowSeparator } />
+					}
+					keyExtractor={ ( item ) => item.name }
+					renderItem={ ( { item } ) =>
+						<TouchableHighlight
+							style={ styles.touchableArea }
+							underlayColor={ 'transparent' }
+							activeOpacity={ .5 }
+							onPress={ () => this.props.onValueSelected( item.name ) }>
+							<View style={ styles.modalItem }>
+								<View style={ styles.modalIconWrapper }>
+									<View style={ styles.modalIcon }>
+										{ this.iconWithUpdatedFillColor( styles.modalIcon.fill, item.icon ) }
 									</View>
-									<Text style={ styles.modalItemLabel }>{ item.title }</Text>
 								</View>
-							</TouchableHighlight>
-						}
-					/>
-				</View>
-			</Modal>
+								<Text style={ styles.modalItemLabel }>{ item.title }</Text>
+							</View>
+						</TouchableHighlight>
+					}
+				/>
+			</BottomSheet>
 		);
 	}
 
-	paddingBottom() {
-		if ( this.props.safeAreaBottomInset > 0 ) {
-			return this.props.safeAreaBottomInset - styles.modalItem.paddingBottom;
-		}
-		return styles.modalContent.paddingBottom;
-	}
-
 	iconWithUpdatedFillColor( color: string, icon: SVG ) {
 		return (
 			<SVG viewBox={ icon.src.props.viewBox } xmlns={ icon.src.props.xmlns } style={ { fill: color } }>
@@ -90,16 +85,12 @@ export default class BlockPicker extends Component<PropsType> {
 	}
 
 	calculateNumberOfColumns() {
-		const { width: windowWidth } = Dimensions.get( 'window' );
+		const bottomSheetWidth = BottomSheet.getWidth();
 		const { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } = styles.modalItem;
-		const { paddingLeft: containerPaddingLeft, paddingRight: containerPaddingRight } = styles.modalContent;
+		const { paddingLeft: containerPaddingLeft, paddingRight: containerPaddingRight } = styles.content;
 		const { width: itemWidth } = styles.modalIconWrapper;
 		const itemTotalWidth = itemWidth + itemPaddingLeft + itemPaddingRight;
-		const containerTotalWidth = windowWidth - ( containerPaddingLeft + containerPaddingRight );
+		const containerTotalWidth = bottomSheetWidth - ( containerPaddingLeft + containerPaddingRight );
 		return Math.floor( containerTotalWidth / itemTotalWidth );
 	}
 }
-
-BlockPicker.defaultProps = {
-	safeAreaBottomInset: 0,
-};

src/block-management/block-picker.scss

@@ -3,35 +3,22 @@
 @import '../variables.scss';
 @import './colors.scss';
 
-.shortLineStyle {
-	border-top-color: #e9eff3;
-	border-top-width: 4px;
-	border-radius: 4px 4px 4px 4px;
-	margin-bottom: 8px;
-	margin-top: 0px;
-	vertical-align: top;
-	width: 36px;
-	height: 4px;
-	align-self: center;
-}
-
-.bottomModal {
-	justify-content: flex-end;
-	margin: 0px;
-}
-
 .touchableArea {
 	border-radius: 8px 8px 8px 8px;
 }
 
-.modalContent {
-	padding: 6px 0px 12px 0px;
+.content {
+	padding: 0 0 0 0;
 	align-items: center;
 	justify-content: space-evenly;	
-	border-radius: 10px 10px 0px 0px;
-	border-color: #e0e1e2;
-	border-width: 1px;
-	background-color: white;
+}
+
+.contentBottomPadding {
+	padding-bottom: 20px;
+}
+
+.rowSeparator {
+	height: 12px;
 }
 
 .modalItem {	
@@ -40,8 +27,8 @@
 	align-items: center;
 	padding-left: 8;
 	padding-right: 8;
-	padding-top: 6;
-	padding-bottom: 6;
+	padding-top: 0;
+	padding-bottom: 0;
 }
 
 .modalIconWrapper {