@blocklet/discuss-kit-ux 2.3.0 → 2.3.2
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.
|
@@ -6,7 +6,8 @@ interface Props {
|
|
|
6
6
|
startComponent?: any;
|
|
7
7
|
inProfile?: boolean;
|
|
8
8
|
emptyProps?: Record<string, any>;
|
|
9
|
+
showIconOnly?: boolean;
|
|
9
10
|
[key: string]: any;
|
|
10
11
|
}
|
|
11
|
-
export default function Badge({ startComponent, passports, pointInfo, did, spacing, inProfile, emptyProps, ...restProps }: Props): import("react/jsx-runtime").JSX.Element | null;
|
|
12
|
+
export default function Badge({ startComponent, passports, pointInfo, did, spacing, inProfile, emptyProps, showIconOnly, ...restProps }: Props): import("react/jsx-runtime").JSX.Element | null;
|
|
12
13
|
export {};
|
|
@@ -4,7 +4,7 @@ import { OnContentChangePlugin } from "@blocklet/editor/lib/ext/OnContentChangeP
|
|
|
4
4
|
import { CtrlsShortcutPlugin } from "@blocklet/editor/lib/ext/ShortcutPlugin";
|
|
5
5
|
import { SafeAreaPlugin } from "@blocklet/editor/lib/ext/SafeAreaPlugin";
|
|
6
6
|
import { lazyRetry } from "@arcblock/ux/lib/Util";
|
|
7
|
-
import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-
|
|
7
|
+
import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-DN2G52jl.mjs";
|
|
8
8
|
const BlockletEditor = lazyRetry(() => import("@blocklet/editor"));
|
|
9
9
|
const Root = styled(Box)`
|
|
10
10
|
.be-editable,
|
|
@@ -30,8 +30,9 @@ import AvatarGroup from "@mui/material/AvatarGroup";
|
|
|
30
30
|
import { grey, green, amber } from "@mui/material/colors";
|
|
31
31
|
import useMediaQuery$1 from "@mui/material/useMediaQuery";
|
|
32
32
|
import DID from "@arcblock/ux/lib/DID";
|
|
33
|
-
import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
|
|
34
33
|
import { useNavigate, useMatch, Link, useLocation, useParams, Outlet, useSearchParams, useBlocker } from "react-router-dom";
|
|
34
|
+
import UserCard from "@arcblock/ux/lib/UserCard";
|
|
35
|
+
import { CardType, InfoType } from "@arcblock/ux/lib/UserCard/types";
|
|
35
36
|
import { useBrowser } from "@arcblock/react-hooks";
|
|
36
37
|
import UxRelativeTime from "@arcblock/ux/lib/RelativeTime";
|
|
37
38
|
import Chip from "@mui/material/Chip";
|
|
@@ -39,6 +40,7 @@ import Stack from "@mui/material/Stack";
|
|
|
39
40
|
import groupBy from "lodash/groupBy";
|
|
40
41
|
import flatMap from "lodash/flatMap";
|
|
41
42
|
import uniqBy from "lodash/uniqBy";
|
|
43
|
+
import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
|
|
42
44
|
import trim from "lodash/trim";
|
|
43
45
|
import Avatar$1 from "@mui/material/Avatar";
|
|
44
46
|
import BrokenImageIcon from "@mui/icons-material/BrokenImage";
|
|
@@ -898,6 +900,13 @@ const iconStyle = {
|
|
|
898
900
|
width: 20,
|
|
899
901
|
height: 20
|
|
900
902
|
};
|
|
903
|
+
const iconOnlyStyle = {
|
|
904
|
+
width: 16,
|
|
905
|
+
height: 16,
|
|
906
|
+
padding: 2,
|
|
907
|
+
m: 0,
|
|
908
|
+
cursor: "pointer"
|
|
909
|
+
};
|
|
901
910
|
const animationHeight = 8;
|
|
902
911
|
const getExtraAnimation = (value) => "";
|
|
903
912
|
const formatKey = (key) => {
|
|
@@ -934,6 +943,7 @@ function Badge({
|
|
|
934
943
|
spacing = 0.5,
|
|
935
944
|
inProfile = false,
|
|
936
945
|
emptyProps,
|
|
946
|
+
showIconOnly = false,
|
|
937
947
|
...restProps
|
|
938
948
|
}) {
|
|
939
949
|
var _a2;
|
|
@@ -980,8 +990,9 @@ function Badge({
|
|
|
980
990
|
let icon;
|
|
981
991
|
if (badgeIcon) {
|
|
982
992
|
const isHttpIcon = ["http", "/", "data"].some((prefix2) => badgeIcon.startsWith(prefix2));
|
|
993
|
+
const badgeIconStyle = showIconOnly ? iconOnlyStyle : iconStyle;
|
|
983
994
|
if (!isHttpIcon) {
|
|
984
|
-
icon = /* @__PURE__ */ jsx(Icon, { className: "badge-icon", icon: badgeIcon, color: badgeColor, style: { ...
|
|
995
|
+
icon = /* @__PURE__ */ jsx(Icon, { className: "badge-icon", icon: badgeIcon, color: badgeColor, style: { ...badgeIconStyle } });
|
|
985
996
|
} else {
|
|
986
997
|
icon = /* @__PURE__ */ jsx(
|
|
987
998
|
Avatar$1,
|
|
@@ -994,28 +1005,29 @@ function Badge({
|
|
|
994
1005
|
WebkitUserDrag: "none !important"
|
|
995
1006
|
},
|
|
996
1007
|
background: "transparent",
|
|
997
|
-
...
|
|
1008
|
+
...badgeIconStyle
|
|
998
1009
|
},
|
|
999
1010
|
src: badgeIcon,
|
|
1000
|
-
children: /* @__PURE__ */ jsx(BrokenImageIcon, { sx: { ...
|
|
1011
|
+
children: /* @__PURE__ */ jsx(BrokenImageIcon, { sx: { ...badgeIconStyle, color: badgeColor } })
|
|
1001
1012
|
}
|
|
1002
1013
|
);
|
|
1003
1014
|
}
|
|
1004
1015
|
}
|
|
1016
|
+
const onlyIcon = showIconOnly && icon;
|
|
1005
1017
|
return /* @__PURE__ */ jsx(
|
|
1006
1018
|
Chip,
|
|
1007
1019
|
{
|
|
1008
|
-
label: badgeName,
|
|
1020
|
+
label: onlyIcon ? null : badgeName,
|
|
1009
1021
|
size: "small",
|
|
1010
|
-
icon,
|
|
1022
|
+
icon: onlyIcon && !!icon ? /* @__PURE__ */ jsx(Tooltip, { title: badgeName, placement: "top", children: icon }) : icon,
|
|
1011
1023
|
sx: {
|
|
1012
1024
|
color: badgeColor,
|
|
1013
1025
|
background: badgeBackground,
|
|
1014
1026
|
userSelect: "none",
|
|
1015
1027
|
fontSize: 12,
|
|
1016
1028
|
px: 0.25,
|
|
1017
|
-
my: "2px !important",
|
|
1018
1029
|
mr: spacing,
|
|
1030
|
+
...!onlyIcon ? { my: "2px !important" } : { width: 20, height: 20 },
|
|
1019
1031
|
"@keyframes jump": {
|
|
1020
1032
|
"0%": {
|
|
1021
1033
|
transform: `translateY(0) ${getExtraAnimation()}`
|
|
@@ -1040,7 +1052,8 @@ function Badge({
|
|
|
1040
1052
|
".badge-icon": {
|
|
1041
1053
|
// animation: 'jump 2s infinite',
|
|
1042
1054
|
}
|
|
1043
|
-
}
|
|
1055
|
+
},
|
|
1056
|
+
...onlyIcon ? { "& .MuiChip-label": { display: "none" }, "& .MuiChip-icon": { m: 0 } } : {}
|
|
1044
1057
|
},
|
|
1045
1058
|
...restProps
|
|
1046
1059
|
},
|
|
@@ -1291,7 +1304,7 @@ function ProfileCard({ user, click, ...rest }) {
|
|
|
1291
1304
|
}
|
|
1292
1305
|
);
|
|
1293
1306
|
}
|
|
1294
|
-
const HtmlTooltip$
|
|
1307
|
+
const HtmlTooltip$1 = styled$1(({ className, ...props }) => /* @__PURE__ */ jsx(
|
|
1295
1308
|
Tooltip,
|
|
1296
1309
|
{
|
|
1297
1310
|
PopperProps: {
|
|
@@ -1338,7 +1351,7 @@ function ProfileCardTooltip({ user, children }) {
|
|
|
1338
1351
|
return renderChildren();
|
|
1339
1352
|
}
|
|
1340
1353
|
return /* @__PURE__ */ jsx(
|
|
1341
|
-
HtmlTooltip$
|
|
1354
|
+
HtmlTooltip$1,
|
|
1342
1355
|
{
|
|
1343
1356
|
open,
|
|
1344
1357
|
onClose: () => setOpen(false),
|
|
@@ -1349,21 +1362,6 @@ function ProfileCardTooltip({ user, children }) {
|
|
|
1349
1362
|
}
|
|
1350
1363
|
);
|
|
1351
1364
|
}
|
|
1352
|
-
const HtmlTooltip$1 = styled$2(({ className, ...props }) => /* @__PURE__ */ jsx(
|
|
1353
|
-
Tooltip,
|
|
1354
|
-
{
|
|
1355
|
-
PopperProps: {
|
|
1356
|
-
disablePortal: true
|
|
1357
|
-
},
|
|
1358
|
-
...props,
|
|
1359
|
-
classes: { popper: className }
|
|
1360
|
-
}
|
|
1361
|
-
))(() => ({
|
|
1362
|
-
[`& .${tooltipClasses.tooltip}`]: {
|
|
1363
|
-
backgroundColor: "transparent",
|
|
1364
|
-
maxWidth: "initial"
|
|
1365
|
-
}
|
|
1366
|
-
}));
|
|
1367
1365
|
function AuthorInfo({
|
|
1368
1366
|
user,
|
|
1369
1367
|
createdAt,
|
|
@@ -1386,7 +1384,6 @@ function AuthorInfo({
|
|
|
1386
1384
|
const theme = useTheme();
|
|
1387
1385
|
const downMd = useMediaQuery$1(theme.breakpoints.down("md"));
|
|
1388
1386
|
const navigate = useNavigate();
|
|
1389
|
-
const [open, setOpen] = useState(false);
|
|
1390
1387
|
const { mobile } = useBrowser();
|
|
1391
1388
|
const { chatInWallet } = useChatInWallet();
|
|
1392
1389
|
const sm = size === "sm";
|
|
@@ -1419,7 +1416,6 @@ function AuthorInfo({
|
|
|
1419
1416
|
if (!canClick) return;
|
|
1420
1417
|
(_a2 = e == null ? void 0 : e.stopPropagation) == null ? void 0 : _a2.call(e);
|
|
1421
1418
|
(_b2 = e == null ? void 0 : e.preventDefault) == null ? void 0 : _b2.call(e);
|
|
1422
|
-
setOpen(false);
|
|
1423
1419
|
if (chatInWallet) {
|
|
1424
1420
|
openProfile(user == null ? void 0 : user.did, true);
|
|
1425
1421
|
} else {
|
|
@@ -1438,72 +1434,6 @@ function AuthorInfo({
|
|
|
1438
1434
|
}
|
|
1439
1435
|
defaultAction();
|
|
1440
1436
|
};
|
|
1441
|
-
const renderAvatar = () => {
|
|
1442
|
-
if (showProfileCard && !mobile.any) {
|
|
1443
|
-
return /* @__PURE__ */ jsx(
|
|
1444
|
-
HtmlTooltip$1,
|
|
1445
|
-
{
|
|
1446
|
-
open,
|
|
1447
|
-
onClose: () => setOpen(false),
|
|
1448
|
-
onOpen: () => setOpen(true),
|
|
1449
|
-
PopperProps: { disablePortal: false },
|
|
1450
|
-
title: /* @__PURE__ */ jsx(ProfileCard, { user, click }),
|
|
1451
|
-
children: /* @__PURE__ */ jsx(
|
|
1452
|
-
Box$1,
|
|
1453
|
-
{
|
|
1454
|
-
sx: {
|
|
1455
|
-
display: "flex",
|
|
1456
|
-
cursor: canClick ? "pointer" : "inherit",
|
|
1457
|
-
width: mergedAvatarSize,
|
|
1458
|
-
height: mergedAvatarSize
|
|
1459
|
-
},
|
|
1460
|
-
onClick: click,
|
|
1461
|
-
children: /* @__PURE__ */ jsx(
|
|
1462
|
-
Avatar,
|
|
1463
|
-
{
|
|
1464
|
-
did: user == null ? void 0 : user.did,
|
|
1465
|
-
src: user == null ? void 0 : user.avatar,
|
|
1466
|
-
size: mergedAvatarSize,
|
|
1467
|
-
shape: "circle",
|
|
1468
|
-
variant: "circle",
|
|
1469
|
-
sx: {
|
|
1470
|
-
width: "100%",
|
|
1471
|
-
height: "100%"
|
|
1472
|
-
}
|
|
1473
|
-
}
|
|
1474
|
-
)
|
|
1475
|
-
}
|
|
1476
|
-
)
|
|
1477
|
-
}
|
|
1478
|
-
);
|
|
1479
|
-
}
|
|
1480
|
-
return /* @__PURE__ */ jsx(
|
|
1481
|
-
Box$1,
|
|
1482
|
-
{
|
|
1483
|
-
sx: {
|
|
1484
|
-
display: "flex",
|
|
1485
|
-
cursor: canClick ? "pointer" : "inherit",
|
|
1486
|
-
width: mergedAvatarSize,
|
|
1487
|
-
height: mergedAvatarSize
|
|
1488
|
-
},
|
|
1489
|
-
onClick: click,
|
|
1490
|
-
children: /* @__PURE__ */ jsx(
|
|
1491
|
-
Avatar,
|
|
1492
|
-
{
|
|
1493
|
-
did: user == null ? void 0 : user.did,
|
|
1494
|
-
src: user == null ? void 0 : user.avatar,
|
|
1495
|
-
size: mergedAvatarSize,
|
|
1496
|
-
shape: "circle",
|
|
1497
|
-
variant: "circle",
|
|
1498
|
-
sx: {
|
|
1499
|
-
width: "100%",
|
|
1500
|
-
height: "100%"
|
|
1501
|
-
}
|
|
1502
|
-
}
|
|
1503
|
-
)
|
|
1504
|
-
}
|
|
1505
|
-
);
|
|
1506
|
-
};
|
|
1507
1437
|
const BadgeRender = /* @__PURE__ */ jsx(
|
|
1508
1438
|
Badge,
|
|
1509
1439
|
{
|
|
@@ -1514,7 +1444,28 @@ function AuthorInfo({
|
|
|
1514
1444
|
}
|
|
1515
1445
|
);
|
|
1516
1446
|
return /* @__PURE__ */ jsxs(Box$1, { sx: mergeSx({ display: "flex", alignItems: "center", gap: 1.5, fontSize: mergedFontSize }, sx), ...rest, children: [
|
|
1517
|
-
|
|
1447
|
+
/* @__PURE__ */ jsx(
|
|
1448
|
+
UserCard,
|
|
1449
|
+
{
|
|
1450
|
+
user,
|
|
1451
|
+
cardType: CardType.AvatarOnly,
|
|
1452
|
+
infoType: InfoType.Minimal,
|
|
1453
|
+
avatarSize: mergedAvatarSize,
|
|
1454
|
+
onAvatarClick: (_, e) => click(e),
|
|
1455
|
+
tooltipProps: {
|
|
1456
|
+
leaveDelay: 100,
|
|
1457
|
+
title: /* @__PURE__ */ jsx(ProfileCard, { user, click })
|
|
1458
|
+
},
|
|
1459
|
+
popupSx: {
|
|
1460
|
+
borderColor: "#d0d7de",
|
|
1461
|
+
borderRadius: 1,
|
|
1462
|
+
p: 2,
|
|
1463
|
+
width: 340
|
|
1464
|
+
},
|
|
1465
|
+
showDid: true,
|
|
1466
|
+
showHoverCard: showProfileCard && !mobile.any
|
|
1467
|
+
}
|
|
1468
|
+
),
|
|
1518
1469
|
/* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", flexDirection: "column", flex: 1, overflowX: "hidden" }, children: [
|
|
1519
1470
|
/* @__PURE__ */ jsxs(
|
|
1520
1471
|
Box$1,
|
|
@@ -4948,7 +4899,7 @@ function Back({ url, fallbackUrl, iconOnly, sx, icon, ...rest }) {
|
|
|
4948
4899
|
}
|
|
4949
4900
|
const tablerSend = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z" }) });
|
|
4950
4901
|
const tablerLetterCase = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7" }) });
|
|
4951
|
-
const Editor = lazyRetry(() => import("./editor-
|
|
4902
|
+
const Editor = lazyRetry(() => import("./editor-B1h9f4M5.mjs"));
|
|
4952
4903
|
function LazyEditor(props) {
|
|
4953
4904
|
const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
|
|
4954
4905
|
/* @__PURE__ */ jsx(Skeleton, {}),
|
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export * from "@blocklet/labels";
|
|
2
|
-
import { U, o, X, A, n, ae, B, G, L, K, N, aq, Z, Y, a0, _, $, a2, x, C, y, z, F, a6, a7, ai, a9, Q, T, ad, D, ah, ag, J, H, b, m, af, M, P, aB, ap, w, v, aD, aE, R, S, aa, ar, aC, q, a3, a5, aj, am, al, az, as, O, an, at, aw, ax, l, ay, h, p, r, k, av, t, j, ab, aA, W, c, a1, E, a8, ac, e, u, ao, d, au, a4, ak, f } from "./index-
|
|
2
|
+
import { U, o, X, A, n, ae, B, G, L, K, N, aq, Z, Y, a0, _, $, a2, x, C, y, z, F, a6, a7, ai, a9, Q, T, ad, D, ah, ag, J, H, b, m, af, M, P, aB, ap, w, v, aD, aE, R, S, aa, ar, aC, q, a3, a5, aj, am, al, az, as, O, an, at, aw, ax, l, ay, h, p, r, k, av, t, j, ab, aA, W, c, a1, E, a8, ac, e, u, ao, d, au, a4, ak, f } from "./index-DN2G52jl.mjs";
|
|
3
3
|
import "react/jsx-runtime";
|
|
4
4
|
import "react";
|
|
5
5
|
import "@mui/material/Box";
|
package/dist/index.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
(function(global, factory) {
|
|
2
|
-
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("@arcblock/ux/lib/Theme"), require("react"), require("@mui/material"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("react-lazy-with-preload"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@arcblock/ux/lib/Locale/context"), require("@mui/icons-material"), require("@mui/lab/LoadingButton"), require("@mui/material/Alert"), require("@mui/material/Box"), require("lodash/isBoolean"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/AvatarGroup"), require("@mui/material/colors"), require("@mui/material/useMediaQuery"), require("@arcblock/ux/lib/DID"), require("@
|
|
3
|
-
})(this, function(exports2, labels, jsxRuntime, styles, Theme, react, material, isNil, config, reactLazyWithPreload, LexicalComposerContext, lexical$1, ahooks, context, iconsMaterial, LoadingButton, Alert, Box, isBoolean, Button, DidAvatar, AvatarGroup, colors, useMediaQuery, DID,
|
|
2
|
+
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("@arcblock/ux/lib/Theme"), require("react"), require("@mui/material"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("react-lazy-with-preload"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@arcblock/ux/lib/Locale/context"), require("@mui/icons-material"), require("@mui/lab/LoadingButton"), require("@mui/material/Alert"), require("@mui/material/Box"), require("lodash/isBoolean"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/AvatarGroup"), require("@mui/material/colors"), require("@mui/material/useMediaQuery"), require("@arcblock/ux/lib/DID"), require("react-router-dom"), require("@arcblock/ux/lib/UserCard"), require("@arcblock/ux/lib/UserCard/types"), require("@arcblock/react-hooks"), require("@arcblock/ux/lib/RelativeTime"), require("@mui/material/Chip"), require("@mui/material/Stack"), require("lodash/groupBy"), require("lodash/flatMap"), require("lodash/uniqBy"), require("@mui/material/Tooltip"), require("lodash/trim"), require("@mui/material/Avatar"), require("@mui/icons-material/BrokenImage"), require("@iconify/react"), require("@arcblock/ux/lib/Empty"), require("@arcblock/did-connect/lib/Session"), require("semver-compare"), require("@arcblock/bridge"), require("@mui/icons-material/NotificationsActiveOutlined"), require("@arcblock/ux/lib/Util"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@blocklet/editor/lib/ext/EditorHolderPlugin"), require("@mui/material/colors/red"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("react-dom"), require("ufo"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("url-join"), require("mitt"), require("@mui/material/CircularProgress"), require("react-helmet"), require("react-flip-toolkit"), require("@mui/material/colors/grey"), require("@blocklet/editor"), require("@mui/material/Fab"), require("lodash/debounce"), require("@blocklet/editor/lib/main/hooks/useIsFocused"), require("@blocklet/editor/lib/ext/BusyPlugin"), require("@arcblock/ux/lib/Header/addon-button"), require("axios"), require("react-hot-toast"), require("@mui/material/Pagination"), require("unstated-next"), require("js-cookie"), require("@arcblock/ws"), require("@emotion/css"), require("@blocklet/editor/lib/ext/OnContentChangePlugin"), require("@blocklet/editor/lib/ext/ShortcutPlugin"), require("@blocklet/editor/lib/ext/SafeAreaPlugin"), require("@lexical/text"), require("@blocklet/editor/lib/main/nodes/ImageNode"), require("@blocklet/editor/lib/ext/VideoPlugin/VideoNode")) : typeof define === "function" && define.amd ? define(["exports", "@blocklet/labels", "react/jsx-runtime", "@mui/material/styles", "@arcblock/ux/lib/Theme", "react", "@mui/material", "lodash/isNil", "@blocklet/editor/lib/config", "react-lazy-with-preload", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@arcblock/ux/lib/Locale/context", "@mui/icons-material", "@mui/lab/LoadingButton", "@mui/material/Alert", "@mui/material/Box", "lodash/isBoolean", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/AvatarGroup", "@mui/material/colors", "@mui/material/useMediaQuery", "@arcblock/ux/lib/DID", "react-router-dom", "@arcblock/ux/lib/UserCard", "@arcblock/ux/lib/UserCard/types", "@arcblock/react-hooks", "@arcblock/ux/lib/RelativeTime", "@mui/material/Chip", "@mui/material/Stack", "lodash/groupBy", "lodash/flatMap", "lodash/uniqBy", "@mui/material/Tooltip", "lodash/trim", "@mui/material/Avatar", "@mui/icons-material/BrokenImage", "@iconify/react", "@arcblock/ux/lib/Empty", "@arcblock/did-connect/lib/Session", "semver-compare", "@arcblock/bridge", "@mui/icons-material/NotificationsActiveOutlined", "@arcblock/ux/lib/Util", "@blocklet/editor/lib/ext/CheckboxPlugin", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@blocklet/editor/lib/ext/EditorHolderPlugin", "@mui/material/colors/red", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "react-dom", "ufo", "dayjs", "dayjs/plugin/relativeTime", "url-join", "mitt", "@mui/material/CircularProgress", "react-helmet", "react-flip-toolkit", "@mui/material/colors/grey", "@blocklet/editor", "@mui/material/Fab", "lodash/debounce", "@blocklet/editor/lib/main/hooks/useIsFocused", "@blocklet/editor/lib/ext/BusyPlugin", "@arcblock/ux/lib/Header/addon-button", "axios", "react-hot-toast", "@mui/material/Pagination", "unstated-next", "js-cookie", "@arcblock/ws", "@emotion/css", "@blocklet/editor/lib/ext/OnContentChangePlugin", "@blocklet/editor/lib/ext/ShortcutPlugin", "@blocklet/editor/lib/ext/SafeAreaPlugin", "@lexical/text", "@blocklet/editor/lib/main/nodes/ImageNode", "@blocklet/editor/lib/ext/VideoPlugin/VideoNode"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.DiscussKitComponents = {}, global.labels, global.jsxRuntime, global.styles, global.Theme, global.react, global.material, global.isNil, global.config, global.reactLazyWithPreload, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.context, global.iconsMaterial, global.LoadingButton, global.Alert, global.Box, global.isBoolean, global.Button, global.DidAvatar, global.AvatarGroup, global.colors, global.useMediaQuery, global.DID, global.reactRouterDom, global.UserCard, global.types, global.reactHooks, global.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.Tooltip, global.trim, global.Avatar$1, global.BrokenImageIcon, global.react$1, global.Empty$3, global.Session, global.cmp, global.bridge, global.NotificationsActiveOutlinedIcon, global.Util, global.CheckboxPlugin, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.EditorHolderPlugin, global.red, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.ReactDOM, global.ufo, global.dayjs, global.relativeTime, global.joinUrl, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, global.grey, global.editor$1, global.Fab, global.debounce, global.useIsFocused, global.BusyPlugin, global.addonButton, global.axios, global.hotToast, global.MuiPagination, global.unstatedNext, global.Cookie, global.ws, global.css, global.OnContentChangePlugin, global.ShortcutPlugin$1, global.SafeAreaPlugin, global.text, global.ImageNode, global.VideoNode));
|
|
3
|
+
})(this, function(exports2, labels, jsxRuntime, styles, Theme, react, material, isNil, config, reactLazyWithPreload, LexicalComposerContext, lexical$1, ahooks, context, iconsMaterial, LoadingButton, Alert, Box, isBoolean, Button, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, reactRouterDom, UserCard, types, reactHooks, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, Tooltip, trim, Avatar$1, BrokenImageIcon, react$1, Empty$3, Session, cmp, bridge, NotificationsActiveOutlinedIcon, Util, CheckboxPlugin, MuiMenuItem, clsx, IconButton$1, MuiMenu, EditorHolderPlugin, red, Dialog, orderBy, Typography, Skeleton, ReactDOM, ufo, dayjs, relativeTime, joinUrl, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, editor$1, Fab, debounce, useIsFocused, BusyPlugin, addonButton, axios, hotToast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin$1, SafeAreaPlugin, text, ImageNode, VideoNode) {
|
|
4
4
|
"use strict";var __defProp = Object.defineProperty;
|
|
5
5
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
6
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
@@ -822,6 +822,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
822
822
|
width: 20,
|
|
823
823
|
height: 20
|
|
824
824
|
};
|
|
825
|
+
const iconOnlyStyle = {
|
|
826
|
+
width: 16,
|
|
827
|
+
height: 16,
|
|
828
|
+
padding: 2,
|
|
829
|
+
m: 0,
|
|
830
|
+
cursor: "pointer"
|
|
831
|
+
};
|
|
825
832
|
const animationHeight = 8;
|
|
826
833
|
const getExtraAnimation = (value) => "";
|
|
827
834
|
const formatKey = (key) => {
|
|
@@ -858,6 +865,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
858
865
|
spacing = 0.5,
|
|
859
866
|
inProfile = false,
|
|
860
867
|
emptyProps,
|
|
868
|
+
showIconOnly = false,
|
|
861
869
|
...restProps
|
|
862
870
|
}) {
|
|
863
871
|
var _a2;
|
|
@@ -904,8 +912,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
904
912
|
let icon;
|
|
905
913
|
if (badgeIcon) {
|
|
906
914
|
const isHttpIcon = ["http", "/", "data"].some((prefix2) => badgeIcon.startsWith(prefix2));
|
|
915
|
+
const badgeIconStyle = showIconOnly ? iconOnlyStyle : iconStyle;
|
|
907
916
|
if (!isHttpIcon) {
|
|
908
|
-
icon = /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { className: "badge-icon", icon: badgeIcon, color: badgeColor, style: { ...
|
|
917
|
+
icon = /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { className: "badge-icon", icon: badgeIcon, color: badgeColor, style: { ...badgeIconStyle } });
|
|
909
918
|
} else {
|
|
910
919
|
icon = /* @__PURE__ */ jsxRuntime.jsx(
|
|
911
920
|
Avatar$1,
|
|
@@ -918,28 +927,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
918
927
|
WebkitUserDrag: "none !important"
|
|
919
928
|
},
|
|
920
929
|
background: "transparent",
|
|
921
|
-
...
|
|
930
|
+
...badgeIconStyle
|
|
922
931
|
},
|
|
923
932
|
src: badgeIcon,
|
|
924
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(BrokenImageIcon, { sx: { ...
|
|
933
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(BrokenImageIcon, { sx: { ...badgeIconStyle, color: badgeColor } })
|
|
925
934
|
}
|
|
926
935
|
);
|
|
927
936
|
}
|
|
928
937
|
}
|
|
938
|
+
const onlyIcon = showIconOnly && icon;
|
|
929
939
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
930
940
|
Chip,
|
|
931
941
|
{
|
|
932
|
-
label: badgeName,
|
|
942
|
+
label: onlyIcon ? null : badgeName,
|
|
933
943
|
size: "small",
|
|
934
|
-
icon,
|
|
944
|
+
icon: onlyIcon && !!icon ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { title: badgeName, placement: "top", children: icon }) : icon,
|
|
935
945
|
sx: {
|
|
936
946
|
color: badgeColor,
|
|
937
947
|
background: badgeBackground,
|
|
938
948
|
userSelect: "none",
|
|
939
949
|
fontSize: 12,
|
|
940
950
|
px: 0.25,
|
|
941
|
-
my: "2px !important",
|
|
942
951
|
mr: spacing,
|
|
952
|
+
...!onlyIcon ? { my: "2px !important" } : { width: 20, height: 20 },
|
|
943
953
|
"@keyframes jump": {
|
|
944
954
|
"0%": {
|
|
945
955
|
transform: `translateY(0) ${getExtraAnimation()}`
|
|
@@ -964,7 +974,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
964
974
|
".badge-icon": {
|
|
965
975
|
// animation: 'jump 2s infinite',
|
|
966
976
|
}
|
|
967
|
-
}
|
|
977
|
+
},
|
|
978
|
+
...onlyIcon ? { "& .MuiChip-label": { display: "none" }, "& .MuiChip-icon": { m: 0 } } : {}
|
|
968
979
|
},
|
|
969
980
|
...restProps
|
|
970
981
|
},
|
|
@@ -1215,7 +1226,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
1215
1226
|
}
|
|
1216
1227
|
);
|
|
1217
1228
|
}
|
|
1218
|
-
const HtmlTooltip$
|
|
1229
|
+
const HtmlTooltip$1 = material.styled(({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1219
1230
|
Tooltip,
|
|
1220
1231
|
{
|
|
1221
1232
|
PopperProps: {
|
|
@@ -1262,7 +1273,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
1262
1273
|
return renderChildren();
|
|
1263
1274
|
}
|
|
1264
1275
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1265
|
-
HtmlTooltip$
|
|
1276
|
+
HtmlTooltip$1,
|
|
1266
1277
|
{
|
|
1267
1278
|
open,
|
|
1268
1279
|
onClose: () => setOpen(false),
|
|
@@ -1273,21 +1284,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
1273
1284
|
}
|
|
1274
1285
|
);
|
|
1275
1286
|
}
|
|
1276
|
-
const HtmlTooltip$1 = styles.styled(({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1277
|
-
Tooltip,
|
|
1278
|
-
{
|
|
1279
|
-
PopperProps: {
|
|
1280
|
-
disablePortal: true
|
|
1281
|
-
},
|
|
1282
|
-
...props,
|
|
1283
|
-
classes: { popper: className }
|
|
1284
|
-
}
|
|
1285
|
-
))(() => ({
|
|
1286
|
-
[`& .${Tooltip.tooltipClasses.tooltip}`]: {
|
|
1287
|
-
backgroundColor: "transparent",
|
|
1288
|
-
maxWidth: "initial"
|
|
1289
|
-
}
|
|
1290
|
-
}));
|
|
1291
1287
|
function AuthorInfo({
|
|
1292
1288
|
user,
|
|
1293
1289
|
createdAt,
|
|
@@ -1310,7 +1306,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
1310
1306
|
const theme = styles.useTheme();
|
|
1311
1307
|
const downMd = useMediaQuery(theme.breakpoints.down("md"));
|
|
1312
1308
|
const navigate = reactRouterDom.useNavigate();
|
|
1313
|
-
const [open, setOpen] = react.useState(false);
|
|
1314
1309
|
const { mobile } = reactHooks.useBrowser();
|
|
1315
1310
|
const { chatInWallet } = useChatInWallet();
|
|
1316
1311
|
const sm = size === "sm";
|
|
@@ -1343,7 +1338,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
1343
1338
|
if (!canClick) return;
|
|
1344
1339
|
(_a2 = e == null ? void 0 : e.stopPropagation) == null ? void 0 : _a2.call(e);
|
|
1345
1340
|
(_b2 = e == null ? void 0 : e.preventDefault) == null ? void 0 : _b2.call(e);
|
|
1346
|
-
setOpen(false);
|
|
1347
1341
|
if (chatInWallet) {
|
|
1348
1342
|
openProfile(user == null ? void 0 : user.did, true);
|
|
1349
1343
|
} else {
|
|
@@ -1362,72 +1356,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
1362
1356
|
}
|
|
1363
1357
|
defaultAction();
|
|
1364
1358
|
};
|
|
1365
|
-
const renderAvatar = () => {
|
|
1366
|
-
if (showProfileCard && !mobile.any) {
|
|
1367
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1368
|
-
HtmlTooltip$1,
|
|
1369
|
-
{
|
|
1370
|
-
open,
|
|
1371
|
-
onClose: () => setOpen(false),
|
|
1372
|
-
onOpen: () => setOpen(true),
|
|
1373
|
-
PopperProps: { disablePortal: false },
|
|
1374
|
-
title: /* @__PURE__ */ jsxRuntime.jsx(ProfileCard, { user, click }),
|
|
1375
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1376
|
-
Box,
|
|
1377
|
-
{
|
|
1378
|
-
sx: {
|
|
1379
|
-
display: "flex",
|
|
1380
|
-
cursor: canClick ? "pointer" : "inherit",
|
|
1381
|
-
width: mergedAvatarSize,
|
|
1382
|
-
height: mergedAvatarSize
|
|
1383
|
-
},
|
|
1384
|
-
onClick: click,
|
|
1385
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1386
|
-
Avatar,
|
|
1387
|
-
{
|
|
1388
|
-
did: user == null ? void 0 : user.did,
|
|
1389
|
-
src: user == null ? void 0 : user.avatar,
|
|
1390
|
-
size: mergedAvatarSize,
|
|
1391
|
-
shape: "circle",
|
|
1392
|
-
variant: "circle",
|
|
1393
|
-
sx: {
|
|
1394
|
-
width: "100%",
|
|
1395
|
-
height: "100%"
|
|
1396
|
-
}
|
|
1397
|
-
}
|
|
1398
|
-
)
|
|
1399
|
-
}
|
|
1400
|
-
)
|
|
1401
|
-
}
|
|
1402
|
-
);
|
|
1403
|
-
}
|
|
1404
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1405
|
-
Box,
|
|
1406
|
-
{
|
|
1407
|
-
sx: {
|
|
1408
|
-
display: "flex",
|
|
1409
|
-
cursor: canClick ? "pointer" : "inherit",
|
|
1410
|
-
width: mergedAvatarSize,
|
|
1411
|
-
height: mergedAvatarSize
|
|
1412
|
-
},
|
|
1413
|
-
onClick: click,
|
|
1414
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1415
|
-
Avatar,
|
|
1416
|
-
{
|
|
1417
|
-
did: user == null ? void 0 : user.did,
|
|
1418
|
-
src: user == null ? void 0 : user.avatar,
|
|
1419
|
-
size: mergedAvatarSize,
|
|
1420
|
-
shape: "circle",
|
|
1421
|
-
variant: "circle",
|
|
1422
|
-
sx: {
|
|
1423
|
-
width: "100%",
|
|
1424
|
-
height: "100%"
|
|
1425
|
-
}
|
|
1426
|
-
}
|
|
1427
|
-
)
|
|
1428
|
-
}
|
|
1429
|
-
);
|
|
1430
|
-
};
|
|
1431
1359
|
const BadgeRender = /* @__PURE__ */ jsxRuntime.jsx(
|
|
1432
1360
|
Badge,
|
|
1433
1361
|
{
|
|
@@ -1438,7 +1366,28 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
1438
1366
|
}
|
|
1439
1367
|
);
|
|
1440
1368
|
return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: mergeSx({ display: "flex", alignItems: "center", gap: 1.5, fontSize: mergedFontSize }, sx), ...rest, children: [
|
|
1441
|
-
|
|
1369
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1370
|
+
UserCard,
|
|
1371
|
+
{
|
|
1372
|
+
user,
|
|
1373
|
+
cardType: types.CardType.AvatarOnly,
|
|
1374
|
+
infoType: types.InfoType.Minimal,
|
|
1375
|
+
avatarSize: mergedAvatarSize,
|
|
1376
|
+
onAvatarClick: (_, e) => click(e),
|
|
1377
|
+
tooltipProps: {
|
|
1378
|
+
leaveDelay: 100,
|
|
1379
|
+
title: /* @__PURE__ */ jsxRuntime.jsx(ProfileCard, { user, click })
|
|
1380
|
+
},
|
|
1381
|
+
popupSx: {
|
|
1382
|
+
borderColor: "#d0d7de",
|
|
1383
|
+
borderRadius: 1,
|
|
1384
|
+
p: 2,
|
|
1385
|
+
width: 340
|
|
1386
|
+
},
|
|
1387
|
+
showDid: true,
|
|
1388
|
+
showHoverCard: showProfileCard && !mobile.any
|
|
1389
|
+
}
|
|
1390
|
+
),
|
|
1442
1391
|
/* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, overflowX: "hidden" }, children: [
|
|
1443
1392
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1444
1393
|
Box,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/discuss-kit-ux",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.2",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -18,10 +18,10 @@
|
|
|
18
18
|
"access": "public"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@arcblock/bridge": "^2.13.
|
|
22
|
-
"@arcblock/react-hooks": "^2.13.
|
|
23
|
-
"@arcblock/ws": "^1.20.
|
|
24
|
-
"@blocklet/uploader": "^0.1.
|
|
21
|
+
"@arcblock/bridge": "^2.13.11",
|
|
22
|
+
"@arcblock/react-hooks": "^2.13.11",
|
|
23
|
+
"@arcblock/ws": "^1.20.2",
|
|
24
|
+
"@blocklet/uploader": "^0.1.83",
|
|
25
25
|
"@emotion/css": "^11.13.0",
|
|
26
26
|
"@emotion/react": "^11.13.3",
|
|
27
27
|
"@emotion/styled": "^11.13.0",
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
"ufo": "^1.5.4",
|
|
46
46
|
"unstated-next": "^1.1.0",
|
|
47
47
|
"url-join": "^4.0.1",
|
|
48
|
-
"@blocklet/editor": "^2.3.
|
|
49
|
-
"@blocklet/labels": "^2.3.
|
|
48
|
+
"@blocklet/editor": "^2.3.2",
|
|
49
|
+
"@blocklet/labels": "^2.3.2"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"@arcblock/did-connect": "^2.10.36",
|