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 |