Leverage full-height sub-sheet for focal point picker

Better manage media display and scroll management through a larger focal point editing sheet.
WordPress · Oct 9, 2020 · c0b7577 · c0b7577
1 parent 67c9d02
commit c0b7577
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 61 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
@@ -47,6 +47,7 @@ function BottomSheetSettings( {
 				</BottomSheet.NavigationScreen>
 				<BottomSheet.NavigationScreen
 					name={ blockSettingsScreens.focalPoint }
+					fullScreen
 				>
 					<FocalPointSettings />
 				</BottomSheet.NavigationScreen>

diff --git a/packages/components/src/mobile/focal-point-settings/index.native.js b/packages/components/src/mobile/focal-point-settings/index.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React from 'react';
-import { Platform, Text, TouchableWithoutFeedback, View } from 'react-native';
+import { SafeAreaView } from 'react-native';
 import { useRoute, useNavigation } from '@react-navigation/native';
 
 /**
@@ -11,14 +11,11 @@ import { useRoute, useNavigation } from '@react-navigation/native';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useContext, useState } from '@wordpress/element';
 import { BottomSheetContext, FocalPointPicker } from '@wordpress/components';
-import { Icon, check, close } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-// TODO(David): Duplicate styles or identify abstraction
-import styles from '../../color-picker/style.scss';
+import NavigationHeader from '../bottom-sheet/navigation-header';
 
 const FocalPointSettingsMemo = React.memo(
 	( {
@@ -30,25 +27,10 @@ const FocalPointSettingsMemo = React.memo(
 		url,
 	} ) => {
 		useEffect( () => {
-			shouldEnableBottomSheetMaxHeight( true );
+			shouldEnableBottomSheetMaxHeight( false );
 			onHandleClosingBottomSheet( null );
 		}, [] );
 		const navigation = useNavigation();
-		const isIOS = Platform.OS === 'ios';
-		const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
-
-		const applyButtonStyle = usePreferredColorSchemeStyle(
-			styles.applyButton,
-			styles.applyButtonDark
-		);
-		const cancelButtonStyle = usePreferredColorSchemeStyle(
-			styles.cancelButton,
-			styles.cancelButtonDark
-		);
-		const footerStyle = usePreferredColorSchemeStyle(
-			styles.footer,
-			styles.footerDark
-		);
 
 		function onButtonPress( action ) {
 			navigation.goBack();
@@ -61,7 +43,13 @@ const FocalPointSettingsMemo = React.memo(
 		const [ draftFocalPoint, setDraftFocalPoint ] = useState( focalPoint );
 
 		return (
-			<>
+			<SafeAreaView style={ { height: '100%' } }>
+				<NavigationHeader
+					screen={ __( 'Edit focal point' ) }
+					leftButtonOnPress={ () => onButtonPress( 'cancel' ) }
+					applyButtonOnPress={ () => onButtonPress( 'apply' ) }
+					isFullscreen
+				/>
 				<FocalPointPicker
 					focalPoint={ draftFocalPoint }
 					onChange={ setDraftFocalPoint }
@@ -70,45 +58,7 @@ const FocalPointSettingsMemo = React.memo(
 					}
 					url={ url }
 				/>
-				<View style={ footerStyle }>
-					<TouchableWithoutFeedback
-						onPress={ () => onButtonPress( 'cancel' ) }
-						hitSlop={ hitSlop }
-					>
-						<View>
-							{ isIOS ? (
-								<Text style={ cancelButtonStyle }>
-									{ __( 'Cancel' ) }
-								</Text>
-							) : (
-								<Icon
-									icon={ close }
-									size={ 24 }
-									style={ cancelButtonStyle }
-								/>
-							) }
-						</View>
-					</TouchableWithoutFeedback>
-					<TouchableWithoutFeedback
-						onPress={ () => onButtonPress( 'apply' ) }
-						hitSlop={ hitSlop }
-					>
-						<View>
-							{ isIOS ? (
-								<Text style={ applyButtonStyle }>
-									{ __( 'Apply' ) }
-								</Text>
-							) : (
-								<Icon
-									icon={ check }
-									size={ 24 }
-									style={ applyButtonStyle }
-								/>
-							) }
-						</View>
-					</TouchableWithoutFeedback>
-				</View>
-			</>
+			</SafeAreaView>
 		);
 	}
 );