@solostylist/ui-kit 1.0.136 → 1.0.137
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,12 +9,14 @@ export interface SCommentMessageProps {
|
|
|
9
9
|
likes?: number;
|
|
10
10
|
isLiked?: boolean;
|
|
11
11
|
replies?: SCommentMessageProps[];
|
|
12
|
+
totalReplies?: number;
|
|
12
13
|
onLike?: (commentId: string | number) => void;
|
|
13
14
|
onReply?: (commentId: string | number, parentId?: string | number) => void;
|
|
14
15
|
showReplies?: boolean;
|
|
15
16
|
avatarSize?: number;
|
|
16
17
|
level?: number;
|
|
17
18
|
maxLevel?: number;
|
|
19
|
+
children?: React.ReactNode;
|
|
18
20
|
sx?: SxProps;
|
|
19
21
|
}
|
|
20
22
|
declare const SCommentMessage: React.FC<SCommentMessageProps>;
|
|
@@ -1,79 +1,81 @@
|
|
|
1
|
-
import { j as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Box as
|
|
4
|
-
import
|
|
5
|
-
import { F as
|
|
6
|
-
import { c as
|
|
7
|
-
import { E as
|
|
8
|
-
const
|
|
1
|
+
import { j as e } from "../jsx-runtime-OVHDjVDe.js";
|
|
2
|
+
import { useState as I, useEffect as T } from "react";
|
|
3
|
+
import { Box as m, Stack as M, Typography as x, IconButton as P, Button as $, Collapse as V } from "@mui/material";
|
|
4
|
+
import Y from "../s-avatar/s-avatar.js";
|
|
5
|
+
import { F as q } from "../Favorite-DmSF47XC.js";
|
|
6
|
+
import { c as S } from "../createSvgIcon-Dq42_0tn.js";
|
|
7
|
+
import { E as G } from "../ExpandMore-mZGpvXf6.js";
|
|
8
|
+
const J = S(/* @__PURE__ */ e.jsx("path", {
|
|
9
9
|
d: "m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
|
|
10
|
-
}), "ExpandLess"),
|
|
10
|
+
}), "ExpandLess"), K = S(/* @__PURE__ */ e.jsx("path", {
|
|
11
11
|
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"
|
|
12
|
-
}), "FavoriteBorder"),
|
|
12
|
+
}), "FavoriteBorder"), O = S(/* @__PURE__ */ e.jsx("path", {
|
|
13
13
|
d: "M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11"
|
|
14
|
-
}), "Reply"),
|
|
15
|
-
const c = /* @__PURE__ */ new Date(), d = typeof
|
|
16
|
-
return f < 60 ? "just now" : o < 60 ? o === 1 ? "1 minute ago" : `${o} minutes ago` :
|
|
17
|
-
},
|
|
18
|
-
id:
|
|
14
|
+
}), "Reply"), Q = (r) => {
|
|
15
|
+
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);
|
|
16
|
+
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`;
|
|
17
|
+
}, U = ({
|
|
18
|
+
id: r = Date.now(),
|
|
19
19
|
userName: c,
|
|
20
20
|
userAvatar: d,
|
|
21
|
-
commentContent:
|
|
21
|
+
commentContent: h,
|
|
22
22
|
datetime: f,
|
|
23
23
|
likes: o = 0,
|
|
24
|
-
isLiked:
|
|
25
|
-
replies:
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
24
|
+
isLiked: s = !1,
|
|
25
|
+
replies: t = [],
|
|
26
|
+
totalReplies: l,
|
|
27
|
+
onLike: n,
|
|
28
|
+
onReply: a,
|
|
29
|
+
showReplies: p = !0,
|
|
30
|
+
avatarSize: C = 48,
|
|
31
|
+
level: z = 0,
|
|
32
|
+
maxLevel: L = 3,
|
|
33
|
+
children: w,
|
|
34
|
+
sx: E = {}
|
|
33
35
|
}) => {
|
|
34
|
-
const [
|
|
35
|
-
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
},
|
|
39
|
-
|
|
40
|
-
},
|
|
41
|
-
return
|
|
42
|
-
|
|
43
|
-
}, [o]),
|
|
44
|
-
|
|
45
|
-
}, [
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
-
/* @__PURE__ */
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
-
/* @__PURE__ */
|
|
51
|
-
/* @__PURE__ */
|
|
36
|
+
const [k, g] = I(o), [j, u] = I(s), [v, R] = I(!1), B = () => {
|
|
37
|
+
j ? (g((i) => Math.max(0, i - 1)), u(!1)) : (g((i) => i + 1), u(!0)), n && n(r);
|
|
38
|
+
}, D = () => {
|
|
39
|
+
a && a(r);
|
|
40
|
+
}, F = () => {
|
|
41
|
+
R(!v);
|
|
42
|
+
}, W = Q(f), y = l ?? t.length, b = y > 0, H = Math.min(z, L) * 2;
|
|
43
|
+
return T(() => {
|
|
44
|
+
g(o);
|
|
45
|
+
}, [o]), T(() => {
|
|
46
|
+
u(s);
|
|
47
|
+
}, [s]), /* @__PURE__ */ e.jsxs(m, { sx: { pl: H, py: 1, ...E }, children: [
|
|
48
|
+
/* @__PURE__ */ e.jsxs(M, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
|
|
49
|
+
/* @__PURE__ */ e.jsx(Y, { avatar: d, name: c, size: C }),
|
|
50
|
+
/* @__PURE__ */ e.jsxs(m, { sx: { flex: 1 }, children: [
|
|
51
|
+
/* @__PURE__ */ e.jsxs(M, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
|
|
52
|
+
/* @__PURE__ */ e.jsx(x, { variant: "subtitle2", fontWeight: "600", children: c }),
|
|
53
|
+
/* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: W }) })
|
|
52
54
|
] }),
|
|
53
|
-
/* @__PURE__ */
|
|
54
|
-
/* @__PURE__ */
|
|
55
|
-
/* @__PURE__ */
|
|
56
|
-
|
|
55
|
+
/* @__PURE__ */ e.jsx(x, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: h }),
|
|
56
|
+
/* @__PURE__ */ e.jsxs(M, { direction: "row", spacing: 1, alignItems: "center", children: [
|
|
57
|
+
/* @__PURE__ */ e.jsx(
|
|
58
|
+
P,
|
|
57
59
|
{
|
|
58
60
|
size: "small",
|
|
59
|
-
onClick:
|
|
61
|
+
onClick: B,
|
|
60
62
|
sx: {
|
|
61
|
-
color:
|
|
63
|
+
color: j ? "error.main" : "text.secondary",
|
|
62
64
|
p: 0.5,
|
|
63
65
|
"&:hover": {
|
|
64
66
|
backgroundColor: "action.hover"
|
|
65
67
|
}
|
|
66
68
|
},
|
|
67
|
-
children:
|
|
69
|
+
children: j ? /* @__PURE__ */ e.jsx(q, { fontSize: "small" }) : /* @__PURE__ */ e.jsx(K, { fontSize: "small" })
|
|
68
70
|
}
|
|
69
71
|
),
|
|
70
|
-
|
|
71
|
-
/* @__PURE__ */
|
|
72
|
-
|
|
72
|
+
k > 0 && /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: k }),
|
|
73
|
+
/* @__PURE__ */ e.jsx(
|
|
74
|
+
$,
|
|
73
75
|
{
|
|
74
76
|
size: "small",
|
|
75
|
-
startIcon: /* @__PURE__ */
|
|
76
|
-
onClick:
|
|
77
|
+
startIcon: /* @__PURE__ */ e.jsx(O, { fontSize: "small" }),
|
|
78
|
+
onClick: D,
|
|
77
79
|
variant: "text",
|
|
78
80
|
sx: {
|
|
79
81
|
color: "text.secondary",
|
|
@@ -89,12 +91,12 @@ const Y = I(/* @__PURE__ */ t.jsx("path", {
|
|
|
89
91
|
children: "Reply"
|
|
90
92
|
}
|
|
91
93
|
),
|
|
92
|
-
|
|
93
|
-
|
|
94
|
+
b && p && /* @__PURE__ */ e.jsxs(
|
|
95
|
+
$,
|
|
94
96
|
{
|
|
95
97
|
size: "small",
|
|
96
|
-
startIcon:
|
|
97
|
-
onClick:
|
|
98
|
+
startIcon: v ? /* @__PURE__ */ e.jsx(J, { fontSize: "small" }) : /* @__PURE__ */ e.jsx(G, { fontSize: "small" }),
|
|
99
|
+
onClick: F,
|
|
98
100
|
variant: "text",
|
|
99
101
|
sx: {
|
|
100
102
|
color: "primary.main",
|
|
@@ -108,30 +110,31 @@ const Y = I(/* @__PURE__ */ t.jsx("path", {
|
|
|
108
110
|
}
|
|
109
111
|
},
|
|
110
112
|
children: [
|
|
111
|
-
|
|
113
|
+
y,
|
|
112
114
|
" ",
|
|
113
|
-
|
|
115
|
+
y === 1 ? "reply" : "replies"
|
|
114
116
|
]
|
|
115
117
|
}
|
|
116
118
|
)
|
|
117
|
-
] })
|
|
119
|
+
] }),
|
|
120
|
+
w && /* @__PURE__ */ e.jsx(m, { sx: { mt: 2 }, children: w })
|
|
118
121
|
] })
|
|
119
122
|
] }),
|
|
120
|
-
|
|
121
|
-
|
|
123
|
+
b && p && /* @__PURE__ */ e.jsx(V, { in: v, children: /* @__PURE__ */ e.jsx(m, { sx: { mt: 2 }, children: t.map((i, A) => /* @__PURE__ */ e.jsx(
|
|
124
|
+
U,
|
|
122
125
|
{
|
|
123
|
-
...
|
|
124
|
-
level:
|
|
125
|
-
maxLevel:
|
|
126
|
-
onLike:
|
|
127
|
-
onReply:
|
|
128
|
-
showReplies:
|
|
129
|
-
avatarSize: Math.max(32,
|
|
126
|
+
...i,
|
|
127
|
+
level: z + 1,
|
|
128
|
+
maxLevel: L,
|
|
129
|
+
onLike: n,
|
|
130
|
+
onReply: a,
|
|
131
|
+
showReplies: p,
|
|
132
|
+
avatarSize: Math.max(32, C - 8)
|
|
130
133
|
},
|
|
131
|
-
|
|
134
|
+
i.id || `reply-${A}`
|
|
132
135
|
)) }) })
|
|
133
136
|
] });
|
|
134
137
|
};
|
|
135
138
|
export {
|
|
136
|
-
|
|
139
|
+
U as default
|
|
137
140
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { j as e } from "../jsx-runtime-OVHDjVDe.js";
|
|
2
2
|
import { useState as g, useEffect as A } from "react";
|
|
3
|
-
import { Box as
|
|
3
|
+
import { Box as b, Stack as p, Typography as i, IconButton as T, Divider as F } from "@mui/material";
|
|
4
4
|
import N from "../s-avatar/s-avatar.js";
|
|
5
5
|
import q from "../s-image-modal/s-image-modal.js";
|
|
6
6
|
import G from "../s-lazy-image/s-lazy-image.js";
|
|
@@ -10,18 +10,18 @@ const K = $(/* @__PURE__ */ e.jsx("path", {
|
|
|
10
10
|
d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2m4 0v12h4V3z"
|
|
11
11
|
}), "ThumbDown"), P = $(/* @__PURE__ */ e.jsx("path", {
|
|
12
12
|
d: "M1 21h4V9H1zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73z"
|
|
13
|
-
}), "ThumbUp"), Q = (
|
|
14
|
-
const c = /* @__PURE__ */ new Date(), y = typeof
|
|
15
|
-
return u < 60 ? "just now" : l < 60 ? l === 1 ? "1 minute ago" : `${l} minutes ago` : s < 24 ? s === 1 ? "1 hour ago" : `${s} hours ago` :
|
|
16
|
-
},
|
|
17
|
-
id:
|
|
13
|
+
}), "ThumbUp"), Q = (r) => {
|
|
14
|
+
const c = /* @__PURE__ */ new Date(), y = typeof r == "string" ? new Date(r) : r, j = c.getTime() - y.getTime(), u = Math.floor(j / 1e3), l = Math.floor(u / 60), s = Math.floor(l / 60), a = Math.floor(s / 24), h = Math.floor(a / 7), m = Math.floor(a / 30), f = Math.floor(a / 365);
|
|
15
|
+
return u < 60 ? "just now" : l < 60 ? l === 1 ? "1 minute ago" : `${l} minutes ago` : s < 24 ? s === 1 ? "1 hour ago" : `${s} hours ago` : a < 7 ? a === 1 ? "1 day ago" : `${a} days ago` : h < 4 ? h === 1 ? "1 week ago" : `${h} weeks ago` : m < 12 ? m === 1 ? "1 month ago" : `${m} months ago` : f === 1 ? "1 year ago" : `${f} years ago`;
|
|
16
|
+
}, ae = ({
|
|
17
|
+
id: r = Date.now(),
|
|
18
18
|
userName: c,
|
|
19
19
|
userAvatar: y,
|
|
20
|
-
rating:
|
|
20
|
+
rating: j,
|
|
21
21
|
reviewContent: u,
|
|
22
22
|
datetime: l,
|
|
23
23
|
images: s,
|
|
24
|
-
userHelpfulVote:
|
|
24
|
+
userHelpfulVote: a = null,
|
|
25
25
|
helpfulYes: h = 0,
|
|
26
26
|
helpfulNo: m = 0,
|
|
27
27
|
onHelpfulVote: f,
|
|
@@ -31,36 +31,36 @@ const K = $(/* @__PURE__ */ e.jsx("path", {
|
|
|
31
31
|
readOnly: H = !0,
|
|
32
32
|
sx: L = {}
|
|
33
33
|
}) => {
|
|
34
|
-
const [R,
|
|
34
|
+
const [R, v] = g(h), [V, w] = g(m), [d, I] = g(a), [W, C] = g(!1), [E, M] = g(null), S = (t) => {
|
|
35
35
|
let n = t;
|
|
36
|
-
d === t ? (t === "yes" ?
|
|
36
|
+
d === t ? (t === "yes" ? v((o) => Math.max(0, o - 1)) : w((o) => Math.max(0, o - 1)), I(null), n = null) : (d === "yes" ? v((o) => Math.max(0, o - 1)) : d === "no" && w((o) => Math.max(0, o - 1)), t === "yes" ? v((o) => o + 1) : w((o) => o + 1), I(t), n = t), f && f(r, n);
|
|
37
37
|
}, x = (s == null ? void 0 : s.map((t, n) => ({
|
|
38
|
-
id: `review-${
|
|
38
|
+
id: `review-${r}-image-${n}`,
|
|
39
39
|
type: "image",
|
|
40
40
|
url: t,
|
|
41
41
|
title: `Review image ${n + 1}`,
|
|
42
42
|
desc: `Image ${n + 1} from ${c}'s review`
|
|
43
43
|
}))) || [], O = (t) => {
|
|
44
44
|
const n = x[t];
|
|
45
|
-
n && (
|
|
45
|
+
n && (M(n), C(!0));
|
|
46
46
|
}, U = () => {
|
|
47
|
-
C(!1),
|
|
47
|
+
C(!1), M(null);
|
|
48
48
|
}, Y = (t) => {
|
|
49
|
-
|
|
49
|
+
M(t);
|
|
50
50
|
}, B = Q(l);
|
|
51
51
|
return A(() => {
|
|
52
|
-
|
|
53
|
-
}, [
|
|
54
|
-
/* @__PURE__ */ e.jsxs(
|
|
52
|
+
I(a);
|
|
53
|
+
}, [a]), /* @__PURE__ */ e.jsxs(b, { sx: { py: 2, ...L }, children: [
|
|
54
|
+
/* @__PURE__ */ e.jsxs(p, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
|
|
55
55
|
/* @__PURE__ */ e.jsx(N, { avatar: y, name: c, size: z }),
|
|
56
|
-
/* @__PURE__ */ e.jsxs(
|
|
57
|
-
/* @__PURE__ */ e.jsxs(
|
|
56
|
+
/* @__PURE__ */ e.jsxs(b, { sx: { flex: 1 }, children: [
|
|
57
|
+
/* @__PURE__ */ e.jsxs(p, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
|
|
58
58
|
/* @__PURE__ */ e.jsx(i, { variant: "subtitle2", fontWeight: "600", children: c }),
|
|
59
59
|
/* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: B }) })
|
|
60
60
|
] }),
|
|
61
|
-
/* @__PURE__ */ e.jsx(
|
|
61
|
+
/* @__PURE__ */ e.jsx(b, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(J, { value: j, max: D, readOnly: H, size: "small" }) }),
|
|
62
62
|
/* @__PURE__ */ e.jsx(i, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: u }),
|
|
63
|
-
s && s.length > 0 && /* @__PURE__ */ e.jsx(
|
|
63
|
+
s && s.length > 0 && /* @__PURE__ */ e.jsx(p, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: s.map((t, n) => /* @__PURE__ */ e.jsx(
|
|
64
64
|
G,
|
|
65
65
|
{
|
|
66
66
|
src: t,
|
|
@@ -82,41 +82,39 @@ const K = $(/* @__PURE__ */ e.jsx("path", {
|
|
|
82
82
|
},
|
|
83
83
|
n
|
|
84
84
|
)) }),
|
|
85
|
-
k && /* @__PURE__ */ e.jsxs(p, { children: [
|
|
85
|
+
k && /* @__PURE__ */ e.jsxs(p, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
|
|
86
86
|
/* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", sx: { mr: 2 }, children: "Was this review helpful?" }),
|
|
87
|
-
/* @__PURE__ */ e.
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
"
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
"
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
/* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: V })
|
|
119
|
-
] })
|
|
87
|
+
/* @__PURE__ */ e.jsx(
|
|
88
|
+
T,
|
|
89
|
+
{
|
|
90
|
+
size: "small",
|
|
91
|
+
onClick: () => S("yes"),
|
|
92
|
+
sx: {
|
|
93
|
+
color: d === "yes" ? "primary.main" : "text.secondary",
|
|
94
|
+
"&:hover": {
|
|
95
|
+
backgroundColor: "action.hover"
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
children: /* @__PURE__ */ e.jsx(P, { fontSize: "small" })
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
/* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: R }),
|
|
102
|
+
/* @__PURE__ */ e.jsx(
|
|
103
|
+
T,
|
|
104
|
+
{
|
|
105
|
+
size: "small",
|
|
106
|
+
onClick: () => S("no"),
|
|
107
|
+
sx: {
|
|
108
|
+
color: d === "no" ? "error.main" : "text.secondary",
|
|
109
|
+
ml: 1,
|
|
110
|
+
"&:hover": {
|
|
111
|
+
backgroundColor: "action.hover"
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
children: /* @__PURE__ */ e.jsx(K, { fontSize: "small" })
|
|
115
|
+
}
|
|
116
|
+
),
|
|
117
|
+
/* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: V })
|
|
120
118
|
] })
|
|
121
119
|
] })
|
|
122
120
|
] }),
|
|
@@ -137,5 +135,5 @@ const K = $(/* @__PURE__ */ e.jsx("path", {
|
|
|
137
135
|
] });
|
|
138
136
|
};
|
|
139
137
|
export {
|
|
140
|
-
|
|
138
|
+
ae as default
|
|
141
139
|
};
|