Spaces:
Running
Running
File size: 4,833 Bytes
f2bee8a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import DeleteButton from '../delete-button/delete-button.jsx';
import styles from './sprite-selector-item.css';
import {ContextMenuTrigger} from 'react-contextmenu';
import {DangerousMenuItem, 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 => (
<ContextMenuTrigger
attributes={{
className: classNames(props.className, styles.spriteSelectorItem, {
[styles.isSelected]: props.selected
}),
onClick: props.onClick,
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave,
onMouseDown: props.onMouseDown,
onTouchStart: props.onMouseDown
}}
disable={props.preventContextMenu}
id={`${props.name}-${contextMenuId}`}
ref={props.componentRef}
>
{typeof props.number === 'undefined' ? null : (
<div className={styles.number}>{props.number}</div>
)}
{props.costumeURL ? (
<div className={styles.spriteImageOuter}>
<div className={styles.spriteImageInner}>
<img
className={styles.spriteImage}
draggable={false}
src={props.costumeURL}
/>
</div>
</div>
) : null}
<div className={styles.spriteInfo}>
<div className={styles.spriteName}>{props.name}</div>
{props.details ? (
<div className={styles.spriteDetails}>{props.details}</div>
) : null}
</div>
{(props.selected && props.onDeleteButtonClick) ? (
<DeleteButton
className={styles.deleteButton}
onClick={props.onDeleteButtonClick}
/>
) : null }
{props.onDuplicateButtonClick || props.onDeleteButtonClick || props.onExportButtonClick ? (
<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="gui.spriteSelectorItem.contextMenuDuplicate"
/>
</MenuItem>
) : null}
{props.onExportButtonClick ? (
<MenuItem onClick={props.onExportButtonClick}>
<FormattedMessage
defaultMessage="export"
description="Menu item to export the selected item"
id="gui.spriteSelectorItem.contextMenuExport"
/>
</MenuItem>
) : null }
{props.onRenameButtonClick ? (
<MenuItem onClick={props.onRenameButtonClick}>
<FormattedMessage
defaultMessage="rename"
description="Menu item to rename an item"
id="tw.spriteSelectorItem.rename"
/>
</MenuItem>
) : null}
{props.onDeleteButtonClick ? (
<DangerousMenuItem onClick={props.onDeleteButtonClick}>
<FormattedMessage
defaultMessage="delete"
description="Menu item to delete in the right click menu"
id="gui.spriteSelectorItem.contextMenuDelete"
/>
</DangerousMenuItem>
) : null }
</ContextMenu>
) : null}
</ContextMenuTrigger>
);
SpriteSelectorItem.propTypes = {
className: PropTypes.string,
componentRef: PropTypes.func,
costumeURL: PropTypes.string,
details: PropTypes.string,
// eslint-disable-next-line react/forbid-prop-types
name: PropTypes.any,
number: PropTypes.number,
onClick: PropTypes.func,
onDeleteButtonClick: PropTypes.func,
onDuplicateButtonClick: PropTypes.func,
onExportButtonClick: PropTypes.func,
onRenameButtonClick: PropTypes.func,
onMouseDown: PropTypes.func,
onMouseEnter: PropTypes.func,
onMouseLeave: PropTypes.func,
preventContextMenu: PropTypes.bool,
selected: PropTypes.bool.isRequired
};
export default SpriteSelectorItem;
|