mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
fixed comment attachments click
This commit is contained in:
parent
6957813cd0
commit
dd8b4e9dcf
2 changed files with 10 additions and 6 deletions
|
@ -69,6 +69,12 @@ const CommentContent: FC<IProps> = memo(
|
||||||
onDelete(comment.id, !comment.deleted_at);
|
onDelete(comment.id, !comment.deleted_at);
|
||||||
}, [comment, onDelete]);
|
}, [comment, onDelete]);
|
||||||
|
|
||||||
|
const onImageClick = useCallback(
|
||||||
|
(file: IFile) =>
|
||||||
|
onShowImageModal(groupped.image, groupped.image.indexOf(file)),
|
||||||
|
[onShowImageModal, groupped],
|
||||||
|
);
|
||||||
|
|
||||||
const menu = useMemo(
|
const menu = useMemo(
|
||||||
() => (
|
() => (
|
||||||
<div>
|
<div>
|
||||||
|
@ -130,7 +136,7 @@ const CommentContent: FC<IProps> = memo(
|
||||||
<div className={classnames(styles.block, styles.block_image)}>
|
<div className={classnames(styles.block, styles.block_image)}>
|
||||||
{menu}
|
{menu}
|
||||||
|
|
||||||
<CommentImageGrid files={groupped.image} />
|
<CommentImageGrid files={groupped.image} onClick={onImageClick} />
|
||||||
|
|
||||||
<div className={styles.date}>
|
<div className={styles.date}>
|
||||||
{getPrettyDate(comment.created_at)}
|
{getPrettyDate(comment.created_at)}
|
||||||
|
|
|
@ -11,12 +11,13 @@ import styles from './styles.module.scss';
|
||||||
|
|
||||||
interface CommentImageGridProps {
|
interface CommentImageGridProps {
|
||||||
files: IFile[];
|
files: IFile[];
|
||||||
|
onClick: (file: IFile) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const singleSrcSet = '(max-width: 1024px) 40vw, 20vw';
|
const singleSrcSet = '(max-width: 1024px) 40vw, 20vw';
|
||||||
const multipleSrcSet = '(max-width: 1024px) 50vw, 20vw';
|
const multipleSrcSet = '(max-width: 1024px) 50vw, 20vw';
|
||||||
|
|
||||||
const CommentImageGrid: FC<CommentImageGridProps> = ({ files }) => {
|
const CommentImageGrid: FC<CommentImageGridProps> = ({ files, onClick }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={classNames(styles.images, {
|
className={classNames(styles.images, {
|
||||||
|
@ -24,10 +25,7 @@ const CommentImageGrid: FC<CommentImageGridProps> = ({ files }) => {
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{files.map((file, index) => (
|
{files.map((file, index) => (
|
||||||
<div
|
<div key={file.id} onClick={() => onClick(file)}>
|
||||||
key={file.id}
|
|
||||||
// onClick={() => onShowImageModal(groupped.image, index)}
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
srcSet={getFileSrcSet(file)}
|
srcSet={getFileSrcSet(file)}
|
||||||
src={getURL(file, imagePresets['300'])}
|
src={getURL(file, imagePresets['300'])}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue