85 lines
2.3 KiB
JavaScript
85 lines
2.3 KiB
JavaScript
import React from 'react'
|
|
import {
|
|
Datagrid,
|
|
DatagridBody,
|
|
Filter,
|
|
FunctionField,
|
|
NumberField,
|
|
SearchInput,
|
|
TextField,
|
|
} from 'react-admin'
|
|
import { useMediaQuery } from '@material-ui/core'
|
|
import {
|
|
DurationField,
|
|
SimpleList,
|
|
List,
|
|
SongDetails,
|
|
SongDatagridRow,
|
|
SongContextMenu,
|
|
} from '../common'
|
|
import { useDispatch } from 'react-redux'
|
|
import { setTrack } from '../audioplayer'
|
|
import { SongBulkActions } from './SongBulkActions'
|
|
import { AlbumLinkField } from './AlbumLinkField'
|
|
|
|
const SongFilter = (props) => (
|
|
<Filter {...props}>
|
|
<SearchInput source="title" alwaysOn />
|
|
</Filter>
|
|
)
|
|
|
|
const SongsDatagridBody = (props) => (
|
|
<DatagridBody {...props} row={<SongDatagridRow />} />
|
|
)
|
|
const SongsDatagrid = (props) => (
|
|
<Datagrid {...props} body={<SongsDatagridBody />} />
|
|
)
|
|
|
|
const SongList = (props) => {
|
|
const dispatch = useDispatch()
|
|
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
|
|
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
|
|
return (
|
|
<List
|
|
{...props}
|
|
sort={{ field: 'title', order: 'ASC' }}
|
|
exporter={false}
|
|
bulkActionButtons={<SongBulkActions />}
|
|
filters={<SongFilter />}
|
|
perPage={isXsmall ? 50 : 15}
|
|
>
|
|
{isXsmall ? (
|
|
<SimpleList
|
|
primaryText={(r) => r.title}
|
|
secondaryText={(r) => r.artist}
|
|
tertiaryText={(r) => (
|
|
<>
|
|
<DurationField record={r} source={'duration'} />
|
|
|
|
</>
|
|
)}
|
|
linkType={(id, basePath, record) => dispatch(setTrack(record))}
|
|
rightIcon={(r) => <SongContextMenu record={r} />}
|
|
/>
|
|
) : (
|
|
<SongsDatagrid
|
|
expand={<SongDetails />}
|
|
rowClick={(id, basePath, record) => dispatch(setTrack(record))}
|
|
>
|
|
<TextField source="title" />
|
|
{isDesktop && <AlbumLinkField source="album" />}
|
|
<TextField source="artist" />
|
|
{isDesktop && <NumberField source="trackNumber" />}
|
|
{isDesktop && <NumberField source="playCount" />}
|
|
{isDesktop && (
|
|
<FunctionField source="year" render={(r) => r.year || ''} />
|
|
)}
|
|
<DurationField source="duration" />
|
|
<SongContextMenu />
|
|
</SongsDatagrid>
|
|
)}
|
|
</List>
|
|
)
|
|
}
|
|
|
|
export default SongList
|