124 lines
3.3 KiB
JavaScript
124 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
import TextField from '@material-ui/core/TextField'
|
|
import Checkbox from '@material-ui/core/Checkbox'
|
|
import CheckBoxIcon from '@material-ui/icons/CheckBox'
|
|
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'
|
|
import Autocomplete, {
|
|
createFilterOptions,
|
|
} from '@material-ui/lab/Autocomplete'
|
|
import { useGetList, useTranslate } from 'react-admin'
|
|
import PropTypes from 'prop-types'
|
|
import { isWritable } from '../common'
|
|
import { makeStyles } from '@material-ui/core'
|
|
|
|
const filter = createFilterOptions()
|
|
|
|
const useStyles = makeStyles({
|
|
root: { width: '100%' },
|
|
checkbox: { marginRight: 8 },
|
|
})
|
|
|
|
export const SelectPlaylistInput = ({ onChange }) => {
|
|
const classes = useStyles()
|
|
const translate = useTranslate()
|
|
const { ids, data } = useGetList(
|
|
'playlist',
|
|
{ page: 1, perPage: -1 },
|
|
{ field: 'name', order: 'ASC' },
|
|
{ smart: false }
|
|
)
|
|
|
|
const options =
|
|
ids &&
|
|
ids.map((id) => data[id]).filter((option) => isWritable(option.ownerId))
|
|
|
|
const handleOnChange = (event, newValue) => {
|
|
let newState = []
|
|
if (newValue && newValue.length) {
|
|
newValue.forEach((playlistObject) => {
|
|
if (playlistObject.inputValue) {
|
|
newState.push({
|
|
name: playlistObject.inputValue,
|
|
})
|
|
} else if (typeof playlistObject === 'string') {
|
|
newState.push({
|
|
name: playlistObject,
|
|
})
|
|
} else {
|
|
newState.push(playlistObject)
|
|
}
|
|
})
|
|
}
|
|
onChange(newState)
|
|
}
|
|
|
|
const icon = <CheckBoxOutlineBlankIcon fontSize="small" />
|
|
const checkedIcon = <CheckBoxIcon fontSize="small" />
|
|
|
|
return (
|
|
<Autocomplete
|
|
multiple
|
|
disableCloseOnSelect
|
|
onChange={handleOnChange}
|
|
filterOptions={(options, params) => {
|
|
const filtered = filter(options, params)
|
|
|
|
// Suggest the creation of a new value
|
|
if (params.inputValue !== '') {
|
|
filtered.push({
|
|
inputValue: params.inputValue,
|
|
name: translate('resources.playlist.actions.addNewPlaylist', {
|
|
name: params.inputValue,
|
|
}),
|
|
})
|
|
}
|
|
|
|
return filtered
|
|
}}
|
|
clearOnBlur
|
|
handleHomeEndKeys
|
|
openOnFocus
|
|
selectOnFocus
|
|
id="select-playlist-input"
|
|
options={options}
|
|
getOptionLabel={(option) => {
|
|
// Value selected with enter, right from the input
|
|
if (typeof option === 'string') {
|
|
return option
|
|
}
|
|
// Add "xxx" option created dynamically
|
|
if (option.inputValue) {
|
|
return option.inputValue
|
|
}
|
|
// Regular option
|
|
return option.name
|
|
}}
|
|
renderOption={(option, { selected }) => (
|
|
<React.Fragment>
|
|
<Checkbox
|
|
icon={icon}
|
|
checkedIcon={checkedIcon}
|
|
className={classes.checkbox}
|
|
checked={selected}
|
|
/>
|
|
{option.name}
|
|
</React.Fragment>
|
|
)}
|
|
className={classes.root}
|
|
freeSolo
|
|
renderInput={(params) => (
|
|
<TextField
|
|
autoFocus
|
|
variant={'outlined'}
|
|
{...params}
|
|
label={translate('resources.playlist.fields.name')}
|
|
/>
|
|
)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
SelectPlaylistInput.propTypes = {
|
|
onChange: PropTypes.func.isRequired,
|
|
}
|