Merge pull request #1705 from paulkaplan/costume-sound-number

Show the costume/sound number similar to Scratch 2.

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}

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;
+}

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,

test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap

 // 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"

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());