Pending comment blur

src/core/client/stream/components/Comment/IndentedComment.css

@@ -0,0 +1,5 @@
+.blur {
+  filter: blur(2px);
+  user-select: none;
+  pointer-events: none;
+}

src/core/client/stream/components/Comment/IndentedComment.tsx

@@ -1,20 +1,25 @@
+import cn from "classnames";
 import React, { StatelessComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 
 import Indent from "../Indent";
 import Comment from "./Comment";
+import * as styles from "./IndentedComment.css";
 
 export interface IndentedCommentProps extends PropTypesOf<typeof Comment> {
   indentLevel?: number;
+  blur?: boolean;
 }
 
 const IndentedComment: StatelessComponent<IndentedCommentProps> = props => {
   const { indentLevel, ...rest } = props;
   const CommentElement = <Comment {...rest} />;
-  const CommentwithIndent =
-    (indentLevel && <Indent level={indentLevel}>{CommentElement}</Indent>) ||
-    CommentElement;
+  const CommentwithIndent = (
+    <Indent level={indentLevel} className={cn({ [styles.blur]: props.blur })}>
+      {CommentElement}
+    </Indent>
+  );
   return CommentwithIndent;
 };
 

src/core/client/stream/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <Indent
+  className=""
   level={1}
 >
   <Comment

src/core/client/stream/components/Indent.tsx

@@ -4,6 +4,7 @@ import React, { StatelessComponent } from "react";
 import * as styles from "./Indent.css";
 
 export interface IndentProps {
+  className?: string;
   level?: number;
   noBorder?: boolean;
   children: React.ReactNode;
@@ -12,7 +13,7 @@ export interface IndentProps {
 const Indent: StatelessComponent<IndentProps> = props => {
   return (
     <div
-      className={cn(styles.root, {
+      className={cn(props.className, styles.root, {
         [styles.level1]: props.level === 1,
         [styles.noBorder]: props.noBorder,
       })}