import React from 'react' ; import { HeaderProps , UseRowSelectInstanceProps } from 'react-table' ; import { TrackTableExtraProps , TrackTableStrings } from '../types' ; import { Button , Checkbox , ContextPopup , PopupButton } from '../../..' ; import { Track } from '../../../types' ; import styles from '../styles.scss' ; const SelectionHeader = ( { getToggleAllRowsSelectedProps , selectedFlatRows , onAddToQueue , onPlayAll , onAddToFavorites , onAddToDownloads , strings } ) => { const checkboxProps = getToggleAllRowsSelectedProps ( ) ; const selectedTracks = selectedFlatRows . map ( row => row . original ) ; return < span className = { styles . select_header } > { ( checkboxProps . checked || checkboxProps . indeterminate ) && < span className = { styles . select_header_buttons } > < ContextPopup trigger = { < Button basic circular size = 'tiny' icon = 'ellipsis horizontal' / > } title = { `${ selectedTracks . length } ${ selectedTracks . length > 1 ? strings . tracksSelectedLabelPlural : strings . tracksSelectedLabelSingular }` } > < PopupButton ariaLabel = { strings . addSelectedTracksToQueue } label = { strings . addSelectedTracksToQueue } icon = 'plus' onClick = { ( ) => selectedTracks . forEach ( ( track ) => onAddToQueue ( track ) ) } /> < PopupButton ariaLabel = { strings . playSelectedTracksNow } label = { strings . playSelectedTracksNow } icon = 'play' onClick = { ( ) => onPlayAll ( selectedTracks ) } /> < PopupButton ariaLabel = { strings . addSelectedTracksToFavorites } label = { strings . addSelectedTracksToFavorites } icon = 'heart' onClick = { ( ) => selectedTracks . forEach ( ( track ) => onAddToFavorites ( track ) ) } /> < PopupButton ariaLabel = { strings . addSelectedTracksToDownloads } label = { strings . addSelectedTracksToDownloads } icon = 'download' onClick = { ( ) => selectedTracks . forEach ( ( track ) => onAddToDownloads ( track ) ) } /> < /ContextPopup> < /span>} { } < Checkbox { ... checkboxProps } / > < /span>; } ; export default SelectionHeader ;