@dust-tt/sparkle 0.2.283 → 0.2.285-rc-1
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.
- package/dist/cjs/index.js +8 -11
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/ConversationMessageActions.d.ts.map +1 -1
- package/dist/esm/components/ConversationMessageActions.js +3 -3
- package/dist/esm/components/ConversationMessageActions.js.map +1 -1
- package/dist/esm/components/NavigationList.d.ts +1 -1
- package/dist/esm/components/NavigationList.d.ts.map +1 -1
- package/dist/esm/components/NavigationList.js +6 -10
- package/dist/esm/components/NavigationList.js.map +1 -1
- package/dist/esm/stories/NavigationList.stories.d.ts.map +1 -1
- package/dist/esm/stories/NavigationList.stories.js +9 -6
- package/dist/esm/stories/NavigationList.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ConversationMessageActions.tsx +3 -2
- package/src/components/NavigationList.tsx +6 -21
- package/src/stories/NavigationList.stories.tsx +31 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConversationMessageActions.d.ts","sourceRoot":"","sources":["../../../src/components/ConversationMessageActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAUpD,KAAK,+BAA+B,GAAG;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,MAAM,CAAC,EAAE,CAAC;IAC9C,YAAY,CAAC,EAAE,qCAAqC,CAAC;CACtD,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,EACzC,OAAY,EACZ,YAAY,GACb,EAAE,+BAA+B,
|
|
1
|
+
{"version":3,"file":"ConversationMessageActions.d.ts","sourceRoot":"","sources":["../../../src/components/ConversationMessageActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAUpD,KAAK,+BAA+B,GAAG;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,MAAM,CAAC,EAAE,CAAC;IAC9C,YAAY,CAAC,EAAE,qCAAqC,CAAC;CACtD,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,EACzC,OAAY,EACZ,YAAY,GACb,EAAE,+BAA+B,6BAiBjC;AAID,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AACF,MAAM,WAAW,qCAAqC;IACpD,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,aAAa,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAuDD,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,KAAK,EACL,OAAO,GACR,EAAE,gBAAgB,qBAalB"}
|
|
@@ -8,7 +8,7 @@ import { cn } from "../lib/utils";
|
|
|
8
8
|
export function ConversationMessageActions(_a) {
|
|
9
9
|
var _b = _a.buttons, buttons = _b === void 0 ? [] : _b, messageEmoji = _a.messageEmoji;
|
|
10
10
|
if (messageEmoji) {
|
|
11
|
-
buttons.push(React.createElement(ConversationMessageEmojiSelector, { reactions: messageEmoji.reactions, onSubmitEmoji: messageEmoji.onSubmitEmoji, isSubmittingEmoji: messageEmoji.isSubmittingEmoji }));
|
|
11
|
+
buttons.push(React.createElement(ConversationMessageEmojiSelector, { key: "emoji-selector", reactions: messageEmoji.reactions, onSubmitEmoji: messageEmoji.onSubmitEmoji, isSubmittingEmoji: messageEmoji.isSubmittingEmoji }));
|
|
12
12
|
}
|
|
13
13
|
if (buttons.length === 0) {
|
|
14
14
|
return false;
|
|
@@ -28,14 +28,14 @@ function ConversationMessageEmojiSelector(_a) {
|
|
|
28
28
|
}
|
|
29
29
|
return (React.createElement(React.Fragment, null,
|
|
30
30
|
React.createElement(EmojiSelector, { reactions: reactions, onSubmitEmoji: onSubmitEmoji, emojiData: emojiData, isSubmittingEmoji: isSubmittingEmoji }),
|
|
31
|
-
slicedReactions.map(function (reaction) {
|
|
31
|
+
slicedReactions.map(function (reaction, index) {
|
|
32
32
|
var hasReacted = reaction.hasReacted;
|
|
33
33
|
var emoji = emojiData === null || emojiData === void 0 ? void 0 : emojiData.emojis[reaction.emoji];
|
|
34
34
|
var nativeEmoji = emoji === null || emoji === void 0 ? void 0 : emoji.skins[0].native;
|
|
35
35
|
if (!nativeEmoji) {
|
|
36
36
|
return null;
|
|
37
37
|
}
|
|
38
|
-
return (React.createElement(ButtonEmoji, { key: reaction.emoji, variant: hasReacted ? "selected" : "unselected", emoji: nativeEmoji, count: reaction.count.toString(), onClick: function () { return __awaiter(_this, void 0, void 0, function () {
|
|
38
|
+
return (React.createElement(ButtonEmoji, { key: "".concat(reaction.emoji, "-").concat(index), variant: hasReacted ? "selected" : "unselected", emoji: nativeEmoji, count: reaction.count.toString(), onClick: function () { return __awaiter(_this, void 0, void 0, function () {
|
|
39
39
|
return __generator(this, function (_a) {
|
|
40
40
|
return [2 /*return*/, onSubmitEmoji({
|
|
41
41
|
emoji: reaction.emoji,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConversationMessageActions.js","sourceRoot":"","sources":["../../../src/components/ConversationMessageActions.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EACL,aAAa,EAEb,WAAW,GACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAOxC,MAAM,UAAU,0BAA0B,CAAC,EAGT;QAFhC,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACZ,YAAY,kBAAA;IAEZ,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,CAAC,IAAI,CACV,oBAAC,gCAAgC,IAC/B,SAAS,EAAE,YAAY,CAAC,SAAS,EACjC,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,iBAAiB,EAAE,YAAY,CAAC,iBAAiB,GACjD,CACH,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO,6BAAK,SAAS,EAAC,8BAA8B,IAAE,OAAO,CAAO,CAAC;AACvE,CAAC;AAED,IAAM,0BAA0B,GAAG,CAAC,CAAC;AAarC,SAAS,gCAAgC,CAAC,EAIF;IAJxC,iBAmDC;QAlDC,SAAS,eAAA,EACT,aAAa,mBAAA,EACb,iBAAiB,uBAAA;IAEjB,IAAM,SAAS,GAAG,aAA8B,CAAC;IAEjD,IAAI,eAAe,4BAAO,SAAS,SAAC,CAAC;IACrC,IAAI,gBAAgB,GAAG,IAAI,CAAC;IAC5B,IAAI,eAAe,CAAC,MAAM,GAAG,0BAA0B,EAAE,CAAC;QACxD,gBAAgB,GAAG,eAAe,CAAC,MAAM,GAAG,0BAA0B,CAAC;QACvE,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,0BAA0B,CAAC,CAAC;IACzE,CAAC;IAED,OAAO,CACL;QACE,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,iBAAiB,GACpC;QACD,eAAe,CAAC,GAAG,CAAC,UAAC,QAAQ;
|
|
1
|
+
{"version":3,"file":"ConversationMessageActions.js","sourceRoot":"","sources":["../../../src/components/ConversationMessageActions.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@ interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement>,
|
|
|
6
6
|
selected?: boolean;
|
|
7
7
|
label?: string;
|
|
8
8
|
icon?: React.ComponentType;
|
|
9
|
-
|
|
9
|
+
moreMenu?: React.ReactNode;
|
|
10
10
|
}
|
|
11
11
|
declare const NavigationListItem: React.ForwardRefExoticComponent<NavigationListItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
12
12
|
declare const variantStyles: (props?: ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,
|
|
1
|
+
{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AA6B3E,QAAA,MAAM,cAAc,6GASlB,CAAC;AAGH,UAAU,uBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,WAAW,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,kBAAkB,gGAqEvB,CAAC;AAGF,QAAA,MAAM,aAAa;;mFAUjB,CAAC;AAEH,UAAU,wBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,mBAAmB,iGAWvB,CAAC;AAIH,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,CAAC"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { __assign, __read, __rest } from "tslib";
|
|
2
2
|
import { cva } from "class-variance-authority";
|
|
3
3
|
import * as React from "react";
|
|
4
|
-
import {
|
|
5
|
-
import { MoreIcon } from "../icons";
|
|
4
|
+
import { Icon, LinkWrapper } from "../components";
|
|
6
5
|
import { cn } from "../lib/utils";
|
|
7
6
|
var listStyles = cva("s-flex", {
|
|
8
7
|
variants: {
|
|
@@ -28,11 +27,10 @@ var NavigationList = React.forwardRef(function (_a, ref) {
|
|
|
28
27
|
});
|
|
29
28
|
NavigationList.displayName = "NavigationList";
|
|
30
29
|
var NavigationListItem = React.forwardRef(function (_a, ref) {
|
|
31
|
-
var className = _a.className, selected = _a.selected, label = _a.label, icon = _a.icon, href = _a.href, target = _a.target, rel = _a.rel, replace = _a.replace, shallow = _a.shallow, props = __rest(_a, ["className", "selected", "label", "icon", "href", "target", "rel", "replace", "shallow"]);
|
|
32
|
-
var _b = __read(React.useState(false), 2),
|
|
33
|
-
var _c = __read(React.useState(false), 2), isPressed = _c[0], setIsPressed = _c[1];
|
|
30
|
+
var className = _a.className, selected = _a.selected, label = _a.label, icon = _a.icon, href = _a.href, target = _a.target, rel = _a.rel, replace = _a.replace, shallow = _a.shallow, moreMenu = _a.moreMenu, props = __rest(_a, ["className", "selected", "label", "icon", "href", "target", "rel", "replace", "shallow", "moreMenu"]);
|
|
31
|
+
var _b = __read(React.useState(false), 2), isPressed = _b[0], setIsPressed = _b[1];
|
|
34
32
|
var handleMouseDown = function (event) {
|
|
35
|
-
if (!event.target.closest(".
|
|
33
|
+
if (!event.target.closest(".button-class")) {
|
|
36
34
|
setIsPressed(true);
|
|
37
35
|
}
|
|
38
36
|
};
|
|
@@ -40,14 +38,12 @@ var NavigationListItem = React.forwardRef(function (_a, ref) {
|
|
|
40
38
|
React.createElement("div", { className: listStyles({
|
|
41
39
|
layout: "item",
|
|
42
40
|
state: selected ? "selected" : isPressed ? "active" : "unselected",
|
|
43
|
-
}),
|
|
44
|
-
setIsHovered(false);
|
|
41
|
+
}), onMouseLeave: function () {
|
|
45
42
|
setIsPressed(false);
|
|
46
43
|
}, onMouseDown: handleMouseDown, onMouseUp: function () { return setIsPressed(false); } },
|
|
47
44
|
icon && React.createElement(Icon, { visual: icon, size: "sm" }),
|
|
48
45
|
label && (React.createElement("span", { className: "s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap" }, label)),
|
|
49
|
-
|
|
50
|
-
React.createElement(Button, { variant: "ghost", icon: MoreIcon, size: "xs", onClick: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); }, onMouseUp: function (e) { return e.stopPropagation(); } }))))));
|
|
46
|
+
selected && moreMenu && (React.createElement("div", { className: "-s-mr-2 s-flex s-h-4 s-items-center" }, moreMenu)))));
|
|
51
47
|
return (React.createElement(LinkWrapper, { href: href, target: target, rel: rel, replace: replace, shallow: shallow, className: className }, content));
|
|
52
48
|
});
|
|
53
49
|
NavigationListItem.displayName = "NavigationListItem";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/NavigationList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,
|
|
1
|
+
{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/NavigationList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationList.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/NavigationList.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"NavigationList.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/NavigationList.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkBnD,QAAA,MAAM,IAAI;;CAEM,CAAC;AAEjB,eAAe,IAAI,CAAC;AAOpB,eAAO,MAAM,qBAAqB,yBA+DjC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __read } from "tslib";
|
|
2
2
|
import React, { useEffect, useState } from "react";
|
|
3
|
-
import { NavigationList, NavigationListItem, NavigationListLabel, ScrollArea, ScrollBar, } from "../index_with_tw_base";
|
|
3
|
+
import { Button, MoreIcon, NavigationList, NavigationListItem, NavigationListLabel, NewDropdownMenu, NewDropdownMenuContent, NewDropdownMenuItem, NewDropdownMenuTrigger, PencilSquareIcon, ScrollArea, ScrollBar, TrashIcon, } from "../index_with_tw_base";
|
|
4
4
|
var meta = {
|
|
5
5
|
title: "Primitives/NavigationList",
|
|
6
6
|
};
|
|
@@ -13,22 +13,25 @@ export var NewNavigationListDemo = function () {
|
|
|
13
13
|
var _a = __read(useState(null), 2), selectedIndex = _a[0], setSelectedIndex = _a[1];
|
|
14
14
|
var _b = __read(useState([]), 2), conversationTitles = _b[0], setConversationTitles = _b[1];
|
|
15
15
|
useEffect(function () {
|
|
16
|
-
// Generate random titles for each date section only once
|
|
17
16
|
setConversationTitles([
|
|
18
17
|
{ label: "Today", items: getRandomTitles(5) },
|
|
19
18
|
{ label: "Yesterday", items: getRandomTitles(10) },
|
|
20
19
|
]);
|
|
21
|
-
console.log(conversationTitles); // Add this line
|
|
22
20
|
}, []);
|
|
23
|
-
// Flatten the items array to easily manage indices
|
|
24
21
|
var allItems = conversationTitles.flatMap(function (section) { return section.items; });
|
|
22
|
+
var getMoreMenu = function (title) { return (React.createElement(NewDropdownMenu, null,
|
|
23
|
+
React.createElement(NewDropdownMenuTrigger, { asChild: true },
|
|
24
|
+
React.createElement(Button, { variant: "ghost", icon: MoreIcon, size: "xs" })),
|
|
25
|
+
React.createElement(NewDropdownMenuContent, null,
|
|
26
|
+
React.createElement(NewDropdownMenuItem, { label: "Rename ".concat(title), icon: PencilSquareIcon, onClick: function (e) { return e.stopPropagation(); } }),
|
|
27
|
+
React.createElement(NewDropdownMenuItem, { label: "Delete", icon: TrashIcon, variant: "warning", onClick: function (e) { return e.stopPropagation(); } })))); };
|
|
25
28
|
return (React.createElement("div", { className: "s-h-[400px] s-w-[200px] s-py-12" },
|
|
26
29
|
React.createElement(ScrollArea, null,
|
|
27
30
|
React.createElement(NavigationList, { className: "s-w-full" }, conversationTitles.map(function (section, sectionIndex) { return (React.createElement(React.Fragment, { key: sectionIndex },
|
|
28
31
|
React.createElement(NavigationListLabel, { label: section.label }),
|
|
29
32
|
section.items.map(function (title, index) {
|
|
30
|
-
var itemIndex = allItems.indexOf(title);
|
|
31
|
-
return (React.createElement(NavigationListItem, { key: index, selected: itemIndex === selectedIndex, onClick: function () { return setSelectedIndex(itemIndex); }, label: title, className: "s-w-full" }));
|
|
33
|
+
var itemIndex = allItems.indexOf(title);
|
|
34
|
+
return (React.createElement(NavigationListItem, { key: index, selected: itemIndex === selectedIndex, onClick: function () { return setSelectedIndex(itemIndex); }, label: title, className: "s-w-full", moreMenu: getMoreMenu(title) }));
|
|
32
35
|
}))); })),
|
|
33
36
|
React.createElement(ScrollBar, null))));
|
|
34
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationList.stories.js","sourceRoot":"","sources":["../../../src/stories/NavigationList.stories.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,SAAS,GACV,MAAM,uBAAuB,CAAC;AAE/B,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,2BAA2B;CACpB,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,IAAM,eAAe,GAAG,UAAC,KAAa;IACpC,IAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,cAAM,OAAA,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,EAAnB,CAAmB,CAAC,CAAC;IAC5D,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAG;IAC7B,IAAA,KAAA,OAAoC,QAAQ,CAAgB,IAAI,CAAC,IAAA,EAAhE,aAAa,QAAA,EAAE,gBAAgB,QAAiC,CAAC;IAClE,IAAA,KAAA,OAA8C,QAAQ,CAE1D,EAAE,CAAC,IAAA,EAFE,kBAAkB,QAAA,EAAE,qBAAqB,QAE3C,CAAC;IAEN,SAAS,CAAC;QACR,
|
|
1
|
+
{"version":3,"file":"NavigationList.stories.js","sourceRoot":"","sources":["../../../src/stories/NavigationList.stories.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -22,6 +22,7 @@ export function ConversationMessageActions({
|
|
|
22
22
|
if (messageEmoji) {
|
|
23
23
|
buttons.push(
|
|
24
24
|
<ConversationMessageEmojiSelector
|
|
25
|
+
key="emoji-selector"
|
|
25
26
|
reactions={messageEmoji.reactions}
|
|
26
27
|
onSubmitEmoji={messageEmoji.onSubmitEmoji}
|
|
27
28
|
isSubmittingEmoji={messageEmoji.isSubmittingEmoji}
|
|
@@ -71,7 +72,7 @@ function ConversationMessageEmojiSelector({
|
|
|
71
72
|
emojiData={emojiData}
|
|
72
73
|
isSubmittingEmoji={isSubmittingEmoji}
|
|
73
74
|
/>
|
|
74
|
-
{slicedReactions.map((reaction) => {
|
|
75
|
+
{slicedReactions.map((reaction, index) => {
|
|
75
76
|
const hasReacted = reaction.hasReacted;
|
|
76
77
|
const emoji = emojiData?.emojis[reaction.emoji];
|
|
77
78
|
const nativeEmoji = emoji?.skins[0].native;
|
|
@@ -80,7 +81,7 @@ function ConversationMessageEmojiSelector({
|
|
|
80
81
|
}
|
|
81
82
|
return (
|
|
82
83
|
<ButtonEmoji
|
|
83
|
-
key={reaction.emoji}
|
|
84
|
+
key={`${reaction.emoji}-${index}`}
|
|
84
85
|
variant={hasReacted ? "selected" : "unselected"}
|
|
85
86
|
emoji={nativeEmoji}
|
|
86
87
|
count={reaction.count.toString()}
|
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
|
|
4
|
-
import {
|
|
5
|
-
Button,
|
|
6
|
-
Icon,
|
|
7
|
-
LinkWrapper,
|
|
8
|
-
LinkWrapperProps,
|
|
9
|
-
} from "@sparkle/components/";
|
|
10
|
-
import { MoreIcon } from "@sparkle/icons";
|
|
4
|
+
import { Icon, LinkWrapper, LinkWrapperProps } from "@sparkle/components/";
|
|
11
5
|
import { cn } from "@sparkle/lib/utils";
|
|
12
6
|
|
|
13
7
|
const listStyles = cva("s-flex", {
|
|
@@ -54,7 +48,7 @@ interface NavigationListItemProps
|
|
|
54
48
|
selected?: boolean;
|
|
55
49
|
label?: string;
|
|
56
50
|
icon?: React.ComponentType;
|
|
57
|
-
|
|
51
|
+
moreMenu?: React.ReactNode;
|
|
58
52
|
}
|
|
59
53
|
|
|
60
54
|
const NavigationListItem = React.forwardRef<
|
|
@@ -72,15 +66,15 @@ const NavigationListItem = React.forwardRef<
|
|
|
72
66
|
rel,
|
|
73
67
|
replace,
|
|
74
68
|
shallow,
|
|
69
|
+
moreMenu,
|
|
75
70
|
...props
|
|
76
71
|
},
|
|
77
72
|
ref
|
|
78
73
|
) => {
|
|
79
|
-
const [isHovered, setIsHovered] = React.useState(false);
|
|
80
74
|
const [isPressed, setIsPressed] = React.useState(false);
|
|
81
75
|
|
|
82
76
|
const handleMouseDown = (event: React.MouseEvent) => {
|
|
83
|
-
if (!(event.target as HTMLElement).closest(".
|
|
77
|
+
if (!(event.target as HTMLElement).closest(".button-class")) {
|
|
84
78
|
setIsPressed(true);
|
|
85
79
|
}
|
|
86
80
|
};
|
|
@@ -92,9 +86,7 @@ const NavigationListItem = React.forwardRef<
|
|
|
92
86
|
layout: "item",
|
|
93
87
|
state: selected ? "selected" : isPressed ? "active" : "unselected",
|
|
94
88
|
})}
|
|
95
|
-
onMouseEnter={() => setIsHovered(true)}
|
|
96
89
|
onMouseLeave={() => {
|
|
97
|
-
setIsHovered(false);
|
|
98
90
|
setIsPressed(false);
|
|
99
91
|
}}
|
|
100
92
|
onMouseDown={handleMouseDown}
|
|
@@ -106,16 +98,9 @@ const NavigationListItem = React.forwardRef<
|
|
|
106
98
|
{label}
|
|
107
99
|
</span>
|
|
108
100
|
)}
|
|
109
|
-
{
|
|
101
|
+
{selected && moreMenu && (
|
|
110
102
|
<div className="-s-mr-2 s-flex s-h-4 s-items-center">
|
|
111
|
-
|
|
112
|
-
variant="ghost"
|
|
113
|
-
icon={MoreIcon}
|
|
114
|
-
size="xs"
|
|
115
|
-
onClick={(e) => e.stopPropagation()}
|
|
116
|
-
onMouseDown={(e) => e.stopPropagation()}
|
|
117
|
-
onMouseUp={(e) => e.stopPropagation()}
|
|
118
|
-
/>
|
|
103
|
+
{moreMenu}
|
|
119
104
|
</div>
|
|
120
105
|
)}
|
|
121
106
|
</div>
|
|
@@ -2,11 +2,19 @@ import type { Meta } from "@storybook/react";
|
|
|
2
2
|
import React, { useEffect, useState } from "react";
|
|
3
3
|
|
|
4
4
|
import {
|
|
5
|
+
Button,
|
|
6
|
+
MoreIcon,
|
|
5
7
|
NavigationList,
|
|
6
8
|
NavigationListItem,
|
|
7
9
|
NavigationListLabel,
|
|
10
|
+
NewDropdownMenu,
|
|
11
|
+
NewDropdownMenuContent,
|
|
12
|
+
NewDropdownMenuItem,
|
|
13
|
+
NewDropdownMenuTrigger,
|
|
14
|
+
PencilSquareIcon,
|
|
8
15
|
ScrollArea,
|
|
9
16
|
ScrollBar,
|
|
17
|
+
TrashIcon,
|
|
10
18
|
} from "../index_with_tw_base";
|
|
11
19
|
|
|
12
20
|
const meta = {
|
|
@@ -27,17 +35,35 @@ export const NewNavigationListDemo = () => {
|
|
|
27
35
|
>([]);
|
|
28
36
|
|
|
29
37
|
useEffect(() => {
|
|
30
|
-
// Generate random titles for each date section only once
|
|
31
38
|
setConversationTitles([
|
|
32
39
|
{ label: "Today", items: getRandomTitles(5) },
|
|
33
40
|
{ label: "Yesterday", items: getRandomTitles(10) },
|
|
34
41
|
]);
|
|
35
|
-
console.log(conversationTitles); // Add this line
|
|
36
42
|
}, []);
|
|
37
43
|
|
|
38
|
-
// Flatten the items array to easily manage indices
|
|
39
44
|
const allItems = conversationTitles.flatMap((section) => section.items);
|
|
40
45
|
|
|
46
|
+
const getMoreMenu = (title: string) => (
|
|
47
|
+
<NewDropdownMenu>
|
|
48
|
+
<NewDropdownMenuTrigger asChild>
|
|
49
|
+
<Button variant="ghost" icon={MoreIcon} size="xs" />
|
|
50
|
+
</NewDropdownMenuTrigger>
|
|
51
|
+
<NewDropdownMenuContent>
|
|
52
|
+
<NewDropdownMenuItem
|
|
53
|
+
label={`Rename ${title}`}
|
|
54
|
+
icon={PencilSquareIcon}
|
|
55
|
+
onClick={(e) => e.stopPropagation()}
|
|
56
|
+
/>
|
|
57
|
+
<NewDropdownMenuItem
|
|
58
|
+
label="Delete"
|
|
59
|
+
icon={TrashIcon}
|
|
60
|
+
variant="warning"
|
|
61
|
+
onClick={(e) => e.stopPropagation()}
|
|
62
|
+
/>
|
|
63
|
+
</NewDropdownMenuContent>
|
|
64
|
+
</NewDropdownMenu>
|
|
65
|
+
);
|
|
66
|
+
|
|
41
67
|
return (
|
|
42
68
|
<div className="s-h-[400px] s-w-[200px] s-py-12">
|
|
43
69
|
<ScrollArea>
|
|
@@ -46,7 +72,7 @@ export const NewNavigationListDemo = () => {
|
|
|
46
72
|
<React.Fragment key={sectionIndex}>
|
|
47
73
|
<NavigationListLabel label={section.label} />
|
|
48
74
|
{section.items.map((title, index) => {
|
|
49
|
-
const itemIndex = allItems.indexOf(title);
|
|
75
|
+
const itemIndex = allItems.indexOf(title);
|
|
50
76
|
return (
|
|
51
77
|
<NavigationListItem
|
|
52
78
|
key={index}
|
|
@@ -54,6 +80,7 @@ export const NewNavigationListDemo = () => {
|
|
|
54
80
|
onClick={() => setSelectedIndex(itemIndex)}
|
|
55
81
|
label={title}
|
|
56
82
|
className="s-w-full"
|
|
83
|
+
moreMenu={getMoreMenu(title)}
|
|
57
84
|
/>
|
|
58
85
|
);
|
|
59
86
|
})}
|