diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index df4f8e5ca..bcccb7fe7 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -25,6 +25,7 @@ const SpriteSelectorItem = props => (
}}
disable={props.preventContextMenu}
id={`${props.name}-${contextMenuId}`}
+ ref={props.componentRef}
>
{typeof props.number === 'undefined' ? null : (
{props.number}
@@ -89,6 +90,7 @@ const SpriteSelectorItem = props => (
SpriteSelectorItem.propTypes = {
className: PropTypes.string,
+ componentRef: PropTypes.func,
costumeURL: PropTypes.string,
details: PropTypes.string,
name: PropTypes.string.isRequired,
diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx
index 101ecd92f..f946cf83f 100644
--- a/src/containers/sprite-selector-item.jsx
+++ b/src/containers/sprite-selector-item.jsx
@@ -9,6 +9,7 @@ import storage from '../lib/storage';
import VM from 'scratch-vm';
import getCostumeUrl from '../lib/get-costume-url';
import DragRecognizer from '../lib/drag-recognizer';
+import {getEventXY} from '../lib/touch-utils';
import SpriteSelectorItemComponent from '../components/sprite-selector-item/sprite-selector-item.jsx';
@@ -17,6 +18,7 @@ class SpriteSelectorItem extends React.PureComponent {
super(props);
bindAll(this, [
'getCostumeData',
+ 'setRef',
'handleClick',
'handleDelete',
'handleDuplicate',
@@ -25,7 +27,8 @@ class SpriteSelectorItem extends React.PureComponent {
'handleMouseLeave',
'handleMouseDown',
'handleDragEnd',
- 'handleDrag'
+ 'handleDrag',
+ 'handleTouchEnd'
]);
this.dragRecognizer = new DragRecognizer({
@@ -33,7 +36,11 @@ class SpriteSelectorItem extends React.PureComponent {
onDragEnd: this.handleDragEnd
});
}
+ componentDidMount () {
+ document.addEventListener('touchend', this.handleTouchEnd);
+ }
componentWillUnmount () {
+ document.removeEventListener('touchend', this.handleTouchEnd);
this.dragRecognizer.reset();
}
getCostumeData () {
@@ -67,6 +74,13 @@ class SpriteSelectorItem extends React.PureComponent {
});
this.noClick = true;
}
+ handleTouchEnd (e) {
+ const {x, y} = getEventXY(e);
+ const {top, left, bottom, right} = this.ref.getBoundingClientRect();
+ if (x >= left && x <= right && y >= top && y <= bottom) {
+ this.handleMouseEnter();
+ }
+ }
handleMouseDown (e) {
this.dragRecognizer.start(e);
}
@@ -94,6 +108,10 @@ class SpriteSelectorItem extends React.PureComponent {
handleMouseEnter () {
this.props.dispatchSetHoveredSprite(this.props.id);
}
+ setRef (component) {
+ // Access the DOM node using .elem because it is going through ContextMenuTrigger
+ this.ref = component && component.elem;
+ }
render () {
const {
/* eslint-disable no-unused-vars */
@@ -113,6 +131,7 @@ class SpriteSelectorItem extends React.PureComponent {
} = this.props;
return (
= left && x <= right && y >= top && y <= bottom) {
+ this.handleMouseEnter();
+ }
+ }
addBackdropFromLibraryItem (item, shouldActivateTab = true) {
const vmBackdrop = {
name: item.name,
@@ -137,12 +153,16 @@ class StageSelector extends React.Component {
setFileInput (input) {
this.fileInput = input;
}
+ setRef (ref) {
+ this.ref = ref;
+ }
render () {
const componentProps = omit(this.props, [
'asset', 'dispatchSetHoveredSprite', 'id', 'intl',
'onActivateTab', 'onSelect', 'onShowImporting', 'onCloseImporting']);
return (