diff --git a/src/components/asset-panel/selector.jsx b/src/components/asset-panel/selector.jsx index cc5abed4d55d1cb4e1af2b441dfefc90e40aecd5..ff818415a44851d1049cfd674e40f40c4ca6987b 100644 --- a/src/components/asset-panel/selector.jsx +++ b/src/components/asset-panel/selector.jsx @@ -45,6 +45,7 @@ const Selector = props => { id={index} key={`asset-${index}`} name={item.name} + number={index + 1 /* 1-indexed */} selected={index === selectedItemIndex} onClick={onItemClick} onDeleteButtonClick={onDeleteClick} diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css index 60f8393565b8d2e4068a005dd5bc65f4e00dbef4..a0880a518705b1ecff5d15ea61ea1940324d2c03 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.css +++ b/src/components/sprite-selector-item/sprite-selector-item.css @@ -56,3 +56,11 @@ right: 0.125rem; z-index: 2; } + +.number { + position: absolute; + top: 0.125rem; + left: 0.125rem; + font-size: 0.625rem; + z-index: 2; +} diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx index abb47bb5478bcb572726ac2a838f88efe8476e06..35eeebe005cba166743ed763dbd518f1deafc43a 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.jsx +++ b/src/components/sprite-selector-item/sprite-selector-item.jsx @@ -31,6 +31,9 @@ const SpriteSelectorItem = props => ( onClick={props.onDeleteButtonClick} /> ) : null } + {typeof props.number === 'undefined' ? null : ( + <div className={styles.number}>{props.number}</div> + )} {props.costumeURL ? ( <CostumeCanvas className={styles.spriteImage} @@ -69,6 +72,7 @@ SpriteSelectorItem.propTypes = { className: PropTypes.string, costumeURL: PropTypes.string, name: PropTypes.string.isRequired, + number: PropTypes.number, onClick: PropTypes.func, onDeleteButtonClick: PropTypes.func, onDuplicateButtonClick: PropTypes.func, diff --git a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap index 4ecf19565c1de4f56bef8dfb883fda7e6d199f56..eaca8d9366004e9eccf9bf21fa69da48b877e662 100644 --- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap +++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap @@ -1,5 +1,84 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`SpriteSelectorItemComponent matches snapshot when given a number to show 1`] = ` +<div + className="react-contextmenu-wrapper ponies undefined" + onClick={[Function]} + onContextMenu={[Function]} + onMouseDown={[Function]} + onMouseEnter={undefined} + onMouseLeave={undefined} + onMouseOut={[Function]} + onMouseUp={[Function]} + onTouchEnd={[Function]} + onTouchStart={[Function]} +> + <div + aria-label="Close" + className="" + onClick={[Function]} + role="button" + tabIndex="0" + > + <img + className={undefined} + src="test-file-stub" + /> + </div> + <div + className={undefined} + > + 5 + </div> + <canvas + className={undefined} + height={32} + style={ + Object { + "height": "32px", + "width": "32px", + } + } + width={32} + /> + <div + className={undefined} + > + Pony sprite + </div> + <nav + className="react-contextmenu" + onContextMenu={[Function]} + onMouseLeave={[Function]} + role="menu" + style={ + Object { + "opacity": 0, + "pointerEvents": "none", + "position": "fixed", + } + } + tabIndex="-1" + > + <div + aria-disabled="false" + aria-orientation={null} + className="react-contextmenu-item" + onClick={[Function]} + onMouseLeave={[Function]} + onMouseMove={[Function]} + onTouchEnd={[Function]} + role="menuitem" + tabIndex="-1" + > + <span> + delete + </span> + </div> + </nav> +</div> +`; + exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = ` <div className="react-contextmenu-wrapper ponies undefined" diff --git a/test/unit/components/sprite-selector-item.test.jsx b/test/unit/components/sprite-selector-item.test.jsx index e1d7ac7bb73ae23fb10ff018035a097ef0137e06..5848e0ca951ffea8f1a893c2cc20c7d51ef93954 100644 --- a/test/unit/components/sprite-selector-item.test.jsx +++ b/test/unit/components/sprite-selector-item.test.jsx @@ -11,6 +11,7 @@ describe('SpriteSelectorItemComponent', () => { let onClick; let onDeleteButtonClick; let selected; + let number; // Wrap this in a function so it gets test specific states and can be reused. const getComponent = function () { @@ -19,6 +20,7 @@ describe('SpriteSelectorItemComponent', () => { className={className} costumeURL={costumeURL} name={name} + number={number} selected={selected} onClick={onClick} onDeleteButtonClick={onDeleteButtonClick} @@ -33,6 +35,8 @@ describe('SpriteSelectorItemComponent', () => { onClick = jest.fn(); onDeleteButtonClick = jest.fn(); selected = true; + // Reset number to undefined since it is an optional prop + number = undefined; // eslint-disable-line no-undefined }); test('matches snapshot when selected', () => { @@ -40,6 +44,12 @@ describe('SpriteSelectorItemComponent', () => { expect(component.toJSON()).toMatchSnapshot(); }); + test('matches snapshot when given a number to show', () => { + number = 5; + const component = componentWithIntl(getComponent()); + expect(component.toJSON()).toMatchSnapshot(); + }); + test('does not have a close box when not selected', () => { selected = false; const wrapper = shallowWithIntl(getComponent());