Deluan
78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { useGetList, useTranslate } from 'react-admin'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
import Avatar from '@material-ui/core/Avatar'
|
|
import List from '@material-ui/core/List'
|
|
import ListItem from '@material-ui/core/ListItem'
|
|
import ListItemAvatar from '@material-ui/core/ListItemAvatar'
|
|
import ListItemText from '@material-ui/core/ListItemText'
|
|
import DialogTitle from '@material-ui/core/DialogTitle'
|
|
import Dialog from '@material-ui/core/Dialog'
|
|
import { blue } from '@material-ui/core/colors'
|
|
import PlaylistIcon from '../icons/Playlist'
|
|
|
|
const useStyles = makeStyles({
|
|
avatar: {
|
|
backgroundColor: blue[100],
|
|
color: blue[600],
|
|
},
|
|
})
|
|
|
|
function SelectPlaylistDialog(props) {
|
|
const classes = useStyles()
|
|
const translate = useTranslate()
|
|
const { onClose, selectedValue, open } = props
|
|
const { ids, data, loaded } = useGetList(
|
|
'playlist',
|
|
{ page: 1, perPage: -1 },
|
|
{ field: '', order: '' },
|
|
{}
|
|
)
|
|
|
|
if (!loaded) {
|
|
return <div />
|
|
}
|
|
|
|
const handleClose = () => {
|
|
onClose(selectedValue)
|
|
}
|
|
|
|
const handleListItemClick = (value) => {
|
|
onClose(value)
|
|
}
|
|
|
|
return (
|
|
<Dialog
|
|
onClose={handleClose}
|
|
aria-labelledby="select-playlist-dialog-title"
|
|
open={open}
|
|
scroll={'paper'}
|
|
>
|
|
<DialogTitle id="select-playlist-dialog-title">
|
|
{translate('resources.playlist.actions.selectPlaylist')}
|
|
</DialogTitle>
|
|
<List>
|
|
{ids.map((id) => (
|
|
<ListItem button onClick={() => handleListItemClick(id)} key={id}>
|
|
<ListItemAvatar>
|
|
<Avatar className={classes.avatar}>
|
|
<PlaylistIcon />
|
|
</Avatar>
|
|
</ListItemAvatar>
|
|
<ListItemText primary={data[id].name} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
SelectPlaylistDialog.propTypes = {
|
|
onClose: PropTypes.func.isRequired,
|
|
open: PropTypes.bool.isRequired,
|
|
selectedValue: PropTypes.string.isRequired,
|
|
}
|
|
|
|
export default SelectPlaylistDialog
|