diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index e2e56170b..4f8cca8c4 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.dragging}
id={`${props.name}-${contextMenuId}`}
+ ref={props.componentRef}
>
{typeof props.number === 'undefined' ? null : (
{props.number}
diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx
index f3f79bb56..07d25ae7e 100644
--- a/src/containers/sprite-selector-item.jsx
+++ b/src/containers/sprite-selector-item.jsx
@@ -19,6 +19,7 @@ class SpriteSelectorItem extends React.PureComponent {
super(props);
bindAll(this, [
'getCostumeData',
+ 'setRef',
'handleClick',
'handleDelete',
'handleDuplicate',
@@ -27,15 +28,29 @@ class SpriteSelectorItem extends React.PureComponent {
'handleMouseLeave',
'handleMouseDown',
'handleMouseMove',
- 'handleMouseUp'
+ 'handleMouseUp',
+ 'handleTouchEnd'
]);
}
+ componentDidMount () {
+ document.addEventListener('touchend', this.handleTouchEnd);
+ }
+ componentWillUnmount () {
+ document.removeEventListener('touchend', this.handleTouchEnd);
+ }
getCostumeData () {
if (this.props.costumeURL) return this.props.costumeURL;
if (!this.props.asset) return null;
return getCostumeUrl(this.props.asset);
}
+ 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();
+ }
+ }
handleMouseUp () {
this.initialOffset = null;
window.removeEventListener('mouseup', this.handleMouseUp);
@@ -103,6 +118,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 */
@@ -122,6 +141,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 (