wrapping playlist comment in a <Collapse> element
This commit is contained in:
parent
cf66594b6d
commit
c7bc4199f8
|
@ -1,9 +1,11 @@
|
|||
import React from 'react'
|
||||
import { Card, CardContent, Typography } from '@material-ui/core'
|
||||
import React, { useMemo, useCallback } from 'react'
|
||||
import { Card, CardContent, Typography, Collapse } from '@material-ui/core'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import { useTranslate } from 'react-admin'
|
||||
import { DurationField, SizeField } from '../common'
|
||||
import Linkify from '../common/Linkify'
|
||||
|
||||
import AnchorMe from '../common/Linkify'
|
||||
import clsx from 'clsx'
|
||||
|
||||
const useStyles = makeStyles(
|
||||
(theme) => ({
|
||||
|
@ -41,6 +43,41 @@ const useStyles = makeStyles(
|
|||
},
|
||||
)
|
||||
|
||||
const PlaylistComment = ({ record }) => {
|
||||
const classes = useStyles()
|
||||
const [expanded, setExpanded] = React.useState(false)
|
||||
|
||||
const lines = record.comment.split('\n')
|
||||
const formatted = useMemo(() => {
|
||||
return lines.map((line, idx) => (
|
||||
<span key={record.id + '-comment-' + idx}>
|
||||
<AnchorMe text={line} />
|
||||
<br />
|
||||
</span>
|
||||
))
|
||||
}, [lines, record.id])
|
||||
|
||||
const handleExpandClick = useCallback(() => {
|
||||
setExpanded(!expanded)
|
||||
}, [expanded, setExpanded])
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
collapsedHeight={'2em'}
|
||||
in={expanded}
|
||||
timeout={'auto'}
|
||||
className={clsx(
|
||||
classes.commentBlock,
|
||||
lines.length > 1 && classes.pointerCursor,
|
||||
)}
|
||||
>
|
||||
<Typography variant={'h6'} onClick={handleExpandClick}>
|
||||
{formatted}
|
||||
</Typography>
|
||||
</Collapse>
|
||||
)
|
||||
}
|
||||
|
||||
const PlaylistDetails = (props) => {
|
||||
const { record = {} } = props
|
||||
const translate = useTranslate()
|
||||
|
@ -52,9 +89,7 @@ const PlaylistDetails = (props) => {
|
|||
<Typography variant="h5" className={classes.title}>
|
||||
{record.name || translate('ra.page.loading')}
|
||||
</Typography>
|
||||
<Typography component="h6">
|
||||
<Linkify text={record.comment} />
|
||||
</Typography>
|
||||
<PlaylistComment record={record} />
|
||||
<Typography component="p">
|
||||
{record.songCount ? (
|
||||
<span>
|
||||
|
|
Loading…
Reference in New Issue