Add scrollable screens to bottom-sheet

WordPress · Oct 16, 2020 · 53d3f93 · 53d3f93
1 parent eed44e8
commit 53d3f93
Show file tree

Hide file tree

Showing 16 changed files with 184 additions and 92 deletions.
diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js
@@ -27,6 +27,7 @@ function BottomSheetSettings( {
 			onClose={ closeGeneralSidebar }
 			hideHeader
 			contentStyle={ styles.content }
+			withNavigation
 			{ ...props }
 		>
 			<BottomSheet.NavigationContainer animate main>

diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -133,11 +133,11 @@ export class InserterMenu extends Component {
 				isVisible={ true }
 				onClose={ this.onClose }
 				hideHeader
-				isChildrenScrollable
+				withNavigation
 			>
 				<TouchableHighlight accessible={ false }>
 					<BottomSheetConsumer>
-						{ ( { listProps } ) => (
+						{ ( { listProps, safeAreaBottomInset } ) => (
 							<FlatList
 								onLayout={ this.onLayout }
 								key={ `InserterUI-${ numberOfColumns }` } //re-render when numberOfColumns changes
@@ -154,6 +154,14 @@ export class InserterMenu extends Component {
 								keyExtractor={ ( item ) => item.name }
 								renderItem={ this.renderItem }
 								{ ...listProps }
+								contentContainerStyle={ [
+									...listProps.contentContainerStyle,
+									{
+										paddingBottom:
+											safeAreaBottomInset ||
+											styles.list.paddingBottom,
+									},
+								] }
 							/>
 						) }
 					</BottomSheetConsumer>

diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss
@@ -15,3 +15,7 @@
 .columnPadding {
 	padding: $grid-unit-20;
 }
+
+.list {
+	padding-bottom: 20;
+}
diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md
@@ -85,4 +85,18 @@ This prop is used as a Screen name.
 The component that should be rendered as content.
 
 - Type: React Element
-- Required: Yes
+- Required: Yes
+
+### isScrollable
+
+This prop determines whether the screen should be wrapped into the ScrollView - this is needed if the screen contains FlatList or any other list inside. Thanks to that we do not nest List into the ScrollView with the same orientation.
+
+- Type: `Boolean`
+- Required: No
+
+### fullScreen
+
+This prop determines if the screen should have full height of device.
+
+- Type: `Boolean`
+- Required: No
diff --git a/...components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js b/...components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js
@@ -15,6 +15,7 @@ import {
 	useCallback,
 	Children,
 	useRef,
+	cloneElement,
 } from '@wordpress/element';
 
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
@@ -108,12 +109,19 @@ function BottomSheetNavigationContainer( { children, animate, main, theme } ) {
 
 	const screens = useMemo( () => {
 		return Children.map( children, ( child ) => {
+			let screen = child;
 			const { name, ...otherProps } = child.props;
+			if ( ! main ) {
+				screen = cloneElement( child, {
+					...child.props,
+					isNested: true,
+				} );
+			}
 			return (
 				<Stack.Screen
 					name={ name }
 					{ ...otherProps }
-					children={ () => child }
+					children={ () => screen }
 				/>
 			);
 		} );

diff --git a/...es/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js b/...es/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js
@@ -6,7 +6,7 @@ import {
 	useNavigation,
 	useFocusEffect,
 } from '@react-navigation/native';
-import { View } from 'react-native';
+import { View, ScrollView, TouchableHighlight } from 'react-native';
 import { debounce } from 'lodash';
 
 /**
@@ -20,15 +20,23 @@ import { useRef, useCallback, useContext, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { BottomSheetNavigationContext } from './bottom-sheet-navigation-context';
+import styles from './styles.scss';
 
-const BottomSheetNavigationScreen = ( { children, fullScreen } ) => {
+const BottomSheetNavigationScreen = ( {
+	children,
+	fullScreen,
+	isScrollable,
+	isNested,
+} ) => {
 	const navigation = useNavigation();
 	const heightRef = useRef( { maxHeight: 0 } );
 	const isFocused = useIsFocused();
 	const {
 		onHandleHardwareButtonPress,
 		shouldEnableBottomSheetMaxHeight,
 		setIsFullScreen,
+		listProps,
+		safeAreaBottomInset,
 	} = useContext( BottomSheetContext );
 
 	const { setHeight } = useContext( BottomSheetNavigationContext );
@@ -69,10 +77,28 @@ const BottomSheetNavigationScreen = ( { children, fullScreen } ) => {
 			setHeightDebounce( height );
 		}
 	};
-
 	return useMemo( () => {
-		return <View onLayout={ onLayout }>{ children }</View>;
-	}, [ children, isFocused ] );
+		return isScrollable || isNested ? (
+			<View onLayout={ onLayout }>{ children }</View>
+		) : (
+			<ScrollView { ...listProps }>
+				<TouchableHighlight accessible={ false }>
+					<View onLayout={ onLayout }>
+						{ children }
+						{ ! isNested && (
+							<View
+								style={ {
+									height:
+										safeAreaBottomInset ||
+										styles.scrollableContent.paddingBottom,
+								} }
+							/>
+						) }
+					</View>
+				</TouchableHighlight>
+			</ScrollView>
+		);
+	}, [ children, isFocused, safeAreaBottomInset, listProps ] );
 };
 
 export default BottomSheetNavigationScreen;
diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/styles.native.scss b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/styles.native.scss
@@ -5,3 +5,7 @@
 .backgroundDark {
 	background-color: $modal-background-dark;
 }
+
+.scrollableContent {
+	padding-bottom: $grid-unit-20;
+}
diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js
@@ -7,9 +7,9 @@ import {
 	Platform,
 	PanResponder,
 	Dimensions,
-	ScrollView,
 	Keyboard,
 	StatusBar,
+	ScrollView,
 	TouchableHighlight,
 } from 'react-native';
 import Modal from 'react-native-modal';
@@ -284,9 +284,9 @@ class BottomSheet extends Component {
 			contentStyle = {},
 			getStylesFromColorScheme,
 			onDismiss,
-			isChildrenScrollable,
 			children,
 			withHeaderSeparator = false,
+			withNavigation,
 			...rest
 		} = this.props;
 		const {
@@ -343,8 +343,6 @@ class BottomSheet extends Component {
 				styles.content,
 				hideHeader && styles.emptyHeader,
 				contentStyle,
-				isChildrenScrollable && this.getContentStyle(),
-				contentStyle,
 				isFullScreen && { flexGrow: 1 },
 			],
 			style: listStyle,
@@ -353,7 +351,7 @@ class BottomSheet extends Component {
 			automaticallyAdjustContentInsets: false,
 		};
 
-		const WrapperView = isChildrenScrollable ? View : ScrollView;
+		const WrapperView = withNavigation ? View : ScrollView;
 
 		const getHeader = () => (
 			<>
@@ -370,7 +368,6 @@ class BottomSheet extends Component {
 				{ withHeaderSeparator && <View style={ styles.separator } /> }
 			</>
 		);
-
 		return (
 			<Modal
 				isVisible={ isVisible }
@@ -421,7 +418,7 @@ class BottomSheet extends Component {
 					) }
 					{ ! hideHeader && getHeader() }
 					<WrapperView
-						{ ...( isChildrenScrollable
+						{ ...( withNavigation
 							? { style: listProps.style }
 							: listProps ) }
 					>
@@ -438,14 +435,25 @@ class BottomSheet extends Component {
 									.onHandleHardwareButtonPress,
 								listProps,
 								setIsFullScreen: this.setIsFullScreen,
+								safeAreaBottomInset,
 							} }
 						>
-							<TouchableHighlight accessible={ false }>
+							{ withNavigation ? (
 								<>{ children }</>
-							</TouchableHighlight>
+							) : (
+								<TouchableHighlight accessible={ false }>
+									<>{ children }</>
+								</TouchableHighlight>
+							) }
 						</BottomSheetProvider>
-						{ ! isChildrenScrollable && (
-							<View style={ { height: safeAreaBottomInset } } />
+						{ ! withNavigation && (
+							<View
+								style={ {
+									height:
+										safeAreaBottomInset ||
+										styles.scrollableContent.paddingBottom,
+								} }
+							/>
 						) }
 					</WrapperView>
 				</KeyboardAvoidingView>

diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss
@@ -29,6 +29,7 @@
 .container {
 	flex-direction: row;
 	align-items: center;
+	flex: 1;
 }
 
 .cellContainerStyles {

diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useState } from 'react';
-import { SafeAreaView, TouchableOpacity } from 'react-native';
+import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import { lowerCase, startsWith } from 'lodash';
 
 /**
@@ -81,48 +81,50 @@ export const LinkPicker = ( {
 	);
 
 	return (
-		<SafeAreaView style={ { height: '100%' } }>
+		<SafeAreaView style={ styles.safeArea }>
 			<NavigationHeader
 				screen={ __( 'Link to' ) }
 				leftButtonOnPress={ cancel }
 				applyButtonOnPress={ onSubmit }
 				isFullscreen
 			/>
-			<BottomSheet.Cell
-				icon={ link }
-				style={ omniCellStyle }
-				valueStyle={ styles.omniInput }
-				value={ value }
-				placeholder={ __( 'Search or type URL' ) }
-				autoCapitalize="none"
-				autoCorrect={ false }
-				keyboardType="url"
-				onChangeValue={ setValue }
-				onSubmit={ onSubmit }
-				/* eslint-disable-next-line jsx-a11y/no-autofocus */
-				autoFocus={ true }
-				separatorType="none"
-			>
-				{ value !== '' && (
-					<TouchableOpacity
-						onPress={ clear }
-						style={ styles.clearIcon }
-					>
-						<Icon
-							icon={ cancelCircleFilled }
-							fill={ iconStyle.color }
-							size={ 24 }
-						/>
-					</TouchableOpacity>
+			<View style={ styles.contentContainer }>
+				<BottomSheet.Cell
+					icon={ link }
+					style={ omniCellStyle }
+					valueStyle={ styles.omniInput }
+					value={ value }
+					placeholder={ __( 'Search or type URL' ) }
+					autoCapitalize="none"
+					autoCorrect={ false }
+					keyboardType="url"
+					onChangeValue={ setValue }
+					onSubmit={ onSubmit }
+					/* eslint-disable-next-line jsx-a11y/no-autofocus */
+					autoFocus={ true }
+					separatorType="none"
+				>
+					{ value !== '' && (
+						<TouchableOpacity
+							onPress={ clear }
+							style={ styles.clearIcon }
+						>
+							<Icon
+								icon={ cancelCircleFilled }
+								fill={ iconStyle.color }
+								size={ 24 }
+							/>
+						</TouchableOpacity>
+					) }
+				</BottomSheet.Cell>
+				{ !! value && (
+					<LinkPickerResults
+						query={ value }
+						onLinkPicked={ pickLink }
+						directEntry={ directEntry }
+					/>
 				) }
-			</BottomSheet.Cell>
-			{ !! value && (
-				<LinkPickerResults
-					query={ value }
-					onLinkPicked={ pickLink }
-					directEntry={ directEntry }
-				/>
-			) }
+			</View>
 		</SafeAreaView>
 	);
 };
diff --git a/packages/components/src/mobile/link-picker/link-picker-results.native.js b/packages/components/src/mobile/link-picker/link-picker-results.native.js
@@ -116,7 +116,7 @@ export default function LinkPickerResults( {
 					{ ...listProps }
 					contentContainerStyle={ [
 						...listProps.contentContainerStyle,
-						{ paddingBottom: 0 },
+						styles.list,
 					] }
 				/>
 			) }

diff --git a/packages/components/src/mobile/link-picker/styles.native.scss b/packages/components/src/mobile/link-picker/styles.native.scss
@@ -1,8 +1,6 @@
 .omniCell {
 	border-bottom-width: 1px;
 	border-bottom-color: $light-gray-400;
-	padding-left: 16px;
-	padding-right: 16px;
 }
 
 .omniCellDark {
@@ -29,3 +27,19 @@
 .iconDark {
 	color: $dark-tertiary;
 }
+
+.contentContainer {
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
+	flex: 1;
+}
+
+.safeArea {
+	height: 100%;
+}
+
+.list {
+	padding-left: 0;
+	padding-right: 0;
+	padding-bottom: $grid-unit-20;
+}