From b71e852e2b3a60e8fdb761e7fe346467590785cb Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 29 Dec 2020 15:46:21 +0100 Subject: [PATCH] Mobile - Move Clipboard context/provider into a singleton --- .../block-actions-menu.native.js | 15 ++-- .../src/components/inserter/menu.native.js | 87 +++++++++---------- packages/components/src/index.native.js | 6 +- .../src/mobile/clipboard/index.native.js | 33 ++++--- packages/edit-post/src/editor.native.js | 22 +++-- 5 files changed, 76 insertions(+), 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 index 91de619ffdeb7..086ff5eb1e332 100644 --- 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,7 +167,7 @@ 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' ) @@ -170,7 +175,7 @@ const BlockActionsMenu = ( { 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 index 42657dea749db..11cfedb17aa61 100644 --- 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,7 +116,7 @@ export class InserterMenu extends Component { this.setState( { numberOfColumns, itemWidth, maxWidth } ); } - getItems( clipboard ) { + getItems() { const { items, canInsertBlockType, @@ -124,6 +124,7 @@ export class InserterMenu extends Component { 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 ( - - { ( { clipboard } ) => ( - - - - { ( { listProps, safeAreaBottomInset } ) => ( - ( - - - - ) } - keyExtractor={ ( item ) => item.name } - renderItem={ this.renderItem } - { ...listProps } - contentContainerStyle={ [ - ...listProps.contentContainerStyle, - { - paddingBottom: - safeAreaBottomInset || - styles.list.paddingBottom, - }, - ] } - /> + + + + { ( { listProps, safeAreaBottomInset } ) => ( + ( + + + ) } - - - - ) } - + keyExtractor={ ( item ) => item.name } + renderItem={ this.renderItem } + { ...listProps } + contentContainerStyle={ [ + ...listProps.contentContainerStyle, + { + paddingBottom: + safeAreaBottomInset || + styles.list.paddingBottom, + }, + ] } + /> + ) } + + + ); } } diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index f96d21550c188..f03892096361f 100644 --- 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 index 3a1fbf1de8789..1079fb2f60ce1 100644 --- 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 ( - - { children } - - ); -} + 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 index c4c0affe8243c..34ea06067cca4 100644 --- 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 ( - - - { this.editorMode( initialHtml, editorMode ) } - - + + { this.editorMode( initialHtml, editorMode ) } + ); }