Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | import React, { FC } from 'react'
import styled, { css } from 'styled-components'
import UserPicture from 'components/User/UserPicture'
import CommentBody from './CommentBody'
import * as styles from 'client/constants/styles'
import { CommonProps } from 'client/types/component'
import Crowi from 'client/util/Crowi'
type PageCommentContainerProps = Props & {
isOwn: boolean
isOld: boolean
}
const PageCommentContainer = styled.div<PageCommentContainerProps>`
display: flex;
margin-top: 8px;
padding-top: 8px;
border-top: solid 1px #ccc;
${({ isOwn }: PageCommentContainerProps) =>
isOwn &&
css`
color: ${styles.header.background};
`}
${({ isOld }: PageCommentContainerProps) =>
isOld &&
css`
opacity: 0.7;
&:hover {
opacity: 1;
}
`}
`
const CommentUserPicture = styled(UserPicture)`
width: 24px;
height: 24px;
`
const PageComment = styled.div`
margin-left: 16px;
`
const CommentCreator = styled.div`
font-weight: bold;
`
const CommentMeta = styled.div`
color: #aaa;
font-size: 0.9em;
`
const CommentAt = styled.span`
margin-right: 0.5em;
`
type Props = CommonProps & {
crowi: Crowi
revisionId: string | null
comment: Record<string, any>
}
const CommentItem: FC<Props> = props => {
const { crowi, revisionId, comment, ...others } = props
const { revision, creator, comment: commentBody, createdAt } = comment
const badgeType = revision === revisionId ? 'badge-primary' : 'badge-secondary'
const me = crowi.getUser() || {}
return (
<PageCommentContainer isOwn={me.id === creator._id} isOld={revision !== revisionId} {...others}>
<CommentUserPicture user={creator} />
<PageComment>
<CommentCreator>{creator.username}</CommentCreator>
<CommentBody comment={commentBody} />
<CommentMeta>
<CommentAt>{createdAt}</CommentAt>
<a className={`badge ${badgeType}`} href={`?revision=${revision}`}>
{revision.substr(0, 8)}
</a>
</CommentMeta>
</PageComment>
</PageCommentContainer>
)
}
export default CommentItem
|