Mobile - Move Clipboard context/provider into a singleton

WordPress · Dec 29, 2020 · b71e852 · b71e852
1 parent 0bc39c9
commit b71e852
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 87 deletions.
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
@@ -6,7 +6,12 @@ import { partial, first, castArray, last, compact } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { ClipboardContext, ToolbarButton, Picker } from '@wordpress/components';
+import {
+	getClipboard,
+	setClipboard,
+	ToolbarButton,
+	Picker,
+} from '@wordpress/components';
 import {
 	getBlockType,
 	getDefaultBlockName,
@@ -19,7 +24,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { moreHorizontalMobile } from '@wordpress/icons';
-import { useRef, useContext } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -49,7 +54,7 @@ const BlockActionsMenu = ( {
 } ) => {
 	const pickerRef = useRef();
 	const moversOptions = { keys: [ 'icon', 'actionTitle' ] };
-	const { clipboard, updateClipboard } = useContext( ClipboardContext );
+	const clipboard = getClipboard();
 
 	const {
 		actionTitle: {
@@ -162,15 +167,15 @@ const BlockActionsMenu = ( {
 				break;
 			case copyButtonOption.value:
 				const copyBlock = getBlocksByClientId( selectedBlockClientId );
-				updateClipboard( serialize( copyBlock ) );
+				setClipboard( serialize( copyBlock ) );
 				createSuccessNotice(
 					// translators: displayed right after the block is copied.
 					__( 'Block copied' )
 				);
 				break;
 			case cutButtonOption.value:
 				const cutBlock = getBlocksByClientId( selectedBlockClientId );
-				updateClipboard( serialize( cutBlock ) );
+				setClipboard( serialize( cutBlock ) );
 				removeBlocks( selectedBlockClientId );
 				createSuccessNotice(
 					// translators: displayed right after the block is cut.

diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -25,7 +25,7 @@ import {
 	BottomSheet,
 	BottomSheetConsumer,
 	InserterButton,
-	ClipboardConsumer,
+	getClipboard,
 } from '@wordpress/components';
 
 /**
@@ -116,14 +116,15 @@ export class InserterMenu extends Component {
 		this.setState( { numberOfColumns, itemWidth, maxWidth } );
 	}
 
-	getItems( clipboard ) {
+	getItems() {
 		const {
 			items,
 			canInsertBlockType,
 			destinationRootClientId,
 			getBlockType,
 		} = this.props;
 
+		const clipboard = getClipboard();
 		const clipboardBlock =
 			clipboard && rawHandler( { HTML: clipboard } )[ 0 ];
 		const shouldAddClipboardBlock =
@@ -163,52 +164,44 @@ export class InserterMenu extends Component {
 		const { numberOfColumns } = this.state;
 
 		return (
-			<ClipboardConsumer>
-				{ ( { clipboard } ) => (
-					<BottomSheet
-						isVisible={ true }
-						onClose={ this.onClose }
-						hideHeader
-						hasNavigation
-					>
-						<TouchableHighlight accessible={ false }>
-							<BottomSheetConsumer>
-								{ ( { listProps, safeAreaBottomInset } ) => (
-									<FlatList
-										onLayout={ this.onLayout }
-										key={ `InserterUI-${ numberOfColumns }` } //re-render when numberOfColumns changes
-										keyboardShouldPersistTaps="always"
-										numColumns={ numberOfColumns }
-										data={ this.getItems( clipboard ) }
-										ItemSeparatorComponent={ () => (
-											<TouchableWithoutFeedback
-												accessible={ false }
-											>
-												<View
-													style={
-														styles.rowSeparator
-													}
-												/>
-											</TouchableWithoutFeedback>
-										) }
-										keyExtractor={ ( item ) => item.name }
-										renderItem={ this.renderItem }
-										{ ...listProps }
-										contentContainerStyle={ [
-											...listProps.contentContainerStyle,
-											{
-												paddingBottom:
-													safeAreaBottomInset ||
-													styles.list.paddingBottom,
-											},
-										] }
-									/>
+			<BottomSheet
+				isVisible={ true }
+				onClose={ this.onClose }
+				hideHeader
+				hasNavigation
+			>
+				<TouchableHighlight accessible={ false }>
+					<BottomSheetConsumer>
+						{ ( { listProps, safeAreaBottomInset } ) => (
+							<FlatList
+								onLayout={ this.onLayout }
+								key={ `InserterUI-${ numberOfColumns }` } //re-render when numberOfColumns changes
+								keyboardShouldPersistTaps="always"
+								numColumns={ numberOfColumns }
+								data={ this.getItems() }
+								ItemSeparatorComponent={ () => (
+									<TouchableWithoutFeedback
+										accessible={ false }
+									>
+										<View style={ styles.rowSeparator } />
+									</TouchableWithoutFeedback>
 								) }
-							</BottomSheetConsumer>
-						</TouchableHighlight>
-					</BottomSheet>
-				) }
-			</ClipboardConsumer>
+								keyExtractor={ ( item ) => item.name }
+								renderItem={ this.renderItem }
+								{ ...listProps }
+								contentContainerStyle={ [
+									...listProps.contentContainerStyle,
+									{
+										paddingBottom:
+											safeAreaBottomInset ||
+											styles.list.paddingBottom,
+									},
+								] }
+							/>
+						) }
+					</BottomSheetConsumer>
+				</TouchableHighlight>
+			</BottomSheet>
 		);
 	}
 }

diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
@@ -81,11 +81,7 @@ export { default as LinkSettingsNavigation } from './mobile/link-settings/link-s
 export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';
 export { default as InserterButton } from './mobile/inserter-button';
-export {
-	default as ClipboardProvider,
-	ClipboardContext,
-	ClipboardConsumer,
-} from './mobile/clipboard';
+export { setClipboard, getClipboard } from './mobile/clipboard';
 
 // Utils
 export { colorsUtils } from './mobile/color-settings/utils';

diff --git a/packages/components/src/mobile/clipboard/index.native.js b/packages/components/src/mobile/clipboard/index.native.js
@@ -1,21 +1,18 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useCallback, useState } from '@wordpress/element';
+const createClipboard = () => {
+	let currentClipboard;
 
-export const ClipboardContext = createContext( {} );
-const { Provider, Consumer } = ClipboardContext;
-export { Consumer as ClipboardConsumer };
+	const setClipboard = ( clipboard ) => {
+		currentClipboard = clipboard;
+	};
 
-export default function ClipboardProvider( { children } ) {
-	const [ clipboard, setClipboard ] = useState();
-	const updateClipboard = useCallback( ( clipboardUpdate ) => {
-		setClipboard( clipboardUpdate );
-	}, [] );
+	const getClipboard = () => currentClipboard;
 
-	return (
-		<Provider value={ { clipboard, updateClipboard } }>
-			{ children }
-		</Provider>
-	);
-}
+	return {
+		setClipboard,
+		getClipboard,
+	};
+};
+
+const clipboard = createClipboard();
+
+export const { setClipboard, getClipboard } = clipboard;
diff --git a/packages/edit-post/src/editor.native.js b/packages/edit-post/src/editor.native.js
@@ -19,7 +19,7 @@ import {
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { subscribeSetFocusOnTitle } from '@wordpress/react-native-bridge';
-import { SlotFillProvider, ClipboardProvider } from '@wordpress/components';
+import { SlotFillProvider } from '@wordpress/components';
 import { Preview } from '@wordpress/block-editor';
 
 /**
@@ -151,17 +151,15 @@ class Editor extends Component {
 
 		return (
 			<SlotFillProvider>
-				<ClipboardProvider>
-					<EditorProvider
-						settings={ editorSettings }
-						post={ normalizedPost }
-						initialEdits={ initialEdits }
-						useSubRegistry={ false }
-						{ ...props }
-					>
-						{ this.editorMode( initialHtml, editorMode ) }
-					</EditorProvider>
-				</ClipboardProvider>
+				<EditorProvider
+					settings={ editorSettings }
+					post={ normalizedPost }
+					initialEdits={ initialEdits }
+					useSubRegistry={ false }
+					{ ...props }
+				>
+					{ this.editorMode( initialHtml, editorMode ) }
+				</EditorProvider>
 			</SlotFillProvider>
 		);
 	}