From 4ce08bac56cbd66702304466b68fb0d26314fd60 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Thu, 29 Nov 2018 11:04:20 +0100 Subject: [PATCH] Refactor CopyHandler to use only withDispatch --- .../src/components/copy-handler/index.js | 52 +++++++++---------- 1 file changed, 24 insertions(+), 28 deletions(-) diff --git a/packages/editor/src/components/copy-handler/index.js b/packages/editor/src/components/copy-handler/index.js index 1facd64931d12..f9da173bf0305 100644 --- a/packages/editor/src/components/copy-handler/index.js +++ b/packages/editor/src/components/copy-handler/index.js @@ -4,34 +4,35 @@ import { Component } from '@wordpress/element'; import { serialize } from '@wordpress/blocks'; import { documentHasSelection } from '@wordpress/dom'; -import { withSelect, withDispatch } from '@wordpress/data'; +import { withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; class CopyHandler extends Component { constructor() { super( ...arguments ); + this.onCopy = this.onCopy.bind( this ); this.onCut = this.onCut.bind( this ); } componentDidMount() { - document.addEventListener( 'copy', this.props.onCopy ); + document.addEventListener( 'copy', this.onCopy ); document.addEventListener( 'cut', this.onCut ); } componentWillUnmount() { - document.removeEventListener( 'copy', this.props.onCopy ); + document.removeEventListener( 'copy', this.onCopy ); document.removeEventListener( 'cut', this.onCut ); } - onCut( event ) { - const { hasMultiSelection, selectedBlockClientIds } = this.props; - - this.props.onCopy( event ); + onCopy( event ) { + this.props.onCopy( event.clipboardData ); + event.preventDefault(); + } - if ( hasMultiSelection ) { - this.props.onRemove( selectedBlockClientIds ); - } + onCut( event ) { + this.props.onCut( event.clipboardData ); + event.preventDefault(); } render() { @@ -40,46 +41,41 @@ class CopyHandler extends Component { } export default compose( [ - withSelect( ( select ) => { + withDispatch( ( dispatch, ownProps, { select } ) => { const { + getBlocksByClientId, getMultiSelectedBlockClientIds, getSelectedBlockClientId, hasMultiSelection, } = select( 'core/editor' ); + const { removeBlocks } = dispatch( 'core/editor' ); const selectedBlockClientId = getSelectedBlockClientId(); const selectedBlockClientIds = selectedBlockClientId ? [ selectedBlockClientId ] : getMultiSelectedBlockClientIds(); return { - hasMultiSelection: hasMultiSelection(), - selectedBlockClientIds, - }; - } ), - withDispatch( ( dispatch, ownProps, { select } ) => { - const { getBlocksByClientId } = select( 'core/editor' ); - const { removeBlocks } = dispatch( 'core/editor' ); - - return { - onCopy( event ) { - const { hasMultiSelection, selectedBlockClientIds } = ownProps; - + onCopy( dataTransfer ) { if ( selectedBlockClientIds.length === 0 ) { return; } // Let native copy behaviour take over in input fields. - if ( ! hasMultiSelection && documentHasSelection() ) { + if ( ! hasMultiSelection() && documentHasSelection() ) { return; } const serialized = serialize( getBlocksByClientId( selectedBlockClientIds ) ); - event.clipboardData.setData( 'text/plain', serialized ); - event.clipboardData.setData( 'text/html', serialized ); + dataTransfer.setData( 'text/plain', serialized ); + dataTransfer.setData( 'text/html', serialized ); + }, + onCut( dataTransfer ) { + this.onCopy( dataTransfer ); - event.preventDefault(); + if ( hasMultiSelection() ) { + removeBlocks( selectedBlockClientIds ); + } }, - onRemove: removeBlocks, }; } ), ] )( CopyHandler );