Add duplicate method for sprite selector item

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

@@ -39,6 +39,15 @@ const SpriteSelectorItem = props => (
         ) : null}
         <div className={styles.spriteName}>{props.name}</div>
         <ContextMenu id={`${props.name}-${contextMenuId++}`}>
+            {props.onDuplicateButtonClick ? (
+                <MenuItem onClick={props.onDuplicateButtonClick}>
+                    <FormattedMessage
+                        defaultMessage="duplicate"
+                        description="Menu item to duplicate in the right click menu"
+                        id="contextMenu.duplicate"
+                    />
+                </MenuItem>
+            ) : null}
             <MenuItem onClick={props.onDeleteButtonClick}>
                 <FormattedMessage
                     defaultMessage="delete"
@@ -56,6 +65,7 @@ SpriteSelectorItem.propTypes = {
     name: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     onDeleteButtonClick: PropTypes.func,
+    onDuplicateButtonClick: PropTypes.func,
     selected: PropTypes.bool.isRequired
 };
 

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

@@ -27,6 +27,7 @@ const SpriteSelectorComponent = function (props) {
         onChangeSpriteX,
         onChangeSpriteY,
         onDeleteSprite,
+        onDuplicateSprite,
         onNewSpriteClick,
         onSelectSprite,
         selectedId,
@@ -77,6 +78,7 @@ const SpriteSelectorComponent = function (props) {
                                 selected={sprite.id === selectedId}
                                 onClick={onSelectSprite}
                                 onDeleteButtonClick={onDeleteSprite}
+                                onDuplicateButtonClick={onDuplicateSprite}
                             />
                         ))
                     }
@@ -100,6 +102,7 @@ SpriteSelectorComponent.propTypes = {
     onChangeSpriteX: PropTypes.func,
     onChangeSpriteY: PropTypes.func,
     onDeleteSprite: PropTypes.func,
+    onDuplicateSprite: PropTypes.func,
     onNewSpriteClick: PropTypes.func,
     onSelectSprite: PropTypes.func,
     selectedId: PropTypes.string,

src/components/target-pane/target-pane.jsx

@@ -34,6 +34,7 @@ const TargetPane = ({
     onChangeSpriteX,
     onChangeSpriteY,
     onDeleteSprite,
+    onDuplicateSprite,
     onNewSpriteClick,
     onRequestCloseBackdropLibrary,
     onRequestCloseCostumeLibrary,
@@ -61,6 +62,7 @@ const TargetPane = ({
             onChangeSpriteX={onChangeSpriteX}
             onChangeSpriteY={onChangeSpriteY}
             onDeleteSprite={onDeleteSprite}
+            onDuplicateSprite={onDuplicateSprite}
             onNewSpriteClick={onNewSpriteClick}
             onSelectSprite={onSelectSprite}
         />
@@ -141,6 +143,7 @@ TargetPane.propTypes = {
     onChangeSpriteX: PropTypes.func,
     onChangeSpriteY: PropTypes.func,
     onDeleteSprite: PropTypes.func,
+    onDuplicateSprite: PropTypes.func,
     onNewSpriteClick: PropTypes.func,
     onRequestCloseBackdropLibrary: PropTypes.func,
     onRequestCloseCostumeLibrary: PropTypes.func,

src/containers/sprite-selector-item.jsx

@@ -11,7 +11,8 @@ class SpriteSelectorItem extends React.Component {
         super(props);
         bindAll(this, [
             'handleClick',
-            'handleDelete'
+            'handleDelete',
+            'handleDuplicate'
         ]);
     }
     handleClick (e) {
@@ -24,6 +25,10 @@ class SpriteSelectorItem extends React.Component {
             this.props.onDeleteButtonClick(this.props.id);
         }
     }
+    handleDuplicate (e) {
+        e.stopPropagation(); // To prevent from bubbling back to handleClick
+        this.props.onDuplicateButtonClick(this.props.id);
+    }
     render () {
         const {
             /* eslint-disable no-unused-vars */
@@ -31,6 +36,7 @@ class SpriteSelectorItem extends React.Component {
             id,
             onClick,
             onDeleteButtonClick,
+            onDuplicateButtonClick,
             /* eslint-enable no-unused-vars */
             ...props
         } = this.props;
@@ -38,6 +44,7 @@ class SpriteSelectorItem extends React.Component {
             <SpriteSelectorItemComponent
                 onClick={this.handleClick}
                 onDeleteButtonClick={this.handleDelete}
+                onDuplicateButtonClick={onDuplicateButtonClick ? this.handleDuplicate : null}
                 {...props}
             />
         );
@@ -51,6 +58,7 @@ SpriteSelectorItem.propTypes = {
     name: PropTypes.string,
     onClick: PropTypes.func,
     onDeleteButtonClick: PropTypes.func,
+    onDuplicateButtonClick: PropTypes.func,
     selected: PropTypes.bool
 };
 

src/containers/target-pane.jsx

@@ -25,6 +25,7 @@ class TargetPane extends React.Component {
             'handleChangeSpriteX',
             'handleChangeSpriteY',
             'handleDeleteSprite',
+            'handleDuplicateSprite',
             'handleSelectSprite'
         ]);
     }
@@ -49,6 +50,9 @@ class TargetPane extends React.Component {
     handleDeleteSprite (id) {
         this.props.vm.deleteSprite(id);
     }
+    handleDuplicateSprite (id) {
+        this.props.vm.duplicateSprite(id);
+    }
     handleSelectSprite (id) {
         this.props.vm.setEditingTarget(id);
     }
@@ -63,6 +67,7 @@ class TargetPane extends React.Component {
                 onChangeSpriteX={this.handleChangeSpriteX}
                 onChangeSpriteY={this.handleChangeSpriteY}
                 onDeleteSprite={this.handleDeleteSprite}
+                onDuplicateSprite={this.handleDuplicateSprite}
                 onSelectSprite={this.handleSelectSprite}
             />
         );