pixel-react 1.6.7 → 1.6.9

package/src/components/Comment/comment/Comment.tsx

@@ -1,206 +1,206 @@
-import { CommentType } from '../type';
-import { useState, useEffect } from 'react';
-import '../Comments.scss';
-import Icon from '../../Icon';
-
-interface CommentProps {
-  handleInsertNode: any;
-  handleEditNode: any;
-  handleDeleteNode: (commentId: any) => any;
-  comment: CommentType;
-  depth?: number;
-}
-
-const Comment = ({
-  handleInsertNode,
-  handleEditNode,
-  handleDeleteNode,
-  comment,
-  depth = 0,
-}: CommentProps) => {
-  const [input, setInput] = useState('');
-  const [editMode, setEditMode] = useState(false);
-  const [showInput, setShowInput] = useState(false);
-  const [expand, setExpand] = useState(true);
-
-  const { modifiedByUname, createdByUname, modifiedOn, createdOn } =
-    comment || {};
-  const randomPastTime = modifiedOn ?? createdOn ?? new Date().toLocaleString();
-  const firstName = modifiedByUname ?? createdByUname ?? 'Anonymous';
-
-  const isDepthLimitReached = depth > 2;
-  const avatar = firstName ? firstName.charAt(0).toUpperCase() : 'A';
-
-  useEffect(() => {
-    if (editMode && comment.description) {
-      setInput(comment.description);
-    }
-  }, [editMode, comment.description]);
-
-  const handleNewComment = () => {
-    setExpand(!expand);
-    setShowInput(true);
-  };
-
-  const onAddComment = () => {
-    if (input.length === 0) return;
-    if (editMode) {
-      handleEditNode(comment.id, input);
-    } else {
-      setExpand(true);
-      handleInsertNode(comment.id, input);
-      setShowInput(false);
-      setInput('');
-    }
-    if (editMode) setEditMode(false);
-  };
-  return (
-    <div className="commentsContainer">
-      <div className={depth === 0 ? 'comment-wrapper-one' : 'comment-wrapper'}>
-        <div className={depth === 0 ? 'inputContainer' : 'commentContainer'}>
-          {depth === 0 ? (
-            <div className="first-comment">
-              <h5 className="first-comment-heading">Comments</h5>
-              <div className="input-wrapper">
-                <textarea
-                  className="inputContainer__input first_input"
-                  rows={3}
-                  autoFocus
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  placeholder={'Add a comment'}
-                />
-                <span className="reply comment reply-comment">
-                  <Icon
-                    name="send_to_steps"
-                    onClick={onAddComment}
-                    color="71347B"
-                  />
-                </span>
-              </div>
-            </div>
-          ) : (
-            <>
-              <div className="commentContainer__avatar">{avatar}</div>
-              <div className="ff-message-container">
-                <div className="ff-message">
-                  <div className="ff-message-name" style={{ fontWeight: 700 }}>
-                    {firstName}
-                  </div>
-                  <div className="ff-message-time">{randomPastTime}</div>
-                </div>
-
-                <div className="editable-text">{comment.description}</div>
-              </div>
-            </>
-          )}
-        </div>
-
-        {editMode && (
-          <div className="inputContainer">
-            <input
-              type="text"
-              className="editable-text inputContainer__input"
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              autoFocus
-            />
-          </div>
-        )}
-        {depth > 0 && (
-          <div className="comment-actions">
-            {editMode ? (
-              <>
-                <div
-                  className="reply"
-                  onClick={() => {
-                    onAddComment();
-                    setEditMode(false);
-                  }}
-                >
-                  <Icon name="save_as_step" width={12} height={12} />
-                </div>
-                <div
-                  className="reply"
-                  onClick={() => {
-                    setEditMode(false);
-                  }}
-                >
-                  <Icon name="close" color="#A91224" width={10} height={10} />
-                </div>
-              </>
-            ) : (
-              <>
-                {!isDepthLimitReached && (
-                  <div className="reply" onClick={handleNewComment}>
-                    {expand ? (
-                      <Icon name="window_minimize" width={12} height={12} />
-                    ) : (
-                      <>
-                        <Icon name="plus_icon" width={12} height={12} />
-                        <Icon name="add_page" width={12} height={12} />
-                      </>
-                    )}
-                  </div>
-                )}
-                <div className="reply" onClick={() => setEditMode(true)}>
-                  <Icon name="edit" width={12} height={12} />
-                </div>
-                <div
-                  className="reply"
-                  onClick={() => handleDeleteNode(comment.id)}
-                >
-                  <Icon name="delete" color="#A91224" width={12} height={12} />
-                </div>
-              </>
-            )}
-          </div>
-        )}
-        <div
-          className={comment?.comments?.length > 0 ? 'child-comments' : ''}
-          style={{
-            display: expand ? 'block' : 'none',
-            paddingLeft: 25,
-          }}
-        >
-          {showInput && (
-            <div className="inputContainer">
-              <input
-                type="text"
-                className="inputContainer__input adding-text"
-                autoFocus
-                onChange={(e) => setInput(e.target.value)}
-              />
-              <div className="reply-text">
-                <div className="reply" onClick={onAddComment}>
-                  <Icon name="send_to_steps" width={12} height={12} />
-                </div>
-                <div
-                  className="reply"
-                  onClick={() => {
-                    setShowInput(false);
-                    if (!comment?.comments?.length) setExpand(false);
-                  }}
-                >
-                  <Icon name="close" width={10} height={10} color="#A91224" />
-                </div>
-              </div>
-            </div>
-          )}
-          {comment?.comments?.map((cmnt) => (
-            <Comment
-              key={cmnt.id}
-              handleInsertNode={handleInsertNode}
-              handleEditNode={handleEditNode}
-              handleDeleteNode={handleDeleteNode}
-              comment={cmnt}
-              depth={depth + 1}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Comment;
+import { CommentType } from '../type';
+import { useState, useEffect } from 'react';
+import '../Comments.scss';
+import Icon from '../../Icon';
+
+interface CommentProps {
+  handleInsertNode: any;
+  handleEditNode: any;
+  handleDeleteNode: (commentId: any) => any;
+  comment: CommentType;
+  depth?: number;
+}
+
+const Comment = ({
+  handleInsertNode,
+  handleEditNode,
+  handleDeleteNode,
+  comment,
+  depth = 0,
+}: CommentProps) => {
+  const [input, setInput] = useState('');
+  const [editMode, setEditMode] = useState(false);
+  const [showInput, setShowInput] = useState(false);
+  const [expand, setExpand] = useState(true);
+
+  const { modifiedByUname, createdByUname, modifiedOn, createdOn } =
+    comment || {};
+  const randomPastTime = modifiedOn ?? createdOn ?? new Date().toLocaleString();
+  const firstName = modifiedByUname ?? createdByUname ?? 'Anonymous';
+
+  const isDepthLimitReached = depth > 2;
+  const avatar = firstName ? firstName.charAt(0).toUpperCase() : 'A';
+
+  useEffect(() => {
+    if (editMode && comment.description) {
+      setInput(comment.description);
+    }
+  }, [editMode, comment.description]);
+
+  const handleNewComment = () => {
+    setExpand(!expand);
+    setShowInput(true);
+  };
+
+  const onAddComment = () => {
+    if (input.length === 0) return;
+    if (editMode) {
+      handleEditNode(comment.id, input);
+    } else {
+      setExpand(true);
+      handleInsertNode(comment.id, input);
+      setShowInput(false);
+      setInput('');
+    }
+    if (editMode) setEditMode(false);
+  };
+  return (
+    <div className="commentsContainer">
+      <div className={depth === 0 ? 'comment-wrapper-one' : 'comment-wrapper'}>
+        <div className={depth === 0 ? 'inputContainer' : 'commentContainer'}>
+          {depth === 0 ? (
+            <div className="first-comment">
+              <h5 className="first-comment-heading">Comments</h5>
+              <div className="input-wrapper">
+                <textarea
+                  className="inputContainer__input first_input"
+                  rows={3}
+                  autoFocus
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder={'Add a comment'}
+                />
+                <span className="reply comment reply-comment">
+                  <Icon
+                    name="send_to_steps"
+                    onClick={onAddComment}
+                    color="71347B"
+                  />
+                </span>
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="commentContainer__avatar">{avatar}</div>
+              <div className="ff-message-container">
+                <div className="ff-message">
+                  <div className="ff-message-name" style={{ fontWeight: 700 }}>
+                    {firstName}
+                  </div>
+                  <div className="ff-message-time">{randomPastTime}</div>
+                </div>
+
+                <div className="editable-text">{comment.description}</div>
+              </div>
+            </>
+          )}
+        </div>
+
+        {editMode && (
+          <div className="inputContainer">
+            <input
+              type="text"
+              className="editable-text inputContainer__input"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              autoFocus
+            />
+          </div>
+        )}
+        {depth > 0 && (
+          <div className="comment-actions">
+            {editMode ? (
+              <>
+                <div
+                  className="reply"
+                  onClick={() => {
+                    onAddComment();
+                    setEditMode(false);
+                  }}
+                >
+                  <Icon name="save_as_step" width={12} height={12} />
+                </div>
+                <div
+                  className="reply"
+                  onClick={() => {
+                    setEditMode(false);
+                  }}
+                >
+                  <Icon name="close" color="#A91224" width={10} height={10} />
+                </div>
+              </>
+            ) : (
+              <>
+                {!isDepthLimitReached && (
+                  <div className="reply" onClick={handleNewComment}>
+                    {expand ? (
+                      <Icon name="window_minimize" width={12} height={12} />
+                    ) : (
+                      <>
+                        <Icon name="plus_icon" width={12} height={12} />
+                        <Icon name="add_page" width={12} height={12} />
+                      </>
+                    )}
+                  </div>
+                )}
+                <div className="reply" onClick={() => setEditMode(true)}>
+                  <Icon name="edit" width={12} height={12} />
+                </div>
+                <div
+                  className="reply"
+                  onClick={() => handleDeleteNode(comment.id)}
+                >
+                  <Icon name="delete" color="#A91224" width={12} height={12} />
+                </div>
+              </>
+            )}
+          </div>
+        )}
+        <div
+          className={comment?.comments?.length > 0 ? 'child-comments' : ''}
+          style={{
+            display: expand ? 'block' : 'none',
+            paddingLeft: 25,
+          }}
+        >
+          {showInput && (
+            <div className="inputContainer">
+              <input
+                type="text"
+                className="inputContainer__input adding-text"
+                autoFocus
+                onChange={(e) => setInput(e.target.value)}
+              />
+              <div className="reply-text">
+                <div className="reply" onClick={onAddComment}>
+                  <Icon name="send_to_steps" width={12} height={12} />
+                </div>
+                <div
+                  className="reply"
+                  onClick={() => {
+                    setShowInput(false);
+                    if (!comment?.comments?.length) setExpand(false);
+                  }}
+                >
+                  <Icon name="close" width={10} height={10} color="#A91224" />
+                </div>
+              </div>
+            </div>
+          )}
+          {comment?.comments?.map((cmnt) => (
+            <Comment
+              key={cmnt.id}
+              handleInsertNode={handleInsertNode}
+              handleEditNode={handleEditNode}
+              handleDeleteNode={handleDeleteNode}
+              comment={cmnt}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;

package/src/components/Comment/comment/useNode.ts

@@ -1,51 +1,51 @@
-import { CommentType } from '../type';
-
-const useNode = () => {
-  const insertNode = (
-    tree: CommentType,
-    commentId: number | string,
-    item: string
-  ): CommentType => {
-    if (tree.id === commentId) {
-      tree.comments.push({
-        id: Date.now().toString(),
-        description: item,
-        comments: [],
-      });
-      return tree;
-    }
-
-    tree.comments = tree.comments.map((child) =>
-      insertNode(child, commentId, item)
-    );
-    return tree;
-  };
-
-  const editNode = (
-    tree: CommentType,
-    commentId: number | string,
-    value: string
-  ): CommentType => {
-    if (tree.id === commentId) {
-      tree.description = value;
-      return tree;
-    }
-
-    tree.comments = tree.comments.map((child) =>
-      editNode(child, commentId, value)
-    );
-    return tree;
-  };
-
-  const deleteNode = (tree: CommentType, commentId: number): CommentType => {
-    if (!tree) return tree;
-    tree.comments = tree.comments
-      .filter((child) => child.id !== commentId)
-      .map((child) => deleteNode(child, commentId));
-    return tree;
-  };
-
-  return { insertNode, editNode, deleteNode };
-};
-
-export default useNode;
+import { CommentType } from '../type';
+
+const useNode = () => {
+  const insertNode = (
+    tree: CommentType,
+    commentId: number | string,
+    item: string
+  ): CommentType => {
+    if (tree.id === commentId) {
+      tree.comments.push({
+        id: Date.now().toString(),
+        description: item,
+        comments: [],
+      });
+      return tree;
+    }
+
+    tree.comments = tree.comments.map((child) =>
+      insertNode(child, commentId, item)
+    );
+    return tree;
+  };
+
+  const editNode = (
+    tree: CommentType,
+    commentId: number | string,
+    value: string
+  ): CommentType => {
+    if (tree.id === commentId) {
+      tree.description = value;
+      return tree;
+    }
+
+    tree.comments = tree.comments.map((child) =>
+      editNode(child, commentId, value)
+    );
+    return tree;
+  };
+
+  const deleteNode = (tree: CommentType, commentId: number): CommentType => {
+    if (!tree) return tree;
+    tree.comments = tree.comments
+      .filter((child) => child.id !== commentId)
+      .map((child) => deleteNode(child, commentId));
+    return tree;
+  };
+
+  return { insertNode, editNode, deleteNode };
+};
+
+export default useNode;

package/src/components/Comment/index.ts

@@ -1 +1 @@
-export { default } from './Comments';
+export { default } from './Comments';

package/src/components/Comment/type.ts

@@ -1,36 +1,36 @@
-export interface CommentType {
-  id?: string | number;
-  description?: string;
-  createdBy?: string;
-  modifiedBy?: string;
-  createdByUname?: string;
-  modifiedByUname?: string;
-  createdOn?: string;
-  modifiedOn?: string;
-  name?: string;
-  emailId?: string[];
-  commentParentId?: string;
-  comments: CommentType[];
-}
-
-export type HandleAddComment = (
-  newComment: CommentType,
-  parentCommentId?: string
-) => void;
-
-// Handles editing an existing comment
-export type HandleEditComment = (
-  commentId: string,
-  updatedDescription: string
-) => void;
-
-// Handles deleting a comment
-export type HandleDeleteComment = (commentId: string) => void;
-export type HandleNodeFunction = (commentId: string, value: string) => void;
-export interface CommentsProps {
-  commentsData: any;
-  handleAddComment: HandleAddComment;
-  handleEditComment: HandleEditComment;
-  handleDeleteComment: HandleDeleteComment;
-  onCommentsDataChange: (data: any) => void;
-}
+export interface CommentType {
+  id?: string | number;
+  description?: string;
+  createdBy?: string;
+  modifiedBy?: string;
+  createdByUname?: string;
+  modifiedByUname?: string;
+  createdOn?: string;
+  modifiedOn?: string;
+  name?: string;
+  emailId?: string[];
+  commentParentId?: string;
+  comments: CommentType[];
+}
+
+export type HandleAddComment = (
+  newComment: CommentType,
+  parentCommentId?: string
+) => void;
+
+// Handles editing an existing comment
+export type HandleEditComment = (
+  commentId: string,
+  updatedDescription: string
+) => void;
+
+// Handles deleting a comment
+export type HandleDeleteComment = (commentId: string) => void;
+export type HandleNodeFunction = (commentId: string, value: string) => void;
+export interface CommentsProps {
+  commentsData: any;
+  handleAddComment: HandleAddComment;
+  handleEditComment: HandleEditComment;
+  handleDeleteComment: HandleDeleteComment;
+  onCommentsDataChange: (data: any) => void;
+}