mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
comments highlight
This commit is contained in:
Fedor Katurov
parent
e825db6d63
commit
caeb464bb2
13 changed files with 239 additions and 115 deletions
|
|
@ -1,6 +1,11 @@
|
|||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: $comment_height;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
flex: 1;
|
||||
|
||||
&:global(.playing) {
|
||||
.progress {
|
||||
|
|
|
|||
|
|
@ -1,73 +1,39 @@
|
|||
import React, { FC, HTMLAttributes, useMemo } from 'react';
|
||||
import React, { FC, HTMLAttributes } from 'react';
|
||||
import { CommentWrapper } from '~/components/containers/CommentWrapper';
|
||||
import { IComment, IFile } from '~/redux/types';
|
||||
import { ICommentGroup } from '~/redux/types';
|
||||
import { getURL } from '~/utils/dom';
|
||||
import { CommentContent } from '~/components/node/CommentContent';
|
||||
import * as styles from './styles.scss';
|
||||
import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import assocPath from 'ramda/es/assocPath';
|
||||
import append from 'ramda/es/append';
|
||||
import reduce from 'ramda/es/reduce';
|
||||
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
|
||||
import { AudioPlayer } from '~/components/media/AudioPlayer';
|
||||
|
||||
type IProps = HTMLAttributes<HTMLDivElement> & {
|
||||
is_empty?: boolean;
|
||||
is_loading?: boolean;
|
||||
comment?: IComment;
|
||||
comment_group?: ICommentGroup;
|
||||
is_same?: boolean;
|
||||
};
|
||||
|
||||
const Comment: FC<IProps> = ({ comment, is_empty, is_same, is_loading, className, ...props }) => {
|
||||
const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
|
||||
() =>
|
||||
reduce(
|
||||
(group, file) => assocPath([file.type], append(file, group[file.type]), group),
|
||||
{},
|
||||
comment.files
|
||||
),
|
||||
[comment]
|
||||
);
|
||||
|
||||
const Comment: FC<IProps> = ({
|
||||
comment_group,
|
||||
is_empty,
|
||||
is_same,
|
||||
is_loading,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<CommentWrapper
|
||||
className={className}
|
||||
is_empty={is_empty}
|
||||
is_loading={is_loading}
|
||||
photo={getURL(comment.user.photo)}
|
||||
photo={getURL(comment_group.user.photo)}
|
||||
is_same={is_same}
|
||||
{...props}
|
||||
>
|
||||
{comment.text && (
|
||||
<Group
|
||||
className={styles.text}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: formatCommentText(
|
||||
!is_same && comment.user && comment.user.username,
|
||||
comment.text
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
|
||||
|
||||
{groupped.image && (
|
||||
<div className={styles.images}>
|
||||
{groupped.image.map(file => (
|
||||
<div key={file.id}>
|
||||
<img src={getURL(file)} alt={file.name} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{groupped.audio && (
|
||||
<div className={styles.audios}>
|
||||
{groupped.audio.map(file => (
|
||||
<AudioPlayer key={file.id} file={file} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.wrap}>
|
||||
{comment_group.comments.map(comment => (
|
||||
<CommentContent comment={comment} key={comment.id} />
|
||||
))}
|
||||
</div>
|
||||
</CommentWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,48 +1,2 @@
|
|||
@import 'flexbin/flexbin.scss';
|
||||
|
||||
.text {
|
||||
// @include outer_shadow();
|
||||
|
||||
padding: $gap;
|
||||
font-weight: 300;
|
||||
font: $font_16_medium;
|
||||
min-height: $comment_height;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
color: #cccccc;
|
||||
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font: $font_12_regular;
|
||||
color: transparentize($color: white, $amount: 0.8);
|
||||
padding: 2px 4px;
|
||||
border-radius: 0 0 $radius 0;
|
||||
}
|
||||
|
||||
.images {
|
||||
@include flexbin(240px, 5px);
|
||||
|
||||
img {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.audios {
|
||||
& > div {
|
||||
@include outer_shadow();
|
||||
|
||||
height: $comment_height;
|
||||
border-radius: $radius;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.wrap {
|
||||
}
|
||||
|
|
|
|||
79
src/components/node/CommentContent/index.tsx
Normal file
79
src/components/node/CommentContent/index.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import React, { FC, useMemo } from 'react';
|
||||
import { IComment, IFile } from '~/redux/types';
|
||||
import path from 'ramda/es/path';
|
||||
import { formatCommentText, getURL } from '~/utils/dom';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import * as styles from './styles.scss';
|
||||
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
|
||||
import assocPath from 'ramda/es/assocPath';
|
||||
import append from 'ramda/es/append';
|
||||
import reduce from 'ramda/es/reduce';
|
||||
import { AudioPlayer } from '~/components/media/AudioPlayer';
|
||||
import classnames from 'classnames';
|
||||
|
||||
interface IProps {
|
||||
comment: IComment;
|
||||
}
|
||||
|
||||
const CommentContent: FC<IProps> = ({ comment }) => {
|
||||
const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
|
||||
() =>
|
||||
reduce(
|
||||
(group, file) => assocPath([file.type], append(file, group[file.type]), group),
|
||||
{},
|
||||
comment.files
|
||||
),
|
||||
[comment]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{comment.text && (
|
||||
<div className={styles.block}>
|
||||
<Group
|
||||
className={styles.text}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: formatCommentText(path(['user', 'username'], comment), comment.text),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{groupped.image && groupped.image.length > 0 && (
|
||||
<div className={styles.block}>
|
||||
<div className={styles.images}>
|
||||
{groupped.image.map(file => (
|
||||
<div key={file.id}>
|
||||
<img src={getURL(file)} alt={file.name} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{groupped.audio && groupped.audio.length > 0 && (
|
||||
<>
|
||||
{groupped.audio.map(file => (
|
||||
<div className={classnames(styles.block, styles.audio_block)} key={file.id}>
|
||||
<AudioPlayer file={file} />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { CommentContent };
|
||||
|
||||
/*
|
||||
{comment.text && (
|
||||
|
||||
)}
|
||||
|
||||
<div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
*/
|
||||
65
src/components/node/CommentContent/styles.scss
Normal file
65
src/components/node/CommentContent/styles.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
@import 'flexbin/flexbin.scss';
|
||||
|
||||
.block {
|
||||
min-height: $comment_height;
|
||||
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
&:first-child {
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.block_audio {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: $gap;
|
||||
font-weight: 300;
|
||||
font: $font_16_medium;
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
color: #cccccc;
|
||||
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font: $font_12_regular;
|
||||
color: transparentize($color: white, $amount: 0.8);
|
||||
padding: 2px 4px;
|
||||
border-radius: 0 0 $radius 0;
|
||||
}
|
||||
|
||||
.images {
|
||||
@include flexbin(240px, 5px);
|
||||
|
||||
img {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.audios {
|
||||
& > div {
|
||||
height: $comment_height;
|
||||
border-radius: $radius;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +1,29 @@
|
|||
import React, { FC } from 'react';
|
||||
import React, { FC, useMemo } from 'react';
|
||||
import { Comment } from '../Comment';
|
||||
import { Filler } from '~/components/containers/Filler';
|
||||
|
||||
import * as styles from './styles.scss';
|
||||
import { ICommentGroup, IComment } from '~/redux/types';
|
||||
import { groupCommentsByUser } from '~/utils/fn';
|
||||
|
||||
interface IProps {
|
||||
comments?: any;
|
||||
comments?: IComment[];
|
||||
}
|
||||
|
||||
const isSameComment = (comments, index) =>
|
||||
comments[index - 1] && comments[index - 1].user.id === comments[index].user.id;
|
||||
const NodeComments: FC<IProps> = ({ comments }) => {
|
||||
const groupped: ICommentGroup[] = useMemo(() => comments.reduce(groupCommentsByUser, []), [
|
||||
comments,
|
||||
]);
|
||||
|
||||
const NodeComments: FC<IProps> = ({ comments }) => (
|
||||
<div className={styles.wrap}>
|
||||
{comments.map((comment, index) => (
|
||||
<Comment key={comment.id} comment={comment} is_same={isSameComment(comments, index)} />
|
||||
))}
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
{groupped.map(group => (
|
||||
<Comment key={group.ids.join()} comment_group={group} />
|
||||
))}
|
||||
|
||||
<Filler />
|
||||
</div>
|
||||
);
|
||||
<Filler />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { NodeComments };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue