[RNMobile] Add scrollable screens to the bottom-sheet (#26204)

* Add scrollable screens to bottom-sheet * rename withNavigation to hasNavigation * fix slider spacing * add hasNavigation to the container.native * set default value to the safeAreaBottomInset
WordPress · Nov 3, 2020 · 80b295a · 80b295a
1 parent 14174c5
commit 80b295a
Show file tree

Hide file tree

Showing 17 changed files with 189 additions and 93 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 }
+ hasNavigation
  { ...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,14 @@ export class InserterMenu extends Component {
  isVisible={ true }
  onClose={ this.onClose }
  hideHeader
- isChildrenScrollable
+ hasNavigation
  >
  <TouchableHighlight accessible={ false }>
  <BottomSheetConsumer>
- { ( { listProps } ) => (
+ { ( {
+ listProps,
+ safeAreaBottomInset = styles.list.paddingBottom,
+ } ) => (
  <FlatList
  onLayout={ this.onLayout }
  key={ `InserterUI-${ numberOfColumns }` } //re-render when numberOfColumns changes
@@ -154,6 +157,12 @@ export class InserterMenu extends Component {
  keyExtractor={ ( item ) => item.name }
  renderItem={ this.renderItem }
  { ...listProps }
+ contentContainerStyle={ [
+ ...listProps.contentContainerStyle,
+ {
+ paddingBottom: safeAreaBottomInset,
+ },
+ ] }
  />
  ) }
  </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
@@ -22,7 +22,7 @@ import { BottomSheet } from '@wordpress/components';
 
 
 const BottomSheetWithNavigation = () => (
-  <BottomSheet>
+  <BottomSheet hasNavigation>
     <BottomSheet.NavigationContainer>
       <BottomSheet.NavigationScreen
         name={ 'Settings' }
@@ -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 = styles.scrollableContent.paddingBottom,
  } = useContext( BottomSheetContext );
 
  const { setHeight } = useContext( BottomSheetNavigationContext );
@@ -69,10 +77,26 @@ 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,
+ } }
+ />
+ ) }
+ </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,
+ hasNavigation,
  ...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 = hasNavigation ? 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
+ { ...( hasNavigation
  ? { style: listProps.style }
  : listProps ) }
  >
@@ -438,14 +435,25 @@ class BottomSheet extends Component {
  .onHandleHardwareButtonPress,
  listProps,
  setIsFullScreen: this.setIsFullScreen,
+ safeAreaBottomInset,
  } }
  >
- <TouchableHighlight accessible={ false }>
+ { hasNavigation ? (
  <>{ children }</>
- </TouchableHighlight>
+ ) : (
+ <TouchableHighlight accessible={ false }>
+ <>{ children }</>
+ </TouchableHighlight>
+ ) }
  </BottomSheetProvider>
- { ! isChildrenScrollable && (
- <View style={ { height: safeAreaBottomInset } } />
+ { ! hasNavigation && (
+ <View
+ style={ {
+ height:
+ safeAreaBottomInset ||
+ styles.scrollableContent.paddingBottom,
+ } }
+ />
  ) }
  </WrapperView>
  </KeyboardAvoidingView>

diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js
@@ -217,6 +217,7 @@ class BottomSheetRangeCell extends Component {
  activeOpacity={ 1 }
  accessible={ accessible }
  onPress={ this.onCellPress }
+ valueStyle={ styles.valueStyle }
  accessibilityLabel={ accessibilityLabel }
  accessibilityHint={
  /* translators: accessibility text (hint for focusing a slider) */

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 {
@@ -46,3 +47,7 @@
  padding-top: 8px;
  padding-bottom: 8px;
 }
+
+.valueStyle {
+ height: 0;
+}
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
+ 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,
  ] }
  />
  ) }