Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 2x 4x 4x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 2x 2x | import React from 'react';
import PropTypes from 'prop-types';
import { FlexboxPagination } from '../..';
import OneTrack from './track';
/**
* Makes tracklist
* Creates elements and feeds it into pagination component
*
* @param - see Props
* @return component
*/
const TheatreTrackList = (props) => {
const {
selectedTrack, onSelected, tracks, displayTrackNumbers, creator: albumCreator, albumName
} = props;
if (!tracks.length) return <p className="no-tracks">No tracks to display.</p>;
const [firstTrack = {}] = tracks;
const { trackNumber: firstTrackNumber } = firstTrack;
const trackNumberToHighlight = Number.isInteger(selectedTrack)
? selectedTrack
: firstTrackNumber;
const itemToViewClass = `[data-track-number="${trackNumberToHighlight}"]`;
return (
<div className="audio-track-list">
<FlexboxPagination
itemInViewClass={itemToViewClass}
{...props}
>
{
tracks.map((thisTrack) => {
const { trackNumber } = thisTrack;
const selected = trackNumber === trackNumberToHighlight;
const key = `individual-track-${trackNumber}`;
const trackProps = {
thisTrack, onSelected, selected, displayTrackNumbers, albumCreator, albumName
};
return <OneTrack {...trackProps} key={key} />;
})
}
</FlexboxPagination>
</div>
);
};
TheatreTrackList.defaultProps = {
tracks: [],
displayTrackNumbers: true,
creator: '',
albumName: '',
selectedTrack: null,
};
TheatreTrackList.propTypes = {
onSelected: PropTypes.func.isRequired,
selectedTrack: PropTypes.number,
tracks: PropTypes.arrayOf(PropTypes.object),
displayTrackNumbers: PropTypes.bool,
creator: PropTypes.oneOfType([
PropTypes.string,
PropTypes.array
]),
albumName: PropTypes.string,
};
export default TheatreTrackList;
|