@soul-refiner/design-system 0.2.39 → 0.2.41

package/dist/components/surfaces/comment/comment.d.ts

@@ -3,11 +3,11 @@ export interface CommentProps {
     content: string;
     createdDate: Date;
     hasMoreReplies?: boolean;
-    onComment: (comment: string) => void;
+    onComment: (comment: string, id?: string) => void;
     onReact: (reaction: string) => void;
     onShowReplies?: () => void;
     reactions?: Record<string, number>;
-    replies?: CommentProps[];
+    replies?: React.ReactElement[];
     userImageUri: string;
     userName: string;
     userReactions?: string[];

package/dist/components/surfaces/comment/comment.js

@@ -14,6 +14,7 @@ export const Comment = ({ content, createdDate, hasMoreReplies, onComment, onRea
     const [toggleShowCommentInput, setShowCommentInput] = React.useState(false);
     const [toggleShowReplies, setShowReplies] = React.useState(false);
     const [comment, setComment] = React.useState('');
+    const _replies = React.Children.toArray(replies);
     const handleCommentChange = (event) => {
         setComment(event.target.value);
     };
@@ -35,7 +36,7 @@ export const Comment = ({ content, createdDate, hasMoreReplies, onComment, onRea
     const handleToggleCommentInput = () => setShowCommentInput((prev) => !prev);
     const handleToggleReplies = () => {
         onShowReplies && onShowReplies();
-        setShowReplies((prev) => !prev);
+        setShowReplies((prev) => true);
     };
     const createdTime = abbrTimeBeforeDate(createdDate);
     const reactionElements = reactions &&
@@ -44,11 +45,17 @@ export const Comment = ({ content, createdDate, hasMoreReplies, onComment, onRea
             .map((reaction) => (React.createElement(Reaction, { key: id + reaction[0], "$align": "center", "$dir": "row", "$gap": 5, "$userSelected": userReactions?.includes(reaction[0]) },
             reaction[0],
             React.createElement(P, { "$bold": true, "$fontSize": 10, "$lineHeight": 14 }, reaction[1]))));
-    const hasReplies = !!replies?.length && replies.length > 0;
+    const hasReplies = !!_replies?.length && _replies.length > 0;
     const replyElements = hasReplies &&
-        replies.map((reply, index) => (React.createElement(ReplyWrapper, { "$isNotLastReply": index !== replies.length - 1, key: id + reply.createdDate.getTime().toString(36) },
-            React.createElement(Comment, { ...reply }),
-            React.createElement(ReplyIndicator, null))));
+        _replies.map((reply, index) => {
+            if (!React.isValidElement(reply))
+                return null;
+            const key = reply.props?.id;
+            const hasLine = index !== _replies.length - 1 || hasMoreReplies;
+            return (React.createElement(ReplyWrapper, { "$hasLine": hasLine, key: key },
+                reply,
+                React.createElement(ReplyIndicator, null)));
+        });
     return (React.createElement(Wrapper, null,
         React.createElement(Avatar, { href: userProfileUri, image: userImageUri, size: 32 }),
         React.createElement(Box, { "$flex": 1, "$dir": "column" },
@@ -65,14 +72,14 @@ export const Comment = ({ content, createdDate, hasMoreReplies, onComment, onRea
                     showPicker && (React.createElement(PickerWrapper, null,
                         React.createElement(Picker, { data: emojis, onEmojiSelect: handleReaction, onClickOutside: handlePickerBlur, maxFrequentRows: 1, navPosition: "none", previewPosition: "none", perLine: 9, theme: "auto" }))))),
             hasReplies && toggleShowReplies && (React.createElement(RepliesWrapper, null, replyElements)),
-            hasMoreReplies ||
-                (!toggleShowReplies && hasReplies && (React.createElement(RepliesWrapper, null,
-                    React.createElement(ReplyWrapper, { "$isNotLastReply": false },
-                        React.createElement(Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" },
-                            "show ",
-                            replies && replies.length ? 'more' : '',
-                            " replies"),
-                        React.createElement(ReplyIndicator, null))))),
+            !toggleShowReplies && !hasMoreReplies && hasReplies && (React.createElement(RepliesWrapper, null,
+                React.createElement(ReplyWrapper, { "$hasLine": false },
+                    React.createElement(Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" }, "show replies"),
+                    React.createElement(ReplyIndicator, null)))),
+            hasMoreReplies && (React.createElement(RepliesWrapper, null,
+                React.createElement(ReplyWrapper, { "$hasLine": false },
+                    React.createElement(Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" }, "show more replies"),
+                    React.createElement(ReplyIndicator, null)))),
             toggleShowCommentInput && (React.createElement(CommentWrapper, { onSubmit: handleCommentSubmit },
                 React.createElement(TextInput, { bg: "var(--color-grey-10)", placeholder: "Write a reply", onChange: handleCommentChange, value: comment }))))));
 };
@@ -131,7 +138,7 @@ const RepliesWrapper = styled.div `
 `;
 const ReplyWrapper = styled.div `
   position: relative;
-  ${({ $isNotLastReply }) => $isNotLastReply
+  ${({ $hasLine }) => $hasLine
     ? `
     &::before {
       content: "";
@@ -144,10 +151,10 @@ const ReplyWrapper = styled.div `
 `;
 const ReplyIndicator = styled.div `
   position: absolute;
-  top: 0;
+  top: -12px;
   left: -28px;
   width: 28px;
-  height: 16px;
+  height: 32px;
   border-bottom-left-radius: 16px;
   border: 2px solid var(--color-grey-9);
   border-top: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.39",
+  "version": "0.2.41",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {