From a2bc7ece366a3f4b3342c98776202cca2c6c8175 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Tue, 3 Aug 2021 13:21:59 +0100 Subject: [PATCH 1/4] Remove 'BottomSheetScreen' component The 'BottomSheetScreen' component was introduced in the following commit in order to correct a render error related to the 'setIsFullScreen' method: https://github.com/WordPress/gutenberg/pull/33240/commits/d650b4f1df6e1699c7c45819a8afd4a2ec39a08e#diff-d16d37d09ff59dce57c087e978ac5536503cb1642ec2b0ecdba9536f5c695b95R20 The way the component's currently rendering is causing a conflict with the TextInput component, however. With this commit, the component's removed, along with the 'setIsFullScreen' method (the method will be re-introduced in the following commits). --- .../bottom-sheet/sub-sheet/index.native.js | 23 ++++--------------- 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js index 8654dc918e2e3d..c997ca7e4f2800 100644 --- a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js @@ -6,21 +6,12 @@ import { SafeAreaView } from 'react-native'; /** * WordPress dependencies */ -import { Children, useEffect } from '@wordpress/element'; +import { Children } from '@wordpress/element'; import { createSlotFill, BottomSheetConsumer } from '@wordpress/components'; const { Fill, Slot } = createSlotFill( 'BottomSheetSubSheet' ); -const BottomSheetSubSheet = ( { - children, - navigationButton, - showSheet, - isFullScreen, -} ) => { - const BottomSheetScreen = ( { onMount } ) => { - useEffect( onMount, [] ); - return children ?? null; - }; +const BottomSheetSubSheet = ( { children, navigationButton, showSheet } ) => { return ( <> @@ -28,13 +19,9 @@ const BottomSheetSubSheet = ( { - { ( { setIsFullScreen } ) => ( - - setIsFullScreen( isFullScreen ) - } - /> - ) } + { () => { + return children; + } } From e53d768735bc3848f2d27c535394f904654c693e Mon Sep 17 00:00:00 2001 From: Siobhan Date: Tue, 3 Aug 2021 14:18:22 +0100 Subject: [PATCH 2/4] Refactor 'setIsFullScreen' method With this commit, the 'setIsFullScreen' method is added back to the component. This time, it's added to its own separate 'useEffect' function. --- .../bottom-sheet/sub-sheet/index.native.js | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js index c997ca7e4f2800..8a4701c6939756 100644 --- a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js @@ -6,12 +6,28 @@ import { SafeAreaView } from 'react-native'; /** * WordPress dependencies */ -import { Children } from '@wordpress/element'; -import { createSlotFill, BottomSheetConsumer } from '@wordpress/components'; +import { Children, useEffect, useContext } from '@wordpress/element'; +import { + createSlotFill, + BottomSheetConsumer, + BottomSheetContext, +} from '@wordpress/components'; const { Fill, Slot } = createSlotFill( 'BottomSheetSubSheet' ); -const BottomSheetSubSheet = ( { children, navigationButton, showSheet } ) => { +const BottomSheetSubSheet = ( { + children, + navigationButton, + showSheet, + isFullScreen, +} ) => { + const { setIsFullScreen } = useContext( BottomSheetContext ); + + useEffect( () => { + if ( showSheet ) { + setIsFullScreen( isFullScreen ); + } + }, [ showSheet, isFullScreen ] ); return ( <> From 523239866d5b502672695af6daa30453b57d26ac Mon Sep 17 00:00:00 2001 From: Siobhan Date: Tue, 3 Aug 2021 18:05:19 +0100 Subject: [PATCH 3/4] Remove 'BottomSheetConsumer' 'BottomSheetConsumer' is no longer necessary as we're now using 'useContext' to pull in 'setIsFullScreen'. Further discussion here: https://github.com/WordPress/gutenberg/pull/33845#discussion_r681939450 --- .../mobile/bottom-sheet/sub-sheet/index.native.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js index 8a4701c6939756..de462041103395 100644 --- a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js @@ -7,11 +7,7 @@ import { SafeAreaView } from 'react-native'; * WordPress dependencies */ import { Children, useEffect, useContext } from '@wordpress/element'; -import { - createSlotFill, - BottomSheetConsumer, - BottomSheetContext, -} from '@wordpress/components'; +import { createSlotFill, BottomSheetContext } from '@wordpress/components'; const { Fill, Slot } = createSlotFill( 'BottomSheetSubSheet' ); @@ -34,11 +30,9 @@ const BottomSheetSubSheet = ( { { showSheet && ( - - { () => { - return children; - } } - + { () => { + return children; + } } ) } From b75e766a615f38091b8a8dca55a792ab007f8562 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Tue, 3 Aug 2021 18:20:41 +0100 Subject: [PATCH 4/4] Refactor reference to 'children' As 'BottomSheetConsumer' was removed in https://github.com/WordPress/gutenberg/pull/33845/commits/523239866d5b502672695af6daa30453b57d26ac, 'children' no longer needs to be returned as part of a function. In fact, this results in an error. With this commit, the function surrounding the reference to 'children' is removed. --- .../src/mobile/bottom-sheet/sub-sheet/index.native.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js index de462041103395..f51b07cffd9c14 100644 --- a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js @@ -29,11 +29,7 @@ const BottomSheetSubSheet = ( { <> { showSheet && ( - - { () => { - return children; - } } - + { children } ) } { Children.count( children ) > 0 && navigationButton }