Deluan
77 lines
1.7 KiB
JavaScript
77 lines
1.7 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { useNotify, useRefresh, useUpdate } from 'react-admin'
|
|
import StarIcon from '@material-ui/icons/Star'
|
|
import StarBorderIcon from '@material-ui/icons/StarBorder'
|
|
import IconButton from '@material-ui/core/IconButton'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
|
|
const useStyles = makeStyles({
|
|
star: {
|
|
color: (props) => props.color,
|
|
visibility: (props) =>
|
|
props.visible || props.starred ? 'visible' : 'hidden',
|
|
},
|
|
})
|
|
|
|
const StarButton = ({ resource, record, color, visible, size }) => {
|
|
const classes = useStyles({ color, visible, starred: record.starred })
|
|
const notify = useNotify()
|
|
const refresh = useRefresh()
|
|
|
|
const [toggleStarred, { loading }] = useUpdate(
|
|
resource,
|
|
record.id,
|
|
{
|
|
...record,
|
|
starred: !record.starred,
|
|
},
|
|
{
|
|
undoable: false,
|
|
onFailure: (error) => {
|
|
console.log(error)
|
|
notify('ra.page.error', 'warning')
|
|
refresh()
|
|
},
|
|
}
|
|
)
|
|
|
|
const handleToggleStar = (e) => {
|
|
e.preventDefault()
|
|
toggleStarred()
|
|
e.stopPropagation()
|
|
}
|
|
|
|
return (
|
|
<IconButton
|
|
onClick={handleToggleStar}
|
|
size={'small'}
|
|
disabled={loading}
|
|
className={classes.star}
|
|
>
|
|
{record.starred ? (
|
|
<StarIcon fontSize={size} />
|
|
) : (
|
|
<StarBorderIcon fontSize={size} />
|
|
)}
|
|
</IconButton>
|
|
)
|
|
}
|
|
|
|
StarButton.propTypes = {
|
|
resource: PropTypes.string.isRequired,
|
|
record: PropTypes.object.isRequired,
|
|
visible: PropTypes.bool,
|
|
color: PropTypes.string,
|
|
size: PropTypes.string,
|
|
}
|
|
|
|
StarButton.defaultProps = {
|
|
visible: true,
|
|
showStar: true,
|
|
addLabel: true,
|
|
size: 'small',
|
|
}
|
|
|
|
export default StarButton
|