@solostylist/ui-kit 1.0.136 → 1.0.138

package/dist/s-comment-message/s-comment-message.d.ts

@@ -9,12 +9,14 @@ export interface SCommentMessageProps {
     likes?: number;
     isLiked?: boolean;
     replies?: SCommentMessageProps[];
+    totalReplies?: number;
     onLike?: (commentId: string | number) => void;
     onReply?: (commentId: string | number, parentId?: string | number) => void;
     showReplies?: boolean;
     avatarSize?: number;
     level?: number;
     maxLevel?: number;
+    children?: React.ReactNode;
     sx?: SxProps;
 }
 declare const SCommentMessage: React.FC<SCommentMessageProps>;

package/dist/s-comment-message/s-comment-message.js

@@ -1,79 +1,81 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as u, useEffect as w } from "react";
-import { Box as v, Stack as y, Typography as m, IconButton as W, Button as k, Collapse as H } from "@mui/material";
-import A from "../s-avatar/s-avatar.js";
-import { F as P } from "../Favorite-DmSF47XC.js";
-import { c as I } from "../createSvgIcon-Dq42_0tn.js";
-import { E as V } from "../ExpandMore-mZGpvXf6.js";
-const Y = I(/* @__PURE__ */ t.jsx("path", {
+import { j as e } from "../jsx-runtime-OVHDjVDe.js";
+import { useState as I, useEffect as T } from "react";
+import { Box as m, Stack as M, Typography as x, IconButton as P, Button as $, Collapse as V } from "@mui/material";
+import Y from "../s-avatar/s-avatar.js";
+import { F as q } from "../Favorite-DmSF47XC.js";
+import { c as S } from "../createSvgIcon-Dq42_0tn.js";
+import { E as G } from "../ExpandMore-mZGpvXf6.js";
+const J = S(/* @__PURE__ */ e.jsx("path", {
   d: "m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
-}), "ExpandLess"), q = I(/* @__PURE__ */ t.jsx("path", {
+}), "ExpandLess"), K = S(/* @__PURE__ */ e.jsx("path", {
   d: "M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3m-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05"
-}), "FavoriteBorder"), G = I(/* @__PURE__ */ t.jsx("path", {
+}), "FavoriteBorder"), O = S(/* @__PURE__ */ e.jsx("path", {
   d: "M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11"
-}), "Reply"), J = (a) => {
-  const c = /* @__PURE__ */ new Date(), d = typeof a == "string" ? new Date(a) : a, x = c.getTime() - d.getTime(), f = Math.floor(x / 1e3), o = Math.floor(f / 60), n = Math.floor(o / 60), e = Math.floor(n / 24), s = Math.floor(e / 7), r = Math.floor(e / 30), i = Math.floor(e / 365);
-  return f < 60 ? "just now" : o < 60 ? o === 1 ? "1 minute ago" : `${o} minutes ago` : n < 24 ? n === 1 ? "1 hour ago" : `${n} hours ago` : e < 7 ? e === 1 ? "1 day ago" : `${e} days ago` : s < 4 ? s === 1 ? "1 week ago" : `${s} weeks ago` : r < 12 ? r === 1 ? "1 month ago" : `${r} months ago` : i === 1 ? "1 year ago" : `${i} years ago`;
-}, K = ({
-  id: a = Date.now(),
+}), "Reply"), Q = (r) => {
+  const c = /* @__PURE__ */ new Date(), d = typeof r == "string" ? new Date(r) : r, h = c.getTime() - d.getTime(), f = Math.floor(h / 1e3), o = Math.floor(f / 60), s = Math.floor(o / 60), t = Math.floor(s / 24), l = Math.floor(t / 7), n = Math.floor(t / 30), a = Math.floor(t / 365);
+  return f < 60 ? "just now" : o < 60 ? o === 1 ? "1 minute ago" : `${o} minutes ago` : s < 24 ? s === 1 ? "1 hour ago" : `${s} hours ago` : t < 7 ? t === 1 ? "1 day ago" : `${t} days ago` : l < 4 ? l === 1 ? "1 week ago" : `${l} weeks ago` : n < 12 ? n === 1 ? "1 month ago" : `${n} months ago` : a === 1 ? "1 year ago" : `${a} years ago`;
+}, U = ({
+  id: r = Date.now(),
   userName: c,
   userAvatar: d,
-  commentContent: x,
+  commentContent: h,
   datetime: f,
   likes: o = 0,
-  isLiked: n = !1,
-  replies: e = [],
-  onLike: s,
-  onReply: r,
-  showReplies: i = !0,
-  avatarSize: M = 48,
-  level: S = 0,
-  maxLevel: z = 3,
-  sx: b = {}
+  isLiked: s = !1,
+  replies: t = [],
+  totalReplies: l,
+  onLike: n,
+  onReply: a,
+  showReplies: p = !0,
+  avatarSize: C = 48,
+  level: z = 0,
+  maxLevel: L = 3,
+  children: w,
+  sx: E = {}
 }) => {
-  const [C, h] = u(o), [g, p] = u(n), [j, T] = u(!1), $ = () => {
-    g ? (h((l) => Math.max(0, l - 1)), p(!1)) : (h((l) => l + 1), p(!0)), s && s(a);
-  }, E = () => {
-    r && r(a);
-  }, R = () => {
-    T(!j);
-  }, B = J(f), L = e.length > 0, D = Math.min(S, z) * 2;
-  return w(() => {
-    h(o);
-  }, [o]), w(() => {
-    p(n);
-  }, [n]), /* @__PURE__ */ t.jsxs(v, { sx: { pl: D, py: 1, ...b }, children: [
-    /* @__PURE__ */ t.jsxs(y, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
-      /* @__PURE__ */ t.jsx(A, { avatar: d, name: c, size: M }),
-      /* @__PURE__ */ t.jsxs(v, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ t.jsxs(y, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
-          /* @__PURE__ */ t.jsx(m, { variant: "subtitle2", fontWeight: "600", children: c }),
-          /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(m, { variant: "caption", color: "text.secondary", children: B }) })
+  const [k, g] = I(o), [j, u] = I(s), [v, R] = I(!1), B = () => {
+    j ? (g((i) => Math.max(0, i - 1)), u(!1)) : (g((i) => i + 1), u(!0)), n && n(r);
+  }, D = () => {
+    a && a(r);
+  }, F = () => {
+    R(!v);
+  }, W = Q(f), y = l ?? t.length, b = y > 0, H = Math.min(z, L) * 2;
+  return T(() => {
+    g(o);
+  }, [o]), T(() => {
+    u(s);
+  }, [s]), /* @__PURE__ */ e.jsxs(m, { sx: { pl: H, py: 1, ...E }, children: [
+    /* @__PURE__ */ e.jsxs(M, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+      /* @__PURE__ */ e.jsx(Y, { avatar: d, name: c, size: C }),
+      /* @__PURE__ */ e.jsxs(m, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsxs(M, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+          /* @__PURE__ */ e.jsx(x, { variant: "subtitle2", fontWeight: "600", children: c }),
+          /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: W }) })
         ] }),
-        /* @__PURE__ */ t.jsx(m, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: x }),
-        /* @__PURE__ */ t.jsxs(y, { direction: "row", spacing: 1, alignItems: "center", children: [
-          /* @__PURE__ */ t.jsx(
-            W,
+        /* @__PURE__ */ e.jsx(x, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: h }),
+        /* @__PURE__ */ e.jsxs(M, { direction: "row", spacing: 1, alignItems: "center", children: [
+          /* @__PURE__ */ e.jsx(
+            P,
             {
               size: "small",
-              onClick: $,
+              onClick: B,
               sx: {
-                color: g ? "error.main" : "text.secondary",
+                color: j ? "error.main" : "text.secondary",
                 p: 0.5,
                 "&:hover": {
                   backgroundColor: "action.hover"
                 }
               },
-              children: g ? /* @__PURE__ */ t.jsx(P, { fontSize: "small" }) : /* @__PURE__ */ t.jsx(q, { fontSize: "small" })
+              children: j ? /* @__PURE__ */ e.jsx(q, { fontSize: "small" }) : /* @__PURE__ */ e.jsx(K, { fontSize: "small" })
             }
           ),
-          C > 0 && /* @__PURE__ */ t.jsx(m, { variant: "caption", color: "text.secondary", children: C }),
-          /* @__PURE__ */ t.jsx(
-            k,
+          k > 0 && /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: k }),
+          /* @__PURE__ */ e.jsx(
+            $,
             {
               size: "small",
-              startIcon: /* @__PURE__ */ t.jsx(G, { fontSize: "small" }),
-              onClick: E,
+              startIcon: /* @__PURE__ */ e.jsx(O, { fontSize: "small" }),
+              onClick: D,
               variant: "text",
               sx: {
                 color: "text.secondary",
@@ -89,12 +91,12 @@ const Y = I(/* @__PURE__ */ t.jsx("path", {
               children: "Reply"
             }
           ),
-          L && i && /* @__PURE__ */ t.jsxs(
-            k,
+          b && p && /* @__PURE__ */ e.jsxs(
+            $,
             {
               size: "small",
-              startIcon: j ? /* @__PURE__ */ t.jsx(Y, { fontSize: "small" }) : /* @__PURE__ */ t.jsx(V, { fontSize: "small" }),
-              onClick: R,
+              startIcon: v ? /* @__PURE__ */ e.jsx(J, { fontSize: "small" }) : /* @__PURE__ */ e.jsx(G, { fontSize: "small" }),
+              onClick: F,
               variant: "text",
               sx: {
                 color: "primary.main",
@@ -108,30 +110,31 @@ const Y = I(/* @__PURE__ */ t.jsx("path", {
                 }
               },
               children: [
-                e.length,
+                y,
                 " ",
-                e.length === 1 ? "reply" : "replies"
+                y === 1 ? "reply" : "replies"
               ]
             }
           )
-        ] })
+        ] }),
+        w && /* @__PURE__ */ e.jsx(m, { sx: { mt: 2 }, children: w })
       ] })
     ] }),
-    L && i && /* @__PURE__ */ t.jsx(H, { in: j, children: /* @__PURE__ */ t.jsx(v, { sx: { mt: 2 }, children: e.map((l, F) => /* @__PURE__ */ t.jsx(
-      K,
+    b && p && /* @__PURE__ */ e.jsx(V, { in: v, children: /* @__PURE__ */ e.jsx(m, { sx: { mt: 2 }, children: t.map((i, A) => /* @__PURE__ */ e.jsx(
+      U,
       {
-        ...l,
-        level: S + 1,
-        maxLevel: z,
-        onLike: s,
-        onReply: r,
-        showReplies: i,
-        avatarSize: Math.max(32, M - 8)
+        ...i,
+        level: z + 1,
+        maxLevel: L,
+        onLike: n,
+        onReply: a,
+        showReplies: p,
+        avatarSize: Math.max(32, C - 8)
       },
-      l.id || `reply-${F}`
+      i.id || `reply-${A}`
     )) }) })
   ] });
 };
 export {
-  K as default
+  U as default
 };