Deluan
98 lines
2.5 KiB
JavaScript
98 lines
2.5 KiB
JavaScript
import React, { cloneElement, isValidElement, useState } from 'react'
|
|
import {
|
|
BooleanField,
|
|
Datagrid,
|
|
DatagridBody,
|
|
DatagridRow,
|
|
DateField,
|
|
NumberField,
|
|
Show,
|
|
SimpleShowLayout,
|
|
TextField,
|
|
} from 'react-admin'
|
|
import {
|
|
ArtistLinkField,
|
|
DurationField,
|
|
RangeField,
|
|
SimpleList,
|
|
} from '../common'
|
|
import { useMediaQuery } from '@material-ui/core'
|
|
import AlbumContextMenu from '../common/AlbumContextMenu'
|
|
|
|
const AlbumDetails = (props) => {
|
|
return (
|
|
<Show {...props} title=" ">
|
|
<SimpleShowLayout>
|
|
<TextField source="albumArtist" />
|
|
<TextField source="genre" />
|
|
<BooleanField source="compilation" />
|
|
<DateField source="updatedAt" showTime />
|
|
</SimpleShowLayout>
|
|
</Show>
|
|
)
|
|
}
|
|
|
|
const AlbumDatagridRow = ({ children, ...rest }) => {
|
|
const [visible, setVisible] = useState(false)
|
|
const childCount = React.Children.count(children)
|
|
return (
|
|
<DatagridRow
|
|
onMouseEnter={() => setVisible(true)}
|
|
onMouseLeave={() => setVisible(false)}
|
|
{...rest}
|
|
>
|
|
{React.Children.map(
|
|
children,
|
|
(child, index) =>
|
|
child &&
|
|
isValidElement(child) &&
|
|
(index < childCount - 1
|
|
? child
|
|
: cloneElement(child, {
|
|
visible,
|
|
...rest,
|
|
}))
|
|
)}
|
|
</DatagridRow>
|
|
)
|
|
}
|
|
|
|
const AlbumDatagridBody = (props) => (
|
|
<DatagridBody {...props} row={<AlbumDatagridRow />} />
|
|
)
|
|
const AlbumDatagrid = (props) => (
|
|
<Datagrid {...props} body={<AlbumDatagridBody />} />
|
|
)
|
|
|
|
const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
|
|
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
|
|
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
|
|
return isXsmall ? (
|
|
<SimpleList
|
|
primaryText={(r) => r.name}
|
|
secondaryText={(r) => r.albumArtist}
|
|
tertiaryText={(r) => (
|
|
<>
|
|
<RangeField record={r} source={'year'} sortBy={'maxYear'} />
|
|
|
|
</>
|
|
)}
|
|
linkType={'show'}
|
|
rightIcon={(r) => <AlbumContextMenu record={r} />}
|
|
{...rest}
|
|
/>
|
|
) : (
|
|
<AlbumDatagrid expand={<AlbumDetails />} rowClick={'show'} {...rest}>
|
|
<TextField source="name" />
|
|
<ArtistLinkField />
|
|
{isDesktop && <NumberField source="songCount" />}
|
|
{isDesktop && <NumberField source="playCount" />}
|
|
<RangeField source={'year'} sortBy={'maxYear'} />
|
|
{isDesktop && <DurationField source="duration" />}
|
|
<AlbumContextMenu />
|
|
</AlbumDatagrid>
|
|
)
|
|
}
|
|
|
|
export default AlbumListView
|