Add basic context menu for deleting sprites using react-context-menu

package.json

@@ -64,6 +64,7 @@
     "postcss-simple-vars": "^4.0.0",
     "prop-types": "^15.5.10",
     "react": "15.5.4",
+    "react-contextmenu": "2.6.5",
     "react-dom": "15.5.4",
     "react-draggable": "2.2.6",
     "react-intl": "2.3.0",

src/components/context-menu/context-menu.css

+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.context-menu {
+    min-width: 130px;
+    padding: 5px 0; /* The white strip at the top and bottom of the menu */
+    margin: 2px 0 0; /* To keep the menu below the cursor comfortably */
+    font-size: 0.85rem;
+    text-align: left;
+    background-color: #fff;
+    border: 1px solid $ui-pane-border;
+    border-radius: calc($space / 2);
+    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: 100;
+}
+
+.menu-item {
+    padding: 8px 12px;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: 0.1s ease;
+}
+
+.menu-item:hover {
+    background: $motion-primary;
+    color: white;
+}

src/components/context-menu/context-menu.jsx

+import React from 'react';
+import {ContextMenu, MenuItem} from 'react-contextmenu';
+
+import styles from './context-menu.css';
+
+const StyledContextMenu = props => (
+    <ContextMenu
+        {...props}
+        className={styles.contextMenu}
+    />
+);
+
+const StyledMenuItem = props => (
+    <MenuItem
+        {...props}
+        attributes={{className: styles.menuItem}}
+    />
+);
+
+export {
+    StyledContextMenu as ContextMenu,
+    StyledMenuItem as MenuItem
+};

src/components/sprite-selector-item/sprite-selector-item.jsx

@@ -2,21 +2,25 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Box from '../box/box.jsx';
 import CostumeCanvas from '../costume-canvas/costume-canvas.jsx';
 import CloseButton from '../close-button/close-button.jsx';
 import styles from './sprite-selector-item.css';
+import {ContextMenuTrigger} from 'react-contextmenu';
+import {ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
+import {FormattedMessage} from 'react-intl';
+
+// react-contextmenu requires unique id to match trigger and context menu
+let contextMenuId = 0;
 
 const SpriteSelectorItem = props => (
-    <Box
-        className={classNames(
-            props.className,
-            styles.spriteSelectorItem,
-            {
+    <ContextMenuTrigger
+        attributes={{
+            className: classNames(props.className, styles.spriteSelectorItem, {
                 [styles.isSelected]: props.selected
-            }
-        )}
-        onClick={props.onClick}
+            }),
+            onClick: props.onClick
+        }}
+        id={`${props.name}-${contextMenuId}`}
     >
         {props.selected ? (
             <CloseButton
@@ -24,7 +28,7 @@ const SpriteSelectorItem = props => (
                 size={CloseButton.SIZE_SMALL}
                 onClick={props.onDeleteButtonClick}
             />
-        ) : null }
+            ) : null }
         {props.costumeURL ? (
             <CostumeCanvas
                 className={styles.spriteImage}
@@ -32,9 +36,18 @@ const SpriteSelectorItem = props => (
                 url={props.costumeURL}
                 width={32}
             />
-        ) : null}
+            ) : null}
         <div className={styles.spriteName}>{props.name}</div>
-    </Box>
+        <ContextMenu id={`${props.name}-${contextMenuId++}`}>
+            <MenuItem onClick={props.onDeleteButtonClick}>
+                <FormattedMessage
+                    defaultMessage="delete"
+                    description="Menu item to delete in the right click menu"
+                    id="contextMenu.delete"
+                />
+            </MenuItem>
+        </ContextMenu>
+    </ContextMenuTrigger>
 );
 
 SpriteSelectorItem.propTypes = {