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 | 1x 4x 4x 3x 3x 3x 3x 3x 3x 3x 3x 1x 1x | import React from 'react';
import PropTypes from 'prop-types';
import FlexboxPagination from '../pagination/pagination-with-flexbox';
import OneTrack from './track';
/**
* Makes tracklist
* Creates elements and feeds it into pagination component
*
* @param - see Props
* @return component
*/
const TheatreTrackList = (props) => {
const {
selectedTrack = 0, onSelected, tracks, displayTrackNumbers, creator: albumCreator, albumName
} = props;
if (!tracks.length) return <p className="no-tracks">No tracks to display.</p>;
const trackNumberToHighlight = selectedTrack === null ? 0 : selectedTrack;
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;
|