comment locking initial

src/components/node/CommentContent/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo, memo, createElement } from 'react';
+import React, { FC, useMemo, memo, createElement, useCallback } from 'react';
 import { IComment, IFile } from '~/redux/types';
 import path from 'ramda/es/path';
 import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
@@ -12,12 +12,15 @@ import { AudioPlayer } from '~/components/media/AudioPlayer';
 import classnames from 'classnames';
 import { PRESETS } from '~/constants/urls';
 import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
+import { Icon } from '~/components/input/Icon';
 
 interface IProps {
   comment: IComment;
+  can_edit: boolean;
+  onDelete: (id: IComment['id'], is_deteted: boolean) => void;
 }
 
-const CommentContent: FC<IProps> = memo(({ comment }) => {
+const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete }) => {
   const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
     () =>
       reduce(
@@ -28,10 +31,27 @@ const CommentContent: FC<IProps> = memo(({ comment }) => {
     [comment]
   );
 
+  const onLockClick = useCallback(() => {
+    onDelete(comment.id, !comment.deleted_at);
+  }, [comment, onDelete]);
+
+  const lock = useMemo(
+    () =>
+      can_edit ? (
+        <div className={styles.lock}>
+          <div>
+            <Icon icon="close" />
+          </div>
+        </div>
+      ) : null,
+    [can_edit, comment]
+  );
+
   return (
-    <>
+    <div className={styles.wrap}>
       {comment.text && (
         <Group className={styles.block}>
+          {lock}
           {formatCommentText(path(['user', 'username'], comment), comment.text).map(
             (block, key) =>
               COMMENT_BLOCK_RENDERERS[block.type] &&
@@ -67,7 +87,7 @@ const CommentContent: FC<IProps> = memo(({ comment }) => {
           ))}
         </>
       )}
-    </>
+    </div>
   );
 });
 

src/components/node/CommentContent/styles.scss

@@ -1,5 +1,51 @@
 @import 'flexbin/flexbin.scss';
 
+.wrap {
+  position: relative;
+}
+
+.lock {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: $radius;
+  transform: translate(10px, 0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  transition: opacity 0.25s, transform 0.25s;
+  cursor: pointer;
+  background: $red;
+
+  & > div {
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  @include tablet {
+    right: 0;
+    border-radius: 0 0 0 $radius;
+    opacity: 1;
+    transform: translate(0, 0);
+    background: transparentize($red, $amount: 0.5);
+  }
+}
+
 .block {
   @include outer_shadow();
   min-height: $comment_height;
@@ -20,6 +66,15 @@
   &:last-child {
     border-bottom-right-radius: $radius;
   }
+
+  &:hover {
+    .lock {
+      opacity: 1;
+      pointer-events: all;
+      touch-action: initial;
+      transform: translate(0, 0);
+    }
+  }
 }
 
 .block_audio {