[RNMobile] Adjust bottom-sheet (#18574)

* Initial work on iOS Inserter * Disable swiping-to-close on Android * Add listener for device rotation and small styling changes * Small cleanup * More refactor * Refactor horizontal mode * Adjust itemWidth for zoomed screen on Android * Set accessiblity false * Add disableScrollViewPanResponder * Adjust BottomSheet height when a keyboard is opened * Correct removing keyboard listeners * Code clean up * Revert change * Revert pushed file by mistake * Code refactor after CR * Remove dimensions listener on unmount
WordPress · Feb 12, 2020 · d67ce67 · d67ce67
1 parent c77a602
commit d67ce67
Show file tree

Hide file tree

Showing 4 changed files with 235 additions and 75 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { FlatList, View, Text, TouchableHighlight } from 'react-native';
+import {
+	FlatList,
+	View,
+	Text,
+	TouchableHighlight,
+	Dimensions,
+} from 'react-native';
 
 /**
  * WordPress dependencies
@@ -21,15 +27,19 @@ import { BottomSheet, Icon } from '@wordpress/components';
  */
 import styles from './style.scss';
 
+const MIN_COL_NUM = 3;
+
 export class InserterMenu extends Component {
 	constructor() {
 		super( ...arguments );
 
 		this.onClose = this.onClose.bind( this );
 		this.onLayout = this.onLayout.bind( this );
 		this.state = {
-			numberOfColumns: this.calculateNumberOfColumns(),
+			numberOfColumns: MIN_COL_NUM,
 		};
+
+		Dimensions.addEventListener( 'change', this.onLayout );
 	}
 
 	componentDidMount() {
@@ -38,23 +48,46 @@ export class InserterMenu extends Component {
 
 	componentWillUnmount() {
 		this.props.hideInsertionPoint();
+		Dimensions.removeEventListener( 'change', this.onLayout );
 	}
 
-	calculateNumberOfColumns() {
-		const bottomSheetWidth = BottomSheet.getWidth();
+	calculateMinItemWidth( bottomSheetWidth ) {
+		const { paddingLeft, paddingRight } = styles.columnPadding;
+		return (
+			( bottomSheetWidth - 2 * ( paddingLeft + paddingRight ) ) /
+			MIN_COL_NUM
+		);
+	}
+
+	calculateItemWidth() {
 		const {
 			paddingLeft: itemPaddingLeft,
 			paddingRight: itemPaddingRight,
 		} = styles.modalItem;
+		const { width: itemWidth } = styles.modalIconWrapper;
+		return itemWidth + itemPaddingLeft + itemPaddingRight;
+	}
+
+	calculateColumnsProperties() {
+		const bottomSheetWidth = BottomSheet.getWidth();
 		const {
 			paddingLeft: containerPaddingLeft,
 			paddingRight: containerPaddingRight,
 		} = styles.content;
-		const { width: itemWidth } = styles.modalIconWrapper;
-		const itemTotalWidth = itemWidth + itemPaddingLeft + itemPaddingRight;
+		const itemTotalWidth = this.calculateItemWidth();
 		const containerTotalWidth =
 			bottomSheetWidth - ( containerPaddingLeft + containerPaddingRight );
-		return Math.floor( containerTotalWidth / itemTotalWidth );
+		const numofColumns = Math.floor( containerTotalWidth / itemTotalWidth );
+
+		if ( numofColumns < MIN_COL_NUM ) {
+			return {
+				numOfColumns: MIN_COL_NUM,
+				itemWidth: this.calculateMinItemWidth( bottomSheetWidth ),
+			};
+		}
+		return {
+			numOfColumns: numofColumns,
+		};
 	}
 
 	onClose() {
@@ -67,12 +100,16 @@ export class InserterMenu extends Component {
 	}
 
 	onLayout() {
-		const numberOfColumns = this.calculateNumberOfColumns();
+		const columnProperties = this.calculateColumnsProperties();
+		const numberOfColumns = columnProperties.numOfColumns;
+
 		this.setState( { numberOfColumns } );
 	}
 
 	render() {
-		const { getStylesFromColorScheme } = this.props;
+		const { getStylesFromColorScheme, items, onSelect } = this.props;
+		const { numberOfColumns } = this.state;
+
 		const bottomPadding = styles.contentBottomPadding;
 		const modalIconWrapperStyle = getStylesFromColorScheme(
 			styles.modalIconWrapper,
@@ -87,49 +124,61 @@ export class InserterMenu extends Component {
 			styles.modalItemLabelDark
 		);
 
+		const columnProperties = this.calculateColumnsProperties();
+
 		return (
 			<BottomSheet
 				isVisible={ true }
 				onClose={ this.onClose }
 				contentStyle={ [ styles.content, bottomPadding ] }
 				hideHeader
 			>
-				<FlatList
-					onLayout={ this.onLayout }
-					scrollEnabled={ false }
-					key={ `InserterUI-${ this.state.numberOfColumns }` } //re-render when numberOfColumns changes
-					keyboardShouldPersistTaps="always"
-					numColumns={ this.state.numberOfColumns }
-					data={ this.props.items }
-					ItemSeparatorComponent={ () => (
-						<View style={ styles.rowSeparator } />
-					) }
-					keyExtractor={ ( item ) => item.name }
-					renderItem={ ( { item } ) => (
-						<TouchableHighlight
-							style={ styles.touchableArea }
-							underlayColor="transparent"
-							activeOpacity={ 0.5 }
-							accessibilityLabel={ item.title }
-							onPress={ () => this.props.onSelect( item ) }
-						>
-							<View style={ styles.modalItem }>
-								<View style={ modalIconWrapperStyle }>
-									<View style={ modalIconStyle }>
-										<Icon
-											icon={ item.icon.src }
-											fill={ modalIconStyle.fill }
-											size={ modalIconStyle.width }
-										/>
+				<TouchableHighlight accessible={ false }>
+					<FlatList
+						onLayout={ this.onLayout }
+						scrollEnabled={ false }
+						key={ `InserterUI-${ numberOfColumns }` } //re-render when numberOfColumns changes
+						keyboardShouldPersistTaps="always"
+						numColumns={ numberOfColumns }
+						data={ items }
+						ItemSeparatorComponent={ () => (
+							<View style={ styles.rowSeparator } />
+						) }
+						keyExtractor={ ( item ) => item.name }
+						renderItem={ ( { item } ) => (
+							<TouchableHighlight
+								style={ styles.touchableArea }
+								underlayColor="transparent"
+								activeOpacity={ 0.5 }
+								accessibilityLabel={ item.title }
+								onPress={ () => onSelect( item ) }
+							>
+								<View style={ styles.modalItem }>
+									<View
+										style={ [
+											modalIconWrapperStyle,
+											columnProperties.itemWidth && {
+												width:
+													columnProperties.itemWidth,
+											},
+										] }
+									>
+										<View style={ modalIconStyle }>
+											<Icon
+												icon={ item.icon.src }
+												fill={ modalIconStyle.fill }
+												size={ modalIconStyle.width }
+											/>
+										</View>
 									</View>
+									<Text style={ modalItemLabelStyle }>
+										{ item.title }
+									</Text>
 								</View>
-								<Text style={ modalItemLabelStyle }>
-									{ item.title }
-								</Text>
-							</View>
-						</TouchableHighlight>
-					) }
-				/>
+							</TouchableHighlight>
+						) }
+					/>
+				</TouchableHighlight>
 			</BottomSheet>
 		);
 	}

diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss
@@ -7,7 +7,6 @@
 .content {
 	padding: 0 0 0 0;
 	align-items: center;
-	justify-content: space-evenly;
 }
 
 .contentBottomPadding {
@@ -20,10 +19,10 @@
 
 .modalItem {
 	flex-direction: column;
-	justify-content: center;
+	justify-content: flex-start;
 	align-items: center;
-	padding-left: 8;
-	padding-right: 8;
+	padding-left: $panel-padding / 2;
+	padding-right: $panel-padding / 2;
 	padding-top: 0;
 	padding-bottom: 0;
 }
@@ -79,3 +78,7 @@
 	color: $blue-30;
 	border-color: $blue-30;
 }
+
+.columnPadding {
+	padding: $panel-padding;
+}