From c670d4f1a880a3dd0132741882765e3e44222563 Mon Sep 17 00:00:00 2001
From: Moran T <morant@brainpop.com>
Date: Tue, 27 Feb 2018 15:13:23 +0200
Subject: [PATCH] Remove shouldComponentUpdate from vmListenerHOC, move block
drag end
to target pane, which already has all the needed props.
---
src/containers/target-pane.jsx | 17 +++++++++++++++++
src/lib/vm-listener-hoc.jsx | 22 ----------------------
2 files changed, 17 insertions(+), 22 deletions(-)
diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx
index de6d6e9b1..889d84185 100644
--- a/src/containers/target-pane.jsx
+++ b/src/containers/target-pane.jsx
@@ -10,6 +10,7 @@ import {
} from '../reducers/modals';
import {activateTab, COSTUMES_TAB_INDEX} from '../reducers/editor-tab';
+import {setReceivedBlocks} from '../reducers/hovered-target';
import TargetPaneComponent from '../components/target-pane/target-pane.jsx';
import spriteLibraryContent from '../lib/libraries/sprites.json';
@@ -18,6 +19,7 @@ class TargetPane extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
+ 'handleBlockDragEnd',
'handleChangeSpriteDirection',
'handleChangeSpriteName',
'handleChangeSpriteSize',
@@ -31,6 +33,12 @@ class TargetPane extends React.Component {
'handlePaintSpriteClick'
]);
}
+ componentDidMount () {
+ this.props.vm.addListener('BLOCK_DRAG_END', this.handleBlockDragEnd);
+ }
+ componentWillUnmount () {
+ this.props.vm.removeListener('BLOCK_DRAG_END', this.handleBlockDragEnd);
+ }
handleChangeSpriteDirection (direction) {
this.props.vm.postSpriteInfo({direction});
}
@@ -71,6 +79,12 @@ class TargetPane extends React.Component {
});
}
}
+ handleBlockDragEnd (blocks) {
+ if (this.props.hoveredTarget.sprite && this.props.hoveredTarget.sprite !== this.props.editingTarget) {
+ this.props.vm.shareBlocksToTarget(blocks, this.props.hoveredTarget.sprite);
+ this.props.onReceivedBlocks(true);
+ }
+ }
render () {
const {
onActivateTab, // eslint-disable-line no-unused-vars
@@ -134,6 +148,9 @@ const mapDispatchToProps = dispatch => ({
},
onActivateTab: tabIndex => {
dispatch(activateTab(tabIndex));
+ },
+ onReceivedBlocks: receivedBlocks => {
+ dispatch(setReceivedBlocks(receivedBlocks));
}
});
diff --git a/src/lib/vm-listener-hoc.jsx b/src/lib/vm-listener-hoc.jsx
index 3ae81fdbb..8e7a0ca17 100644
--- a/src/lib/vm-listener-hoc.jsx
+++ b/src/lib/vm-listener-hoc.jsx
@@ -8,7 +8,6 @@ import {connect} from 'react-redux';
import {updateEditingTarget, updateTargets} from '../reducers/targets';
import {updateBlockDrag} from '../reducers/block-drag';
import {updateMonitors} from '../reducers/monitors';
-import {setReceivedBlocks} from '../reducers/hovered-target';
/*
* Higher Order Component to manage events emitted by the VM
@@ -20,7 +19,6 @@ const vmListenerHOC = function (WrappedComponent) {
constructor (props) {
super(props);
bindAll(this, [
- 'handleBlockDragEnd',
'handleKeyDown',
'handleKeyUp'
]);
@@ -33,8 +31,6 @@ const vmListenerHOC = function (WrappedComponent) {
this.props.vm.on('targetsUpdate', this.props.onTargetsUpdate);
this.props.vm.on('MONITORS_UPDATE', this.props.onMonitorsUpdate);
this.props.vm.on('BLOCK_DRAG_UPDATE', this.props.onBlockDragUpdate);
- this.props.vm.on('BLOCK_DRAG_END', this.handleBlockDragEnd);
-
}
componentDidMount () {
if (this.props.attachKeyboardEvents) {
@@ -42,21 +38,12 @@ const vmListenerHOC = function (WrappedComponent) {
document.addEventListener('keyup', this.handleKeyUp);
}
}
- shouldComponentUpdate () {
- return false;
- }
componentWillUnmount () {
if (this.props.attachKeyboardEvents) {
document.removeEventListener('keydown', this.handleKeyDown);
document.removeEventListener('keyup', this.handleKeyUp);
}
}
- handleBlockDragEnd (blocks) {
- if (this.props.hoveredSprite && this.props.hoveredSprite !== this.props.editingTarget) {
- this.props.vm.shareBlocksToTarget(blocks, this.props.hoveredSprite);
- this.props.onReceivedBlocks(true);
- }
- }
handleKeyDown (e) {
// Don't capture keys intended for Blockly inputs.
if (e.target !== document && e.target !== document.body) return;
@@ -88,13 +75,10 @@ const vmListenerHOC = function (WrappedComponent) {
const {
/* eslint-disable no-unused-vars */
attachKeyboardEvents,
- editingTarget,
- hoveredSprite,
onBlockDragUpdate,
onKeyDown,
onKeyUp,
onMonitorsUpdate,
- onReceivedBlocks,
onTargetsUpdate,
/* eslint-enable no-unused-vars */
...props
@@ -104,13 +88,10 @@ const vmListenerHOC = function (WrappedComponent) {
}
VMListener.propTypes = {
attachKeyboardEvents: PropTypes.bool,
- editingTarget: PropTypes.string,
- hoveredSprite: PropTypes.string,
onBlockDragUpdate: PropTypes.func.isRequired,
onKeyDown: PropTypes.func,
onKeyUp: PropTypes.func,
onMonitorsUpdate: PropTypes.func.isRequired,
- onReceivedBlocks: PropTypes.func.isRequired,
onTargetsUpdate: PropTypes.func.isRequired,
vm: PropTypes.instanceOf(VM).isRequired
};
@@ -132,9 +113,6 @@ const vmListenerHOC = function (WrappedComponent) {
},
onBlockDragUpdate: areBlocksOverGui => {
dispatch(updateBlockDrag(areBlocksOverGui));
- },
- onReceivedBlocks: receivedBlocks => {
- dispatch(setReceivedBlocks(receivedBlocks));
}
});
return connect(
--
GitLab