diff --git a/ui/src/common/SongSimpleList.js b/ui/src/common/SongSimpleList.js new file mode 100644 index 000000000..ef3918a41 --- /dev/null +++ b/ui/src/common/SongSimpleList.js @@ -0,0 +1,121 @@ +import React from 'react' +import PropTypes from 'prop-types' +import List from '@material-ui/core/List' +import ListItem from '@material-ui/core/ListItem' +import ListItemIcon from '@material-ui/core/ListItemIcon' +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction' +import ListItemText from '@material-ui/core/ListItemText' +import { makeStyles } from '@material-ui/core/styles' +import { sanitizeListRestProps } from 'ra-core' +import { DurationField, SongContextMenu } from './index' +import { setTrack } from '../actions' +import { useDispatch } from 'react-redux' + +const useStyles = makeStyles( + { + link: { + textDecoration: 'none', + color: 'inherit', + }, + listItem: { + padding: '10px', + }, + title: { + paddingRight: '10px', + width: '80%', + }, + secondary: { + marginTop: '-3px', + width: '96%', + display: 'flex', + alignItems: 'flex-start', + justifyContent: 'space-between', + }, + artist: { + paddingRight: '30px', + }, + timeStamp: { + float: 'right', + color: '#fff', + fontWeight: '200', + opacity: 0.6, + fontSize: '12px', + padding: '2px', + }, + rightIcon: { + top: '26px', + }, + }, + { name: 'RaSongSimpleList' } +) + +export const SongSimpleList = ({ + basePath, + className, + classes: classesOverride, + data, + hasBulkActions, + ids, + loading, + onToggleItem, + selectedIds, + total, + ...rest +}) => { + const dispatch = useDispatch() + const classes = useStyles({ classes: classesOverride }) + return ( + (loading || total > 0) && ( + + {ids.map( + (id) => + data[id] && ( + dispatch(setTrack(data[id]))}> + + {data[id].title} + } + secondary={ + + + {data[id].artist} + + + + + + } + /> + + + + + + + + ) + )} + + ) + ) +} + +SongSimpleList.propTypes = { + basePath: PropTypes.string, + className: PropTypes.string, + classes: PropTypes.object, + data: PropTypes.object, + hasBulkActions: PropTypes.bool.isRequired, + ids: PropTypes.array, + onToggleItem: PropTypes.func, + selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired, +} + +SongSimpleList.defaultProps = { + hasBulkActions: false, + selectedIds: [], +} diff --git a/ui/src/common/index.js b/ui/src/common/index.js index e0ea874c6..1029f47af 100644 --- a/ui/src/common/index.js +++ b/ui/src/common/index.js @@ -26,3 +26,4 @@ export * from './useInterval' export * from './useToggleStar' export * from './useTraceUpdate' export * from './Writable' +export * from './SongSimpleList' diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js index 59dec1f04..1d5f7f51f 100644 --- a/ui/src/song/SongList.js +++ b/ui/src/song/SongList.js @@ -11,12 +11,12 @@ import StarIcon from '@material-ui/icons/Star' import { DurationField, List, - SimpleList, SongContextMenu, SongDatagrid, SongDetails, QuickFilter, SongTitleField, + SongSimpleList, } from '../common' import { useDispatch } from 'react-redux' import { setTrack } from '../actions' @@ -78,18 +78,7 @@ const SongList = (props) => { perPage={isXsmall ? 50 : 15} > {isXsmall ? ( - r.title} - secondaryText={(r) => r.artist} - tertiaryText={(r) => ( - <> - -       - - )} - linkType={(id, basePath, record) => dispatch(setTrack(record))} - rightIcon={(r) => } - /> + ) : ( }